Merge pull request salesforce#1376 from kchan902/progress-indicator-assistive-text

Fixed problem with progress indicator/assistive-text

Author: interactivellama

components/progress-indicator/__docs__/storybook-stories.jsx

@@ -43,10 +43,14 @@ const ExampleProgressIndicator = createReactClass({
 
 	render () {
 		return (
-			<div style={{ padding: '2rem 1rem 0px' }}>
+			<div style={{ padding: '4rem 1rem 0px' }}>
 				<ProgressIndicator
+					id="example-progress-indicator"
 					steps={this.props.steps}
 					selectedStep={this.props.selectedStep}
+					disabledSteps={this.props.disabledSteps}
+					completedSteps={this.props.completedSteps}
+					assistiveText={this.props.assistiveText}
 					onStepClick={(event, data) => {
 						console.log(data);
 					}}
@@ -81,10 +85,25 @@ storiesOf(PROGRESS_INDICATOR, module)
 	))
 	.add('Step Error', () => (
 		<StepError
+			id="example-progress-indicator"
 			steps={steps}
 			selectedStep={steps[1]}
 			completedSteps={steps.slice(0, 1)}
 			errorSteps={steps.slice(1, 2)}
 		/>
 	))
-	.add('In A Modal (With Step Error)', () => <Modal />);
+	.add(
+		'In A Modal (With Step Error) - Needs DOM',
+		() => (typeof document !== 'undefined' ? <Modal /> : null)
+	)
+	.add('Completed Progress', () => (
+		<ExampleProgressIndicator
+			steps={steps}
+			selectedStep={steps[steps.length - 2]}
+			completedSteps={steps.slice(0, steps.length - 2)}
+			assistiveText={{
+				completedStep: 'Finished this step.',
+				disabledStep: 'Unable to proceed on this step.',
+			}}
+		/>
+	));

components/progress-indicator/__examples__/default.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import createReactClass from 'create-react-class';
 import IconSettings from '~/components/icon-settings';
 import ProgressIndicator from '~/components/progress-indicator'; // `~` is replaced with design-system-react at runtime
 
@@ -15,33 +14,56 @@ const steps = [
 	{ id: 4, label: 'tooltip label #5' },
 ];
 
-const handleStepEvent = function (event, data) {
-	console.log(data);
-};
+/*
+ * This example allows you to select the next step and only the next step. Typically, Progress Indicator should be paired with a modal and form errors should be explained outside of this component.
+ */
+class Example extends React.Component {
+	constructor (props) {
+		super(props);
+		this.state = {
+			steps,
+			completedSteps: [],
+			disabledSteps: steps.slice(2, steps.length),
+			selectedStep: steps[0],
+		};
+	}
 
-const Example = createReactClass({
-	displayName: 'ProgressIndicatorDefault',
+	handleStepEvent = (event, data) => {
+		this.setState({
+			completedSteps: steps.slice(0, data.step.id),
+			disabledSteps:
+				data.step.id < steps.length
+					? steps.slice(data.step.id + 2, steps.length)
+					: [],
+			selectedStep: data.step,
+		});
+	};
 
 	render () {
 		return (
 			<IconSettings iconPath="/assets/icons">
 				<div
 					style={{
-						padding: '2rem 1rem 0px',
+						padding: '4rem 1rem 0px',
 						background:
-							this.props.variant === 'modal' ? 'rgb(244, 246, 249)' : '',
+							this.props.variant === 'modal' ? 'rgb(244, 246, 249)' : undefined,
 					}}
 				>
 					<ProgressIndicator
-						steps={steps}
-						selectedStep={steps[0]}
-						onStepClick={handleStepEvent}
+						id="example-progress-indicator"
+						completedSteps={this.state.completedSteps}
+						disabledSteps={this.state.disabledSteps}
+						onStepClick={this.handleStepEvent}
+						steps={this.state.steps}
+						selectedStep={this.state.selectedStep}
 						// tooltipIsOpenSteps={stepsBasic.slice(0, 2)}
 					/>
 				</div>
 			</IconSettings>
 		);
-	},
-});
+	}
+}
+
+Example.displayName = 'ProgressIndicatorDefault';
 
 export default Example; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime

components/progress-indicator/__examples__/step-error.jsx

@@ -7,7 +7,7 @@ const Example = createReactClass({
 
 	render () {
 		return (
-			<div style={{ padding: '2rem 1rem 0px' }}>
+			<div style={{ padding: '4rem 1rem 0px' }}>
 				<ProgressIndicator {...this.props} />
 			</div>
 		);

components/progress-indicator/index.jsx

@@ -6,8 +6,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import assign from 'lodash.assign';
-
 import find from 'lodash.find';
 
 // ### shortid
@@ -26,10 +24,17 @@ const propTypes = {
 	/**
 	 * **Assistive text for accessibility**
 	 * This object is merged with the default props object on every render.
-	 * * `percentage`: Label for Progress Bar. The default is `Progress: [this.props.value]%`
+	 * * `completedStep`: Label for a completed step. The default is `Completed Step`
+	 * * `disabledStep`: Label for disabled step. The default is `Disabled Step`
+	 * * `errorStep`: Label for a step with an error. The default is `Error Step`
+	 * * `percentage`: Label for Progress Bar. The default is `Progress: [this.props.value]%`. You will need to calculate the percentage yourself if changing this string.
+	 * * `step`: Label for a step. It will be typically followed by the number of the step such as "Step 1".
 	 */
 	assistiveText: PropTypes.shape({
+		completedStep: PropTypes.string,
+		disabledStep: PropTypes.string,
 		percentage: PropTypes.string,
+		step: PropTypes.string,
 	}),
 	/**
 	 * CSS class names to be added to the container element. `array`, `object`, or `string` are accepted.
@@ -49,7 +54,7 @@ const propTypes = {
 	 */
 	disabledSteps: PropTypes.array,
 	/**
-	 * Stores all error steps. It is an array of step objects and usually there is only one error step, the current step.
+	 * Stores all error steps. It is an array of step objects and usually there is only one error step, the current step. If an error occurs a second error icon should be placed to the left of related confirmation buttons (e.g. Cancel, Save) and an Error Popover should appear indicating there are errors. These additional items are NOT part of this component. This note was included for visibility purposes. Please refer to [SLDS website](https://www.lightningdesignsystem.com/components/progress-indicator/) for full details **
 	 */
 	errorSteps: PropTypes.array,
 	/**
@@ -106,7 +111,12 @@ const defaultSteps = [
 ];
 
 const defaultProps = {
-	assistiveText: {},
+	assistiveText: {
+		completedStep: 'Completed',
+		disabledStep: 'Disabled',
+		errorStep: 'Error',
+		step: 'Step',
+	},
 	errorSteps: [],
 	completedSteps: [],
 	disabledSteps: [],
@@ -165,10 +175,17 @@ class ProgressIndicator extends React.Component {
 
 	render () {
 		// Merge objects of strings with their default object
-		const assistiveText = this.props
-			? assign({}, defaultProps.assistiveText, this.props.assistiveText)
-			: defaultProps.assistiveText;
-
+		const assistiveText = {
+			...defaultProps.assistiveText,
+			...this.props.assistiveText,
+		};
+
+		const {
+			selectedStep,
+			disabledSteps,
+			errorSteps,
+			completedSteps,
+		} = this.props;
 		/** 1. preparing data */
 		const allSteps = this.getSteps();
 
@@ -199,13 +216,14 @@ class ProgressIndicator extends React.Component {
 			>
 				{allSteps.map((step, i) => (
 					<Step
+						assistiveText={assistiveText}
 						key={`${this.getId()}-${step.id}`}
 						id={this.getId()}
 						index={i}
-						isSelected={findStep(step, this.props.selectedStep)}
-						isDisabled={findStep(step, this.props.disabledSteps)}
-						isError={findStep(step, this.props.errorSteps)}
-						isCompleted={findStep(step, this.props.completedSteps)}
+						isSelected={findStep(step, selectedStep)}
+						isDisabled={findStep(step, disabledSteps)}
+						isError={findStep(step, errorSteps)}
+						isCompleted={findStep(step, completedSteps)}
 						onClick={this.props.onStepClick}
 						onFocus={this.props.onStepFocus}
 						step={step}

components/progress-indicator/private/progress-bar.jsx

@@ -28,7 +28,6 @@ class ProgressBar extends React.Component {
 				aria-valuemax="100"
 				aria-valuenow={this.props.value}
 				role="progressbar"
-				tabIndex={0}
 			>
 				<span
 					className="slds-progress-bar__value"

components/progress-indicator/private/step.jsx

@@ -19,6 +19,21 @@ const displayName = PROGRESS_INDICATOR_STEP;
 
 // ### Prop Types
 const propTypes = {
+	/**
+	 * **Assistive text for accessibility**
+	 * This object is merged with the default props object on every render.
+	 * * `completedStep`: Label for a completed step. The default is `Completed Step`
+	 * * `disabledStep`: Label for disabled step. The default is `Disabled Step`
+	 * * `errorStep`: Label for a step with an error. The default is `Error Step`
+	 * * `percentage`: Label for Progress Bar. The default is `Progress: [this.props.value]%`. You will need to calculate the percentage yourself if changing this string.
+	 * * `step`: Label for a step. It will be typically followed by the number of the step such as "Step 1".
+	 */
+	assistiveText: PropTypes.shape({
+		completedStep: PropTypes.string,
+		disabledStep: PropTypes.string,
+		percentage: PropTypes.string,
+		step: PropTypes.string,
+	}),
 	/**
 	 * Id for Steps, ranging in [0, steps.length).
 	 */
@@ -30,6 +45,7 @@ const propTypes = {
 	/**
 	 * Determines if the step has been completed
 	 */
+
 	isCompleted: PropTypes.bool,
 	/**
 	 * Determines if the step has been disabled
@@ -91,15 +107,15 @@ class Step extends React.Component {
 		const icon = renderIcon ? (
 			<ButtonIcon
 				category="utility"
-				name={this.props.isError ? 'warning' : 'success'}
+				name={this.props.isError ? 'error' : 'success'}
 			/>
 		) : null;
 
 		const handleClick = (event) => props.onClick(event, data);
 		const handleFocus = (event) => props.onFocus(event, data);
 
 		const stepButton = props.isDisabled ? (
-			<span
+			<a
 				className={classNames(
 					'slds-button',
 					{ 'slds-button_icon': renderIcon },
@@ -113,9 +129,12 @@ class Step extends React.Component {
 			>
 				{icon}
 				<span className="slds-assistive-text">
-					{props.step.assistiveText || `Step ${props.index + 1}: ${status}`}
+					{this.props.step.assistiveText ||
+						`${props.assistiveText.step} ${props.index + 1}: ${
+							props.step.label
+						} - ${status}`}
 				</span>
-			</span>
+			</a>
 		) : (
 			<button
 				className={classNames(
@@ -128,10 +147,14 @@ class Step extends React.Component {
 				onFocus={handleFocus}
 				aria-describedby={`progress-indicator-tooltip-${this.props.step.id ||
 					this.props.index}`}
+				aria-current={this.props.isSelected ? 'step' : null}
 			>
 				{icon}
 				<span className="slds-assistive-text">
-					{props.step.assistiveText || `Step ${props.index + 1}: ${status}`}
+					{this.props.step.assistiveText ||
+						`${props.assistiveText.step} ${props.index + 1}: ${
+							props.step.label
+						}${status ? ` - ${status}` : ''}`}
 				</span>
 			</button>
 		);
@@ -141,22 +164,21 @@ class Step extends React.Component {
 
 	render () {
 		const renderIcon = this.props.isCompleted || this.props.isError;
-		// step status (one of ['Error', 'Completed', 'Active', 'Uncompleted'])
 		let status = '';
 		if (this.props.isError) {
-			status = 'Error';
+			status = this.props.assistiveText.errorStep;
 		} else if (this.props.isCompleted) {
-			status = 'Completed';
-		} else if (this.props.isSelected) {
-			status = 'Active';
-		} else status = 'Uncompleted';
+			status = this.props.assistiveText.completedStep;
+		} else if (this.props.isDisabled) {
+			status = this.props.assistiveText.disabledStep;
+		}
 
 		const tooltipProps = {
 			align: 'top',
 			id: `progress-indicator-tooltip-${this.props.step.id ||
 				this.props.index}`,
 			content: this.props.step.label,
-			theme: this.props.isError ? 'error' : 'info',
+			theme: 'info',
 			triggerStyle: { display: !renderIcon ? 'flex' : '' },
 		};
 

components/story-based-tests.js

@@ -64,7 +64,7 @@ export Tree from '../components/tree/__docs__/storybook-stories';
 // export Notification from '../components/notification/__docs__/storybook-stories';
 // export Panel from '../components/panel/__docs__/storybook-stories';
 // export Popover from '../components/popover/__docs__/storybook-stories';
-// export ProgressIndicator from '../components/progress-indicator/__docs__/storybook-stories';
+export ProgressIndicator from '../components/progress-indicator/__docs__/storybook-stories';
 // export Picklist from '../components/menu-picklist/__docs__/storybook-stories';
 // export Spinner from '../components/spinner/__docs__/storybook-stories';
 // export TimePicker from '../components/time-picker/__docs__/storybook-stories';