modal update

Author: cal-smith

src/modal/README.md

@@ -8,9 +8,10 @@ import { Component } from "@angular/core";
 @Component({
 	selector: "ibm-modal-footer",
 	template: `
-		<footer role="contentinfo" class="modal_footer--border">
+		<footer role="contentinfo" class="bx--modal-footer">
 			<ng-content></ng-content>
 		</footer>
-	`
+	`,
+	styleUrls: ["./../../node_modules/carbon-components/scss/components/modal/_modal.scss"]
 })
 export class ModalFooterComponent {}

src/modal/modal-footer.component.ts

@@ -18,16 +18,31 @@ import { Component, Output, EventEmitter, Input } from "@angular/core";
 @Component({
 	selector: "ibm-modal-header",
 	template: `
-		<header class="{{modalType}} modal_header" role="banner">
-			<h5 class="header_title">
+		<header class="{{modalType}} bx--modal-header" role="banner">
+			<h5 class="bx--modal-header__heading">
 				<ng-content></ng-content>
 			</h5>
-			<button class="close--white-md" attr.aria-label="{{'MODAL.CLOSE' | translate}}" (click)="onClose()">
-				<ibm-static-icon icon="x" classList="close_icon" size="sm"></ibm-static-icon>
+			<button
+				class="bx--modal-close"
+				attr.aria-label="{{'MODAL.CLOSE' | translate}}"
+				(click)="onClose()">
+				<svg
+					class="bx--modal-close__icon"
+					fill-rule="evenodd"
+					height="10"
+					role="img"
+					viewBox="0 0 10 10"
+					width="10"
+					aria-label="close the modal"
+					alt="close the modal">
+					<title>close the modal</title>
+					<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"></path>
+				</svg>
 			</button>
 		</header>
 
-	`
+	`,
+	styleUrls: ["./../../node_modules/carbon-components/scss/components/modal/_modal.scss"]
 })
 export class ModalHeaderComponent {
 	/**

src/modal/modal-header.component.ts

@@ -86,15 +86,8 @@ import { cycleTabs } from "./../common/tab.service";
 	selector: "ibm-modal",
 	template: `
 		<ibm-overlay (overlaySelect)="overlaySelected.emit()">
-			<div [ngClass]="{
-					'modal--sm': size === 'sm',
-					'modal': size === 'default' || size === 'md',
-					'modal--lg': size === 'lg',
-					'modal--xl': size === 'xl',
-					'modal--xxl': size === 'xxl',
-					'modal--warning': modalType === 'warning',
-					'modal--error': modalType === 'error'
-				}"
+			<div
+				class="bx--modal-container"
 				[@modalState]="modalState"
 				role="main"
 				aria-modal="true"
@@ -107,17 +100,16 @@ import { cycleTabs } from "./../common/tab.service";
 	`,
 	animations: [
 		trigger("modalState", [
-			// state("in", style({opacity: 1, transform: "translate(0, 0)"})),
 			state("void", style({transform: "translate(0, 5%)", opacity: 0})),
 			transition(":enter", [
 				animate("200ms ease-in"),
 			]),
 			transition(":leave", [
-				// style({opacity: 1, transform: "translate(0, 0"}),
 				animate(200, style({transform: "translate(0, 5%)", opacity: 0}))
 			])
 		])
-	]
+	],
+	styleUrls: ["./../../node_modules/carbon-components/scss/components/modal/_modal.scss"]
 })
 export class ModalComponent implements OnInit, OnDestroy {
 	/**
@@ -126,7 +118,7 @@ export class ModalComponent implements OnInit, OnDestroy {
 	 * @type {"sm" | "md" | "default" | "lg" | "xl" | "xxl"}
 	 * @memberof ModalComponent
 	 */
-	@Input() size = "xl";
+	@Input() size = "default";
 	/**
 	 * Classification of the modal.
 	 * @type {"default" | "warning" | "error"}

src/modal/modal.component.ts

@@ -0,0 +1,80 @@
+import { storiesOf, moduleMetadata } from "@storybook/angular";
+import { withKnobs } from "@storybook/addon-knobs/angular";
+
+import { TranslateModule } from "@ngx-translate/core";
+
+import { ModalModule } from "../";
+import { Component, Injector } from "@angular/core";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { Modal, ModalService } from "../";
+
+@Modal()
+@Component({
+	selector: "app-sample-modal",
+	template: `
+		<ibm-modal>
+			<ibm-modal-header (closeSelect)="closeModal()">Header text</ibm-modal-header>
+			<section class="bx--modal-content">
+				<h1>Sample modal works.</h1>
+				<p class="bx--modal-content__text">{{modalText}}</p>
+			</section>
+			<ibm-modal-footer>
+				<button class="bx--btn bx--btn--primary" (click)="closeModal()">Close</button>
+			</ibm-modal-footer>
+		</ibm-modal>
+	`,
+	styleUrls: ["./../../node_modules/carbon-components/scss/components/modal/_modal.scss"]
+})
+class SampleModalComponent {
+	modalText: string;
+	constructor(private injector: Injector) {
+		this.modalText = this.injector.get("modalText");
+	}
+}
+
+@Modal()
+@Component({
+	selector: "app-modal-story",
+	template: `
+		<button class="bx--btn bx--btn--primary" (click)="openModal()">Open Modal</button>
+	`,
+	styleUrls: ["./../../node_modules/carbon-components/scss/components/button/_button.scss"]
+})
+class ModalStory {
+
+	constructor(private modalService: ModalService) { }
+
+	openModal() {
+		this.modalService.create({
+			component: SampleModalComponent,
+			inputs: {
+				modalText: "Hello, World!"
+			}
+		});
+	}
+}
+
+storiesOf("Modal", module)
+	.addDecorator(
+		moduleMetadata({
+			declarations: [
+				ModalStory,
+				SampleModalComponent
+			],
+			imports: [
+				ModalModule,
+				BrowserAnimationsModule,
+				TranslateModule.forRoot()
+			],
+			entryComponents: [
+				SampleModalComponent
+			]
+		})
+	)
+	.addDecorator(withKnobs)
+	.add("Basic", () => ({
+		template: `
+	<app-modal-story></app-modal-story>
+	<ibm-modal-placeholder></ibm-modal-placeholder>
+	`
+	}));

src/modal/modal.stories.ts

@@ -19,13 +19,13 @@ import {
 	selector: "ibm-overlay",
 	template: `
 		<section
-			class="modal-backdrop"
+			class="bx--modal bx--modal-tall is-visible"
 			(click)="overlayClick($event)"
-			style="display:block;"
 			#overlay>
 			<ng-content></ng-content>
 		</section>
-	`
+	`,
+	styleUrls: ["./../../node_modules/carbon-components/scss/components/modal/_modal.scss"]
 })
 export class OverlayComponent {
 	/**