feat(navbar): Add basic searchbar component to site.

Author: riavalon

src/app/shared/navbar/index.ts

@@ -1 +1,2 @@
 export * from './navbar';
+export * from './searchbar';

src/app/shared/navbar/navbar.html

@@ -8,6 +8,7 @@
   </a>
   <a md-button class="docs-button" routerLink="components">Components</a>
   <a md-button class="docs-button" routerLink="guides">Guides</a>
+  <search-bar-component></search-bar-component>
   <a md-button class="docs-button" href="https://github.com/angular/material2" aria-label="GitHub Repository">
     <img class="docs-github-logo"
          src="../../../assets/img/homepage/github-circle-white-transparent.svg"

src/app/shared/navbar/navbar.scss

@@ -2,12 +2,6 @@
   display: flex;
   flex-wrap: wrap;
   padding: 8px 16px;
-
-  > .mat-button {
-    &:last-child {
-      margin-left: auto;
-    }
-  }
 }
 
 .docs-angular-logo {

src/app/shared/navbar/searchbar/index.ts

@@ -0,0 +1 @@
+export * from './searchbar';

src/app/shared/navbar/searchbar/searchbar.html

@@ -0,0 +1,17 @@
+<div class="docs-search-input-container">
+  <input
+    placeholder="Search"
+    type="text"
+    (focus)="toggleIsExpanded(true)"
+    (blur)="toggleIsExpanded(false)"
+    (keyup.enter)="handlePlainSearch($event.target.value.toLowerCase())"
+    [mdAutocomplete]="auto"
+    [formControl]="searchControl">
+  <i class="material-icons">search</i>
+</div>
+
+<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn">
+  <md-option *ngFor="let item of filteredSuggestions | async" [value]="item">
+    {{item.name}}
+  </md-option>
+</md-autocomplete>

src/app/shared/navbar/searchbar/searchbar.scss

@@ -0,0 +1,60 @@
+$input-bg: #85D9E2;
+
+@mixin color-placeholder() {
+  -webkit-font-smoothing: antialiased;
+  color: white;
+}
+
+:host {
+  position: relative;
+  flex: 2;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  &.docs-expanded .docs-search-input-container {
+    width: 100%;
+  }
+
+  .docs-search-input-container {
+    display: block;
+    position: relative;
+    margin-left: auto;
+    height: 100%;
+    width: 200px;
+    transition: width .2s ease;
+    i.material-icons {
+      position: absolute;
+      left: 15px; top: 50%;
+      transform: translateY(-50%);
+      height: 28px;
+      width: 28px;
+    }
+  }
+
+  input {
+    background: $input-bg;
+    border: none;
+    border-radius: 2px;
+    color: white;
+    font-size: 18px;
+    height: 95%;
+    line-height: 95%;
+    padding-left: 50px;
+    position: relative;
+    transition: width .2s ease;
+    width: 100%;
+
+    /* Set placeholder text to be white */
+    &::-webkit-input-placeholder { @include color-placeholder(); } /* Chrome/Opera/Safari */
+    &::-moz-placeholder { @include color-placeholder(); } /* Firefox 19+ */
+    &:-moz-placeholder { @include color-placeholder(); } /* Firefox 18- */
+    &:ms-input-placeholder { @include color-placeholder(); } /* IE 10+ */
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+}

src/app/shared/navbar/searchbar/searchbar.spec.ts

@@ -0,0 +1,99 @@
+import {Injectable} from '@angular/core';
+import {TestBed, inject, async, ComponentFixture} from '@angular/core/testing';
+import {Router, RouterModule} from '@angular/router';
+import {MaterialModule} from '@angular/material';
+import {ReactiveFormsModule, FormControl} from '@angular/forms';
+
+import {DocumentationItems, DocItem} from '../../documentation-items/documentation-items';
+import {SearchBar} './searchbar';
+
+const mockRouter = {
+  navigate: jasmine.createSpy('navigate'),
+  navigateByUrl: jasmine.createSpy('navigateByUrl');
+};
+
+const testDocItem = {
+  id: 'test-doc-item',
+  name: 'TestingExample',
+  examples: ['test-examples']
+};
+
+
+describe('SearchBar', () => {
+  let fixture: ComponentFixture<SearchBar>;
+  let component: SearchBar;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [RouterModule, ReactiveFormsModule, MaterialModule],
+      declarations: [SearchBar],
+      providers: [
+        {provide: DocumentationItems, useClass: MockDocumentationItems},
+        {provide: Router, useValue: mockRouter},
+      ],
+    });
+
+    TestBed.compileComponents();
+    fixture = TestBed.createComponent(SearchBar);
+    component = fixture.componentInstance;
+    component.searchControl = new FormControl('');
+    fixture.detectChanges();
+  }));
+
+  afterEach(() => {
+    component._router.navigateByUrl.calls.reset();
+  });
+
+  it('should toggle isExpanded', () => {
+    expect(component._isExpanded).toBe(false);
+    component.toggleIsExpanded();
+    expect(component._isExpanded).toBe(true);
+  });
+
+  describe('Filter Search Suggestions', () => {
+    it('should return all items matching search query', () => {
+      const query = 'testing';
+      const result = component.filterSearchSuggestions(query);
+      expect(result).toEqual([testDocItem]);
+    });
+
+    it('should return empty list if no items match', () => {
+      const query = 'does not exist';
+      const result = component.filterSearchSuggestions(query);
+      expect(result).toEqual([]);
+    });
+  });
+
+  describe('Navigate', () => {
+
+    it('should take an id and navigate to the given route', () => {
+      component.navigate('button-toggle');
+      expect(component._router.navigateByUrl).toHaveBeenCalled();
+    });
+
+    it('should not navigate if no id is given', () => {
+      component.navigate('');
+      expect(component._router.navigateByUrl).not.toHaveBeenCalled();
+    });
+  });
+
+  it('should show a snackbar error', () => {
+    spyOn(component._snackBar, 'open');
+    component._showError();
+    expect(component._snackBar.open).toHaveBeenCalled();
+    expect(component._snackBar.open).toHaveBeenCalledWith(
+      'No search results found.',
+      null, {duration: 3000});
+  });
+
+  it('should return the proper display value for form control', () => {
+    const result = component.displayFn(testDocItem);
+    expect(result).toEqual(testDocItem.name);
+  });
+});
+
+
+class MockDocumentationItems extends DocumentationItems {
+  getAllItems(): DocItem[] { return [testDocItem]; }
+}
+

