Merge pull request #392 from werdnanoslen/progress-indicator--vertical

feat(progress-indicator): adds 'vertical' variant

package.json

@@ -66,7 +66,7 @@
     "core-js": "^2.5.3",
     "rxjs": "^6.0.0",
     "zone.js": "^0.8.26",
-    "carbon-components": "^9.20.0"
+    "carbon-components": "^9.70.0"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "0.7.1",

src/progress-indicator/progress-indicator.component.ts

@@ -9,7 +9,8 @@ import { ExperimentalService } from "./../experimental.module";
 		data-progress-current
 		class="bx--progress"
 		[ngClass]="{
-			'bx--skeleton': skeleton
+			'bx--skeleton': skeleton,
+			'bx--progress--vertical': (orientation === 'vertical')
 		}">
 		<li
 		class="bx--progress-step bx--progress-step--{{step.state}}"
@@ -59,7 +60,7 @@ export class ProgressIndicator {
 	}
 
 	@Input() steps = [];
-
+	@Input() orientation: "horizontal" | "vertical" = "horizontal";
 	@Input() skeleton = false;
 
 	get isExperimental() {

src/progress-indicator/progress-indicator.stories.ts

@@ -82,4 +82,38 @@ storiesOf("ProgressIndicator", module)
 		<app-experimental-component></app-experimental-component>
 		<app-skeleton-progress-indicator></app-skeleton-progress-indicator>
 		`
+	}))
+	.add("Vertical", () => ({
+		template: `
+		<app-experimental-component></app-experimental-component>
+		<ibm-progress-indicator [orientation]="'vertical'" [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"]
+				}
+			]
+		}
 	}));