feat(aio): display API icons in search results

Add API symbols for `let` and `var` so don’t have to translate those types into `const`
Also replace <hr> in search results HTML with ellipses icon.

aio/src/app/search/search-results/search-results.component.html

@@ -2,13 +2,19 @@
   <h2 class="visually-hidden">Search Results</h2>
   <div class="search-area" *ngFor="let area of searchAreas | async">
     <h3>{{area.name}} ({{area.pages.length}})</h3>
-    <ul>
+    <ul class="priority-pages" >
       <li class="search-page" *ngFor="let page of area.priorityPages">
-        <a class="search-result-item" href="{{ page.path }}" (click)="onResultSelected(page)">{{ page.title }}</a>
+        <a class="search-result-item" href="{{ page.path }}" (click)="onResultSelected(page)">
+          <span class="symbol {{page.type}}" *ngIf="area.name === 'api'"></span>{{ page.title }}
+        </a>
       </li>
-      <li *ngIf="area.priorityPages.length"><hr></li>
+    </ul>
+    <div class="more-items material-icons" *ngIf="area.priorityPages.length > 0">more_horiz</div>
+    <ul>
       <li class="search-page" *ngFor="let page of area.pages">
-        <a class="search-result-item" href="{{ page.path }}" (click)="onResultSelected(page)">{{ page.title }}</a>
+        <a class="search-result-item" href="{{ page.path }}" (click)="onResultSelected(page)">
+          <span class="symbol {{page.type}}" *ngIf="area.name === 'api'"></span>{{ page.title }}
+        </a>
       </li>
     </ul>
   </div>

aio/src/app/search/search-results/search-results.component.spec.ts

@@ -30,7 +30,7 @@ describe('SearchResultsComponent', () => {
       return { path: 'guide/' + l, title: 'Guide ' + l};
     }))
     // add these empty fields to satisfy interface
-    .map(r => ({...r, ...{ keywords: '', titleWords: '', type: '' }}));
+    .map(r => ({...{ keywords: '', titleWords: '', type: '' }, ...r }));
 
     return take === undefined ? results : results.slice(0, take);
   }

aio/src/styles/1-layouts/_layouts-dir.scss

@@ -4,7 +4,6 @@
 
 @import 'sidenav';
 @import 'content-layout';
-@import 'search-results';
 @import 'top-menu';
 @import 'marketing-layout';
 @import 'footer';

aio/src/styles/2-modules/_modules-dir.scss

@@ -17,6 +17,7 @@
    @import 'hero';
    @import 'announcement-bar';
    @import 'banner';
+   @import 'search-results';
    @import 'api-list';
    @import 'hr';
    @import 'live-example';

aio/src/styles/2-modules/_search-results.scss

@@ -63,6 +63,17 @@ aio-search-results {
         &:visited {
           text-decoration: none;
         }
+
+        span.symbol {
+          margin-right: 8px;
+        }
+    }
+
+    .more-items {
+      content: 'more_horiz';
+      font-size: 20px;
+      color: $mediumgray;
+      padding: 0;
     }
 
     @include bp(tiny) {

aio/src/styles/_constants.scss

@@ -95,6 +95,14 @@ $api-symbols: (
     content: 'K',
     background: $purple-600
   ),
+  let: (
+    content: 'K',
+    background: $purple-600
+  ),
+  var: (
+    content: 'K',
+    background: $purple-600
+  ),
   type-alias: (
     content: 'T',
     background: $light-green-600