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

@@ -19,10 +19,10 @@ describe('SearchResultsComponent', () => {
   /** Get a full set of test results. "Take" what you need */
   function getTestResults(take?: number) {
     const results: SearchResult[] = [
-      { path: 'guide/a', title: 'Guide A'},
+      { path: 'guide/a', title: 'Guide A' },
-      { path: 'api/d', title: 'API D'},
+      { path: 'api/d', title: 'API D' },
       { path: 'guide/b', title: 'Guide B' },
-      { path: 'guide/a/c', title: 'Guide A - C'},
+      { path: 'guide/a/c', title: 'Guide A - C' },
       { path: 'api/c', title: 'API C' }
     ]
     // fill it out to exceed 10 guide pages
@@ -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);
   }
@@ -75,13 +75,13 @@ describe('SearchResultsComponent', () => {
 
     expect(currentAreas).toEqual([
       { name: 'api', pages: [
-        {path: 'api/c', title: 'API C', type: '', keywords: '', titleWords: '' },
+        { path: 'api/c', title: 'API C', type: '', keywords: '', titleWords: '' },
-        {path: 'api/d', title: 'API D', type: '', keywords: '', titleWords: '' },
+        { path: 'api/d', title: 'API D', type: '', keywords: '', titleWords: '' },
       ], priorityPages: [] },
       { name: 'guide', pages: [
-        {path: 'guide/a', title: 'Guide A',       type: '', keywords: '', titleWords: '' },
+        { path: 'guide/a', title: 'Guide A',       type: '', keywords: '', titleWords: '' },
-        {path: 'guide/a/c', title: 'Guide A - C', type: '', keywords: '', titleWords: '' },
+        { path: 'guide/a/c', title: 'Guide A - C', type: '', keywords: '', titleWords: '' },
-        {path: 'guide/b', title: 'Guide B',       type: '', keywords: '', titleWords: '' },
+        { path: 'guide/b', title: 'Guide B',       type: '', keywords: '', titleWords: '' },
       ], priorityPages: [] }
     ]);
   });
@@ -108,7 +108,7 @@ describe('SearchResultsComponent', () => {
 
   it('should put search results with no containing folder into the default area (other)', () => {
     const results = [
-      {path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' }
+      { path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' }
     ];
 
     searchResults.next({ query: '', results: results });
@@ -121,7 +121,7 @@ describe('SearchResultsComponent', () => {
 
   it('should omit search results with no title', () => {
     const results = [
-      {path: 'news', title: undefined, type: 'marketing', keywords: '', titleWords: '' }
+      { path: 'news', title: undefined, type: 'marketing', keywords: '', titleWords: '' }
     ];
 
     searchResults.next({ query: '', results: results });
@@ -132,7 +132,7 @@ describe('SearchResultsComponent', () => {
     let selectedResult: SearchResult;
     component.resultSelected.subscribe((result: SearchResult) => selectedResult = result);
     const results = [
-      {path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' }
+      { path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' }
     ];
 
     searchResults.next({ query: '', results: results });
@@ -140,12 +140,12 @@ describe('SearchResultsComponent', () => {
     const anchor = fixture.debugElement.query(By.css('a'));
 
     anchor.triggerEventHandler('click', {});
-    expect(selectedResult).toEqual({path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' });
+    expect(selectedResult).toEqual({ path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' });
   });
 
   it('should clear the results when a search result is clicked', () => {
     const results = [
-      {path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' }
+      { path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' }
     ];
 
     searchResults.next({ query: '', results: results });
@@ -160,7 +160,7 @@ describe('SearchResultsComponent', () => {
   describe('hideResults', () => {
     it('should clear the results', () => {
       const results = [
-        {path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' }
+        { path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' }
       ];
 
       searchResults.next({ query: '', results: results });

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

@@ -4,11 +4,10 @@
 
 @import 'sidenav';
 @import 'content-layout';
-@import 'search-results';
 @import 'top-menu';
 @import 'marketing-layout';
 @import 'footer';
 @import 'layout-global';
 @import 'not-found';
 @import 'api-page';
-@import 'table-of-contents';
+@import 'table-of-contents';

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

@@ -61,8 +61,19 @@ aio-search-results {
             color: $white;
         }
         &:visited {
-        text-decoration: none;
+          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,8 +95,16 @@ $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
   )
-);
+);