Merge branch 'master' of github.com:IBM/carbon-components-angular into a11y

cal-smith · cal-smith · commit ea3bc0b51d05 · 2018-10-17T14:21:09.000-04:00
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/checkbox/checkbox.component.ts b/src/checkbox/checkbox.component.ts
@@ -67,7 +67,7 @@ export class CheckboxChange {
 			[indeterminate]="indeterminate"
 			[attr.aria-label]="ariaLabel"
 			[attr.aria-labelledby]="ariaLabelledby"
-			[attr.aria-checked]="indeterminate ? 'mixed' : checked"
+			[attr.aria-checked]="(indeterminate ? 'mixed' : checked)"
 			(change)="onChange($event)"
 			(click)="onClick($event)">
 		<label [for]="id" class="bx--checkbox-label">
diff --git a/src/dialog/overflow-menu/overflow-menu.component.ts b/src/dialog/overflow-menu/overflow-menu.component.ts
@@ -5,11 +5,10 @@ import { Component, ElementRef } from "@angular/core";
  *
  * html:
  * ```
- * <ibm-overflow-menu [options]="overflowContent"></ibm-overflow-menu>
- * <ng-template #overflowContent>
+ * <ibm-overflow-menu>
  *	<ibm-overflow-menu-option>Option 1</ibm-overflow-menu-option>
  *	<ibm-overflow-menu-option>Option 2</ibm-overflow-menu-option>
- * </ng-template>
+ * </ibm-overflow-menu>
  * ```
  */
 @Component({
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/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
@@ -18,7 +18,7 @@ import { Component, Output, EventEmitter, Input } from "@angular/core";
 @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/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
@@ -19,6 +19,14 @@ export class TableHeaderItem {
 	 */
 	sorted = false;
 
+	/**
+	 * Enables sorting on click by default.
+	 * If false then this column won't show a sorting arrow at all.
+	 *
+	 * @memberof TableHeaderItem
+	 */
+	sortable = true;
+
 	/**
 	 * Number of applied filters.
 	 *
@@ -28,6 +36,13 @@ export class TableHeaderItem {
 	 */
 	filterCount = 0;
 
+	/**
+	 * Attach a class to the column, both the header and column cells.
+	 *
+	 * @memberof TableHeaderItem
+	 */
+	className: string;
+
 	/**
 	 * Style for the column, applied to every element in the column.
 	 *
@@ -69,6 +84,15 @@ export class TableHeaderItem {
 	 */
 	data: any;
 
+	/**
+	 * Data for the header item for general usage in the controller.
+	 * For example, which `field` is this column related to.
+	 *
+	 * @type {*}
+	 * @memberof TableHeaderItem
+	 */
+	metadata: any;
+
 	/**
 	 * Used to display data in a desired way.
 	 *
@@ -204,14 +228,11 @@ export class TableHeaderItem {
 		};
 		// fill our object with provided props, and fallback to defaults
 		const data = Object.assign({}, defaults, rawData);
-		this.data = data.data;
-		this.visible = data.visible;
-		this.filterCount = data.filterCount;
-		this.template = data.template;
-		this.filterTemplate = data.filterTemplate;
-		this.filterFooter = data.filterFooter;
-		this.filterData = data.filterData;
-		this.style = data.style;
+		for (let property of Object.getOwnPropertyNames(data)) {
+			if (data.hasOwnProperty(property)) {
+				this[property] = data[property];
+			}
+		}
 	}
 
 	/**
diff --git a/src/table/table-model.class.spec.ts b/src/table/table-model.class.spec.ts
@@ -8,6 +8,24 @@ describe("Table", () => {
 		expect(tableModel.totalDataLength).toEqual(0);
 	});
 
+	it("model should handle different variants of empty data", () => {
+		let tableModel  = new TableModel();
+		tableModel.data = undefined;
+
+		expect(tableModel.data).toEqual([[]]);
+		expect(tableModel.totalDataLength).toEqual(0);
+
+		tableModel.data = null;
+
+		expect(tableModel.data).toEqual([[]]);
+		expect(tableModel.totalDataLength).toEqual(0);
+
+		tableModel.data = [];
+
+		expect(tableModel.data).toEqual([[]]);
+		expect(tableModel.totalDataLength).toEqual(0);
+	});
+
 	it("should set rowsSelected when setting data", () => {
 		let tableModel  = new TableModel();
 		tableModel.data = [
diff --git a/src/table/table-model.class.ts b/src/table/table-model.class.ts
@@ -15,6 +15,10 @@ export class TableModel implements PaginationModel {
 	 * @memberof TableModel
 	 */
 	set data(newData: Array<Array<TableItem>>) {
+		if (!newData || (Array.isArray(newData) && newData.length === 0) ) {
+			newData = [[]];
+		}
+
 		this._data = newData;
 
 		// init rowsSelected
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

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`	`