Expand component view with example viewer

src/app/app-module.ts

@@ -6,12 +6,11 @@ import {HttpModule} from '@angular/http';
 import {MaterialModule} from '@angular/material';
 import {MaterialDocsApp} from './material-docs-app';
 import {Homepage} from './pages/homepage/homepage';
-import {NavBar} from './shared/navbar/navbar';
 import {routing} from './routes';
 import {ComponentList} from './pages/component-list/component-list';
-import {DocViewerModule} from './shared/doc-viewer/index';
-import {ExampleViewerModule} from './shared/example-viewer/index';
 import {ComponentViewer} from './pages/component-viewer/component-viewer';
+import {ExampleModule} from './examples/example-module';
+import {SharedModule} from './shared/shared-module';
 
 
 @NgModule({
@@ -20,12 +19,11 @@ import {ComponentViewer} from './pages/component-viewer/component-viewer';
     ComponentList,
     ComponentViewer,
     Homepage,
-    NavBar,
   ],
   imports: [
     BrowserModule,
-    DocViewerModule,
-    ExampleViewerModule,
+    ExampleModule,
+    SharedModule,
     FormsModule,
     HttpModule,
     MaterialModule.forRoot(),

src/app/examples/button-overview/button-overview-example.html

@@ -0,0 +1 @@
+<button md-button>Click me!</button>

src/app/examples/button-overview/button-overview-example.ts

@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  selector: 'button-overview-example',
+  templateUrl: './button-overview-example.html',
+})
+export class ButtonOverviewExample {}

src/app/examples/button-types/button-types-example.html

@@ -0,0 +1,17 @@
+<div class="example">
+  <h3>Normal Buttons</h3>
+  <div class="button-row">
+    <button md-button>Flat button</button>
+    <button md-raised-button>Raised button</button>
+    <button md-fab><md-icon>check</md-icon></button>
+    <button md-mini-fab><md-icon>check</md-icon></button>
+  </div>
+
+  <h3>Link Buttons</h3>
+  <div class="button-row">
+    <a md-button routerLink=".">Flat button</a>
+    <a md-raised-button routerLink=".">Raised button</a>
+    <a md-fab routerLink="."><md-icon>check</md-icon></a>
+    <a md-mini-fab routerLink="."><md-icon>check</md-icon></a>
+  </div>
+</div>

src/app/examples/button-types/button-types-example.scss

@@ -0,0 +1,9 @@
+.example {
+  width: 500px;
+}
+
+.button-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}

src/app/examples/button-types/button-types-example.ts

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  selector: 'button-types-example',
+  templateUrl: './button-types-example.html',
+  styleUrls: ['./button-types-example.scss'],
+})
+export class ButtonTypesExample {}

src/app/examples/example-module.ts

@@ -0,0 +1,34 @@
+import {NgModule} from '@angular/core';
+import {MaterialModule} from '@angular/material';
+import {ButtonOverviewExample} from './button-overview/button-overview-example';
+import {ButtonTypesExample} from './button-types/button-types-example';
+
+
+/**
+ * The list of example components.
+ * Key is the example name which will be used in `material-docs-example="key"`.
+ * Value is the component.
+ */
+
+export const EXAMPLE_COMPONENTS = {
+  'button-overview': ButtonOverviewExample,
+  'button-types': ButtonTypesExample
+};
+
+/**
+ * The list of all example components.
+ * We need to put them in both `declarations` and `entryComponents` to make them work.
+ */
+export const EXAMPLE_LIST = [
+  ButtonOverviewExample,
+  ButtonTypesExample,
+];
+
+@NgModule({
+  declarations: EXAMPLE_LIST,
+  entryComponents: EXAMPLE_LIST,
+  imports: [
+    MaterialModule.forRoot(),
+  ]
+})
+export class ExampleModule { }

src/app/pages/component-list/component-list.html

