Merge pull request #2483 from stanislavgeorgiev/issue-2479

Issue 2479: Progress Indicator: Design is different from the Carbon Components

Author: zvonimirfras

src/icon/icon.module.ts

@@ -24,6 +24,7 @@ import CheckmarkFilled20 from "@carbon/icons/es/checkmark--filled/20";
 import CheckmarkOutline16 from "@carbon/icons/es/checkmark--outline/16";
 import ChevronDown16 from "@carbon/icons/es/chevron--down/16";
 import ChevronRight16 from "@carbon/icons/es/chevron--right/16";
+import CircleDash16 from "@carbon/icons/es/circle-dash/16";
 import Close16 from "@carbon/icons/es/close/16";
 import Close20 from "@carbon/icons/es/close/20";
 import Copy16 from "@carbon/icons/es/copy/16";
@@ -38,6 +39,7 @@ import ErrorFilled16 from "@carbon/icons/es/error--filled/16";
 import ErrorFilled20 from "@carbon/icons/es/error--filled/20";
 import Fade16 from "@carbon/icons/es/fade/16";
 import Fade20 from "@carbon/icons/es/fade/20";
+import Incomplete16 from "@carbon/icons/es/incomplete/16";
 import InformationFilled16 from "@carbon/icons/es/information--filled/16";
 import InformationFilled20 from "@carbon/icons/es/information--filled/20";
 import Menu16 from "@carbon/icons/es/menu/16";
@@ -100,6 +102,7 @@ export class IconModule {
 			CheckmarkOutline16,
 			ChevronDown16,
 			ChevronRight16,
+			CircleDash16,
 			Close16,
 			Close20,
 			Copy16,
@@ -114,6 +117,7 @@ export class IconModule {
 			ErrorFilled20,
 			Fade16,
 			Fade20,
+			Incomplete16,
 			InformationFilled16,
 			InformationFilled20,
 			Menu16,

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

@@ -29,15 +29,11 @@ import { Step } from "./progress-indicator-step.interface";
 			*ngFor="let step of steps; let i = index"
 			[ngClass]="{'bx--progress-step--disabled' : step.disabled}">
 			<div class="bx--progress-step-button bx--progress-step-button--unclickable" role="button" tabindex="-1">
-				<svg ibmIcon="checkmark--outline" size="16" *ngIf="step.state.includes('complete')"></svg>
-				<svg *ngIf="step.state.includes('current')">
-					<path d="M 7, 7 m -7, 0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0" ></path>
-				</svg>
-				<svg *ngIf="step.state.includes('incomplete')">
-					<path
-						d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 13c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z">
-					</path>
-				</svg>
+				<ng-container *ngIf="!step.state.includes('error')">
+					<svg ibmIcon="checkmark--outline" size="16" *ngIf="step.state.includes('complete')"></svg>
+					<svg ibmIcon="incomplete" size="16" *ngIf="step.state.includes('current')"></svg>
+					<svg ibmIcon="circle-dash" size="16" *ngIf="step.state.includes('incomplete')"></svg>
+				</ng-container>
 				<svg ibmIcon="warning" size="16" *ngIf="step.state.includes('error')" class="bx--progress__warning"></svg>
 				<p
 					class="bx--progress-label"
@@ -64,7 +60,7 @@ export class ProgressIndicator implements OnChanges {
 	static skeletonSteps(stepCount: number) {
 		const steps = [];
 		for (let i = 0; i < stepCount; i++) {
-			steps.push({"state": ["incomplete"]});
+			steps.push({ "state": ["incomplete"] });
 		}
 
 		return steps;