Add component category view (#43)

Author: mmalerba

src/app/app-module.ts

@@ -11,11 +11,13 @@ import {ComponentList} from './pages/component-list/component-list';
 import {ComponentViewer} from './pages/component-viewer/component-viewer';
 import {ExampleModule} from './examples/example-module';
 import {SharedModule} from './shared/shared-module';
+import {ComponentCategoryList} from './pages/component-category-list/component-category-list';
 
 
 @NgModule({
   declarations: [
     MaterialDocsApp,
+    ComponentCategoryList,
     ComponentList,
     ComponentViewer,
     Homepage,

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

@@ -0,0 +1,8 @@
+<md-card
+    *ngFor="let category of docItems.getItemsInCategories()"
+    class="docs-component-category-list-category"
+    routerLink="/components/{{category.id}}">
+  <md-card-title>{{category.name}}</md-card-title>
+  <p>{{category.summary}}</p>
+  <img md-card-image src="../../../assets/img/component-categories/{{category.id}}.svg">
+</md-card>

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

@@ -0,0 +1,4 @@
+.docs-component-category-list-category {
+  display: inline-block;
+  width: 300px;
+}

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

@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+import {
+  DocumentationItems,
+  DocCategory
+} from '../../shared/documentation-items/documentation-items';
+
+
+@Component({
+  selector: 'app-component-category-list',
+  templateUrl: './component-category-list.html',
+  styleUrls: ['./component-category-list.scss']
+})
+export class ComponentCategoryList {
+  constructor(public docItems: DocumentationItems) {}
+}

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

@@ -1,4 +1,4 @@
-<div *ngFor="let category of docItems.getItemsInCategories()" class="docs-component-list-category">
+<div class="docs-component-list-category">
   <h2>{{category.name}}</h2>
   <a *ngFor="let component of category.items"
       class="docs-component-list-item"

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

@@ -1,11 +1,21 @@
 import {Component} from '@angular/core';
-import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
+import {
+  DocumentationItems,
+  DocCategory
+} from '../../shared/documentation-items/documentation-items';
+import {ActivatedRoute} from '@angular/router';
 
 @Component({
   selector: 'app-components',
   templateUrl: './component-list.html',
   styleUrls: ['./component-list.scss']
 })
 export class ComponentList {
-  constructor(public docItems: DocumentationItems) { }
+  category: DocCategory;
+
+  constructor(public docItems: DocumentationItems, private _route: ActivatedRoute) {
+    _route.params.subscribe(p => {
+      this.category = docItems.getCategoryById(p['id']);
+    });
+  }
 }

src/app/routes.ts

@@ -3,10 +3,12 @@ import {Homepage} from './pages/homepage';
 import {ComponentList} from './pages/component-list';
 import {Routes, RouterModule} from '@angular/router';
 import {ComponentViewer} from './pages/component-viewer/component-viewer';
+import {ComponentCategoryList} from './pages/component-category-list/component-category-list';
 
 const MATERIAL_DOCS_ROUTES: Routes = [
   {path: '', component: Homepage, pathMatch: 'full'},
-  {path: 'components', component: ComponentList},
+  {path: 'components', component: ComponentCategoryList},
+  {path: 'components/:id', component: ComponentList},
   {path: 'component/:id', component: ComponentViewer},
 ];
 

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

@@ -15,56 +15,60 @@ export interface DocCategory {
 const DOCS = [
   {
     id: 'forms',
-    name: 'Form controls',
+    name: 'Form Controls',
+    summary: 'Radio buttons, checkboxes, input fields, sliders, slide toggles, selects',
     items: [
-      {id: 'button', name: 'Button', examples: ['button-types']},
-      {id: 'checkbox', name: 'Checkbox'},
       {id: 'radio', name: 'Radio button'},
-      {id: 'button-toggle', name: 'Button toggle'},
+      {id: 'checkbox', name: 'Checkbox'},
       {id: 'input', name: 'Input'},
       {id: 'textarea', name: 'Textarea'},
-      {id: 'select', name: 'Select'},
-      {id: 'slide-toggle', name: 'Slide toggle'},
       {id: 'slider', name: 'Slider'},
+      {id: 'slide-toggle', name: 'Slide toggle'},
+      {id: 'select', name: 'Select'},
     ]
   },
   {
-    id: 'structure',
-    name: 'Application structure',
+    id: 'nav',
+    name: 'Navigation',
+    summary: 'Sidenavs, toolbars, menus, lists',
     items: [
-      {id: 'card', name: 'Card'},
-      {id: 'list', name: 'List'},
-      {id: 'grid-list', name: 'Grid list'},
       {id: 'sidenav', name: 'Sidenav'},
       {id: 'toolbar', name: 'Toolbar'},
+      {id: 'menu', name: 'Menu'},
+      {id: 'list', name: 'List'},
     ]
   },
   {
-    id: 'popups',
-    name: 'Pop-ups and notifications',
+    id: 'layout',
+    name: 'Layout',
+    summary: 'Grid lists, cards',
     items: [
-
-      {id: 'menu', name: 'Menu'},
-      {id: 'dialog', name: 'Dialog'},
-      {id: 'snackbar', name: 'Snackbar'},
-      {id: 'tooltip', name: 'Tooltip'},
+      {id: 'grid-list', name: 'Grid list'},
+      {id: 'card', name: 'Card'},
     ]
   },
   {
-    id: 'progress',
-    name: 'Progress indicators',
+    id: 'buttons',
+    name: 'Buttons, Actions & Icons',
+    summary: 'buttons, button toggles, icons, progress spinners, progress bars',
     items: [
+      {id: 'button', name: 'Button', examples: ['button-types']},
+      {id: 'button-toggle', name: 'Button toggle'},
+      {id: 'icon', name: 'Icon'},
       {id: 'progress-spinner', name: 'Progress spinner'},
       {id: 'progress-bar', name: 'Progress bar'},
     ]
   },
   {
-    id: 'icons',
-    name: 'Icons',
+    id: 'modals',
+    name: 'Popups & Modals',
+    summary: 'Dialogs, tooltips, snackbars',
     items: [
-      {id: 'icon', name: 'Icon'},
+      {id: 'dialog', name: 'Dialog'},
+      {id: 'tooltip', name: 'Tooltip'},
+      {id: 'snackbar', name: 'Snackbar'},
     ]
-  }
+  },
 ];
 
 const ALL_ITEMS = DOCS.reduce((result, category) => result.concat(category.items), []);
@@ -82,4 +86,8 @@ export class DocumentationItems {
   getItemById(id: string): DocItem {
     return ALL_ITEMS.find(i => i.id === id);
   }
+
+  getCategoryById(id: string): DocCategory {
+    return DOCS.find(c => c.id == id);
+  }
 }