@@ -1,8 +1,11 @@
-<a *ngFor="let component of componentItems"
-    class="docs-component-list-item"
-    [routerLink]="['/component/', component.id]">
-  <img src="../../../assets/img/components/{{component.src}}.svg"
-      class="docs-component-list-item-icon"
-      [alt]="component.name">
-  {{component.name}}
-</a>
+<div *ngFor="let category of docItems.getItemsInCategories()" class="docs-component-list-category">
+  <h2>{{category.name}}</h2>
+  <a *ngFor="let component of category.items"
+      class="docs-component-list-item"
+      [routerLink]="['/component/', component.id]">
+    <img src="../../../assets/img/components/{{component.id}}.svg"
+        class="docs-component-list-item-icon"
+        [alt]="component.name">
+    {{component.name}}
+  </a>
+</div>

src/app/pages/component-list/component-list.scss

@@ -1,3 +1,10 @@
+@import '~@angular/material/button/button-base';
+
+
+.docs-component-list-category {
+  margin: 50px;
+}
+
 .docs-component-list-item {
   display: inline-flex;
   flex-direction: column;

src/app/pages/component-list/component-list.ts

@@ -1,36 +1,11 @@
 import {Component} from '@angular/core';
+import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
 
 @Component({
   selector: 'app-components',
   templateUrl: './component-list.html',
   styleUrls: ['./component-list.scss']
 })
 export class ComponentList {
-  componentItems = [
-    {id: 'button', name: 'Button', src: 'button'},
-    {id: 'checkbox', name: 'Checkbox', src: 'checkbox'},
-    {id: 'radio-button', name: 'Radio button', src: 'radio'},
-    {id: 'button-toggle', name: 'Button toggle', src: 'button-toggle'},
-    {id: 'input', name: 'Input', src: 'input'},
-    {id: 'textarea', name: 'Textarea', src: 'textarea'},
-    {id: 'select', name: 'Select', src: 'select'},
-    {id: 'slide-toggle', name: 'Slide toggle', src: 'slide-toggle'},
-    {id: 'slider', name: 'Slider', src: 'slider'},
-
-    {id: 'card', name: 'Card', src: 'card'},
-    {id: 'list', name: 'List', src: 'list'},
-    {id: 'grid-list', name: 'Grid list', src: 'grid-list'},
-    {id: 'sidenav', name: 'Sidenav', src: 'sidenav'},
-    {id: 'toolbar', name: 'Toolbar', src: 'toolbar'},
-
-    {id: 'menu', name: 'Menu', src: 'menu'},
-    {id: 'dialog', name: 'Dialog', src: 'dialog'},
-    {id: 'snackbar', name: 'Snackbar', src: 'snackbar'},
-    {id: 'tooltip', name: 'Tooltip', src: 'tooltip'},
-
-    {id: 'progress-spinner', name: 'Progress spinner', src: 'progress-spinner'},
-    {id: 'progress-bar', name: 'Progress bar', src: 'progress-bar'},
-
-    {id: 'icon', name: 'Icon', src: 'icon'},
-  ];
+  constructor(public docItems: DocumentationItems) { }
 }

src/app/pages/component-viewer/component-viewer.html

@@ -1,23 +1,35 @@
 <md-sidenav-layout>
   <md-sidenav opened mode="side" class="docs-component-viewer-sidenav">
-    component list
+    <div *ngFor="let category of docItems.getItemsInCategories()">
+      <div>{{category.name}}</div>
+      <ul>
+        <li *ngFor="let component of category.items">
+          <a [routerLink]="['/component/', component.id]">
+            {{component.name}}
+          </a>
+        </li>
+      </ul>
+    </div>
   </md-sidenav>
 
-  <h1 class="docs-component-viewer-header">
-    {{componentId.toUpperCase()}}
-  </h1>
+  <h1 class="docs-component-viewer-header"> {{componentDocItem.name}} </h1>
 
+  <!-- TODO(jelbourn): turn this into nav tabs -->
   <md-tab-group class="docs-component-viewer-tabbed-content">
     <md-tab label="OVERVIEW">
-      <doc-viewer documentUrl="/assets/documents/overview/{{componentId}}.html"></doc-viewer>
+      <doc-viewer documentUrl="/assets/documents/overview/{{componentDocItem.id}}.html">
+      </doc-viewer>
     </md-tab>
 
     <md-tab label="API">
-      <doc-viewer documentUrl="/assets/documents/api/{{componentId}}.html"></doc-viewer>
+      <doc-viewer documentUrl="/assets/documents/api/{{componentDocItem.id}}.html"></doc-viewer>
     </md-tab>
 
     <md-tab label="EXAMPLES">
-      examples
+
+      <example-viewer *ngFor="let example of componentDocItem.examples" [example]="example">
+      </example-viewer>
+
     </md-tab>
   </md-tab-group>
 </md-sidenav-layout>

src/app/pages/component-viewer/component-viewer.scss

@@ -5,6 +5,7 @@
 
   border-right: 1px solid black;
   width: 300px;
+  margin: 20px;
 }
 
 .docs-component-viewer-header {

src/app/pages/component-viewer/component-viewer.ts

@@ -1,5 +1,6 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
+import {DocumentationItems, DocItem} from '../../shared/documentation-items/documentation-items';
 
 
 @Component({
@@ -9,11 +10,11 @@ import {ActivatedRoute} from '@angular/router';
   encapsulation: ViewEncapsulation.None,
 })
 export class ComponentViewer {
-  componentId: string;
+  componentDocItem: DocItem;
 
-  constructor(private _route: ActivatedRoute) {
+  constructor(private _route: ActivatedRoute, public docItems: DocumentationItems) {
     _route.params.first().subscribe(p => {
-      this.componentId = p['id'];
+      this.componentDocItem = docItems.getItemById(p['id']);
     });
   }
 }

src/app/shared/doc-viewer/doc-viewer.spec.ts

@@ -2,15 +2,15 @@ import {Component} from '@angular/core';
 import {TestBed, inject, async} from '@angular/core/testing';
 import {MockBackend} from '@angular/http/testing';
 import {Response, ResponseOptions, XHRBackend} from '@angular/http';
-import {DocViewerModule} from './index';
 import {By} from '@angular/platform-browser';
 import {DocViewer} from './doc-viewer';
+import {SharedModule} from '../shared-module';
 
 
 describe('DocViewer', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [DocViewerModule],
+      imports: [SharedModule],
       declarations: [
         DocViewerTestComponent,
       ],

src/app/shared/doc-viewer/index.ts

@@ -1,20 +1 @@
-import {NgModule} from '@angular/core';
-import {HttpModule} from '@angular/http';
-import {DocViewer} from './doc-viewer';
-import {ExampleViewer} from '../example-viewer/example-viewer';
-import {ExampleViewerModule} from '../example-viewer/index';
-
 export * from './doc-viewer';
-
-@NgModule({
-  imports: [
-    ExampleViewerModule,
-    HttpModule,
-  ],
-  declarations: [DocViewer],
-  exports: [DocViewer],
-  entryComponents: [
-    ExampleViewer,
-  ],
-})
-export class DocViewerModule {}

src/app/shared/documentation-items/documentation-items.spec.ts

@@ -0,0 +1,45 @@
+import {TestBed, inject, async} from '@angular/core/testing';
+import {DocumentationItems} from './documentation-items';
+
+
+describe('DocViewer', () => {
+  let docsItems: DocumentationItems;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [],
+      declarations: [],
+      providers: [DocumentationItems]
+    });
+
+    TestBed.compileComponents();
+  }));
+
+  beforeEach(inject([DocumentationItems], (di: DocumentationItems) => {
+    docsItems = di;
+  }));
+
+  it('get a list of categories', () => {
+    expect(docsItems.getItemsInCategories()).toBeDefined();
+    expect(docsItems.getItemsInCategories().length).toBeGreaterThan(0);
+    for (const category of docsItems.getItemsInCategories()) {
+      expect(category.id).toBeDefined();
+      expect(category.name).toBeDefined();
+      expect(category.items).toBeDefined();
+      expect(category.items.length).toBeGreaterThan(0);
+    }
+  });
+
+  it('should get a list of all doc items', () => {
+    expect(docsItems.getAllItems()).toBeDefined();
+    expect(docsItems.getAllItems().length).toBeGreaterThan(0);
+    for (const item of docsItems.getAllItems()) {
+      expect(item.id).toBeDefined();
+      expect(item.name).toBeDefined();
+    }
+  });
+
+  it('should get a doc item by id', () => {
+    expect(docsItems.getItemById('button')).toBeDefined();
+  });
+});