[Stepper] Allow custom step connector

docs/src/app/components/pages/components/Stepper/CustomStepConnector.js

@@ -0,0 +1,112 @@
+import React from 'react';
+import FlatButton from 'material-ui/FlatButton';
+import RaisedButton from 'material-ui/RaisedButton';
+import {
+  Step,
+  Stepper,
+  StepLabel,
+} from 'material-ui/Stepper';
+import ArrowForwardIcon from 'material-ui/svg-icons/navigation/arrow-forward';
+
+/**
+ * It is possible to specify your own step connector by passing an element to the `connector`
+ * prop. If you want to remove the connector, pass `null` to the `connector` prop.
+ */
+class CustomStepConnector extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleNext = this.handleNext.bind(this);
+    this.handlePrev = this.handlePrev.bind(this);
+  }
+
+  state = {
+    stepIndex: 0,
+  };
+
+  getStepContent(stepIndex) {
+    switch (stepIndex) {
+      case 0:
+        return (
+          <p>
+            {'For each ad campaign that you create, you can control how much you\'re willing to ' +
+            'spend on clicks and conversions, which networks and geographical locations you want ' +
+            'your ads to show on, and more.'}
+          </p>
+        );
+
+      case 1:
+        return (
+          <p>
+            {'An ad group contains one or more ads which target a shared set of keywords.'}
+          </p>
+        );
+
+      case 2:
+        return (
+          <p>
+            {'Try out different ad text to see what brings in the most customers, and learn ' +
+            'how to enhance your ads using features like ad extensions. If you run into any ' +
+            'problems with your ads, find out how to tell if they\'re running and how to ' +
+            'resolve approval issues.'}
+          </p>
+        );
+    }
+  }
+
+  handleNext() {
+    const {stepIndex} = this.state;
+
+    if (stepIndex < 2) {
+      this.setState({stepIndex: stepIndex + 1});
+    }
+  }
+
+  handlePrev() {
+    const {stepIndex} = this.state;
+
+    if (stepIndex > 0) {
+      this.setState({stepIndex: stepIndex - 1});
+    }
+  }
+
+  render() {
+    const {stepIndex} = this.state;
+
+    return (
+      <div style={{width: '100%', maxWidth: 700, margin: 'auto'}}>
+        <Stepper activeStep={stepIndex} connector={<ArrowForwardIcon />}>
+          <Step>
+            <StepLabel>Select campaign settings</StepLabel>
+          </Step>
+
+          <Step>
+            <StepLabel>Create an ad group</StepLabel>
+          </Step>
+
+          <Step>
+            <StepLabel>Create an ad</StepLabel>
+          </Step>
+        </Stepper>
+
+        {this.getStepContent(stepIndex)}
+
+        <div style={{marginTop: 24, marginBottom: 12}}>
+          <FlatButton
+            label="Back"
+            disabled={stepIndex === 0}
+            onTouchTap={this.handlePrev}
+            style={{marginRight: 12}}
+          />
+          <RaisedButton
+            label={stepIndex === 2 ? 'Finish' : 'Next'}
+            primary={true}
+            onTouchTap={this.handleNext}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default CustomStepConnector;

docs/src/app/components/pages/components/Stepper/Page.js

@@ -18,6 +18,8 @@ import GranularControlStepper from './GranularControlStepper';
 import GranularControlStepperCode from '!raw!./GranularControlStepper';
 import CustomIcon from './CustomIcon';
 import CustomIconCode from '!raw!./CustomIcon';
+import CustomStepConnector from './CustomStepConnector';
+import CustomStepConnectorCode from '!raw!./CustomStepConnector';
 import HorizontalTransition from './HorizontalTransition';
 import HorizontalTransitionCode from '!raw!./HorizontalTransition';
 
@@ -104,6 +106,13 @@ const StepperPage = () => (
       </div>
     </CodeExample>
 
+    <CodeExample
+      title="Custom step connector"
+      code={CustomStepConnectorCode}
+    >
+      <CustomStepConnector />
+    </CodeExample>
+
     <PropTypeDescription code={stepperCode} header="### Stepper properties" />
     <PropTypeDescription code={stepCode} header="### Step properties" />
     <PropTypeDescription code={stepLabelCode} header="### StepLabel properties" />

src/Stepper/Stepper.js

@@ -25,6 +25,10 @@ class Stepper extends Component {
      * Should be two or more `<Step />` components
      */
     children: PropTypes.arrayOf(PropTypes.node),
+    /**
+     * A component to be placed between each step.
+     */
+    connector: PropTypes.node,
     /**
      * If set to `true`, the `Stepper` will assist in controlling steps for linear flow
      */
@@ -40,6 +44,7 @@ class Stepper extends Component {
   };
 
   static defaultProps = {
+    connector: <StepConnector />,
     orientation: 'horizontal',
     linear: true,
   };
@@ -57,6 +62,7 @@ class Stepper extends Component {
     const {
       activeStep,
       children,
+      connector,
       linear,
       style,
     } = this.props;
@@ -87,7 +93,7 @@ class Stepper extends Component {
       }
 
       return [
-        index > 0 && <StepConnector />,
+        index > 0 && connector,
         React.cloneElement(step, Object.assign(controlProps, step.props)),
       ];
     });

src/Stepper/Stepper.spec.js

@@ -3,7 +3,10 @@
 import React from 'react';
 import {shallow} from 'enzyme';
 import {assert} from 'chai';
+import Step from './Step';
+import StepConnector from './StepConnector';
 import Stepper from './Stepper';
+import FontIcon from '../FontIcon';
 import getMuiTheme from '../styles/getMuiTheme';
 
 describe('<Stepper />', () => {
@@ -107,4 +110,39 @@ describe('<Stepper />', () => {
       assert.strictEqual(steps.at(2).props().last, true);
     });
   });
+
+  describe('step connector', () => {
+    it('should have a default step connector', () => {
+      const wrapper = shallowWithContext(
+        <Stepper>
+          <Step /><Step />
+        </Stepper>
+      );
+
+      assert.strictEqual(wrapper.find(StepConnector).length, 1, 'should contain a <StepConnector /> child');
+    });
+
+    it('should allow the developer to specify a custom step connector', () => {
+      const wrapper = shallowWithContext(
+        <Stepper
+          connector={<FontIcon className="material-icons">arrow-forward</FontIcon>}
+        >
+          <Step /><Step />
+        </Stepper>
+      );
+
+      assert.strictEqual(wrapper.find(FontIcon).length, 1, 'should contain a <FontIcon /> child');
+      assert.strictEqual(wrapper.find(StepConnector).length, 0, 'should not contain a <StepConnector /> child');
+    });
+
+    it('should allow the step connector to be removed', () => {
+      const wrapper = shallowWithContext(
+        <Stepper connector={null}>
+          <Step /><Step />
+        </Stepper>
+      );
+
+      assert.strictEqual(wrapper.find(StepConnector).length, 0, 'should not contain a <StepConnector /> child');
+    });
+  });
 });