Merge branch 'master' into master

Author: cal-smith

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";

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 = [];
+}

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 { }

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"]
+				}
+			]
+		}
+	}));