@hipay/hipay-material-ui 2.3.0-rcstyleguide-beta3 → 2.3.0-rcstyleguide-beta5

package/old_components/HiBreadcrumb/HiBreadcrumb.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf3 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _HiStep = _interopRequireDefault(require("./HiStep"));
+
+var _HiStepLabel = _interopRequireDefault(require("./HiStepLabel"));
+
+var _HiStepper = _interopRequireDefault(require("./HiStepper"));
+
+var HiBreadcrumb =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiBreadcrumb, _React$PureComponent);
+
+  function HiBreadcrumb() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiBreadcrumb);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(HiBreadcrumb)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleStep", function (idx) {
+      return function () {
+        if (_this.props.disableNavigation === false) {
+          _this.props.handleStep(idx);
+        }
+      };
+    });
+    return _this;
+  }
+
+  (0, _createClass2.default)(HiBreadcrumb, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          activeStep = _this$props.activeStep,
+          classes = _this$props.classes,
+          steps = _this$props.steps,
+          type = _this$props.type,
+          disableNavigation = _this$props.disableNavigation;
+      return _react.default.createElement(_HiStepper.default, {
+        activeStep: activeStep,
+        type: type
+      }, _react.default.createElement(_react.default.Fragment, null, steps.map(function (step, index) {
+        var validConnector = step.status === 'validated' && index < steps.length - 1 && (steps[index + 1].status === 'validated' || steps[index + 1].status === 'active');
+        return _react.default.createElement(_HiStep.default, {
+          index: step.id,
+          content: step.content,
+          key: step.id,
+          onClick: _this2.handleStep(step.id),
+          isLast: index === steps.length - 1,
+          validConnector: validConnector,
+          type: type,
+          steps: steps,
+          active: activeStep === step.id
+        }, _react.default.createElement(_HiStepLabel.default, {
+          classes: classes,
+          active: activeStep === step.id,
+          status: step.status,
+          notificationNumber: step.notificationNumber,
+          type: type,
+          disableNavigation: disableNavigation
+        }, step.label));
+      })));
+    }
+  }]);
+  return HiBreadcrumb;
+}(_react.default.PureComponent);
+
+(0, _defineProperty2.default)(HiBreadcrumb, "defaultProps", {
+  activeStep: 0,
+  type: 'back',
+  disableNavigation: false
+});
+var _default = HiBreadcrumb;
+exports.default = _default;

package/old_components/HiBreadcrumb/HiStep.js

@@ -0,0 +1,128 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectSpread2"));
+
+var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf3 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _HiStepConnector = _interopRequireDefault(require("./HiStepConnector"));
+
+var _HiStepContent = _interopRequireDefault(require("./HiStepContent"));
+
+var styles = function styles() {
+  return {
+    lastStep: {
+      marginBottom: 40
+    },
+    step: {
+      outline: 'none'
+    }
+  };
+};
+
+exports.styles = styles;
+
+var HiStep =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiStep, _React$PureComponent);
+
+  function HiStep() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiStep);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(HiStep)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focus", function () {
+      return _this.ref.focus;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleRef", function (component) {
+      _this.ref = component;
+    });
+    return _this;
+  }
+
+  (0, _createClass2.default)(HiStep, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          active = _this$props.active,
+          children = _this$props.children,
+          classes = _this$props.classes,
+          content = _this$props.content,
+          index = _this$props.index,
+          isLast = _this$props.isLast,
+          onClick = _this$props.onClick,
+          steps = _this$props.steps,
+          type = _this$props.type,
+          validConnector = _this$props.validConnector;
+      return _react.default.createElement("div", {
+        role: "button",
+        tabIndex: index,
+        className: (0, _classnames.default)(classes.step, (0, _defineProperty2.default)({}, classes.lastStep, isLast && type !== 'back')),
+        onClick: onClick,
+        onKeyDown: onClick
+      }, _react.default.Children.map(children, function (child) {
+        return _react.default.cloneElement(child, (0, _objectSpread2.default)({
+          active: active
+        }, child.props));
+      }), !isLast && _react.default.createElement(_HiStepConnector.default, {
+        validConnector: validConnector,
+        type: type,
+        steps: steps,
+        active: active,
+        content: content
+      }), content && active && isLast && type === 'front-light' && _react.default.createElement(_HiStepContent.default, {
+        content: content,
+        isLast: true
+      }));
+    }
+  }]);
+  return HiStep;
+}(_react.default.PureComponent);
+
+(0, _defineProperty2.default)(HiStep, "defaultProps", {
+  active: false,
+  content: _react.default.createElement("span", null),
+  isLast: false,
+  steps: [],
+  type: 'back',
+  validConnector: false
+});
+
+var _default = (0, _styles.withStyles)(styles, {
+  hiComponent: true,
+  name: 'MuiHiStep'
+})(HiStep);
+
+exports.default = _default;

