Progress Indicator: Use assistiveText prop keys

instead of hard coded text strings

This also makes all tooltips info tooltips and removes use of error tooltips.

Author: interactivellama

components/progress-indicator/private/step.jsx

@@ -19,13 +19,22 @@ const displayName = PROGRESS_INDICATOR_STEP;
 
 // ### Prop Types
 const propTypes = {
-	/*
-	* assistiveText 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({
-		// percentage: PropTypes.string,
+		activeStep: PropTypes.string,
 		completedStep: PropTypes.string,
-		disabledStep: PropTypes.string
+		disabledStep: PropTypes.string,
+		percentage: PropTypes.string,
+		step: PropTypes.string,
 	}),
 	/**
 	 * Id for Steps, ranging in [0, steps.length).
@@ -100,7 +109,7 @@ class Step extends React.Component {
 		const icon = renderIcon ? (
 			<ButtonIcon
 				category="utility"
-				name={this.props.isError ? 'warning' : 'success'}
+				name={this.props.isError ? 'error' : 'success'}
 			/>
 		) : null;
 
@@ -122,7 +131,7 @@ class Step extends React.Component {
 			>
 				{icon}
 				<span className="slds-assistive-text">
-					{this.props.assistiveText.disabledStep}
+					{this.props.step.assistiveText || `${props.assistiveText.step} ${props.index + 1}: ${status}`}
 				</span>
 			</span>
 		) : (
@@ -137,17 +146,11 @@ 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' : ''}
+				aria-current={this.props.isSelected ? 'step' : null}
 			>
 				{icon}
 				<span className="slds-assistive-text">
-				  {(() => {
-						if (props.isCompleted) {
-   						return this.props.assistiveText.completedStep;
-						} else {
-							return `Step ${props.index + 1}: ${status}`;
-						}
-					})()}
+					{this.props.step.assistiveText || `${props.assistiveText.step} ${props.index + 1}: ${status}`}
 				</span>
 			</button>
 		);
@@ -157,22 +160,23 @@ 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';
-		} else if (this.props.isCompleted) {
-			status = 'Completed';
+			status = this.props.assistiveText.errorStep;
 		} else if (this.props.isSelected) {
-			status = 'Active';
-		} else status = 'Uncompleted';
+			status = this.props.assistiveText.activeStep;
+		} else if (this.props.isCompleted) {
+			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' : '' },
 		};