merge

cal-smith · cal-smith · commit b22506e21e1e · 2018-10-17T12:07:34.000-04:00
diff --git a/.storybook/tsconfig.json b/.storybook/tsconfig.json
@@ -5,7 +5,7 @@
 		"emitDecoratorMetadata": true,
 		"experimentalDecorators": true,
 		"lib": [
-			"es2015",
+			"es2016",
 			"dom"
 		],
 		"sourceMap": true,
diff --git a/src/accordion/accordion-item.component.ts b/src/accordion/accordion-item.component.ts
@@ -36,7 +36,9 @@ export class AccordionItem {
 
 	@HostBinding("class.bx--accordion__item") itemClass = true;
 	@HostBinding("class.bx--accordion__item--active") @Input() expanded = false;
-	@HostBinding("style.display") @HostBinding("attr.role") itemType = "list-item";
+	@HostBinding("style.display") itemType = "list-item";
+	@HostBinding("attr.role") role = "heading";
+	@HostBinding("attr.aria-level") @Input() ariaLevel = 3;
 
 	constructor() {
 		AccordionItem.accordionItemCount++;
diff --git a/src/index.ts b/src/index.ts
@@ -21,3 +21,4 @@ export * from "./radio/radio.module";
 export * from "./input/input.module";
 export * from "./select/select.module";
 export * from "./tiles/tiles.module";
+export * from "./progress-indicator/progress-indicator.module";
diff --git a/src/input/input.directive.ts b/src/input/input.directive.ts
@@ -5,7 +5,7 @@ import { Directive, HostBinding } from "@angular/core";
  *
  * Example:
  *
- * ```hmtl
+ * ```html
  * <input ibmText/>
  * ```
  *
diff --git a/src/input/input.module.ts b/src/input/input.module.ts
@@ -6,15 +6,18 @@ import { CommonModule } from "@angular/common";
 // imports
 import { LabelComponent } from "./label.component";
 import { TextInput } from "./input.directive";
+import { TextArea } from "./text-area.directive";
 
 @NgModule({
 	declarations: [
 		LabelComponent,
-		TextInput
+		TextInput,
+		TextArea
 	],
 	exports: [
 		LabelComponent,
-		TextInput
+		TextInput,
+		TextArea
 	],
 	imports: [
 		CommonModule,
diff --git a/src/input/input.stories.ts b/src/input/input.stories.ts
@@ -22,4 +22,8 @@ storiesOf("Input", module).addDecorator(
 		template: `
 			<input ibmText placeholder="Optional placeholder text"/>
 		`
+	})).add("TextArea", () => ({
+		template: `
+		<textarea ibmTextArea placeholder="Optional placeholder text" rows="4" cols="50"></textarea>
+		`
 	}));
diff --git a/src/input/text-area.directive.ts b/src/input/text-area.directive.ts
@@ -0,0 +1,19 @@
+import { Directive, HostBinding } from "@angular/core";
+
+/**
+ * A directive for applying styling to a textarea element.
+ *
+ * Example:
+ *
+ * ```html
+ * <textarea ibmTextArea></textarea>
+ * ```
+ *
+ * See the [vanilla carbon docs](http://www.carbondesignsystem.com/components/text-input/code) for more detail.
+ */
+@Directive({
+	selector: "[ibmTextArea]"
+})
+export class TextArea {
+	@HostBinding("class.bx--text-area") baseClass = true;
+}
diff --git a/src/modal/alert-modal.component.ts b/src/modal/alert-modal.component.ts
@@ -58,7 +58,7 @@ import Modal from "./modal.decorator";
 @Component({
 	selector: "ibm-alert-modal",
 	template: `
-		<ibm-modal [modalType]="modalType">
+		<ibm-modal [modalType]="modalType" [modalLabel]="modalTitle">
 			<ibm-modal-header (closeSelect)="closeModal()">
 				<p class="bx--modal-header__label bx--type-delta">{{modalLabel}}</p>
       			<p class="bx--modal-header__heading bx--type-beta">{{modalTitle}}</p>
diff --git a/src/modal/alert-modal.interface.ts b/src/modal/alert-modal.interface.ts
@@ -1,3 +1,8 @@
+export enum AlertModalType {
+	default = "default",
+	danger = "danger"
+}
+
 export interface AlertModalData {
 	/**
 	 * Use of `modalType` is deprecated, use `type` instead
@@ -6,7 +11,7 @@ export interface AlertModalData {
 	/**
 	 * type of the modal
 	 */
-	type?: "default" | "danger";
+	type?: AlertModalType;
 	/**
 	 * Use of `modalLabel` is deprecated, use `label` instead
 	 */
@@ -37,6 +42,15 @@ export interface AlertModalData {
 	buttons?: Array<ModalButton>;
 }
 
+export enum ModalButtonType {
+	primary = "primary",
+	secondary = "secondary",
+	tertiary = "tertiary",
+	ghost = "ghost",
+	danger = "danger",
+	danger_primary = "danger--primary"
+}
+
 export interface ModalButton {
 	/**
 	 * Display value of the button
@@ -45,9 +59,9 @@ export interface ModalButton {
 	/**
 	 * Button type
 	 */
-	type: "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger--primary" = "primary";
+	type: ModalButtonType;
 	/**
 	 * Callback for the button `click` event
 	 */
-	click: function;
+	click: Function;
 }
diff --git a/src/modal/modal-footer.component.ts b/src/modal/modal-footer.component.ts
@@ -8,7 +8,7 @@ import { Component } from "@angular/core";
 @Component({
 	selector: "ibm-modal-footer",
 	template: `
-		<footer role="contentinfo" class="bx--modal-footer">
+		<footer class="bx--modal-footer">
 			<ng-content></ng-content>
 		</footer>
 	`
diff --git a/src/modal/modal-header.component.ts b/src/modal/modal-header.component.ts
@@ -24,7 +24,7 @@ const EN = require("./../i18n/en.json");
 @Component({
 	selector: "ibm-modal-header",
 	template: `
-		<header class="{{modalType}} bx--modal-header" role="banner">
+		<header class="{{modalType}} bx--modal-header">
 			<div class="bx--modal-header">
 				<ng-content></ng-content>
 			</div>
diff --git a/src/modal/modal.component.ts b/src/modal/modal.component.ts
@@ -90,10 +90,11 @@ import { cycleTabs } from "./../common/tab.service";
 			<div
 				class="bx--modal-container"
 				[@modalState]="modalState"
-				role="main"
+				role="dialog"
 				aria-modal="true"
 				tabindex="0"
 				style="z-index:1;"
+				[attr.aria-label]="modalLabel"
 				#modal>
 				<ng-content></ng-content>
 			</div>
@@ -125,6 +126,13 @@ export class ModalComponent implements AfterViewInit, OnInit, OnDestroy {
 	 * @memberof ModalComponent
 	 */
 	@Input() modalType = "default";
+
+	/**
+	 * Label for the modal.
+	 * @memberof ModalComponent
+	 */
+	@Input() modalLabel = "default";
+
 	/**
 	 * Emits event when click occurs within `n-overlay` element. This is to track click events occuring outside bounds of the `Modal` object.
 	 * @memberof ModalComponent
diff --git a/src/modal/modal.module.ts b/src/modal/modal.module.ts
@@ -1,12 +1,11 @@
 // modules
 import {
 	NgModule,
-	ComponentFactoryResolver,
 	Optional,
 	SkipSelf
 } from "@angular/core";
 import { CommonModule } from "@angular/common";
-import { StaticIcon, StaticIconModule } from "./../icon/static-icon.module";
+import { StaticIconModule } from "./../icon/static-icon.module";
 
 // imports
 import { ModalPlaceholderComponent } from "./modal-placeholder.component";
@@ -22,6 +21,7 @@ import { ButtonModule } from "../forms/forms.module";
 // exports
 export { default as Modal } from "./modal.decorator";
 export { ModalService } from "./modal.service";
+export * from "./alert-modal.interface";
 
 // either provides a new instance of ModalPlaceholderService, or returns the parent
 export function MODAL_PLACEHOLDER_SERVICE_PROVIDER_FACTORY(parentService: ModalPlaceholderService) {
diff --git a/src/modal/modal.service.ts b/src/modal/modal.service.ts
@@ -88,6 +88,15 @@ export class ModalService {
 	 * @memberof ModalService
 	 */
 	show(data: AlertModalData) {
+		for (let key of Object.keys(data)) {
+			if (["modalType", "modalLabel", "modalTitle", "modalContent"].includes(key)) {
+				try {
+					throw new Error(`${key} is deprecated, use ${key.replace("modal", "").toLowerCase()} instead`);
+				} catch (error) {
+					console.warn(error);
+				}
+			}
+		}
 		return this.create({
 			component: AlertModalComponent,
 			inputs: {
diff --git a/src/modal/modal.stories.ts b/src/modal/modal.stories.ts
@@ -5,6 +5,7 @@ import { ModalModule } from "../";
 import { Component, Input, Inject } from "@angular/core";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { Modal, ModalService } from "../";
+import { ModalButton, AlertModalType } from "./alert-modal.interface";
 
 @Modal()
 @Component({
@@ -58,20 +59,20 @@ class ModalStory {
 	`
 })
 class AlertModalStory {
-	@Input() modalType: string;
+	@Input() modalType: AlertModalType;
 	@Input() modalLabel: string;
 	@Input() modalTitle: string;
 	@Input() modalContent: string;
-	@Input() buttons: any;
+	@Input() buttons: Array<ModalButton>;
 
 	constructor(private modalService: ModalService) { }
 
 	openModal() {
 		this.modalService.show({
 			modalType: this.modalType,
-			modalLabel: this.modalLabel,
-			modalTitle: this.modalTitle,
-			modalContent: this.modalContent,
+			label: this.modalLabel,
+			title: this.modalTitle,
+			content: this.modalContent,
 			buttons: this.buttons
 		});
 	}
diff --git a/src/progress-indicator/progress-indicator.component.ts b/src/progress-indicator/progress-indicator.component.ts
@@ -0,0 +1,31 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+	selector: "ibm-progress-indicator",
+	template: `
+	<ul data-progress data-progress-current class="bx--progress">
+		<li
+		class="bx--progress-step bx--progress-step--{{step.state}}"
+		*ngFor="let step of steps; let i = index">
+			<svg *ngIf="step.state == 'complete'" width="16" height="16" viewBox="0 0 16 16">
+				<g fill-rule="nonzero">
+					<path d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
+					<path d="M11.646 5.146l.708.708-5.604 5.603-3.104-3.103.708-.708 2.396 2.397z"/>
+				</g>
+			</svg>
+			<svg *ngIf="step.state == 'current'">
+				<circle cx="12" cy="12" r="12"></circle>
+				<circle cx="12" cy="12" r="6"></circle>
+			</svg>
+			<svg *ngIf="step.state == 'incomplete'">
+				<circle cx="12" cy="12" r="12"></circle>
+			</svg>
+			<p class="bx--progress-label">{{step.text}}</p>
+			<span class="bx--progress-line"></span>
+		</li>
+	</ul>
+	`
+})
+export class ProgressIndicator {
+	@Input() steps = [];
+}
diff --git a/src/progress-indicator/progress-indicator.module.ts b/src/progress-indicator/progress-indicator.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { ProgressIndicator } from "./progress-indicator.component";
+
+
+@NgModule({
+	declarations: [
+		ProgressIndicator
+	],
+	exports: [
+		ProgressIndicator
+	],
+	imports: [CommonModule]
+})
+export class ProgressIndicatorModule { }
diff --git a/src/progress-indicator/progrss-indicator.stories.ts b/src/progress-indicator/progrss-indicator.stories.ts
@@ -0,0 +1,50 @@
+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 { ProgressIndicatorModule } from "../";
+
+storiesOf("ProgressIndicator", module)
+	.addDecorator(
+		moduleMetadata({
+			imports: [
+				ProgressIndicatorModule
+			]
+		})
+	)
+	.addDecorator(withKnobs)
+	.add("Basic", () => ({
+		template: `
+		<ibm-progress-indicator [steps]="steps">
+		</ibm-progress-indicator>
+		`,
+		props: {
+			steps : [
+				{
+					text: "1. ONE",
+					state: ["complete"]
+				},
+				{
+					text: "2. TWO",
+					state: ["complete"]
+				},
+				{
+					text: "3. THREE",
+					state: ["current"]
+				},
+				{
+					text: "4. FOUR",
+					state: ["incomplete"]
+				},
+				{
+					text: "5. FIVE",
+					state: ["incomplete"]
+				},
+				{
+					text: "6. SIX",
+					state: ["incomplete"]
+				}
+			]
+		}
+	}));
diff --git a/src/table/table-header-item.class.ts b/src/table/table-header-item.class.ts
diff --git a/src/table/table.component.ts b/src/table/table.component.ts
diff --git a/src/table/table.stories.ts b/src/table/table.stories.ts
diff --git a/tsconfig-aot.json b/tsconfig-aot.json
diff --git a/tsconfig-demo.json b/tsconfig-demo.json
diff --git a/tsconfig.json b/tsconfig.json

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@ import { Directive, HostBinding } from "@angular/core";`
`5`	`5`	`*`
`6`	`6`	`* Example:`
`7`	`7`	`*`
`8`		- * ```hmtl
	`8`	+ * ```html
`9`	`9`	`* <input ibmText/>`
`10`	`10`	* ```
`11`	`11`	`*`
Original file line number	Diff line number	Diff line change
`@@ -22,4 +22,8 @@ storiesOf("Input", module).addDecorator(`
`22`	`22`	template: `
`23`	`23`	`<input ibmText placeholder="Optional placeholder text"/>`
`24`	`24`	`
	`25`	`+ })).add("TextArea", () => ({`
	`26`	+ template: `
	`27`	`+ <textarea ibmTextArea placeholder="Optional placeholder text" rows="4" cols="50"></textarea>`
	`28`	+ `
`25`	`29`	`}));`
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ import { Component } from "@angular/core";`
`8`	`8`	`@Component({`
`9`	`9`	`selector: "ibm-modal-footer",`
`10`	`10`	template: `
`11`		`- <footer role="contentinfo" class="bx--modal-footer">`
	`11`	`+ <footer class="bx--modal-footer">`
`12`	`12`	`<ng-content></ng-content>`
`13`	`13`	`</footer>`
`14`	`14`	`