Merge pull request #220 from youda97/bannerToNotification

Add notification component and deprecate banner

Author: zvonimirfras

src/banner/banner-content.interface.ts

@@ -1,3 +1,8 @@
+/**
+ * Deprecated in favour of `NotificationContent` (to be removed in v3.0).
+ *
+ * @deprecated
+ */
 export interface BannerContent {
 	type: string;
 	title: string;

src/banner/banner.component.ts

@@ -13,10 +13,12 @@ import { NotificationContent } from "./banner-content.interface";
 import { I18n } from "./../i18n/i18n.module";
 
 /**
+ * Deprecated in favour of `InlineNotification` (to be removed in v3.0).
  * Banner messages are displayed toward the top of the UI and do not interrupt user’s work.
  *
  * @export
  * @class Banner
+ * @deprecated
  */
 @Component({
 	selector: "ibm-banner",
@@ -75,7 +77,9 @@ export class Banner implements OnInit {
 
 	@ViewChild("banner") banner;
 
-	constructor(protected bannerService: BannerService, protected i18n: I18n) {}
+	constructor(protected bannerService: BannerService, protected i18n: I18n) {
+		console.warn("`ibm-banner` has been deprecated in favour of `ibm-inline-notification`");
+	}
 
 	ngOnInit() {
 		if (!this.bannerObj.closeLabel) {

src/banner/banner.module.ts

@@ -10,8 +10,12 @@ import { I18nModule } from "./../i18n/i18n.module";
 
 export { BannerService } from "./banner.service";
 export { Banner } from "./banner.component";
-export { Toast } from "./toast.component";
 
+/**
+ * Deprecated in favour of `NotificationModule` (to be removed in v3.0).
+ *
+ * @deprecated
+ */
 @NgModule({
 	declarations: [
 		Toast,

src/banner/banner.service.ts

@@ -10,15 +10,18 @@ import {
 } from "@angular/core";
 
 import { BannerContent, NotificationContent, ToastContent } from "./banner-content.interface";
-import { Banner, Toast } from "./banner.module";
+import { Banner } from "./banner.module";
+import { Toast } from "./toast.component";
 
 /**
+ * Deprecated in favour of `NotificationService` (to be removed in v3.0).
  * Provides a way to use the banner component.
  *
  * Banners are displayed toward the top of the UI and do not interrupt the user’s work.
  *
  * @export
  * @class BannerService
+ * @deprecated
  */
 @Injectable()
 export class BannerService implements OnDestroy {
@@ -43,6 +46,7 @@ export class BannerService implements OnDestroy {
 		private injector: Injector,
 		private componentFactoryResolver: ComponentFactoryResolver,
 		private applicationRef: ApplicationRef) {
+		console.warn("`BannerService` has been deprecated in favour of `NotificationService`");
 	}
 
 	/**

src/banner/banner.stories.ts

@@ -5,10 +5,12 @@ import { ToastContent } from "./banner-content.interface";
 import { Banner } from "./banner.component";
 
 /**
+ * Deprecated in favour of `ToastNotification` (to be removed in v3.0).
  * Banner messages are displayed toward the top of the UI and do not interrupt user’s work.
  *
  * @export
  * @class Banner
+ * @deprecated
  */
 @Component({
 	selector: "ibm-toast",
@@ -52,6 +54,8 @@ export class Toast extends Banner implements OnInit {
 	@Input() bannerObj: ToastContent;
 
 	ngOnInit() {
+		console.warn("`ibm-toast` has been deprecated in favour of `ibm-toast-notification`");
+
 		if (!this.bannerObj.closeLabel) {
 			this.bannerObj.closeLabel = this.i18n.get().BANNER.CLOSE_BUTTON;
 		}

src/banner/toast.component.ts

@@ -69,6 +69,9 @@
 	"MODAL": {
 		"CLOSE": "Close modal"
 	},
+	"NOTIFICATION": {
+		"CLOSE_BUTTON": "Close alert notification"
+	},
 	"OVERFLOW_MENU": {
 		"OVERFLOW": "Overflow"
 	},

src/i18n/en.json

@@ -25,4 +25,5 @@ export * from "./progress-indicator/progress-indicator.module";
 export * from "./i18n/i18n.module";
 export * from "./pagination/pagination.module";
 export * from "./loading/loading.module";
+export * from "./notification/notification.module";
 export * from "./toggle/toggle.module";

src/index.ts

@@ -0,0 +1,14 @@
+export interface NotificationContent {
+	type: string;
+	title: string;
+	target?: string;
+	duration?: number;
+	smart?: boolean;
+	closeLabel?: string;
+	message: string;
+}
+
+export interface ToastContent extends NotificationContent {
+	subtitle: string;
+	caption: string;
+}

src/notification/notification-content.interface.ts

@@ -0,0 +1,118 @@
+import { TestBed } from "@angular/core/testing";
+
+import { StaticIconModule } from "./../icon/static-icon.module";
+
+import { Notification, NotificationService } from "./notification.module";
+import { I18nModule } from "../i18n/i18n.module";
+
+
+describe("Notification", () => {
+	beforeEach(() => {
+		TestBed.configureTestingModule({
+			declarations: [Notification],
+			providers: [NotificationService],
+			imports: [
+				StaticIconModule,
+				I18nModule
+			]
+		});
+	});
+
+	it("should work", () => {
+		const fixture = TestBed.createComponent(Notification);
+		expect(fixture.componentInstance instanceof Notification).toBe(true);
+	});
+
+	it("should render info notification", () => {
+		const fixture = TestBed.createComponent(Notification);
+		fixture.componentInstance.notificationObj = {
+			type: "info",
+			title: "sample",
+			message: "sample message"
+		};
+		fixture.detectChanges();
+
+		expect(fixture.nativeElement.classList.contains("bx--inline-notification--info")).toBeTruthy();
+	});
+
+	it("should render danger notification", () => {
+		const fixture = TestBed.createComponent(Notification);
+		fixture.componentInstance.notificationObj = {
+			type: "error",
+			title: "sample",
+			message: "sample message"
+		};
+		fixture.detectChanges();
+
+		expect(fixture.nativeElement.classList.contains("bx--inline-notification--error")).toBeTruthy();
+	});
+
+	it("should render info warning notification", () => {
+		const fixture = TestBed.createComponent(Notification);
+		fixture.componentInstance.notificationObj = {
+			type: "warning",
+			title: "sample",
+			message: "sample message"
+		};
+		fixture.detectChanges();
+
+		expect(fixture.nativeElement.classList.contains("bx--inline-notification--warning")).toBeTruthy();
+	});
+
+	it("should render info success notification", () => {
+		const fixture = TestBed.createComponent(Notification);
+		fixture.componentInstance.notificationObj = {
+			type: "success",
+			title: "sample",
+			message: "sample message"
+		};
+		fixture.detectChanges();
+
+		expect(fixture.nativeElement.classList.contains("bx--inline-notification--success")).toBeTruthy();
+	});
+
+	it("should display correct message", () => {
+		const fixture = TestBed.createComponent(Notification);
+		fixture.componentInstance.notificationObj = {
+			type: "success",
+			title: "sample",
+			message: "sample message"
+		};
+		fixture.detectChanges();
+
+		let p = fixture.nativeElement.querySelector(".bx--inline-notification__subtitle");
+
+		expect(p.innerHTML.trim()).toEqual("sample message");
+	});
+
+	it("should emit change when close button is clicked", () => {
+		const fixture = TestBed.createComponent(Notification);
+		fixture.componentInstance.notificationObj = {
+			type: "success",
+			title: "sample",
+			message: "sample message"
+		};
+		fixture.detectChanges();
+
+		spyOn(fixture.componentInstance.close, "emit");
+
+		let button = fixture.nativeElement.querySelector(".bx--inline-notification__close-button");
+
+		button.click();
+		expect(fixture.componentInstance.close.emit).toHaveBeenCalled();
+	});
+
+	it("should emit change when notification is closed programmatically", () => {
+		const fixture = TestBed.createComponent(Notification);
+		fixture.componentInstance.notificationObj = {
+			type: "info",
+			title: "sample",
+			message: "sample message"
+		};
+		fixture.detectChanges();
+
+		fixture.componentInstance.destroy();
+
+		expect(fixture.componentInstance);
+	});
+});