@vtex/styleguide/lib/Progress/Line.js

> VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ProgressLine = exports.ProgressLineTypes = undefined;

var _classnames = require("classnames");

var _classnames2 = _interopRequireDefault(_classnames);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _styles = require("./styles.css");

var _styles2 = _interopRequireDefault(_styles);

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

var ProgressLineTypes = exports.ProgressLineTypes = {
  percent: _propTypes2.default.number.isRequired
};

var ProgressLine = exports.ProgressLine = function ProgressLine(props) {
  var barClasses = (0, _classnames2.default)(_styles2.default.progressHeight, 'w-100 br4 overflow-hidden bg-light-silver');
  var stepClasses = (0, _classnames2.default)(_styles2.default.progressHeight, 'br4', {
    'bg-action-primary': props.percent !== 100,
    'bg-success': props.percent === 100
  });
  return _react2.default.createElement("div", {
    className: barClasses
  }, _react2.default.createElement("div", {
    className: stepClasses,
    style: {
      width: props.percent + "%"
    }
  }));
};

ProgressLine.propTypes = ProgressLineTypes;