Toastr service and component

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 @@
+<toast-visual></toast-visual>

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

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

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

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

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

@@ -0,0 +1,16 @@
+<div
+  id="screenshot-toast"
+  style="height: 500px;">
+  <button
+    class="sky-btn sky-btn-primary"
+    type="button"
+    (click)="openToast()">
+    Open toast
+  </button>
+  <button
+    class="sky-btn sky-btn-secondary"
+    type="button"
+    (click)="openTemplatedToast()">
+    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 openTemplatedToast() {
+    this.toastService.openTemplatedMessage(ToastDemoComponent, {});
+  }
+}

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

@@ -0,0 +1,70 @@
+import {
+  SkyVisualTest
+} from '../../../config/utils/visual-test-commands';
+
+import {
+  element,
+  by
+} 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: 'body'
+        }).then(() => {
+          expect(by.css('.sky-toast')).toBeTruthy();
+          element(by.css('.sky-toast')).click();
+        });
+      });
+  });
+
+  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',
+          selector: 'body'
+        }).then(() => {
+          expect(by.css('.sky-custom-toast')).toBeTruthy();
+          element(by.css('.sky-toast')).click();
+        });
+      });
+  });
+
+  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',
+          selector: 'body'
+        }).then(() => {
+          expect(by.css('.sky-toast')).toBeTruthy();
+          element(by.css('.sky-toast')).click();
+        });
+      });
+  });
+
+  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',
+          selector: 'body'
+        }).then(() => {
+          expect(by.css('.sky-custom-toast')).toBeTruthy();
+          element(by.css('.sky-toast')).click();
+        });
+      });
+  });
+});

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

@@ -52,6 +52,7 @@ import {
   SkyTextHighlightDemoComponent,
   SkyTileDemoComponent,
   SkyTimepickerDemoComponent,
+  SkyToastDemoComponent,
   SkyTokensDemoComponent,
   SkyToolbarDemoComponent,
   SkyUrlValidationDemoComponent,
@@ -1017,6 +1018,32 @@ 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: '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-demo.component';
+export * from './toast-custom-demo.component';

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

@@ -0,0 +1,8 @@
+<p>
+  {{text}}
+  <a
+    *ngIf='!(message.isClosing | async)'
+    href='http://example.com'>
+    example.com
+  </a>
+</p>

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

@@ -0,0 +1,28 @@
+import {
+  Component,
+  OnInit,
+  ChangeDetectionStrategy
+} from '@angular/core';
+
+import {
+  SkyToastInstance
+} from '../../core';
+
+@Component({
+  selector: 'sky-toast-custom-demo',
+  templateUrl: './toast-custom-demo.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SkyToastCustomDemoComponent implements OnInit {
+  public text = 'This is a templated message. It can even link you to ';
+
+  constructor(
+    public message: SkyToastInstance
+  ) {}
+
+  public ngOnInit() {
+    this.message.isClosing.subscribe(() => {
+      this.text = 'Bye bye :D';
+    });
+  }
+}

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

@@ -0,0 +1,25 @@
+<div>
+  <fieldset>
+    <legend>Toast type</legend>
+    <ul class="sky-list-unstyled">
+      <li *ngFor="let type of types">
+        <sky-radio
+          name="radiogroup"
+          [value]="type"
+          [(ngModel)]="selectedType">
+          <sky-radio-label>{{ typeTranslator[type] }}</sky-radio-label>
+        </sky-radio>
+      </li>
+    </ul>
+  </fieldset>
+  <button
+    class="sky-btn sky-btn-primary"
+    (click)="openMessage()">
+    Open toast
+  </button>
+  <button
+    class="sky-btn sky-btn-primary"
+    (click)="openTemplatedMessage()">
+    Open templated toast
+  </button>
+</div>

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

@@ -0,0 +1,34 @@
+import {
+  Component
+} from '@angular/core';
+
+import {
+  SkyToastService,
+  SkyToastType
+} from '../../core';
+
+import {
+  SkyToastCustomDemoComponent
+} from './toast-custom-demo.component';
+
+@Component({
+  selector: 'sky-toast-demo',
+  templateUrl: './toast-demo.component.html'
+})
+export class SkyToastDemoComponent {
+  public selectedType = SkyToastType.Info;
+  public typeTranslator = SkyToastType;
+  public types = [SkyToastType.Info, SkyToastType.Success, SkyToastType.Warning, SkyToastType.Danger];
+
+  constructor(
+    private toastSvc: SkyToastService
+  ) {}
+
+  public openMessage() {
+    this.toastSvc.openMessage('This is a ' + SkyToastType[this.selectedType] + ' toast.', {toastType: this.selectedType});
+  }
+
+  public openTemplatedMessage() {
+    this.toastSvc.openTemplatedMessage(SkyToastCustomDemoComponent, {toastType: this.selectedType});
+  }
+}

src/locales/resources_en_US.json

@@ -835,6 +835,10 @@
     "_description": "The close button for the timepicker modal",
     "message": "Done"
   },
+  "toast_close_button": {
+    "_description": "Screen reader text for the close button on toasts",
+    "message": "Close the toast"
+  },
   "token_dismiss_button_title": {
     "_description": "The default text for the token dismiss button title.",
     "message": "Remove item"

src/modules/toast/index.ts

@@ -0,0 +1,10 @@
+export {
+  SkyToastContainerComponent
+} from './toast-container.component';
+export {
+  SkyToastService
+} from './services/toast.service';
+export {
+  SkyToastModule
+} from './toast.module';
+export * from './types';