@codementor/ui-kit/Stepper.js

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _style = require('styled-jsx/style');

var _style2 = _interopRequireDefault(_style);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _colors = require('./theme/colors');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Stepper = function (_PureComponent) {
  (0, _inherits3.default)(Stepper, _PureComponent);

  function Stepper() {
    (0, _classCallCheck3.default)(this, Stepper);
    return (0, _possibleConstructorReturn3.default)(this, (Stepper.__proto__ || (0, _getPrototypeOf2.default)(Stepper)).apply(this, arguments));
  }

  (0, _createClass3.default)(Stepper, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          activeStepIndex = _props.activeStepIndex,
          steps = _props.steps;

      return _react2.default.createElement(
        'div',
        {
          className: _style2.default.dynamic([['2333751876', [_colors.navy, _colors.navy, _colors.navy]]]) + ' ' + 'stepper'
        },
        steps.map(function (label, index) {
          var active = activeStepIndex === index;
          var finished = index < activeStepIndex;
          return _react2.default.createElement(
            'div',
            { key: label, className: _style2.default.dynamic([['2333751876', [_colors.navy, _colors.navy, _colors.navy]]]) + ' ' + ((0, _classnames2.default)('step', {
                active: active,
                finished: finished
              }) || '')
            },
            _react2.default.createElement(
              'div',
              {
                className: _style2.default.dynamic([['2333751876', [_colors.navy, _colors.navy, _colors.navy]]]) + ' ' + 'step-index'
              },
              index + 1
            ),
            _react2.default.createElement(
              'div',
              {
                className: _style2.default.dynamic([['2333751876', [_colors.navy, _colors.navy, _colors.navy]]]) + ' ' + 'step-label'
              },
              label
            )
          );
        }),
        _react2.default.createElement(_style2.default, {
          styleId: '2333751876',
          css: '.stepper.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:14px;}.step.__jsx-style-dynamic-selector{-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 12px;position:relative;overflow:hidden;}.step-label.__jsx-style-dynamic-selector{-webkit-flex:1;-ms-flex:1;flex:1;color:#cdcdcd;}.step-index.__jsx-style-dynamic-selector{width:20px;height:20px;font-size:12px;text-align:center;vertical-align:middle;border-radius:50%;line-height:20px;font-weight:600;background:#e6e6e6;color:#fff;margin-bottom:8px;position:relative;}.step-index.__jsx-style-dynamic-selector:before,.step-index.__jsx-style-dynamic-selector:after{content:\'\';border-top:2px solid #e6e6e6;position:absolute;top:8px;left:-300px;width:300px;z-index:-1;}.step-index.__jsx-style-dynamic-selector:after{left:0;}.step.__jsx-style-dynamic-selector:first-child .step-index.__jsx-style-dynamic-selector:before,.step.__jsx-style-dynamic-selector:last-child .step-index.__jsx-style-dynamic-selector:after{display:none;}.step.active.__jsx-style-dynamic-selector .step-index.__jsx-style-dynamic-selector,.step.finished.__jsx-style-dynamic-selector .step-index.__jsx-style-dynamic-selector{background:' + _colors.navy + ';}.step.active.__jsx-style-dynamic-selector .step-label.__jsx-style-dynamic-selector,.step.finished.__jsx-style-dynamic-selector .step-label.__jsx-style-dynamic-selector{color:' + _colors.navy + ';font-weight:bold;}.step.finished.__jsx-style-dynamic-selector .step-label.__jsx-style-dynamic-selector{font-weight:normal;}.step.finished.__jsx-style-dynamic-selector .step-index.__jsx-style-dynamic-selector{background:#608997;}.step.finished.__jsx-style-dynamic-selector .step-label.__jsx-style-dynamic-selector{color:#608997;}.step.active.__jsx-style-dynamic-selector .step-index.__jsx-style-dynamic-selector:before,.step.finished.__jsx-style-dynamic-selector .step-index.__jsx-style-dynamic-selector:before,.step.finished.__jsx-style-dynamic-selector .step-index.__jsx-style-dynamic-selector:after{border-color:' + _colors.navy + ';opacity:.5;}',
          dynamic: [_colors.navy, _colors.navy, _colors.navy]
        })
      );
    }
  }]);
  return Stepper;
}(_react.PureComponent);

Stepper.propTypes = {
  activeStepIndex: _propTypes2.default.number.isRequired,
  steps: _propTypes2.default.arrayOf(_propTypes2.default.string.isRequired).isRequired
};

exports.default = Stepper;