Merge pull request #10 from callums/master

Refactor banner.component to carbon styles

Author: cal-smith

src/banner/banner.component.ts

@@ -18,19 +18,36 @@ import { BannerService } from "./banner.service";
 @Component({
 	selector: "ibm-banner",
 	template: `
-	<div class="banner--{{bannerObj.type}}" *ngIf="bannerObj" role="alert" #banner>
-		<span class="icon" aria-hidden="true">
-			<ibm-static-icon icon="info_fill" *ngIf="bannerObj.type === 'info'"></ibm-static-icon>
-			<ibm-static-icon icon="warning_fill" *ngIf="bannerObj.type === 'warning'"></ibm-static-icon>
-			<ibm-static-icon icon="failure_fill" *ngIf="bannerObj.type === 'danger'"></ibm-static-icon>
-			<ibm-static-icon icon="success_fill" *ngIf="bannerObj.type === 'success'"></ibm-static-icon>
-		</span>
-		<p [innerHTML]="bannerObj.message"></p>
-		<button type="button" class="close--dark-sm" (click)="onClose()" attr.aria-label="{{'BANNER.CLOSE_BUTTON' | translate}}">
-			<ibm-static-icon icon="x" size="sm" classList="close_icon"></ibm-static-icon>
+	<div
+		#banner
+		class="bx--inline-notification bx--inline-notification--{{bannerObj.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"/>
+			</svg>
+			<div class="bx--inline-notification__text-wrapper">
+				<p [innerHTML]="bannerObj.title" class="bx--inline-notification__title"></p>
+				<p [innerHTML]="bannerObj.message" class="bx--inline-notification__subtitle"></p>
+			</div>
+		</div>
+		<button
+			(click)="onClose()"
+			class="bx--inline-notification__close-button"
+			type="button">
+			<svg
+				class="bx--inline-notification__close-icon"
+				aria-label="close"
+				width="10"
+				height="10"
+				viewBox="0 0 10 10"
+				xmlns="http://www.w3.org/2000/svg">
+				<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: [BannerService]
 })
 export class Banner {
 	/**

src/banner/banner.stories.ts

@@ -0,0 +1,84 @@
+import { storiesOf, moduleMetadata } from "@storybook/angular";
+import { withNotes } from "@storybook/addon-notes";
+import { action } from "@storybook/addon-actions";
+import { withKnobs, boolean, object } from "@storybook/addon-knobs/angular";
+
+import { Component } from "@angular/core";
+
+import { TranslateModule } from "@ngx-translate/core";
+
+import { BannerModule, BannerService } from "../";
+
+
+@Component({
+	selector: "app-banner-story",
+	template: `
+		<button class="bx--btn bx--btn--primary" (click)="showBanner()">Show info banner</button>
+		<div class="banner-container"></div>
+	`,
+	providers: [BannerService]
+})
+class BannnerStory {
+
+	constructor(private bannerService: BannerService) { }
+
+	showBanner() {
+		this.bannerService.showBanner({
+			type: "info",
+			title: "Sample banner",
+			message: "Sample info message",
+			target: ".banner-container"
+		});
+	}
+}
+
+storiesOf("Banner", module)
+	.addDecorator(
+		moduleMetadata({
+			declarations: [
+				BannnerStory
+			],
+			imports: [
+				BannerModule,
+				TranslateModule.forRoot()
+			]
+		})
+	)
+	.addDecorator(withKnobs)
+	.add("Basic", () => ({
+		template: `
+			<ibm-banner [bannerObj]="{type: 'error', title: 'Sample banner', message: 'Sample error message'}"></ibm-banner>
+			<ibm-banner [bannerObj]="{type: 'info', title: 'Sample banner', message: 'Sample info message'}"></ibm-banner>
+			<ibm-banner [bannerObj]="{type: 'success', title: 'Sample banner', message: 'Sample success message'}"></ibm-banner>
+			<ibm-banner [bannerObj]="{type: 'warning', title: 'Sample banner', message: 'Sample warning message'}"></ibm-banner>
+		`
+	}))
+	.add("Dynamic", () => ({
+		template: `
+			<app-banner-story></app-banner-story>
+		`
+	}))
+	.add("Toast", () => ({
+		template: `
+			<h4>Coming soon</h4>
+			<em>Teaser ...</em>
+			<div class="bx--toast-notification bx--toast-notification--info" role="alert">
+				<div class="bx--toast-notification__details">
+					<h3 class="bx--toast-notification__title">Notification title</h3>
+					<p class="bx--toast-notification__subtitle">Subtitle text goes here.</p>
+					<p class="bx--toast-notification__caption">Time stamp [00:00:00]</p>
+				</div>
+				<button class="bx--toast-notification__close-button" type="button">
+					<svg
+						class="bx--toast-notification-icon"
+						aria-label="close"
+						width="10"
+						height="10"
+						viewBox="0 0 10 10"
+						xmlns="http://www.w3.org/2000/svg">
+						<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>
+		`
+	}));