import React from 'react';
import StepLabel from './step_label';
import StepTitle from './step_title';
import classNames from 'classnames';

class Step extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      completed: false,
    };
  }
  classNames() {
    return classNames(
      'mdl-step',
      {
        'mdl-step--completed': this.state.completed,
        'is-active': this.props.isActive,
      }
    );
  }
  handleClick(event) {
    const { onNext } = this.props;
    if (event.target.dataset.stepperNext) {
      event.preventDefault();
      this.setState({ 'completed': true });
      onNext();
    }
  }
  render() {
    const { children, title, summary, count } = this.props;
    return (
      <li className={this.classNames()} onClick={this.handleClick.bind(this)}>
        <StepLabel stepNumber={count} completed={this.state.completed} active={this.props.isActive}>
          <StepTitle text={title} message={summary} />
        </StepLabel>
        {children}
      </li>
    );
  }
}

export default Step;

@@ -5,16 +5,31 @@
 rt React
+, %7B PropTypes %7D
  from 'r
@@ -35,16 +35,16 @@
 react';%0A
-
 import S
@@ -147,16 +147,100 @@
 snames';
+%0Aimport StepContent from './step_content';%0Aimport StepActions from './step_actions';
 %0A%0Aclass 
@@ -700,17 +700,16 @@
 State(%7B 
-'
 complete
@@ -709,17 +709,16 @@
 ompleted
-'
 : true %7D
@@ -1134,11 +1134,608 @@
   %7D%0A
-
 %7D%0A%0A
+Step.propTypes = %7B%0A  title: PropTypes.string.isRequired,%0A  summary: PropTypes.string,%0A  count: PropTypes.number,%0A  isActive: PropTypes.bool,%0A  onNext: PropTypes.func.isRequired,%0A  children(props, propName) %7B%0A    const children = props%5BpropName%5D;%0A%0A    React.Children.forEach(children, (child) =%3E %7B%0A      if ((child.type !== StepActions) %7C%7C (child.type !== StepContent)) %7B%0A        throw new Error(%0A          %60%60%60%0A            Expected %5C%60StepContent%5C%60 or %5C%60StepActions%5C%60 %0A            but found %5C%60$%7Bchild.type.displayName %7C%7C child.type%7D%5C%60%0A          %60%60%60%0A        );%0A      %7D%0A      return;%0A    %7D);%0A  %7D,%0A%7D;%0A%0A
 expo

Add propTypes to Step