Merge pull request #60 from cal-smith/master

fix(toast): add toast to banner.service and enable the close event

Author: zvonimirfras

src/banner/banner.component.spec.ts

@@ -3,8 +3,7 @@ import { TranslateModule, TranslateLoader, TranslateFakeLoader } from "@ngx-tran
 
 import { StaticIconModule } from "./../icon/static-icon.module";
 
-import { Banner } from "./banner.component";
-import { BannerService } from "./banner.service";
+import { Banner, BannerService } from "./banner.module";
 
 
 describe("Banner", () => {
@@ -32,6 +31,7 @@ describe("Banner", () => {
 		const fixture = TestBed.createComponent(Banner);
 		fixture.componentInstance.bannerObj = {
 			type: "info",
+			title: "sample",
 			message: "sample message"
 		};
 		fixture.detectChanges();
@@ -44,6 +44,7 @@ describe("Banner", () => {
 		const fixture = TestBed.createComponent(Banner);
 		fixture.componentInstance.bannerObj = {
 			type: "danger",
+			title: "sample",
 			message: "sample message"
 		};
 		fixture.detectChanges();
@@ -56,6 +57,7 @@ describe("Banner", () => {
 		const fixture = TestBed.createComponent(Banner);
 		fixture.componentInstance.bannerObj = {
 			type: "warning",
+			title: "sample",
 			message: "sample message"
 		};
 		fixture.detectChanges();
@@ -68,6 +70,7 @@ describe("Banner", () => {
 		const fixture = TestBed.createComponent(Banner);
 		fixture.componentInstance.bannerObj = {
 			type: "success",
+			title: "sample",
 			message: "sample message"
 		};
 		fixture.detectChanges();
@@ -80,6 +83,7 @@ describe("Banner", () => {
 		const fixture = TestBed.createComponent(Banner);
 		fixture.componentInstance.bannerObj = {
 			type: "success",
+			title: "sample",
 			message: "sample message"
 		};
 		fixture.detectChanges();
@@ -93,6 +97,7 @@ describe("Banner", () => {
 		const fixture = TestBed.createComponent(Banner);
 		fixture.componentInstance.bannerObj = {
 			type: "success",
+			title: "sample",
 			message: "sample message"
 		};
 		fixture.detectChanges();
@@ -109,6 +114,7 @@ describe("Banner", () => {
 		const fixture = TestBed.createComponent(Banner);
 		fixture.componentInstance.bannerObj = {
 			type: "info",
+			title: "sample",
 			message: "sample message"
 		};
 		fixture.detectChanges();

src/banner/banner.component.ts

@@ -73,7 +73,7 @@ export class Banner {
 
 	@ViewChild("banner") banner;
 
-	constructor(private bannerService: BannerService) {}
+	constructor(protected bannerService: BannerService) {}
 
 	/**
 	 * Emits close event.

src/banner/banner.module.ts

@@ -4,23 +4,25 @@ import { TranslateModule } from "@ngx-translate/core";
 
 import { StaticIconModule } from "./../icon/static-icon.module";
 
-import { Banner } from "./banner.component";
 import { Toast } from "./toast.component";
+import { Banner } from "./banner.component";
+import { BannerService } from "./banner.service";
 
 export { BannerService } from "./banner.service";
 export { Banner } from "./banner.component";
 export { Toast } from "./toast.component";
 
 @NgModule({
 	declarations: [
-		Banner,
-		Toast
+		Toast,
+		Banner
 	],
 	exports: [
 		Banner,
 		Toast
 	],
 	entryComponents: [Banner, Toast],
-	imports: [CommonModule, TranslateModule, StaticIconModule]
+	imports: [CommonModule, TranslateModule, StaticIconModule],
+	providers: [BannerService]
 })
 export class BannerModule {}

src/banner/banner.service.ts

@@ -9,8 +9,8 @@ import {
 	OnDestroy
 } from "@angular/core";
 
-import { Banner } from "./banner.component";
 import { BannerContent, NotificationContent, ToastContent } from "./banner-content.interface";
+import { Banner, Toast } from "./banner.module";
 
 /**
  * Provides a way to use the banner component.
@@ -31,15 +31,6 @@ export class BannerService implements OnDestroy {
 	public bannerRefs = new Array<ComponentRef<any>>();
 	public onClose: EventEmitter<any> = new EventEmitter();
 
-	/**
-	 * Used to create banners.
-	 *
-	 * @private
-	 * @type {ComponentFactory<any>}
-	 * @memberof BannerService
-	 */
-	private componentFactory: ComponentFactory<any>;
-
 	/**
 	 * Constructs BannerService.
 	 *
@@ -82,18 +73,14 @@ export class BannerService implements OnDestroy {
 	 * }
 	 * ```
 	 *
-	 * @param {any} [bannerComp=null] If provided, used to resolve component factory
+	 * @param {any} [bannerComp=Banner] If provided, used to resolve component factory
 	 * @memberof BannerService
 	 */
-	showBanner(bannerObj: BannerContent | NotificationContent | ToastContent, bannerComp = null): Banner {
-		if (!bannerComp) {
-			this.componentFactory = this.componentFactoryResolver.resolveComponentFactory(Banner);
-		} else {
-			this.componentFactory = this.componentFactoryResolver.resolveComponentFactory(bannerComp);
-		}
+	showBanner(bannerObj: BannerContent | NotificationContent | ToastContent, bannerComp = Banner) {
+		const componentFactory = this.componentFactoryResolver.resolveComponentFactory(bannerComp);
 
-		let bannerRef = this.componentFactory.create(this.injector);
-		bannerRef.instance.bannerObj = bannerObj;
+		let bannerRef = componentFactory.create(this.injector);
+		bannerRef.instance.bannerObj = bannerObj as any; // typescript isn't being very smart here, so we type to any
 		this.bannerRefs.push(bannerRef);
 
 		this.onClose = bannerRef.instance.close;
@@ -106,7 +93,7 @@ export class BannerService implements OnDestroy {
 
 			// get or create a container for alert list
 			let bannerClassName = "banner-overlay";
-			let bannerList = body.querySelector("." + bannerClassName);
+			let bannerList = body.querySelector(`.${bannerClassName}`);
 			if (!bannerList) {
 				bannerList = document.createElement("div");
 				bannerList.className = bannerClassName;
@@ -142,6 +129,10 @@ export class BannerService implements OnDestroy {
 		return bannerRef.instance;
 	}
 
+	showToast(bannerObj: BannerContent | NotificationContent | ToastContent, bannerComp = Toast) {
+		return this.showBanner(bannerObj, bannerComp);
+	}
+
 	/**
 	 * Programatically closes banner based on `bannerRef`.
 	 *

src/banner/banner.stories.ts

@@ -7,8 +7,7 @@ import { Component } from "@angular/core";
 
 import { TranslateModule } from "@ngx-translate/core";
 
-import { BannerModule, BannerService } from "../";
-
+import { BannerModule, BannerService } from "./banner.module";
 
 @Component({
 	selector: "app-banner-story",
@@ -19,7 +18,6 @@ import { BannerModule, BannerService } from "../";
 	providers: [BannerService]
 })
 class BannnerStory {
-
 	constructor(private bannerService: BannerService) { }
 
 	showBanner() {
@@ -32,11 +30,34 @@ class BannnerStory {
 	}
 }
 
+@Component({
+	selector: "app-toast-story",
+	template: `
+		<button class="bx--btn bx--btn--primary" (click)="showToast()">Show info toast</button>
+		<div class="banner-container"></div>
+	`,
+	providers: [BannerService]
+})
+class ToastStory {
+	constructor(private bannerService: BannerService) { }
+
+	showToast() {
+		this.bannerService.showToast({
+			type: "info",
+			title: "Sample toast",
+			subtitle: "Sample subtitle message",
+			caption: "Sample caption",
+			target: ".banner-container"
+		});
+	}
+}
+
 storiesOf("Banner", module)
 	.addDecorator(
 		moduleMetadata({
 			declarations: [
-				BannnerStory
+				BannnerStory,
+				ToastStory
 			],
 			imports: [
 				BannerModule,
@@ -62,9 +83,14 @@ storiesOf("Banner", module)
 		template: `
 			<ibm-toast [bannerObj]="{
 				type: 'error',
-				title: 'Sample banner',
+				title: 'Sample toast',
 				subtitle: 'Sample subtitle message',
 				caption: 'Sample caption'
 			}"></ibm-toast>
 		`
+	}))
+	.add("Dynamic toast", () => ({
+		template: `
+			<app-toast-story></app-toast-story>
+		`
 	}));

src/banner/toast.component.ts

@@ -1,8 +1,8 @@
 import { Component, Input } from "@angular/core";
 
-import { Banner } from "./banner.component";
 import { BannerService } from "./banner.service";
 import { ToastContent } from "./banner-content.interface";
+import { Banner } from "./banner.component";
 
 /**
  * Banner messages are displayed toward the top of the UI and do not interrupt user’s work.
@@ -22,7 +22,10 @@ import { ToastContent } from "./banner-content.interface";
 			<p class="bx--toast-notification__subtitle" [innerHTML]="bannerObj.subtitle"></p>
 			<p class="bx--toast-notification__caption" [innerHTML]="bannerObj.caption"></p>
 		</div>
-		<button class="bx--toast-notification__close-button" type="button">
+		<button
+			class="bx--toast-notification__close-button"
+			type="button"
+			(click)="onClose()">
 			<svg
 				class="bx--toast-notification-icon"
 				aria-label="close"

webpack.test.js

@@ -30,7 +30,7 @@ module.exports = [{
 	},
 	plugins: [
 		new HtmlWebpackPlugin({
-			template: '<html><body></body></html>'
+			templateContent: '<html><body></body></html>'
 		})
 	],
 }];