Toastr service and component

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,7 @@ import {
   SkyTextHighlightDemoComponent,
   SkyTileDemoComponent,
   SkyTimepickerDemoComponent,
+  SkyToastDemoComponent,
   SkyTokensDemoComponent,
   SkyToolbarDemoComponent,
   SkyUrlValidationDemoComponent,
@@ -147,6 +148,7 @@ const components = [
   SkyTextHighlightDemoComponent,
   SkyTileDemoComponent,
   SkyTimepickerDemoComponent,
+  SkyToastDemoComponent,
   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 @@
+export * from './toast-demo.component';

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

@@ -0,0 +1,4 @@
+<div>
+    <button (click)='openMessage()'>Open toast</button>
+    <sky-toast></sky-toast>
+</div>

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

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+import {
+  SkyToastService
+} from '../../core';
+
+@Component({
+  selector: 'sky-toast-demo',
+  templateUrl: './toast-demo.component.html'
+})
+export class SkyToastDemoComponent {
+  constructor(private toastSvc: SkyToastService) { }
+
+  public openMessage() {
+      this.toastSvc.openMessage("Bananas aren't shoes");
+  }
+}

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,3 @@
+export { SkyToastComponent } from './toast.component';
+export { SkyToastService } from './toast.service';
+export { SkyToastModule } from './toast.module';

src/modules/toast/toast.component.html

@@ -0,0 +1,19 @@
+<div class="sky-toaster">
+  <aside *ngFor="let message of messages | async">
+    <div class="sky-toast"
+         [ngClass]="{'sky-toast-info':     message.toastType=='info',
+                     'sky-toast-warning':   message.toastType=='warning',
+                     'sky-toast-danger':   message.toastType=='danger',
+                     'sky-toast-success':  message.toastType=='success'}">
+      <div class='sky-toast-content'>{{message.message}}</div>
+      <button
+          type="button"
+          class="sky-toast-close"
+          (click)="message.close()"
+          [attr.aria-label]="'toast_close' | skyResources"
+          [hidden]="!true">
+        <span aria-hidden="true"><i class="fa fa-close"></i></span>
+      </button>
+    </div>
+  </aside>
+</div>

src/modules/toast/toast.component.scss

@@ -0,0 +1,113 @@
+@import "../../scss/variables";
+
+.sky-toaster {
+  bottom: 0;
+  right: 0;
+  display: block;
+  position: fixed;
+  padding-bottom: $sky-margin-double;
+  padding-right: $sky-margin-double;
+}
+
+.sky-toast {
+  padding: 0 $sky-padding;
+  margin-bottom: $sky-margin-double;
+  border-left: solid 30px;
+  border-radius: $sky-border-radius;
+  color: $sky-text-color-default;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .sky-toast-content {
+    padding-top: $sky-padding;
+    padding-bottom: $sky-padding;
+    width: 100%;
+
+		::ng-deep a {
+			color: change-color($sky-text-color-default, $alpha: 0.8);
+			text-decoration: underline;
+
+			&:hover {
+				color: $sky-text-color-default;
+			}
+		}
+  }
+
+
+
+  button {
+    margin-left: auto;
+    width: 32px;
+    height: 32px;
+  }
+}
+
+.sky-toast-info {
+  background-color: $sky-background-color-info;
+  border-color: $sky-highlight-color-info;
+
+  &:before {
+    content: "\f06a";
+    font-family: FontAwesome;
+    margin-left: -31px;
+    margin-right: 20px;
+    color: $sky-color-white;
+  }
+}
+
+.sky-toast-success {
+  background-color: $sky-background-color-success;
+  border-color: $sky-highlight-color-success;
+
+  &:before {
+    content: "\f00c";
+    font-family: FontAwesome;
+    margin-left: -32px;
+    margin-right: 19px;
+    color: $sky-color-white;
+  }
+}
+
+.sky-toast-warning {
+  background-color: $sky-background-color-warning;
+  border-color: $sky-highlight-color-warning;
+
+  &:before {
+    content: "\f071";
+    font-family: FontAwesome;
+    margin-left: -32px;
+    margin-right: 19px;
+    color: $sky-color-white;
+  }
+}
+
+.sky-toast-danger {
+  background-color: $sky-background-color-danger;
+  border-color: $sky-highlight-color-danger;
+
+  &:before {
+    content: "\f071";
+    font-family: FontAwesome;
+    margin-left: -32px;
+    margin-right: 19px;
+    color: $sky-color-white;
+  }
+}
+
+.sky-toast-close {
+  cursor: pointer;
+  font-weight: bold;
+  line-height: 1;
+  margin: 0;
+  padding: 0;
+  color: $sky-text-color-default;
+  opacity: 0.8;
+  border: none;
+  background-color: transparent;
+  display: block;
+
+  &:hover {
+    opacity: 1.0;
+  }
+}

src/modules/toast/toast.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { SkyToastService } from './toast.service';
+import { Observable } from 'rxjs/Observable';
+
+@Component({
+  selector: 'sky-toast',
+  templateUrl: './toast.component.html',
+  styleUrls: ['./toast.component.scss'],
+})
+export class SkyToastComponent implements OnInit {
+
+  messages: Observable<any>;
+
+  constructor(private toast: SkyToastService) { }
+
+  ngOnInit() {
+    this.messages = this.toast.getMessages
+  }
+}

src/modules/toast/toast.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SkyToastService } from './toast.service';
+import { SkyToastComponent } from './toast.component';
+import { SkyResourcesModule } from '../resources';
+
+export { SkyToastService }
+
+@NgModule({
+  declarations: [
+      SkyToastComponent
+  ],
+  imports: [
+    CommonModule, SkyResourcesModule
+  ],
+  exports: [
+      SkyToastComponent
+  ],
+  providers: [
+    SkyToastService
+  ],
+  entryComponents: [
+  ]
+})
+export class SkyToastModule {
+}

src/modules/toast/toast.service.spec.ts

@@ -0,0 +1,25 @@
+import { SkyErrorModalService } from './error-modal.service';
+import { MockModalService } from './fixtures/mocks';
+import { ErrorModalConfig } from './error-modal-config';
+import { SkyErrorModalFormComponent } from './error-modal-form.component';
+
+describe('Error modal service', () => {
+  it('Test open is called with correct parameters', () => {
+    let modalService = new MockModalService(undefined, undefined, undefined);
+
+    const config: ErrorModalConfig = {
+      errorTitle: 'Error title',
+      errorDescription: 'Description of error',
+      errorCloseText: 'Close button text'
+    };
+
+    const expectedProvider = { provide: ErrorModalConfig, useValue: config };
+
+    let service = new SkyErrorModalService(modalService);
+    service.open(config);
+
+    expect(modalService.openCalls.length).toBe(1);
+    expect(modalService.openCalls[0].component).toBe(SkyErrorModalFormComponent);
+    expect(modalService.openCalls[0].providers).toEqual([expectedProvider]);
+  });
+});