Fix review comments

Author: youda97

src/banner/banner.module.ts

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

src/banner/banner.service.ts

@@ -10,7 +10,8 @@ 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).
@@ -45,6 +46,8 @@ 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

@@ -1,4 +1,4 @@
-export interface InlineNotificationContent {
+export interface NotificationContent {
 	type: string;
 	title: string;
 	target?: string;
@@ -8,7 +8,7 @@ export interface InlineNotificationContent {
 	message: string;
 }
 
-export interface ToastNotificationContent extends InlineNotificationContent {
+export interface ToastContent extends NotificationContent {
 	subtitle: string;
 	caption: string;
 }

src/notification/notification-content.interface.ts

@@ -2,14 +2,14 @@ import { TestBed } from "@angular/core/testing";
 
 import { StaticIconModule } from "./../icon/static-icon.module";
 
-import { InlineNotification, NotificationService } from "./notification.module";
+import { Notification, NotificationService } from "./notification.module";
 import { I18nModule } from "../i18n/i18n.module";
 
 
 describe("Notification", () => {
 	beforeEach(() => {
 		TestBed.configureTestingModule({
-			declarations: [InlineNotification],
+			declarations: [Notification],
 			providers: [NotificationService],
 			imports: [
 				StaticIconModule,
@@ -19,12 +19,12 @@ describe("Notification", () => {
 	});
 
 	it("should work", () => {
-		const fixture = TestBed.createComponent(InlineNotification);
-		expect(fixture.componentInstance instanceof InlineNotification).toBe(true);
+		const fixture = TestBed.createComponent(Notification);
+		expect(fixture.componentInstance instanceof Notification).toBe(true);
 	});
 
 	it("should render info notification", () => {
-		const fixture = TestBed.createComponent(InlineNotification);
+		const fixture = TestBed.createComponent(Notification);
 		fixture.componentInstance.notificationObj = {
 			type: "info",
 			title: "sample",
@@ -37,7 +37,7 @@ describe("Notification", () => {
 	});
 
 	it("should render danger notification", () => {
-		const fixture = TestBed.createComponent(InlineNotification);
+		const fixture = TestBed.createComponent(Notification);
 		fixture.componentInstance.notificationObj = {
 			type: "danger",
 			title: "sample",
@@ -50,7 +50,7 @@ describe("Notification", () => {
 	});
 
 	it("should render info warning", () => {
-		const fixture = TestBed.createComponent(InlineNotification);
+		const fixture = TestBed.createComponent(Notification);
 		fixture.componentInstance.notificationObj = {
 			type: "warning",
 			title: "sample",
@@ -63,7 +63,7 @@ describe("Notification", () => {
 	});
 
 	it("should render info success", () => {
-		const fixture = TestBed.createComponent(InlineNotification);
+		const fixture = TestBed.createComponent(Notification);
 		fixture.componentInstance.notificationObj = {
 			type: "success",
 			title: "sample",
@@ -76,7 +76,7 @@ describe("Notification", () => {
 	});
 
 	it("should display correct message", () => {
-		const fixture = TestBed.createComponent(InlineNotification);
+		const fixture = TestBed.createComponent(Notification);
 		fixture.componentInstance.notificationObj = {
 			type: "success",
 			title: "sample",
@@ -90,7 +90,7 @@ describe("Notification", () => {
 	});
 
 	it("should emit change when close button is clicked", () => {
-		const fixture = TestBed.createComponent(InlineNotification);
+		const fixture = TestBed.createComponent(Notification);
 		fixture.componentInstance.notificationObj = {
 			type: "success",
 			title: "sample",
@@ -107,7 +107,7 @@ describe("Notification", () => {
 	});
 
 	it("should emit change when notification is closed programmatically", () => {
-		const fixture = TestBed.createComponent(InlineNotification);
+		const fixture = TestBed.createComponent(Notification);
 		fixture.componentInstance.notificationObj = {
 			type: "info",
 			title: "sample",

src/notification/notification.component.spec.ts

@@ -5,26 +5,23 @@ import {
 	EventEmitter,
 	ComponentRef,
 	ViewChild,
-	OnInit
+	OnInit,
+	HostBinding
 } from "@angular/core";
 
 import { NotificationService } from "./notification.service";
-import { InlineNotificationContent } from "./notification-content.interface";
+import { NotificationContent } from "./notification-content.interface";
 import { I18n } from "./../i18n/i18n.module";
 
 /**
- * InlineNotification messages are displayed toward the top of the UI and do not interrupt user’s work.
+ * Notification messages are displayed toward the top of the UI and do not interrupt user’s work.
  *
  * @export
- * @class InlineNotification
+ * @class Notification
  */
 @Component({
-	selector: "ibm-inline-notification",
+	selector: "ibm-notification",
 	template: `
-	<div
-		#notification
-		class="bx--inline-notification bx--inline-notification--{{notificationObj.type}}"
-		role="alert">
 		<div class="bx--inline-notification__details">
 			<svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
 				<path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zM3.293 4.707l8 8 1.414-1.414-8-8-1.414 1.414z" fill-rule="evenodd"/>
@@ -48,11 +45,11 @@ import { I18n } from "./../i18n/i18n.module";
 				<path d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z" fill-rule="nonzero"/>
 			</svg>
 		</button>
-	</div>
+
 	`,
 	providers: [NotificationService]
 })
-export class InlineNotification implements OnInit {
+export class Notification implements OnInit {
 	/**
 	 * Can have `type`, `title`, and `message` members.
 	 *
@@ -61,20 +58,29 @@ export class InlineNotification implements OnInit {
 	 * `message` is message for notification to display
 	 *
 	 */
-	@Input() notificationObj: InlineNotificationContent;
+	@Input() notificationObj: NotificationContent;
 
 	/**
 	 * Emits on close.
 	 *
 	 * @type {EventEmitter<any>}
-	 * @memberof InlineNotification
+	 * @memberof Notification
 	 */
 	@Output() close: EventEmitter<any> = new EventEmitter();
 
-	componentRef: ComponentRef<InlineNotification>;
+	componentRef: ComponentRef<Notification>;
 
 	@ViewChild("notification") notification;
 
+	@HostBinding("attr.id") notificationID = "notification";
+	@HostBinding("class.bx--inline-notification") notificationClass = true;
+	@HostBinding("attr.role") role = "alert";
+
+	@HostBinding("class.bx--inline-notification--error") get isError() { return this.notificationObj.type === "error"; }
+	@HostBinding("class.bx--inline-notification--info") get isInfo() { return this.notificationObj.type === "info"; }
+	@HostBinding("class.bx--inline-notification--success") get isSuccess() { return this.notificationObj.type === "success"; }
+	@HostBinding("class.bx--inline-notification--warning") get isWarning() { return this.notificationObj.type === "warning"; }
+
 	constructor(protected notificationService: NotificationService, protected i18n: I18n) {}
 
 	ngOnInit() {
@@ -86,7 +92,7 @@ export class InlineNotification implements OnInit {
 	/**
 	 * Emits close event.
 	 *
-	 * @memberof InlineNotification
+	 * @memberof Notification
 	 */
 	onClose() {
 		this.close.emit();

…ication/inline-notification.component.ts …c/notification/notification.component.tssrc/notification/inline-notification.component.ts renamed to src/notification/notification.component.ts src/notification/inline-notification.component.ts renamed to src/notification/notification.component.ts

@@ -3,25 +3,25 @@ import { CommonModule } from "@angular/common";
 
 import { StaticIconModule } from "./../icon/static-icon.module";
 
-import { ToastNotification } from "./toast-notification.component";
-import { InlineNotification } from "./inline-notification.component";
+import { Toast } from "./toast.component";
+import { Notification } from "./notification.component";
 import { NotificationService } from "./notification.service";
 import { I18nModule } from "./../i18n/i18n.module";
 
 export { NotificationService } from "./notification.service";
-export { InlineNotification } from "./inline-notification.component";
-export { ToastNotification } from "./toast-notification.component";
+export { Notification } from "./notification.component";
+export { Toast } from "./toast.component";
 
 @NgModule({
 	declarations: [
-		InlineNotification,
-		ToastNotification
+		Notification,
+		Toast
 	],
 	exports: [
-		InlineNotification,
-		ToastNotification
+		Notification,
+		Toast
 	],
-	entryComponents: [InlineNotification, ToastNotification],
+	entryComponents: [Notification, Toast],
 	imports: [CommonModule, StaticIconModule, I18nModule],
 	providers: [NotificationService]
 })