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 @@
+<b class="sky-custom-toast">Toast component</b>

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

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

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

@@ -0,0 +1,14 @@
+<div id="screenshot-toast" style="height: 500px;">
+  <button
+    type="button"
+    class="sky-btn sky-btn-primary"
+    (click)="openToast()">
+    Open toast
+  </button>
+  <button
+    type="button"
+    class="sky-btn sky-btn-secondary"
+    (click)="openTemplatedToast()">
+    Open custom toast
+  </button>
+</div>

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

@@ -0,0 +1,22 @@
+import { Component } 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'
+})
+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,64 @@
+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

@@ -62,6 +62,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';
@@ -123,6 +124,7 @@ import { SkyWaitModule } from './modules/wait';
     SkyTextHighlightModule,
     SkyTilesModule,
     SkyTimepickerModule,
+    SkyToastModule,
     SkyTokensModule,
     SkyToolbarModule,
     SkyUrlValidationModule,
@@ -186,6 +188,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

@@ -69,6 +69,8 @@ import {
   SkyTextHighlightDemoComponent,
   SkyTileDemoComponent,
   SkyTimepickerDemoComponent,
+  SkyToastDemoComponent,
+  SkyToastCustomDemoComponent,
   SkyTokensDemoComponent,
   SkyToolbarDemoComponent,
   SkyUrlValidationDemoComponent,
@@ -147,6 +149,8 @@ const components = [
   SkyTextHighlightDemoComponent,
   SkyTileDemoComponent,
   SkyTimepickerDemoComponent,
+  SkyToastDemoComponent,
+  SkyToastCustomDemoComponent,
   SkyTokensDemoComponent,
   SkyToolbarDemoComponent,
   SkyUrlValidationDemoComponent,

src/demos/demo.service.ts

@@ -51,6 +51,7 @@ import {
   SkyTextHighlightDemoComponent,
   SkyTileDemoComponent,
   SkyTimepickerDemoComponent,
+  SkyToastDemoComponent,
   SkyTokensDemoComponent,
   SkyToolbarDemoComponent,
   SkyUrlValidationDemoComponent,
@@ -996,6 +997,22 @@ 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: 'Tokens',
       component: SkyTokensDemoComponent,

src/demos/index.ts

@@ -44,6 +44,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.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+import { SkyToastCustomComponent, SkyToastMessage } from '../../core';
+
+@Component({
+  selector: 'sky-toast-custom-demo',
+  template: "<p>{{text}}<a *ngIf='!(message.isClosing | async)' href='http://example.com'>example.com</a></p>"
+})
+export class SkyToastCustomDemoComponent implements OnInit, SkyToastCustomComponent {
+  public message: SkyToastMessage;
+  public text: string = 'This is a templated message. It can even link you to ';
+
+  constructor() {}
+
+  public ngOnInit() {
+    this.message.isClosing.subscribe((value: boolean) => {
+      if (value) {
+        this.text = 'Bye bye :D';
+      }
+    });
+  }
+}

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

@@ -0,0 +1,18 @@
+<div>
+  <table>
+    <thead>
+      <td>Toast type</td>
+      <td></td>
+    </thead>
+    <tbody>
+      <tr *ngFor="let type of types">
+        <td>{{ typeTranslator[type] }}</td>
+        <td>
+          <input type="radio" name="radiogroup" [checked]="type === selectedType" (change)="selectedType = type" />
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <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,26 @@
+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 typeTranslator = SkyToastType;
+  public types: SkyToastType[] = [SkyToastType.Info, SkyToastType.Success, SkyToastType.Warning, SkyToastType.Danger];
+  public selectedType: SkyToastType = SkyToastType.Info;
+
+  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

@@ -819,6 +819,10 @@
     "_description": "The close button for the timepicker modal",
     "message": "Done"
   },
+  "toast_close": {
+    "_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,4 @@
+export { SkyToastContainerComponent } from './toast-container.component';
+export { SkyToastService } from './services/toast.service';
+export { SkyToastModule } from './toast.module';
+export * from './types';

src/modules/toast/services/toast-adapter.service.ts

@@ -0,0 +1,29 @@
+import {
+  Injectable,
+  Renderer2,
+  RendererFactory2
+} from '@angular/core';
+import { SkyWindowRefService } from '../../window';
+
+@Injectable()
+export class SkyToastAdapterService {
+  private renderer: Renderer2;
+
+  constructor(
+    private rendererFactory: RendererFactory2,
+    private windowRef: SkyWindowRefService
+  ) {
+    this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
+  }
+
+  public appendToBody(element: any): void {
+    const body = this.windowRef.getWindow().document.body;
+    this.renderer.appendChild(body, element);
+  }
+
+  public removeHostElement(): void {
+    const document = this.windowRef.getWindow().document;
+    const hostElement = document.querySelector('sky-toast');
+    this.renderer.removeChild(document.body, hostElement);
+  }
+}