package/old_components/HiBreadcrumb/HiStepConnector.js

@@ -0,0 +1,164 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _extends2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _HiStepContent = _interopRequireDefault(require("./HiStepContent"));
+
+var styles = function styles(theme) {
+  return {
+    root: {
+      display: 'flex',
+      flex: '1 1 auto',
+      marginLeft: 13 // half icon
+
+    },
+    line: {
+      display: 'block',
+      borderColor: theme.palette.grey[600],
+      borderLeftStyle: 'solid',
+      borderLeftWidth: 2,
+      height: 40,
+      margin: '-2px 0px'
+    },
+    greenLine: {
+      borderColor: theme.palette.positive.main
+    },
+    lightLine: {
+      borderColor: '#FFFFFF'
+    }
+  };
+};
+/**
+ * @ignore - internal component.
+ */
+
+
+exports.styles = styles;
+
+var HiStepConnector =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiStepConnector, _React$PureComponent);
+
+  function HiStepConnector(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiStepConnector);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiStepConnector).call(this, props));
+    _this.state = {
+      height: 800
+    };
+    _this.updateWindowDimensions = _this.updateWindowDimensions.bind((0, _assertThisInitialized2.default)(_this));
+    return _this;
+  }
+
+  (0, _createClass2.default)(HiStepConnector, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.updateWindowDimensions();
+      window.addEventListener('resize', this.updateWindowDimensions);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      window.removeEventListener('resize', this.updateWindowDimensions);
+    }
+  }, {
+    key: "updateWindowDimensions",
+    value: function updateWindowDimensions() {
+      this.setState({
+        height: window.innerHeight
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _classNames;
+
+      var _this$props = this.props,
+          active = _this$props.active,
+          classNameProp = _this$props.className,
+          classes = _this$props.classes,
+          content = _this$props.content,
+          steps = _this$props.steps,
+          type = _this$props.type,
+          validConnector = _this$props.validConnector,
+          other = (0, _objectWithoutProperties2.default)(_this$props, ["active", "className", "classes", "content", "steps", "type", "validConnector"]);
+      var height = this.state.height;
+      var className = (0, _classnames.default)(classes.root, classNameProp);
+      var lineClassName = (0, _classnames.default)(classes.line, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.greenLine, validConnector), (0, _defineProperty2.default)(_classNames, classes.lightLine, type === 'front-light'), _classNames));
+      var lineHeight = 40;
+
+      if (type !== 'back') {
+        // Pour un breadcrumb Front, la tige du connector de la step active doit s'allonger en fonction de la hauteur de la page et du nombre de steps
+        lineHeight = height - 226 - 58 * (steps.length - 1);
+
+        if (lineHeight < 202) {
+          lineHeight = 202;
+        }
+      }
+
+      var heightStyle = {};
+
+      if (active) {
+        heightStyle = {
+          height: lineHeight
+        };
+      }
+
+      return _react.default.createElement("div", (0, _extends2.default)({
+        className: className
+      }, other), _react.default.createElement("span", {
+        className: lineClassName,
+        style: heightStyle
+      }), type === 'front-light' && active && content && _react.default.createElement(_HiStepContent.default, {
+        content: content
+      }));
+    }
+  }]);
+  return HiStepConnector;
+}(_react.default.PureComponent);
+
+(0, _defineProperty2.default)(HiStepConnector, "defaultProps", {
+  active: false,
+  content: _react.default.createElement("span", null),
+  steps: [],
+  type: 'back',
+  validConnector: false
+});
+
+var _default = (0, _styles.withStyles)(styles, {
+  hiComponent: true,
+  name: 'HiMuiHiStepConnector'
+})(HiStepConnector);
+
+exports.default = _default;

