Contrib > Toast Component

package.json

@@ -46,7 +46,6 @@
     "microedge-rxstate": "2.0.2",
     "moment": "2.21.0",
     "ng2-dragula": "1.5.0",
-    "ng2-toastr": "4.1.2",
     "web-animations-js": "2.3.1"
   },
   "devDependencies": {

skyux-spa-visual-tests/config/utils/start-visual.js

@@ -191,7 +191,11 @@ function spawnServer() {
 function spawnBuild(skyPagesConfig, webpack) {
   return new Promise(resolve => {
     logger.info('Running build');
-    build([], skyPagesConfig, webpack).then(stats => {
+    build(
+      { logFormat: 'compact' },
+      skyPagesConfig,
+      webpack
+    ).then(stats => {
       logger.info('Completed build');
       resolve(stats.toJson().chunks);
     });

skyux-spa-visual-tests/src/app/app-extras.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 
 import { FlyoutDemoComponent } from './flyout/flyout-demo.component';
+import { ToastDemoComponent } from './toast/toast-demo.component';
 
 import { ModalDemoComponent } from './modal/modal-demo.component';
 import { ModalLargeDemoComponent } from './modal/modal-large-demo.component';
@@ -16,6 +17,7 @@ import { Tile2Component } from './tiles/tile2.component';
   providers: [],
   entryComponents: [
     FlyoutDemoComponent,
+    ToastDemoComponent,
     ModalDemoComponent,
     ModalLargeDemoComponent,
     ModalFullPageDemoComponent,

skyux-spa-visual-tests/src/app/toast/index.html

@@ -0,0 +1,2 @@
+<toast-visual>
+</toast-visual>

skyux-spa-visual-tests/src/app/toast/toast-demo.component.html

@@ -0,0 +1,5 @@
+<strong
+  class="sky-custom-toast"
+>
+  Toast component
+</strong>

skyux-spa-visual-tests/src/app/toast/toast-demo.component.ts

@@ -0,0 +1,19 @@
+import {
+  ChangeDetectionStrategy,
+  Component
+} from '@angular/core';
+
+import {
+  SkyToastInstance
+} from '@blackbaud/skyux/dist/core';
+
+@Component({
+  selector: 'sky-test-cmp-toast',
+  templateUrl: './toast-demo.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ToastDemoComponent {
+  constructor(
+    public message: SkyToastInstance
+  ) { }
+}

skyux-spa-visual-tests/src/app/toast/toast-visual.component.html

@@ -0,0 +1,18 @@
+<div
+  id="screenshot-toast"
+>
+  <button
+    class="sky-btn sky-btn-primary"
+    type="button"
+    (click)="openToast()"
+  >
+    Open toast
+  </button>
+  <button
+    class="sky-btn sky-btn-secondary"
+    type="button"
+    (click)="openComponent()"
+  >
+    Open custom toast
+  </button>
+</div>

skyux-spa-visual-tests/src/app/toast/toast-visual.component.ts

@@ -0,0 +1,31 @@
+import {
+  Component,
+  ChangeDetectionStrategy
+} from '@angular/core';
+
+import {
+  SkyToastService
+} from '@blackbaud/skyux/dist/core';
+
+import {
+  ToastDemoComponent
+} from './toast-demo.component';
+
+@Component({
+  selector: 'toast-visual',
+  templateUrl: './toast-visual.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ToastVisualComponent {
+  constructor(
+    private toastService: SkyToastService
+  ) { }
+
+  public openToast() {
+    this.toastService.openMessage('Toast message');
+  }
+
+  public openComponent() {
+    this.toastService.openComponent(ToastDemoComponent, {});
+  }
+}

skyux-spa-visual-tests/src/app/toast/toast.visual-spec.ts

@@ -0,0 +1,58 @@
+import {
+  SkyVisualTest
+} from '../../../config/utils/visual-test-commands';
+
+import {
+  by,
+  element
+} from 'protractor';
+
+describe('Toast', () => {
+  it('should match previous toast screenshot', () => {
+    return SkyVisualTest.setupTest('toast')
+      .then(() => {
+        element(by.css('.sky-btn-primary')).click();
+        SkyVisualTest.moveCursorOffScreen();
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'toast',
+          selector: '.sky-toaster'
+        });
+      });
+  });
+
+  it('should match previous templated toast screenshot', () => {
+    return SkyVisualTest.setupTest('toast')
+      .then(() => {
+        element(by.css('.sky-btn-secondary')).click();
+        SkyVisualTest.moveCursorOffScreen();
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'toast-component',
+          selector: '.sky-toaster'
+        });
+      });
+  });
+
+  it('should match previous toast screenshot on tiny screens', () => {
+    return SkyVisualTest.setupTest('toast', 480)
+      .then(() => {
+        element(by.css('.sky-btn-primary')).click();
+        SkyVisualTest.moveCursorOffScreen();
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'toast-xs',
+          selector: '.sky-toaster'
+        });
+      });
+  });
+
+  it('should match previous templated toast screenshot on tiny screens', () => {
+    return SkyVisualTest.setupTest('toast', 480)
+      .then(() => {
+        element(by.css('.sky-btn-secondary')).click();
+        SkyVisualTest.moveCursorOffScreen();
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'toast-component-xs',
+          selector: '.sky-toaster'
+        });
+      });
+  });
+});

src/core.ts

@@ -63,6 +63,7 @@ import { SkyTabsModule } from './modules/tabs';
 import { SkyTextExpandModule } from './modules/text-expand';
 import { SkyTextExpandRepeaterModule } from './modules/text-expand-repeater';
 import { SkyTextHighlightModule } from './modules/text-highlight';
+import { SkyToastModule } from './modules/toast';
 import { SkyTokensModule } from './modules/tokens';
 import { SkyToolbarModule } from './modules/toolbar';
 import { SkyTilesModule } from './modules/tiles';
@@ -125,6 +126,7 @@ import { SkyWaitModule } from './modules/wait';
     SkyTextHighlightModule,
     SkyTilesModule,
     SkyTimepickerModule,
+    SkyToastModule,
     SkyTokensModule,
     SkyToolbarModule,
     SkyUrlValidationModule,
@@ -190,6 +192,7 @@ export * from './modules/text-expand-repeater';
 export * from './modules/text-highlight';
 export * from './modules/tiles';
 export * from './modules/timepicker';
+export * from './modules/toast';
 export * from './modules/tokens';
 export * from './modules/toolbar';
 export * from './modules/url-validation';

src/demo.ts

@@ -70,6 +70,8 @@ import {
   SkyTextHighlightDemoComponent,
   SkyTileDemoComponent,
   SkyTimepickerDemoComponent,
+  SkyToastDemoComponent,
+  SkyToastCustomDemoComponent,
   SkyTokensDemoComponent,
   SkyToolbarDemoComponent,
   SkyUrlValidationDemoComponent,
@@ -148,6 +150,8 @@ const components = [
   SkyTextHighlightDemoComponent,
   SkyTileDemoComponent,
   SkyTimepickerDemoComponent,
+  SkyToastDemoComponent,
+  SkyToastCustomDemoComponent,
   SkyTokensDemoComponent,
   SkyToolbarDemoComponent,
   SkyUrlValidationDemoComponent,

src/demos/demo.service.ts

@@ -1,4 +1,7 @@
-import { Injectable } from '@angular/core';
+// #region imports
+import {
+  Injectable
+} from '@angular/core';
 
 import {
   SkyActionButtonDemoComponent,
@@ -52,13 +55,15 @@ import {
   SkyTextHighlightDemoComponent,
   SkyTileDemoComponent,
   SkyTimepickerDemoComponent,
+  SkyToastDemoComponent,
   SkyTokensDemoComponent,
   SkyToolbarDemoComponent,
   SkyUrlValidationDemoComponent,
   SkyVerticalTabsDemoComponent,
   SkyWaitDemoComponent,
   SkyWizardDemoComponent
 } from './index';
+// #endregion
 
 /**
  * This service provides consumers with the raw file contents for each component demo.
@@ -1025,6 +1030,36 @@ export class SkyDemoService {
         }
       ]
     },
+    {
+      name: 'Toast',
+      component: SkyToastDemoComponent,
+      files: [
+        {
+          name: 'toast-demo.component.html',
+          fileContents: require('!!raw-loader!./toast/toast-demo.component.html')
+        },
+        {
+          name: 'toast-demo.component.ts',
+          fileContents: require('!!raw-loader!./toast/toast-demo.component.ts'),
+          componentName: 'SkyToastDemoComponent',
+          bootstrapSelector: 'sky-toast-demo'
+        },
+        {
+          name: 'toast-custom-demo.component.html',
+          fileContents: require('!!raw-loader!./toast/toast-custom-demo.component.html')
+        },
+        {
+          name: 'toast-custom-demo.component.ts',
+          fileContents: require('!!raw-loader!./toast/toast-custom-demo.component.ts'),
+          componentName: 'SkyToastCustomDemoComponent',
+          bootstrapSelector: 'sky-toast-custom-demo'
+        },
+        {
+          name: 'toast-custom-demo-context.ts',
+          fileContents: require('!!raw-loader!./toast/toast-custom-demo-context.ts')
+        }
+      ]
+    },
     {
       name: 'Tokens',
       component: SkyTokensDemoComponent,

src/demos/index.ts

@@ -45,6 +45,7 @@ export * from './text-expand';
 export * from './text-highlight';
 export * from './tile';
 export * from './timepicker';
+export * from './toast';
 export * from './tokens';
 export * from './toolbar';
 export * from './url-validation';

src/demos/toast/index.ts

@@ -0,0 +1,2 @@
+export * from './toast-custom-demo.component';
+export * from './toast-demo.component';

src/demos/toast/toast-custom-demo-context.ts

@@ -0,0 +1,5 @@
+export class SkyToastCustomDemoContext {
+  constructor(
+    public message: string
+  ) { }
+}

src/demos/toast/toast-custom-demo.component.html

@@ -0,0 +1,13 @@
+<p>
+  {{ context.message }}
+</p>
+<p>
+  Some link: <a href="http://example.com">example.com</a>
+</p>
+<button
+  class="sky-btn sky-btn-default"
+  type="button"
+  (click)="close()"
+>
+  Close
+</button>

src/demos/toast/toast-custom-demo.component.ts

@@ -0,0 +1,28 @@
+import {
+  ChangeDetectionStrategy,
+  Component
+} from '@angular/core';
+
+import {
+  SkyToastInstance
+} from '../../core';
+
+import {
+  SkyToastCustomDemoContext
+} from './toast-custom-demo-context';
+
+@Component({
+  selector: 'sky-toast-custom-demo',
+  templateUrl: './toast-custom-demo.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SkyToastCustomDemoComponent {
+  constructor(
+    public context: SkyToastCustomDemoContext,
+    private instance: SkyToastInstance
+  ) { }
+
+  public close(): void {
+    this.instance.close();
+  }
+}

src/demos/toast/toast-demo.component.html

@@ -0,0 +1,44 @@
+<div class="sky-toast-demo">
+  <fieldset>
+    <label class="sky-control-label">
+      Select toast type:
+    </label>
+    <ul class="sky-list-unstyled">
+      <li *ngFor="let type of types">
+        <sky-radio
+          name="radiogroup"
+          [value]="type"
+          [(ngModel)]="selectedType"
+        >
+          <sky-radio-label>
+            {{ type }}
+          </sky-radio-label>
+        </sky-radio>
+      </li>
+    </ul>
+  </fieldset>
+
+  <button
+    class="sky-btn sky-btn-primary"
+    type="button"
+    (click)="openMessage()"
+  >
+    Open toast
+  </button>
+
+  <button
+    class="sky-btn sky-btn-primary"
+    type="button"
+    (click)="openComponent()"
+  >
+    Open toast with custom component
+  </button>
+
+  <button
+    class="sky-btn sky-btn-default"
+    type="button"
+    (click)="closeAll()"
+  >
+    Close all
+  </button>
+</div>