Merge pull request #515 from youda97/progress-indicator-feat

 feat(progress-indicator): Add disabled, error and tooltip to steps

Author: zvonimirfras

src/dialog/dialog-config.interface.ts

@@ -7,15 +7,15 @@ export interface DialogConfig {
 	/**
 	 * Title for the `Dialog` header.
 	 */
-	title: string;
+	title?: string;
 	/**
 	 * Body content for the `Dialog`.
 	 */
 	content: string | TemplateRef<any>;
 	/**
 	 * Parameter for triggering `Dialog` display.
 	 */
-	trigger: "click" | "hover" | "mouseenter";
+	trigger?: "click" | "hover" | "mouseenter";
 	/**
 	 * Parameter for triggering the `Dialog` close event.
 	 */
@@ -24,23 +24,23 @@ export interface DialogConfig {
 	 * Parameter defining the placement in which the `Dialog` appears.
 	 * @type {Placement}
 	 */
-	placement: string;
+	placement?: string;
 	/**
 	 * Used to set the offset of the `Dialog` relative to the content it
 	 * is associated to.
 	 */
-	gap: number;
+	gap?: number;
 	/**
 	 * Reference to the Parent element that links the `Dialog`.
 	 */
-	parentRef: ElementRef;
+	parentRef?: ElementRef;
 	/**
 	 * Set to `true` to open the dialog next to the triggering component
 	 */
-	appendInline: boolean;
+	appendInline?: boolean;
 	/**
 	 * Config object passed to the rendered component. (Optional)
 	 */
-	data: Object;
+	data?: Object;
 	[propName: string]: any;
 }

src/progress-indicator/progress-indicator-step.interface.ts

@@ -0,0 +1,21 @@
+import { TemplateRef } from "@angular/core";
+import { DialogConfig } from "./../dialog/dialog-config.interface";
+
+export interface Step {
+	/**
+	 * The label of the `step`
+	 */
+	text: string;
+	/**
+	 * An array of strings to determine the progress of the step
+	 */
+	state: Array<string>;
+	/**
+	 * Defines the tooltip
+	 */
+	tooltip?: DialogConfig;
+	/**
+	 * Determines whether the step is disabled or not
+	 */
+	disabled?: boolean;
+}

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

@@ -1,5 +1,6 @@
 import { Component, Input } from "@angular/core";
 import { ExperimentalService } from "./../experimental.module";
+import { Step } from "./progress-indicator-step.interface";
 
 /**
  * [See demo](../../?path=/story/progress-indicator--basic)
@@ -21,21 +22,37 @@ import { ExperimentalService } from "./../experimental.module";
 			'bx--progress--vertical': (orientation === 'vertical')
 		}">
 		<li
-		class="bx--progress-step bx--progress-step--{{step.state}}"
-		*ngFor="let step of steps; let i = index">
-			<ibm-icon-checkmark-outline16 *ngIf="step.state == 'complete'"></ibm-icon-checkmark-outline16>
-			<svg *ngIf="step.state == 'current'">
-				<path *ngIf="isExperimental" 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 == 'incomplete'">
-				<path
-					*ngIf="isExperimental"
-					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>
-			<ibm-icon-error-outline16 *ngIf="step.state == 'error'"></ibm-icon-error-outline16>
-			<p class="bx--progress-label">{{step.text}}</p>
-			<span class="bx--progress-line"></span>
+			class="bx--progress-step bx--progress-step--{{step.state[0]}}"
+			*ngFor="let step of steps"
+			[ngClass]="{'bx--progress-step--disabled' : step.disabled}">
+			<div class="bx--progress-step-button bx--progress-step-button--unclickable" role="button" tabindex="-1">
+				<ibm-icon-checkmark-outline16 *ngIf="step.state == 'complete'"></ibm-icon-checkmark-outline16>
+				<svg *ngIf="step.state == 'current'">
+					<path *ngIf="isExperimental" 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 == 'incomplete'">
+					<path
+						*ngIf="isExperimental"
+						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>
+				<ibm-icon-warning16 *ngIf="step.state.includes('error')" innerClass="bx--progress__warning"></ibm-icon-warning16>
+				<p
+					class="bx--progress-label"
+					*ngIf="step.tooltip"
+					[ibmTooltip]="step.tooltip.content"
+					[trigger]="step.tooltip.trigger"
+					[placement]="step.tooltip.placement"
+					[title]="step.tooltip.title"
+					[gap]="step.tooltip.gap"
+					[appendInline]="step.tooltip.appendInline"
+					[data]="step.tooltip.data">
+					{{step.text}}
+				</p>
+				<p class="bx--progress-label" *ngIf="!step.tooltip">{{step.text}}</p>
+				<p *ngIf="step.optionalText" class="bx--progress-optional">{{step.optionalText}}</p>
+				<span class="bx--progress-line"></span>
+			</div>
 		</li>
 	</ul>
 	`
@@ -50,12 +67,12 @@ export class ProgressIndicator {
 		return steps;
 	}
 
-	@Input() steps = [];
+	@Input() steps: Array<Step>;
 	@Input() orientation: "horizontal" | "vertical" = "horizontal";
 	@Input() skeleton = false;
 
 	@Input() get current() {
-		return this.steps.indexOf(step => step.state[0] === "current");
+		return this.steps.findIndex(step => step.state.includes("current"));
 	}
 	set current(current: number) {
 		if (current === undefined || current < 0) {

src/progress-indicator/progress-indicator.module.ts

@@ -1,9 +1,10 @@
 import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { CheckmarkOutline16Module } from "@carbon/icons-angular/lib/checkmark--outline/16";
-import { ErrorOutline16Module } from "@carbon/icons-angular/lib/error--outline/16";
+import { Warning16Module } from "@carbon/icons-angular/lib/warning/16";
 
 import { ProgressIndicator } from "./progress-indicator.component";
+import { DialogModule } from "./../dialog/dialog.module";
 import { ExperimentalModule } from "./../experimental.module";
 
 export { ProgressIndicator } from "./progress-indicator.component";
@@ -17,9 +18,10 @@ export { ProgressIndicator } from "./progress-indicator.component";
 	],
 	imports: [
 		CommonModule,
+		DialogModule,
 		ExperimentalModule,
 		CheckmarkOutline16Module,
-		ErrorOutline16Module
+		Warning16Module
 	]
 })
 export class ProgressIndicatorModule { }

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

@@ -7,7 +7,7 @@ import { storiesOf, moduleMetadata } from "@storybook/angular";
 import { action } from "@storybook/addon-actions";
 import { withKnobs, number, object } from "@storybook/addon-knobs/angular";
 
-import { ProgressIndicatorModule, DocumentationModule } from "../";
+import { ProgressIndicatorModule, PlaceholderModule, DocumentationModule } from "../";
 import { ProgressIndicator } from "./progress-indicator.component";
 
 @Component({
@@ -33,6 +33,7 @@ storiesOf("Progress Indicator", module)
 			declarations: [SkeletonStory],
 			imports: [
 				ProgressIndicatorModule,
+				PlaceholderModule,
 				DocumentationModule
 			]
 		})
@@ -42,29 +43,41 @@ storiesOf("Progress Indicator", module)
 		template: `
 		<div style="display: flex;">
 			<ibm-progress-indicator [steps]="steps" [current]="current"></ibm-progress-indicator>
+			<ibm-placeholder></ibm-placeholder>
 		</div>
 		`,
 		props: {
 			steps : [
 				{
 					text: "First step",
-					state: ["complete"]
+					state: ["complete"],
+					optionalText: "optional"
 				},
 				{
 					text: "Second step",
-					state: ["current"]
+					state: ["current"],
+					tooltip: { content: "Overflow tooltip content.", trigger: "click", placement: "bottom" }
 				},
 				{
 					text: "Third step",
-					state: ["incomplete"]
+					state: ["incomplete"],
+					tooltip: {
+						content: `Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+							Animi consequuntur hic ratione aliquid cupiditate, nesciunt saepe iste
+							blanditiis cumque maxime tenetur veniam est illo deserunt sint quae pariatur.
+							Laboriosam, consequatur.`,
+						trigger: "click",
+						placement: "bottom"
+					}
 				},
 				{
 					text: "Fourth step",
-					state: ["incomplete"]
+					state: ["incomplete", "error"]
 				},
 				{
 					text: "Fifth step",
-					state: ["incomplete"]
+					state: ["incomplete"],
+					disabled: true
 				}
 			],
 			current: number("Current progress", 1)
@@ -90,11 +103,12 @@ storiesOf("Progress Indicator", module)
 				},
 				{
 					text: "Fourth step",
-					state: ["incomplete"]
+					state: ["incomplete", "error"]
 				},
 				{
 					text: "Fifth step",
-					state: ["incomplete"]
+					state: ["incomplete"],
+					disabled: true
 				}
 			],
 			current: number("Current progress", 1)