feat(demo): Demo App Improvements (#252)

* Improved navigation
* `Drawer` using an experimental `fixed` property
* Corrected a few misspelled properties and examples
* Add `mdc-surface` documentation
* Add `mdc-ripple` documentation
* Add documentation for `mdc-fab` absolute positioning
* Update getting started guides to show required `MdcCoreModule` import
* Update `mdc-list` examples to use `mdc-icon`
* Add `mdc-list-group` code example
* Add `border` list property documentation and examples
* Added `getting-started` guide to documentation site

Closes #254

README.md

@@ -33,7 +33,7 @@ Check out our [Getting Started guide](https://github.com/trimox/angular-mdc-web/
 Using Angular CLI? Try our [Angular CLI - step by step guide](https://github.com/trimox/angular-mdc-web/blob/master/docs/guide-angular-cli.md).
 
 ## Material Design Components
-Adapters for `material-components-web` v0.21.1
+Using `material-components-web v0.21.1`
 
 | Component  | Status  | Demo |
 | ---------- | ------- | :------: |

docs/getting-started.md

@@ -5,7 +5,6 @@
  - [Step 3 - Import Theme](#step3)
  - [Step 4 - Include Material Design Icons](#step4)
  - [Step 5 - Include Roboto Font](#step5)
- - [Appendix - Configuring SystemJS](#config-systemjs)
 
 ## Using Angular CLI?
 If you intend to use Angular CLI, please reference [Angular CLI - Getting Started guide](https://github.com/trimox/angular-mdc-web/blob/master/docs/guide-angular-cli.md).
@@ -31,17 +30,15 @@ export class ExampleModule { }
 ### Or individual components
 ```ts
 import {
-  MdcTypographyModule,
-  MdcMaterialIconModule,
+  MdcCoreModule, // required
   MdcFabModule,
   MdcMenuModule
 } from '@angular-mdc/web';
 
 @NgModule({
   ...
   imports: [
-   MdcTypographyModule, // required
-   MdcMaterialIconModule, // required for material icons
+   MdcCoreModule, // required
    MdcFabModule,
    MdcMenuModule,
    ...
@@ -74,18 +71,4 @@ Add the Roboto font with 300, 400 and 500 weights to your `index.html`.
 <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
 ```
 
-## <a name="config-systemjs"></a> Appendix: Configuring SystemJS
-
-If your project is using SystemJS for module loading, you will need to add `@angular-mdc/web`
-to the SystemJS configuration:
-
-```js
-System.config({
-  // existing configuration options
-  map: {
-    // ...
-    '@angular-mdc/web': 'npm:@angular-mdc/web/bundles/material.umd.js',
-    // ...
-  }
-});
-```
+### All done!

src/demo-app/app.component.ts

@@ -3,16 +3,11 @@ import { Router, NavigationEnd } from '@angular/router';
 
 @Component({
   selector: 'app-root',
-  template:
-  `
-  <div mdc-typography>
-    <navbar></navbar>
-    <router-outlet></router-outlet>
-  </div>
-  `
+  template: '<app-toolbar></app-toolbar>'
 })
 export class AppComponent implements OnInit {
   constructor(private _router: Router) { }
+
   ngOnInit() {
     this._router.events.subscribe(event => {
       if (this._router.url !== '/' && !this._router.url.includes('/tab-demo')) {

src/demo-app/app.module.ts

@@ -9,31 +9,35 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { DemoMaterialModule } from './demo-material.module';
 
 import { AppComponent } from './app.component';
-import { ButtonDemo } from './components/button-demo/button-demo';
+import { ButtonDemo } from './components/buttons/button-demo/button-demo';
 import { CardDemo } from './components/card-demo/card-demo';
-import { CheckboxDemo } from './components/checkbox-demo/checkbox-demo';
+import { CheckboxDemo } from './components/inputs-controls/checkbox-demo/checkbox-demo';
 import { DialogDemo } from './components/dialog-demo/dialog-demo';
 import { DrawerDemo } from './components/drawer-demo/drawer-demo';
-import { FabDemo } from './components/fab-demo/fab-demo';
+import { FabDemo } from './components/buttons/fab-demo/fab-demo';
 import { ElevationDemo } from './components/core/elevation-demo/elevation-demo';
-import { IconToggleDemo } from './components/icon-toggle-demo/icon-toggle-demo';
+import { IconToggleDemo } from './components/buttons/icon-toggle-demo/icon-toggle-demo';
 import { LinearProgressDemo } from './components/linear-progress-demo/linear-progress-demo';
 import { ListDemo } from './components/list-demo/list-demo';
 import { MenuDemo } from './components/menu-demo/menu-demo';
-import { RadioDemo } from './components/radio-demo/radio-demo';
-import { SliderDemo } from './components/slider-demo/slider-demo';
+import { RadioDemo } from './components/inputs-controls/radio-demo/radio-demo';
+import { SliderDemo } from './components/inputs-controls/slider-demo/slider-demo';
 import { IconDemo } from './components/icon-demo/icon-demo';
 import { SnackbarDemo } from './components/snackbar-demo/snackbar-demo';
-import { SwitchDemo } from './components/switch-demo/switch-demo';
-import { TextfieldDemo } from './components/textfield-demo/textfield-demo';
+import { SwitchDemo } from './components/inputs-controls/switch-demo/switch-demo';
+import { TextfieldDemo } from './components/inputs-controls/textfield-demo/textfield-demo';
 import { ToolbarDemo } from './components/toolbar-demo/toolbar-demo';
 import { TypographyDemo } from './components/core/typography-demo/typography-demo';
 import { TabDemo, ItemOneContent, ItemTwoContent, ItemThreeContent } from './components/tab-demo/tab-demo';
-import { Navbar } from './components/navigation/navbar';
 import { RippleDemo } from './components/core/ripple-demo/ripple-demo';
 import { SurfaceDemo } from './components/core/surface-demo/surface-demo';
 
-import { Home } from './components/home/home';
+import { Home } from './home/home';
+import { AppToolbar } from './navigation/app-toolbar';
+import { Buttons } from './components/buttons/buttons';
+import { Core } from './components/core/core';
+import { InputsControls } from './components/inputs-controls/inputs-controls';
+import { GettingStarted } from './docs/getting-started';
 
 import { demoAppRoutes } from './routes';
 
@@ -45,11 +49,16 @@ import { demoAppRoutes } from './routes';
     ReactiveFormsModule,
     FlexLayoutModule,
     DemoMaterialModule,
-    RouterModule.forRoot(demoAppRoutes, { useHash: true })
+    RouterModule.forRoot(demoAppRoutes, { useHash: true, enableTracing: false })
   ],
   declarations: [
     Home,
     AppComponent,
+    AppToolbar,
+    Buttons,
+    Core,
+    InputsControls,
+    GettingStarted,
     ButtonDemo,
     CardDemo,
     CheckboxDemo,
@@ -62,7 +71,6 @@ import { demoAppRoutes } from './routes';
     LinearProgressDemo,
     ListDemo,
     MenuDemo,
-    Navbar,
     RadioDemo,
     SliderDemo,
     SnackbarDemo,

src/demo-app/components/buttons/buttons.html

@@ -0,0 +1,10 @@
+<div fxLayout="column" fxFlex.gt-xs="50" fxLayoutGap="15px" class="mdc-padding">
+  <mdc-card *ngFor="let item of items" mdc-surface [routerLink]="[item.route]">
+    <mdc-card-primary>
+      <h1 mdc-card-title>{{item.name}}</h1>
+    </mdc-card-primary>
+    <mdc-card-supporting-text>
+      {{item.desc}}
+    </mdc-card-supporting-text>
+  </mdc-card>
+</div>

src/demo-app/components/buttons/buttons.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+import { buttons } from '../../navigation';
+
+@Component({
+  selector: 'buttons',
+  templateUrl: './buttons.html'
+})
+export class Buttons {
+  items = buttons.filter(_ => _.desc.length > 0);
+}

src/demo-app/components/fab-demo/fab-demo.html → src/demo-app/components/buttons/fab-demo/fab-demo.html

@@ -38,6 +38,10 @@ <h1 mdc-typography-display1>Floating Action Button</h1>
           <td>tabIndex: number</td>
           <td>Set the tabindex of the button. (Default: 0).</td>
         </tr>
+        <tr>
+          <td>position: string</td>
+          <td>Set absolute position. Valid values: 'bottom-left' | 'bottom-right' | null</td>
+        </tr>
       </tbody>
       <thead>
         <tr>
@@ -97,5 +101,16 @@ <h1 mdc-typography-display1>Floating Action Button</h1>
     <span style="color:#89bdff">fontIcon</span>=<span style="color:#65b042">"fa-keyboard-o"</span>></span><span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-icon</span>></span>
 <span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
 </pre>
+
+<span mdc-typography-headline>Absolute Positioning (bottom-right)</span>
+<button mdc-fab
+ [position]="'bottom-right'">
+  <mdc-icon>add</mdc-icon>
+</button>
+<pre style="background:#000;color:#f8f8f8"><span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-fab</span>
+ [<span style="color:#e0c589">position</span>]=<span style="color:#65b042">"'bottom-right'"</span>></span>
+  <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-icon</span>></span>add<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-icon</span>></span>
+<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
+</pre>
 </div>
 </div>

src/demo-app/components/fab-demo/fab-demo.ts → src/demo-app/components/buttons/fab-demo/fab-demo.ts

@@ -1,6 +1,6 @@
 import { Component, ViewChild } from '@angular/core';
 
-import { MdcFabComponent } from '../../../lib/public_api';
+import { MdcFabComponent } from '../../../../lib/public_api';
 
 @Component({
   selector: 'fab-demo',

src/demo-app/components/core/core.html

@@ -0,0 +1,10 @@
+<div fxLayout="column" fxFlex.gt-xs="50" fxLayoutGap="15px" class="mdc-padding">
+  <mdc-card *ngFor="let item of items" mdc-surface [routerLink]="[item.route]">
+    <mdc-card-primary>
+      <h1 mdc-card-title>{{item.name}}</h1>
+    </mdc-card-primary>
+    <mdc-card-supporting-text>
+      {{item.desc}}
+    </mdc-card-supporting-text>
+  </mdc-card>
+</div>

src/demo-app/components/core/core.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+import { coreLinks } from '../../navigation';
+
+@Component({
+  selector: 'core',
+  templateUrl: './core.html'
+})
+export class Core {
+  items = coreLinks.filter(_ => _.desc.length > 0);
+}

src/demo-app/components/core/ripple-demo/ripple-demo.html

@@ -2,7 +2,7 @@
   <h1 mdc-typography-display1>Ripple</h1>
   <div mdc-typography-subheading2>MDC Ripple provides components (or any element) with a material "ink ripple" interaction effect.</div>
   <div class="info-banner" mdc-typography-subheading1>
-    <![CDATA[import { MdcCoreModule } from '@angular-mdc/web';]]>
+    <![CDATA[import { MdcRippleModule } from '@angular-mdc/web';]]>
   </div>
   <div class="docs-api">
     <table>
@@ -30,7 +30,6 @@ <h1 mdc-typography-display1>Ripple</h1>
       </tbody>
     </table>
   </div>
-  <span mdc-typography-headline>Using Ripple</span>
   <div fxLayout="column" fxLayoutAlign="start start" class="mdc-padding">
   <mdc-card class="demo-card mdc-padding" [mdc-ripple]="isRippleActive">
     <mdc-card-primary>

src/demo-app/components/core/surface-demo/surface-demo.html

@@ -2,7 +2,7 @@
   <h1 mdc-typography-display1>Surface</h1>
   <div mdc-typography-subheading2>Provides components (or any element) with a material mouseover effect.</div>
   <div class="info-banner" mdc-typography-subheading1>
-    <![CDATA[import { MdcCoreModule } from '@angular-mdc/web';]]>
+    <![CDATA[import { MdcRippleModule } from '@angular-mdc/web';]]>
   </div>
   <div class="docs-api">
     <table>
@@ -32,7 +32,6 @@ <h1 mdc-typography-display1>Surface</h1>
   </div>
 </div>
 <div fxLayout="column" fxLayoutAlign="start start" class="mdc-padding">
-  <span mdc-typography-headline>Using Surface</span>
 <mdc-card class="demo-card mdc-padding" [mdc-surface]="isSurfaceActive">
   <mdc-card-primary>
     <mdc-card-title>Card - Touch or Mouse over</mdc-card-title>

src/demo-app/components/core/typography-demo/typography-demo.ts

@@ -3,7 +3,7 @@ import {
 } from '@angular/core';
 
 @Component({
-  selector: 'typography-progress-demo',
+  selector: 'typography-demo',
   templateUrl: './typography-demo.html'
 })
 export class TypographyDemo { }

src/demo-app/components/dialog-demo/dialog-demo.html

@@ -1,4 +1,4 @@
-<div fxLayout="column" class="mdc-padding">
+<div fxLayout="column" fxLayoutAlign="start start" class="mdc-padding">
   <h1 mdc-typography-display1>Dialog</h1>
   <div mdc-typography-subheading2>Dialogs inform users about a specific task, require decisions, or involve multiple tasks.</div>
   <div class="info-banner" mdc-typography-subheading1>
@@ -24,7 +24,7 @@ <h1 mdc-typography-display1>Dialog</h1>
       </thead>
       <tbody>
         <tr>
-          <td>clickOutsideCloses: boolean</td>
+          <td>clickOutsideToClose: boolean</td>
           <td>Close the dialog if user clicks on the backdrop. (Default: true)</td>
         </tr>
         <tr>
@@ -182,7 +182,7 @@ <h1 mdc-typography-display1>Dialog</h1>
   <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-body</span>></span>
   <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-footer</span>></span>
     <span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-dialog-button</span> [<span style="color:#e0c589">cancel</span>]=<span style="color:#65b042">"true"</span>></span>Decline<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
-    <span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-dialog-button</span> [<span style="color:#e0c589">action</span>]=<span style="color:#65b042">"true"</span> [<span style="color:#e0c589">accept</span>]=<span style="color:#65b042">"true"</span>></span>Accept<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
+    <span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-dialog-button</span> [<span style="color:#e0c589">accept</span>]=<span style="color:#65b042">"true"</span>></span>Accept<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
   <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-footer</span>></span>
 <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog</span>></span>
 </pre>
@@ -281,7 +281,7 @@ <h1 mdc-typography-display1>Dialog</h1>
   </mdc-dialog-body>
   <mdc-dialog-footer>
     <button mdc-dialog-button [cancel]="true">Decline</button>
-    <button mdc-dialog-button [action]="true" [accept]="true">Accept</button>
+    <button mdc-dialog-button [accept]="true">Accept</button>
   </mdc-dialog-footer>
 </mdc-dialog>
 
@@ -303,14 +303,14 @@ <h1 mdc-typography-display1>Dialog</h1>
   </mdc-dialog-header>
   <mdc-dialog-body>
     <mdc-list [avatar]="true">
-      <mdc-list-item (click)="closeDialogGmail();">
-        <i mdc-list-item-start material-icon class="grey-avatar">person</i>[email protected]
+      <mdc-list-item (click)="closeDialogGmail();" mdc-surface>
+        <mdc-icon mdc-list-item-start class="grey-avatar">person</mdc-icon>[email protected]
       </mdc-list-item>
-      <mdc-list-item (click)="closeDialogGmail();">
-        <i mdc-list-item-start material-icon class="grey-avatar">person</i>[email protected]
+      <mdc-list-item (click)="closeDialogGmail();" mdc-surface>
+        <mdc-icon mdc-list-item-start class="grey-avatar">person</mdc-icon>[email protected]
       </mdc-list-item>
-      <mdc-list-item (click)="closeDialogGmail();">
-        <i mdc-list-item-start material-icon class="grey-avatar">add</i>add account
+      <mdc-list-item (click)="closeDialogGmail();" mdc-surface>
+        <mdc-icon mdc-list-item-start class="grey-avatar">add</mdc-icon>add account
       </mdc-list-item>
     </mdc-list>
   </mdc-dialog-body>

src/demo-app/components/drawer-demo/drawer-demo.html

@@ -16,6 +16,18 @@ <h1 mdc-typography-display1>Drawers</h1>
           <td>mdc-permanent-drawer</td>
         </tr>
       </tbody>
+      <thead>
+        <tr>
+          <th>Properties</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>fixed: boolean</td>
+          <td>Makes permanent drawer fixed on top and have persistent elevation.</td>
+        </tr>
+      </tbody>
       <thead>
         <tr>
           <th>Child Directives</th>