Progress Indicator: Update assistiveText

- Remove trailing - on step without status
- Pass correct assistiveText to step
- Remove activeStep from docs

Author: interactivellama

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,15 +24,13 @@ const propTypes = {
 	/**
 	 * **Assistive text for accessibility**
 	 * This object is merged with the default props object on every render.
-	 * * `activeStep`: Label for the active step. The default is `Active Step`
 	 * * `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({
-		activeStep: PropTypes.string,
 		completedStep: PropTypes.string,
 		disabledStep: PropTypes.string,
 		percentage: PropTypes.string,
@@ -179,9 +175,10 @@ 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,
@@ -219,7 +216,7 @@ class ProgressIndicator extends React.Component {
 			>
 				{allSteps.map((step, i) => (
 					<Step
-						assistiveText={this.props.assistiveText}
+						assistiveText={assistiveText}
 						key={`${this.getId()}-${step.id}`}
 						id={this.getId()}
 						index={i}

components/progress-indicator/private/step.jsx

@@ -130,7 +130,9 @@ class Step extends React.Component {
 				{icon}
 				<span className="slds-assistive-text">
 					{this.props.step.assistiveText ||
-						`${props.assistiveText.step} ${props.index + 1}: ${props.step.label} - ${status}`}
+						`${props.assistiveText.step} ${props.index + 1}: ${
+							props.step.label
+						} - ${status}`}
 				</span>
 			</a>
 		) : (
@@ -150,7 +152,9 @@ class Step extends React.Component {
 				{icon}
 				<span className="slds-assistive-text">
 					{this.props.step.assistiveText ||
-						`${props.assistiveText.step} ${props.index + 1}: ${props.step.label}${status ? " - " + status : ""}`}
+						`${props.assistiveText.step} ${props.index + 1}: ${
+							props.step.label
+						}${status ? ` - ${status}` : ''}`}
 				</span>
 			</button>
 		);

tests/__snapshots__/story-based-tests.snapshot-test.js.snap

@@ -3908,7 +3908,7 @@ exports[`DOM snapshots SLDSProgressIndicator Completed Progress 1`] = `
               <span
                 className="slds-assistive-text"
               >
-                undefined 2: tooltip label #2 - Finished this step.
+                Step 2: tooltip label #2 - Finished this step.
               </span>
             </button>
             <span />
@@ -3946,7 +3946,7 @@ exports[`DOM snapshots SLDSProgressIndicator Completed Progress 1`] = `
               <span
                 className="slds-assistive-text"
               >
-                undefined 3: [object Object] - Finished this step.
+                Step 3: [object Object] - Finished this step.
               </span>
             </button>
             <span />
@@ -3976,7 +3976,7 @@ exports[`DOM snapshots SLDSProgressIndicator Completed Progress 1`] = `
               <span
                 className="slds-assistive-text"
               >
-                undefined 4: tooltip label #4
+                Step 4: tooltip label #4
               </span>
             </button>
             <span />
@@ -4006,7 +4006,7 @@ exports[`DOM snapshots SLDSProgressIndicator Completed Progress 1`] = `
               <span
                 className="slds-assistive-text"
               >
-                undefined 5: tooltip label #5
+                Step 5: tooltip label #5
               </span>
             </button>
             <span />