Merge pull request #9 from cal-smith/master

feat(toast): add toast banner

Author: cal-smith

.npmrc

@@ -46,7 +46,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "[email protected]:ibm/carbon-components-angular.git"
+    "url": "[email protected]:IBM/carbon-components-angular.git"
   },
   "license": "Apache-2",
   "author": "IBM",

package.json

@@ -24,6 +24,6 @@ if [[ $TRAVIS_BRANCH == "master" ]]; then
 	git init
 	git add .
 	git commit -m "Deploy to GitHub Pages"
-	git push --force "[email protected]:ibm/carbon-components-angular.git" master:gh-pages > /dev/null 2>&1
+	git push --force "[email protected]:IBM/carbon-components-angular.git" master:gh-pages > /dev/null 2>&1
 	exit 0;
 fi

scripts/deploy.sh

@@ -2,7 +2,7 @@
 
 set -e
 
-[email protected]:ibm/carbon-components-angular.git
+[email protected]:IBM/carbon-components-angular.git
 
 npm run lint
 

scripts/prepush.sh

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

src/banner/banner-content.interface.ts

@@ -8,6 +8,7 @@ import {
 } from "@angular/core";
 
 import { BannerService } from "./banner.service";
+import { NotificationContent } from "./banner-content.interface";
 
 /**
  * Banner messages are displayed toward the top of the UI and do not interrupt user’s work.
@@ -20,15 +21,15 @@ import { BannerService } from "./banner.service";
 	template: `
 	<div
 		#banner
-		class="bx--inline-notification bx--inline-notification--{{bannerObj['type']}}"
+		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>
+				<p [innerHTML]="bannerObj.title" class="bx--inline-notification__title"></p>
+				<p [innerHTML]="bannerObj.message" class="bx--inline-notification__subtitle"></p>
 			</div>
 		</div>
 		<button
@@ -51,16 +52,14 @@ import { BannerService } from "./banner.service";
 })
 export class Banner {
 	/**
-	 * Can have `type` and `message` members.
+	 * Can have `type`, `title`, and `message` members.
 	 *
 	 * `type` can be one of `"info"`, `"warning"`, `"danger"`, `"success"`
 	 *
 	 * `message` is message for banner to display
 	 *
-	 * @type {Object}
-	 * @memberof Banner
 	 */
-	@Input() bannerObj: Object;
+	@Input() bannerObj: NotificationContent;
 
 	/**
 	 * Emits on close.

src/banner/banner.component.ts

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

src/banner/banner.module.ts

@@ -10,6 +10,7 @@ import {
 } from "@angular/core";
 
 import { Banner } from "./banner.component";
+import { BannerContent, NotificationContent, ToastContent } from "./banner-content.interface";
 
 /**
  * Provides a way to use the banner component.
@@ -84,7 +85,7 @@ export class BannerService implements OnDestroy {
 	 * @param {any} [bannerComp=null] If provided, used to resolve component factory
 	 * @memberof BannerService
 	 */
-	showBanner(bannerObj, bannerComp = null): Banner {
+	showBanner(bannerObj: BannerContent | NotificationContent | ToastContent, bannerComp = null): Banner {
 		if (!bannerComp) {
 			this.componentFactory = this.componentFactoryResolver.resolveComponentFactory(Banner);
 		} else {

src/banner/banner.service.ts

@@ -60,25 +60,11 @@ storiesOf("Banner", module)
 	}))
 	.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>
+			<ibm-toast [bannerObj]="{
+				type: 'error',
+				title: 'Sample banner',
+				subtitle: 'Sample subtitle message',
+				caption: 'Sample caption'
+			}"></ibm-toast>
 		`
 	}));

src/banner/banner.stories.ts

@@ -0,0 +1,50 @@
+import { Component, Input } from "@angular/core";
+
+import { Banner } from "./banner.component";
+import { BannerService } from "./banner.service";
+import { ToastContent } from "./banner-content.interface";
+
+/**
+ * Banner messages are displayed toward the top of the UI and do not interrupt user’s work.
+ *
+ * @export
+ * @class Banner
+ */
+@Component({
+	selector: "ibm-toast",
+	template: `
+	<div
+		#banner
+		class="bx--toast-notification bx--toast-notification--{{bannerObj['type']}}"
+		role="alert">
+		<div class="bx--toast-notification__details">
+			<h3 class="bx--toast-notification__title" [innerHTML]="bannerObj.title"></h3>
+			<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">
+			<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>
+	`,
+	providers: [ BannerService ]
+})
+export class Toast extends Banner {
+	/**
+	 * Can have `type`, `title`, `subtitle`, and `caption` members.
+	 *
+	 * `type` can be one of `"info"`, `"warning"`, `"danger"`, `"success"`
+	 *
+	 * `message` is message for banner to display
+	 *
+	 */
+	@Input() bannerObj: ToastContent;
+}