Progress Indicator: Add working example

This maintains state and shows how to manipulate the component for devs

Author: interactivellama

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

@@ -94,11 +94,11 @@ storiesOf(PROGRESS_INDICATOR, module)
 	.add('Completed Progress', () => (
 		<ExampleProgressIndicator
 			steps={steps}
-			selectedStep={steps[steps.length - 1]}
-			completedSteps={steps.slice(0, steps.length - 1)}
+			selectedStep={steps[steps.length - 2]}
+			completedSteps={steps.slice(0, steps.length - 2)}
 			assistiveText={{
-				completedStep: "Finished this step.",
-				disabledStep: "Unable to proceed on this step."
+				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,53 @@ 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}
+						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