[Stepper] Expose connector index to <StepConnector />

[dannycochran]

When defining the connector prop for a <Stepper />, it's helpful for that component to know about its index relative to the steps. For instance, if I want the connector between two completed steps to be green.

e.g.:

class CustomConnector extends React.Component {
  render() {
    const { completedSteps, index } = this.props;
    const classes = classNames({
      completed: completedSteps.includes(index) && completedSteps.includes(index - 1)
    });
    return <StepConnector classNames={classes} />;
  }
}

class MyStepper extends React.Component {
  render() {
    return <Stepper connector={<CustomConnector completedSteps={[0, 1, 2]}/>} />;
  }
}

This PR passes along the appropriate index of the connector to the <StepConnector /> to make this possible.

[oliviertassinari]

@dannycochran The completed property is already provided. What do you need the index for?

[dannycochran]

@oliviertassinari I actually don't add the completed property to any of my steps, as I handle the completed styling differently than the default behavior.

Even still, there are other states that I may want to represent in the <StepConnector />, such as an error or warning state. If I have three steps, and the third one has an error, I'd extend the example I showed you above to look like this:

class CustomConnector extends React.Component {
  render() {
    const { completedSteps, failedSteps, index } = this.props;
    const classes = classNames({
      completed: completedSteps.includes(index) && completedSteps.includes(index - 1),
      error: failedSteps.includes(index)
    });
    return <StepConnector classNames={classes} />;
  }
}

class MyStepper extends React.Component {
  render() {
    return <Stepper connector={<CustomConnector completedSteps={[0, 1, 2]}/> failedSteps={[2]} />;
  }
}
```jsx

In addition to the use cases above, you could also imagine that `index` would be useful if you wanted to shorten the length of the connector depending on the index. It affords all the flexibility you need to render the `<StepConnector />` however you want. Currently, there's not enough information to do much with the `connector` property.

[oliviertassinari]

@dannycochran It's a great first pull request on Material-UI 👌🏻. Thank you for working on it!