package/old_components/HiBreadcrumb/HiStepContent.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
+
+var _styles = require("@material-ui/core/styles");
+
+var styles = function styles() {
+  return {
+    root: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+    contentContainer: {
+      height: 'fit-content',
+      maxHeight: 300,
+      marginTop: 35,
+      marginLeft: 24,
+      padding: 24,
+      textAlign: 'center',
+      fontFamily: 'Roboto, Regular, sans-serif',
+      color: '#737373',
+      fontSize: 14,
+      lineHeight: '20px',
+      borderRadius: 3
+    },
+    lastStep: {
+      marginLeft: 0,
+      marginTop: 20
+    }
+  };
+};
+
+exports.styles = styles;
+
+var HiStepContent =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiStepContent, _React$PureComponent);
+
+  function HiStepContent() {
+    (0, _classCallCheck2.default)(this, HiStepContent);
+    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiStepContent).apply(this, arguments));
+  }
+
+  (0, _createClass2.default)(HiStepContent, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          content = _this$props.content,
+          isLast = _this$props.isLast;
+      return _react.default.createElement(_Paper.default, {
+        square: true,
+        className: (0, _classnames.default)(classes.contentContainer, (0, _defineProperty2.default)({}, classes.lastStep, isLast))
+      }, _react.default.createElement("div", {
+        className: classes.root
+      }, content));
+    }
+  }]);
+  return HiStepContent;
+}(_react.default.PureComponent);
+
+(0, _defineProperty2.default)(HiStepContent, "defaultProps", {
+  content: _react.default.createElement("span", null),
+  isLast: false
+});
+
+var _default = (0, _styles.withStyles)(styles, {
+  hiComponent: true,
+  name: 'HiMuiHiStepContent'
+})(HiStepContent);
+
+exports.default = _default;

package/old_components/HiBreadcrumb/HiStepIcon.js

