feat(patterns): stepper design pattern (#1048)

* feature(): stepper pattern

* chore(): update icon and description

* chore(): update stackblitz and guidance

- update guidance
- update stackblitz links

* chore(): update to covalent-ui account

- move stackblitz demo from personal to covalent-ui account

* chore(): update link

- update link to plural

* feature/add guidelines

- add material and angular material guidelines

* chore()/update iframe

-wrap iframe in div

* feat(patterns): update stepper Dos & Donts

* feat(patterns): Continue & Cancel buttons for steppers

* chore(stylelint)

src/app/components/design-patterns/design-patterns.component.ts

@@ -28,6 +28,11 @@ export class DesignPatternsComponent {
     icon: 'kitchen',
     route: 'navigation-drawer',
     title: 'Navigation Drawer Patterns',
+  }, {
+    description: 'Wizard-like pattern',
+    icon: 'looks_one',
+    route: 'steppers',
+    title: 'Stepper Patterns',
   }, {
     description: 'Feedback for empty elements',
     icon: 'space_bar',

src/app/components/design-patterns/design-patterns.module.ts

@@ -9,6 +9,7 @@ import { CardsComponent } from './cards/cards.component';
 import { AlertsComponent } from './alerts/alerts.component';
 import { ManagementListComponent } from './management-list/management-list.component';
 import { NavigationDrawerComponent } from './navigation-drawer/navigation-drawer.component';
+import { SteppersComponent } from './steppers/steppers.component';
 import { EmptyStatesComponent } from './empty-states/empty-states.component';
 
 import { MatButtonModule } from '@angular/material/button';
@@ -41,6 +42,7 @@ import { ToolbarModule } from '../../components/toolbar/toolbar.module';
     AlertsComponent,
     ManagementListComponent,
     NavigationDrawerComponent,
+    SteppersComponent,
     EmptyStatesComponent,
   ],
   imports: [

src/app/components/design-patterns/design-patterns.routes.ts

@@ -5,6 +5,7 @@ import { CardsComponent } from './cards/cards.component';
 import { AlertsComponent } from './alerts/alerts.component';
 import { ManagementListComponent } from './management-list/management-list.component';
 import { NavigationDrawerComponent } from './navigation-drawer/navigation-drawer.component';
+import { SteppersComponent } from './steppers/steppers.component';
 import { EmptyStatesComponent } from './empty-states/empty-states.component';
 
 const routes: Routes = [{
@@ -20,6 +21,9 @@ const routes: Routes = [{
     }, {
       component: NavigationDrawerComponent,
       path: 'navigation-drawer',
+    }, {
+      component: SteppersComponent,
+      path: 'steppers',
     }, {
       component: EmptyStatesComponent,
       path: 'empty-states',

src/app/components/design-patterns/steppers/steppers.component.html

@@ -0,0 +1,113 @@
+<div tdMediaToggle="gt-xs" [mediaClasses]="['push-sm']">
+  <mat-card tdMediaToggle="gt-xs" [mediaClasses]="['push-bottom']">
+    <mat-card-title>Steppers Patterns</mat-card-title>
+    <mat-divider></mat-divider>
+    <mat-card-content class="mat-typography">
+      <h3>When to use</h3>
+      <p>The stepper provides a wizard-like workflow by dividing content into logical steps.  This approach is most useful when each step is linear and complete before moving to the next step.</p>
+    </mat-card-content>
+  </mat-card>
+  <mat-card>
+    <mat-card-title>
+      <div layout="row" layout-align="start center">
+        <span>Example</span>
+        <span flex></span>
+        <a href="https://stackblitz.com/edit/stepper-patterns" target="_blank" matTooltip="View Code" mat-icon-button>
+          <mat-icon>launch</mat-icon>
+        </a>
+      </div>
+    </mat-card-title>
+    <mat-divider></mat-divider>
+    <div layout-gt-sm="row">
+      <div flex-gt-sm="25" class="mat-typography pad">
+        <h2>Usage</h2>
+        <h3>Stepper Component</h3>
+        <p>Follow component guidelines.  Vertical mode prefered.</p>
+        <mat-divider class="push-bottom"></mat-divider>
+        <h3>Label</h3>
+        <p>Follow Material Design guidelines.</p>
+        <mat-divider class="push-bottom"></mat-divider>
+        <h3>Sublabel</h3>
+        <p>Follow Material Design guidelines.</p>
+        <mat-divider class="push-bottom"></mat-divider>
+        <h3>Step Contents</h3>
+        <p>Each step should be fully self-contained and complete before moving to the next step.</p>
+        <mat-divider class="push-bottom"></mat-divider>
+        <h3>Step Summary</h3>
+        <p>Optional summary displayed when step is complete.</p>
+        <mat-divider class="push-bottom"></mat-divider>
+        <h2 class="push-bottom-none">Guidelines</h2>
+        <mat-nav-list class="pull-left pull-right">
+          <a mat-list-item href="https://material.io/guidelines/components/steppers.html" target="_blank">
+            <mat-icon style="font-size: 15px">launch</mat-icon>
+            <span matLine>Material Design</span>
+            <p matLine>Stepper Guidelines</p>
+          </a>
+          <mat-divider></mat-divider>
+          <a mat-list-item href="https://material.angular.io/components/stepper/overview" target="_blank">
+            <mat-icon style="font-size: 15px">launch</mat-icon>
+            <span matLine>Angular Material</span>
+            <p matLine>Stepper Guidelines</p>
+          </a>
+        </mat-nav-list>
+      </div>
+      <div layout="row" flex-gt-sm>
+        <iframe flex class="iframe" [src]="source"></iframe>
+      </div>
+    </div>
+  </mat-card>
+  <div layout-gt-xs="row">
+    <div flex-gt-xs="50">
+      <mat-card>
+        <mat-card-title>
+          <span class="tc-green-600">Do.</span>
+        </mat-card-title>
+        <mat-divider></mat-divider>
+        <mat-list>
+          <mat-list-item>
+            <mat-icon matListIcon>looks_one</mat-icon>
+            <h3 matLine>Group logical fields together</h3>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-icon matListIcon>looks_two</mat-icon>
+            <h3 matLine>Use Continue &amp; Cancel buttons</h3>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-icon matListIcon>looks_3</mat-icon>
+            <h3 matLine>Save asynchronously when possible</h3>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-icon matListIcon>looks_3</mat-icon>
+            <h3 matLine>Use raised Continue buttons</h3>
+          </mat-list-item>
+        </mat-list>
+      </mat-card>
+    </div>
+    <div flex-gt-xs="50">
+      <mat-card>
+        <mat-card-title>
+          <span class="tc-red-600">Don't.</span>
+        </mat-card-title>
+        <mat-divider></mat-divider>
+        <mat-list>
+          <mat-list-item>
+            <mat-icon matListIcon>looks_one</mat-icon>
+            <h3 matLine>Don't include nested steppers</h3>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-icon matListIcon>looks_two</mat-icon>
+            <h3 matLine>Don't use overly complex steppers</h3>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-icon matListIcon>looks_two</mat-icon>
+            <h3 matLine>Don't use outside a card</h3>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-icon matListIcon>looks_two</mat-icon>
+            <h3 matLine>Don't use horizontal for more than 3 steps</h3>
+          </mat-list-item>
+        </mat-list>
+      </mat-card>
+    </div>
+  </div>
+</div>

src/app/components/design-patterns/steppers/steppers.component.scss

@@ -0,0 +1,3 @@
+iframe {
+  border: none;
+}

src/app/components/design-patterns/steppers/steppers.component.ts

@@ -0,0 +1,23 @@
+import { Component, HostBinding } from '@angular/core';
+import { BrowserModule, DomSanitizer } from '@angular/platform-browser';
+import { slideInDownAnimation } from '../../../app.animations';
+
+@Component({
+  selector: 'steppers',
+  styleUrls: ['./steppers.component.scss'],
+  templateUrl: './steppers.component.html',
+  animations: [
+    slideInDownAnimation,
+  ],
+})
+export class SteppersComponent {
+
+  @HostBinding('@routeAnimation') routeAnimation: boolean = true;
+  @HostBinding('class.td-route-animation') classAnimation: boolean = true;
+
+  source: any = '';
+
+  constructor(private sanitizer: DomSanitizer) {
+    this.source = sanitizer.bypassSecurityTrustResourceUrl('https://stepper-patterns.stackblitz.io/');
+  }
+}