src/app/shared/navbar/searchbar/searchbar.ts

@@ -0,0 +1,80 @@
+import {Component, ViewChild} from '@angular/core';
+import {MdAutocompleteTrigger, MdSnackBar} from '@angular/material';
+import {Router} from '@angular/router';
+import {FormControl} from '@angular/forms';
+import {Observable} from 'rxjs/Observable';
+import 'rxjs/add/operator/mergeMap';
+
+import {DocumentationItems, DocItem} from '../../documentation-items/documentation-items';
+
+
+@Component({
+  selector: 'search-bar-component',
+  templateUrl: './searchbar.html',
+  styleUrls: ['./searchbar.scss'],
+  host: {
+    '[class.docs-expanded]': '_isExpanded'
+  }
+})
+
+export class SearchBar {
+
+  @ViewChild(MdAutocompleteTrigger)
+  private _autocompleteTrigger: MdAutocompleteTrigger;
+
+  public allDocItems: DocItem[];
+  public filteredSuggestions: Observable<DocItem[]>;
+  public searchControl: FormControl = new FormControl('');
+  public sub;
+
+  private _isExpanded: boolean = false;
+
+  constructor(
+    private _docItems: DocumentationItems,
+    private _router: Router,
+    private _snackBar: MdSnackBar
+  ) {
+    this.allDocItems = _docItems.getAllItems();
+    this.filteredSuggestions = this.searchControl.valueChanges
+      .startWith(null)
+      .map(item => item ? this.filterSearchSuggestions(item) : this.allDocItems.slice());
+  }
+
+  // This handles the user interacting with the autocomplete panel clicks or keyboard.
+  public ngAfterViewInit() {
+    // We listen to the changes on `filteredSuggestions in order to
+    // listen to the latest _autocompleteTrigger.optionSelections
+    this.sub = this.filteredSuggestions
+      .flatMap(_ => Observable.merge(...this._autocompleteTrigger.optionSelections))
+      .subscribe(evt => this.navigate(evt.source.value.id));
+  }
+
+  public ngOnDestroy() {
+    if (this.sub) { this.sub.unsubscribe(); }
+  }
+
+  public toggleIsExpanded() {
+    this._isExpanded = !this._isExpanded;
+  }
+
+  public displayFn(item: DocItem) {
+    return item.name;
+  }
+
+  public filterSearchSuggestions(searchTerm): DocItem[] {
+    return this.allDocItems.filter(item => new RegExp(`^${searchTerm}`, 'gi').test(item.name));
+  }
+
+  public handlePlainSearch(searchTerm) {
+    const item = this.allDocItems.find(item => item.name.toLowerCase() === searchTerm);
+    item ? this.navigate(item.id) : this._showError();
+  }
+
+  public navigate(id) {
+    return id ? this._router.navigateByUrl(`/components/component/${id}`) : null;
+  }
+
+  private _showError() {
+    this._snackBar.open('No search results found.', null, {duration: 3000});
+  }
+}

src/app/shared/shared-module.ts

@@ -1,9 +1,11 @@
 import {NgModule} from '@angular/core';
 import {HttpModule} from '@angular/http';
+import {ReactiveFormsModule} from '@angular/forms';
 import {DocViewer} from './doc-viewer/doc-viewer';
 import {ExampleViewer} from './example-viewer/example-viewer';
 import {DocumentationItems} from './documentation-items/documentation-items';
 import {NavBar} from './navbar/navbar';
+import {SearchBar} from './navbar/searchbar/searchbar';
 import {MaterialModule} from '@angular/material';
 import {BrowserModule} from '@angular/platform-browser';
 import {RouterModule} from '@angular/router';
@@ -16,9 +18,10 @@ import {GuideItems} from './guide-items/guide-items';
     HttpModule,
     RouterModule,
     BrowserModule,
+    ReactiveFormsModule,
     MaterialModule,
   ],
-  declarations: [DocViewer, ExampleViewer, NavBar, PlunkerButton],
+  declarations: [DocViewer, ExampleViewer, NavBar, SearchBar, PlunkerButton],
   exports: [DocViewer, ExampleViewer, NavBar, PlunkerButton],
   providers: [DocumentationItems, GuideItems],
   entryComponents: [