Merge branch 'master' of https://github.com/youda97/carbon-components-angular

Author: youda97

.storybook/manager-head.html

@@ -0,0 +1,9 @@
+<meta property="og:title" content="Carbon Components Angular">
+<meta property="og:description" content="An Angular implementation of the Carbon Design System for IBM.">
+<meta property="og:image" content="https://angular.carbondesignsystem.com/carbon.jpg">
+<meta property="og:url" content="https://angular.carbondesignsystem.com">
+
+<meta name="twitter:title" content="Carbon Components Angular">
+<meta name="twitter:description" content="An Angular implementation of the Carbon Design System for IBM.">
+<meta name="twitter:image" content="https://angular.carbondesignsystem.com/carbon.jpg">
+<meta name="twitter:card" content="summary_large_image">

.storybook/public/carbon.jpg

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "build": "bash scripts/build.sh",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "start-storybook -s .storybook/public -p 6006",
     "docs:build": "compodoc src -p tsconfig.json",
     "docs:server": "compodoc src -p tsconfig.json -s -w",
     "lint": "tslint src/**/*.ts && stylelint src/**/*.scss --config .stylelintrc.yml",
@@ -14,7 +14,7 @@
     "utils:add": "git subtree add --prefix=src/utils [email protected]:peretz/utils.git master --squash",
     "utils:update": "git subtree pull --prefix=src/utils [email protected]:peretz/utils.git master --squash",
     "prepush": "bash scripts/prepush.sh",
-    "build-storybook": "build-storybook -c .storybook -o dist/docs/storybook",
+    "build-storybook": "build-storybook -c .storybook -s .storybook/public -o dist/docs/storybook",
     "semantic-release": "semantic-release",
     "commitmsg": "commitlint -E GIT_PARAMS",
     "commit": "git-cz"

package.json

@@ -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.spec.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.component.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.module.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.service.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/banner.stories.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"

src/banner/toast.component.ts

@@ -1,5 +1,6 @@
 import { Component } from "@angular/core";
 import { Dialog } from "../dialog.component";
+import { position } from "../../utils/position";
 
 /**
  * Extend the `Dialog` component to create an overflow menu.
@@ -9,16 +10,27 @@ import { Dialog } from "../dialog.component";
 @Component({
 	selector: "ibm-overflow-menu-pane",
 	template: `
-		<div #dialog>
-			<ul
-				class="bx--overflow-menu-options bx--overflow-menu-options--open"
-				tabindex="-1">
-				<ng-template
-					[ngTemplateOutlet]="dialogConfig.content"
-					[ngTemplateOutletContext]="{overflowMenu: this}">
-				</ng-template>
-			</ul>
-		</div>
-		`
+		<ul
+			#dialog
+			class="bx--overflow-menu-options bx--overflow-menu-options--open"
+			tabindex="-1">
+			<ng-template
+				[ngTemplateOutlet]="dialogConfig.content"
+				[ngTemplateOutletContext]="{overflowMenu: this}">
+			</ng-template>
+		</ul>
+	`
 })
-export class OverflowMenuPane extends Dialog {}
+export class OverflowMenuPane extends Dialog {
+	onDialogInit() {
+		/**
+		 *  -20 shifts the menu up to compensate for the
+		 *  extra offset generated by the wrapper component.
+		 *
+		 *  60 shifts the menu right to align the arrow.
+		 * (position service trys it's best to center everything,
+		 * so we need to add some compensation)
+		 */
+		this.addGap["bottom"] = pos => position.addOffset(pos, -20, 60);
+	}
+}