<repo_name>BI/react-step-wizard<file_sep>/src/components/slideReel.js
var React = require('react');
var PropTypes = require('prop-types');
var createReactClass = require('create-react-class');
require('../slideReelStyles.scss');

var SlideReel = createReactClass({
  getInitialState: function() {
    return {

    };
  },

  propTypes: {
    currentIndex: PropTypes.number.isRequired,
  },

  getSlides: function() {
    return this.props.children.map(function (child, id) {
      var style = {
        left: id * 100 + "%",
      };

      return (
        <div
          key={id}
          className="sr-slide"
          style={style}>
          {child}
        </div>
      )
    }, this);
  },

  render: function() {
    var slides = this.getSlides();
    var style = {
      left: -this.props.currentIndex * 100 + "%",
    };

    return (
      <div className="sr-viewport">
        <div className="sr-container">
          <div className="sr-slidePanel" style={style}>
            {slides}
          </div>
        </div>
      </div>
    );
  }
});

module.exports = SlideReel;
<file_sep>/src/components/navigationButton.js
var React = require('react');
var PropTypes = require('prop-types');
var createReactClass = require('create-react-class');
var classNames = require('classnames');

var NavigationButton = createReactClass({
  propTypes: {
    stepData: PropTypes.object.isRequired,
    onClick: PropTypes.func.isRequired,
    isShown: PropTypes.bool.isRequired,
  },

  render: function () {
    var stepData = this.props.stepData;

    var description = null;

    if(stepData.description !== null) {
      description = (
        <p className="sw-description">
          {stepData.description}
        </p>
      );
    }

    var classes = classNames("sw-button", this.props.className, {"disabled": stepData.isUnreachable || !this.props.isShown});

    return (
      <button className={classes} onClick={this.props.onClick}>
        <h1 className="sw-title">{stepData.title}</h1>
        {description}
      </button>
    );
  },
});

module.exports = NavigationButton;
<file_sep>/README.md
# react-step-wizard #

Step Wizard is comprised of two components: StepWizard (the main component) and Step (each step in the wizard). Step is a static property of StepWizard, and can be accessed with `StepWizard.Step`.

To view the demo, use the command `webpack` (install from npm--`npm install webpack -g`--if you don't have it) and open index.html.

## Development ##

* Development server `npm run dev`.
* Continuously run tests on file changes `npm run watch-test`;
* Run tests: `npm test`;
* Build `npm run build`;

## Properties ##

### StepWizard ###

(None yet)

### Step ###

* **title** (Required, string): The title that will be displayed on both the Step page and the navigation buttons.
* **description** (string, ""): If passed, it will be displayed on the both the Step page and the navigation buttons under the title.
* **onNext/onPrevious** (function(index), function(){}): Called when changing elements. If you change selected step using the pill selector up top, it will call each one in order.
* **onError** (function(index), function(){}): Called when you attempt to advance by clicking the navigation button but the current step is not valid.
* **isValid** (bool, true): Will update step wizard when changed. Does not allow progression beyond the first step with `isValid==false`, regardless of other steps' validity.

## Example Usage ##

    var React = require('react');
    var StepWizard = require('./src/stepWizard.js');
    var Step = StepWizard.Step;

    React.render(
      <StepWizard>
        <Step title="The First">
          <p>This is the first step</p>
          <p>This step is pretty cool, I guess</p>
        </Step>
        <Step title="The Second">
          <p>This is the second step, it has an input tag</p>
          <input type="text"/>
        </Step>
        <Step title="The Last" description="Whoa aren't descriptions neat?">
          <p>This is the final step.</p>
          <input type="button" value="Here's a button"/>
        </Step>
      </StepWizard>,
      document.getElementById('content'));<file_sep>/src/components/navigationBeads.js
var React = require('react');
var PropTypes = require('prop-types');
var createReactClass = require('create-react-class');
var PillSelector = require('react-pill-selector');
var classNames = require('classnames');

var NavigationBeads = createReactClass({
  getInitialState: function() {
    return {};
  },

  propTypes: {
    stepData: PropTypes.array.isRequired,
    onClick: PropTypes.func.isRequired,
    selectedIndex: PropTypes.number.isRequired,
  },

  makeBead: function(step, index) {
    var classes = classNames("sw-bead", {"sw-bead-unreachable": step.isUnreachable});
    var isDisabled = false;//step.isUnreachable;
    return (
      <li key={index} className={classes} isDisabled={isDisabled}>
        {step.title}
      </li>
    );
  },

  onItemClick: function(id) {
    this.props.onClick(id);
  },

  render: function () {
    var beads = this.props.stepData.map(this.makeBead, this);
    
    return (
      <PillSelector
        callClickOnLoad={false}
        onItemClicked={this.onItemClick}
        selectedIndex={this.props.selectedIndex}
        isManaged={true}>
        {beads}
      </PillSelector>
    );
  },
});

module.exports = NavigationBeads;