@@ -0,0 +1,154 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _styles = require("@material-ui/core/styles");
+
+var styles = function styles(theme) {
+  return {
+    circle: {
+      borderRadius: '50%',
+      width: 16,
+      height: 16,
+      border: "solid 2px ".concat(theme.palette.neutral.main),
+      marginLeft: 6,
+      display: 'inline-block'
+    },
+    dotAround: {
+      border: "2px solid ".concat(theme.palette.neutral.main),
+      backgroundColor: 'transparent',
+      borderRadius: '100%',
+      width: 16,
+      height: 16,
+      marginLeft: 6,
+      '&:hover': {
+        transform: 'scale(1.2)'
+      }
+    },
+    dot: {
+      backgroundColor: theme.palette.neutral.main,
+      borderRadius: '100%',
+      width: 6,
+      height: 6,
+      '&:hover': {
+        transform: 'scale(1.2)'
+      },
+      marginLeft: 8
+    },
+    activeStep: {
+      marginTop: 3,
+      marginLeft: 3,
+      width: 6,
+      height: 6,
+      '&:hover': {
+        transform: 'scale(1)'
+      }
+    },
+    dotValidated: {
+      backgroundColor: theme.palette.positive.main,
+      border: "2px solid ".concat(theme.palette.positive.main)
+    },
+    dotRefused: {
+      backgroundColor: theme.palette.error.main,
+      border: "2px solid ".concat(theme.palette.error.main)
+    },
+    dotWarning: {
+      backgroundColor: theme.palette.middle.normal,
+      border: "2px solid ".concat(theme.palette.middle.main)
+    },
+    dotActive: {
+      backgroundColor: '#00ADE9',
+      border: '2px solid #00ADE9'
+    },
+    dotLight: {
+      backgroundColor: '#FFFFFF',
+      border: '2px solid #FFFFFF'
+    },
+    validated: {
+      border: "2px solid ".concat(theme.palette.positive.main)
+    },
+    refused: {
+      border: "2px solid ".concat(theme.palette.negative.main)
+    },
+    warning: {
+      border: "2px solid ".concat(theme.palette.middle.main)
+    },
+    active: {
+      border: 'solid 2px #00ADE9'
+    },
+    light: {
+      border: 'solid 2px #FFFFFF'
+    }
+  };
+};
+
+exports.styles = styles;
+
+var HiStepIcon =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiStepIcon, _React$PureComponent);
+
+  function HiStepIcon() {
+    (0, _classCallCheck2.default)(this, HiStepIcon);
+    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiStepIcon).apply(this, arguments));
+  }
+
+  (0, _createClass2.default)(HiStepIcon, [{
+    key: "render",
+    value: function render() {
+      var _classNames, _classNames2, _classNames3;
+
+      var _this$props = this.props,
+          active = _this$props.active,
+          classes = _this$props.classes,
+          status = _this$props.status,
+          type = _this$props.type;
+      var dotAroundClass = (0, _classnames.default)(classes.dotAround, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.validated, status === 'validated'), (0, _defineProperty2.default)(_classNames, classes.refused, status === 'refused'), (0, _defineProperty2.default)(_classNames, classes.warning, status === 'warning'), (0, _defineProperty2.default)(_classNames, classes.active, status === 'active'), (0, _defineProperty2.default)(_classNames, classes.light, type === 'front-light'), _classNames));
+      var innerDotClass = (0, _classnames.default)(classes.dot, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.activeStep, active), (0, _defineProperty2.default)(_classNames2, classes.dotValidated, status === 'validated'), (0, _defineProperty2.default)(_classNames2, classes.dotRefused, status === 'refused'), (0, _defineProperty2.default)(_classNames2, classes.dotWarning, status === 'warning'), (0, _defineProperty2.default)(_classNames2, classes.dotActive, status === 'active'), (0, _defineProperty2.default)(_classNames2, classes.dotLight, type === 'front-light'), _classNames2));
+      var dotClassName = (0, _classnames.default)(classes.circle, (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, classes.refused, status === 'refused'), (0, _defineProperty2.default)(_classNames3, classes.validated, status === 'validated'), (0, _defineProperty2.default)(_classNames3, classes.warning, status === 'warning'), (0, _defineProperty2.default)(_classNames3, classes.active, status === 'active'), (0, _defineProperty2.default)(_classNames3, classes.light, type === 'front-light'), _classNames3));
+      return _react.default.createElement(_react.default.Fragment, null, active && _react.default.createElement("div", {
+        className: dotAroundClass
+      }, _react.default.createElement("div", {
+        className: innerDotClass
+      })), !active && _react.default.createElement("div", {
+        className: dotClassName
+      }));
+    }
+  }]);
+  return HiStepIcon;
+}(_react.default.PureComponent);
+
+(0, _defineProperty2.default)(HiStepIcon, "defaultProps", {
+  active: false,
+  status: 'unreviewed',
+  type: 'back'
+});
+
+var _default = (0, _styles.withStyles)(styles, {
+  hiComponent: true,
+  name: 'HiMuiHiStepIcon'
+})(HiStepIcon);
+
+exports.default = _default;