feat(patterns): empty state design pattern (#997)

* feat(docs): empty state pattern - Add empty state pattern - Add stackblitz demo (embedded as iframe) * chore(): update resource links - no Angular Material link - update Material Design link * chore(): fix lint - cleanup and fix lint errors * chore(): cleanup html - get rid of column flow - add problem/solution * chore(): update view layout Add resources Add live demo w/ link to stackblitz demo * feat(styles): adding iframe styles * chore(theme): make link style more explicit * feat(patterns): update empty state pattern * chore(): cleanup - remove unused styles - add a few more do's and don'ts * chore(): update descriptions - update description - update do's and don'ts * chore(): update icon * chore(): update stackblitz links - Use Covalent-UI account * feat(patterns): update empty state usage & Dos/Donts
Teradata · Jan 2, 2018 · 1ca8db9 · 1ca8db9
1 parent 014343b
commit 1ca8db9
Show file tree

Hide file tree

Showing 8 changed files with 144 additions and 5 deletions.
diff --git a/src/app/components/design-patterns/design-patterns.component.ts b/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: 'Feedback for empty elements',
+    icon: 'space_bar',
+    route: 'empty-states',
+    title: 'Empty State Patterns',
   }];
 
   constructor(private _changeDetectorRef: ChangeDetectorRef,

diff --git a/src/app/components/design-patterns/design-patterns.module.ts b/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 { EmptyStatesComponent } from './empty-states/empty-states.component';
 
 import { MatButtonModule } from '@angular/material/button';
 import { MatListModule } from '@angular/material/list';
@@ -40,6 +41,7 @@ import { ToolbarModule } from '../../components/toolbar/toolbar.module';
     AlertsComponent,
     ManagementListComponent,
     NavigationDrawerComponent,
+    EmptyStatesComponent,
   ],
   imports: [
     /** Angular Modules */

diff --git a/src/app/components/design-patterns/design-patterns.routes.ts b/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 { EmptyStatesComponent } from './empty-states/empty-states.component';
 
 const routes: Routes = [{
   children: [{
@@ -19,6 +20,9 @@ const routes: Routes = [{
     }, {
       component: NavigationDrawerComponent,
       path: 'navigation-drawer',
+    }, {
+      component: EmptyStatesComponent,
+      path: 'empty-states',
     },
   ],
   component: DesignPatternsComponent,

diff --git a/src/app/components/design-patterns/empty-states/empty-states.component.html b/src/app/components/design-patterns/empty-states/empty-states.component.html
@@ -0,0 +1,97 @@
+<div tdMediaToggle="gt-xs" [mediaClasses]="['push-sm']">
+  <mat-card tdMediaToggle="gt-xs" [mediaClasses]="['push-bottom']">
+    <mat-card-title>Empty States Patterns</mat-card-title>
+    <mat-divider></mat-divider>
+    <mat-card-content class="mat-typography">
+      <h3>When to use</h3>
+      <p>When no content is avaiable for a section and the user needs addtional instruction or feedback.</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/empty-state-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>Icon</h3>
+        <p>Use the content type icon if possible.</p>
+        <mat-divider class="push-bottom"></mat-divider>
+        <h3>Language</h3>
+        <p>Follow the Material Design spec for language &amp; text.</p>
+        <mat-divider class="push-bottom"></mat-divider>
+        <h3>Primary Action</h3>
+        <p>Optionally include a primary action button (raised with accent color).</p>
+        <mat-divider class="push-bottom"></mat-divider>
+        <h3>Secondary Action</h3>
+        <p>Optionally include a secondary action button (not raised).</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/patterns/empty-states.html" target="_blank">
+            <mat-icon style="font-size: 15px">launch</mat-icon>
+            <span matLine>Material Design</span>
+            <p matLine>Empty State 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>Use inside a card</h3>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-icon matListIcon>looks_two</mat-icon>
+            <h3 matLine>Use contextual icon &amp; message</h3>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-icon matListIcon>looks_3</mat-icon>
+            <h3 matLine>Use action buttons when possible</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 change background color</h3>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-icon matListIcon>looks_two</mat-icon>
+            <h3 matLine>Don't use generic icon &amp; message</h3>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-icon matListIcon>looks_3</mat-icon>
+            <h3 matLine>Don't use more than 1 raised button</h3>
+          </mat-list-item>
+        </mat-list>
+      </mat-card>
+    </div>
+  </div>
+</div>
diff --git a/src/app/components/design-patterns/empty-states/empty-states.component.scss b/src/app/components/design-patterns/empty-states/empty-states.component.scss
diff --git a/src/app/components/design-patterns/empty-states/empty-states.component.ts b/src/app/components/design-patterns/empty-states/empty-states.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: 'empty-states',
+  styleUrls: ['./empty-states.component.scss'],
+  templateUrl: './empty-states.component.html',
+  animations: [
+    slideInDownAnimation,
+  ],
+})
+export class EmptyStatesComponent {
+
+  @HostBinding('@routeAnimation') routeAnimation: boolean = true;
+  @HostBinding('class.td-route-animation') classAnimation: boolean = true;
+
+  source: any = '';
+
+  constructor(private sanitizer: DomSanitizer) {
+    this.source = sanitizer.bypassSecurityTrustResourceUrl('https://empty-state-patterns.stackblitz.io/');
+  }
+}
diff --git a/src/styles.scss b/src/styles.scss
@@ -14,4 +14,10 @@
   html[dir="rtl"] & {
     direction: rtl;
   }
+}
+
+// iframe styles
+.iframe {
+  border: 0;
+  min-height: 700px;
 }
diff --git a/src/theme.scss b/src/theme.scss
@@ -104,16 +104,18 @@ $theme: mat-light-theme($primary, $accent, $warn);
     .tc-primary {
         color: mat-color($primary-alt);
     }
-    .tc-accent,
-    a {
+    .tc-accent {
         color: mat-color($accent-alt);
     }
-    a:hover {
-        color: darken(mat-color($accent-alt), 10%);
-    }
     .tc-warn {
         color: mat-color($warn-alt);
     }
+    a:not(.mat-button, .mat-icon-button) {
+        color: mat-color($accent-alt);
+        &:hover {
+            color: darken(mat-color($accent-alt), 10%);
+        }
+    }
 }
 
 // Dark theme