@stokr/components-library 1.0.9 → 1.1.1

package/dist/components/StepController/StepController.js

@@ -0,0 +1,111 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StepController = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactTransitionGroup = require("react-transition-group");
+var _StepController = require("./StepController.styles");
+var _StepControllerProgress = _interopRequireDefault(require("./StepControllerProgress"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+var timeout = 300;
+var getTransitionStyles = {
+  entering: {
+    position: 'absolute',
+    opacity: 0
+  },
+  entered: {
+    transition: "opacity ".concat(timeout, "ms ease-in-out"),
+    opacity: 1
+  },
+  exiting: {
+    transition: "opacity ".concat(timeout, "ms ease-in-out"),
+    opacity: 0
+  }
+};
+var StepController = /*#__PURE__*/function (_PureComponent) {
+  _inherits(StepController, _PureComponent);
+  var _super = _createSuper(StepController);
+  function StepController() {
+    _classCallCheck(this, StepController);
+    return _super.apply(this, arguments);
+  }
+  _createClass(StepController, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this$props = this.props,
+        changeStep = _this$props.changeStep,
+        stepsProgressList = _this$props.stepsProgressList;
+      changeStep(stepsProgressList[0].id);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        children = _this$props2.children,
+        stepsProgressList = _this$props2.stepsProgressList,
+        currentStep = _this$props2.currentStep,
+        activeStepIndex = _this$props2.activeStepIndex,
+        doneStepsIndexes = _this$props2.doneStepsIndexes,
+        touchedStepsIndexes = _this$props2.touchedStepsIndexes;
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_StepController.StepsProgressContainer, null, /*#__PURE__*/_react.default.createElement(_StepControllerProgress.default, {
+        activeStepIndex: activeStepIndex,
+        doneStepsIndexes: doneStepsIndexes,
+        touchedStepsIndexes: touchedStepsIndexes,
+        stepsProgressList: stepsProgressList
+      })), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, {
+        component: _StepController.StepContainer
+      }, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
+        key: currentStep,
+        timeout: {
+          enter: timeout,
+          exit: timeout
+        }
+      }, function (status) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          style: _objectSpread({
+            height: '100%'
+          }, getTransitionStyles[status])
+        }, _react.default.Children.map(children, function (child) {
+          if (child.props.id === currentStep && /*#__PURE__*/_react.default.isValidElement(child)) {
+            return child;
+          }
+          return null;
+        }));
+      })));
+    }
+  }]);
+  return StepController;
+}(_react.PureComponent);
+exports.StepController = StepController;
+StepController.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  stepsProgressList: _propTypes.default.instanceOf(Array).isRequired,
+  currentStep: _propTypes.default.string.isRequired,
+  activeStepIndex: _propTypes.default.number.isRequired,
+  touchedStepsIndexes: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
+  doneStepsIndexes: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
+  changeStep: _propTypes.default.func.isRequired
+};
+var _default = StepController;
+exports.default = _default;

package/dist/components/StepController/StepController.stories.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SCTouched1Done0 = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _StepController = require("./StepController");
+var _SvgIcons = require("../SvgIcons");
+var _global = _interopRequireDefault(require("../../styles/global"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/StepController/Stepcontroller',
+  component: _StepController.StepController,
+  argTypes: {
+    children: {
+      type: 'node',
+      defaultValue: [],
+      required: true
+    },
+    stepsProgressList: {
+      type: 'node',
+      defaultValue: [],
+      required: true
+    },
+    currentStep: {
+      type: 'string',
+      defaultValue: '',
+      required: true
+    },
+    activeStepIndex: {
+      type: 'number',
+      defaultValue: 1,
+      required: true
+    },
+    touchedStepsIndexes: {
+      type: 'array of numbers',
+      defaultValue: []
+    },
+    doneStepsIndexes: {
+      type: 'array of numbers',
+      defaultValue: []
+    },
+    changeStep: {
+      type: 'function',
+      action: 'changeStep'
+    }
+  }
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_StepController.StepController, args));
+};
+var SCTouched1Done0 = Template.bind({});
+exports.SCTouched1Done0 = SCTouched1Done0;
+SCTouched1Done0.args = {
+  children: [/*#__PURE__*/_react.default.createElement(_SvgIcons.OneSvg, null), /*#__PURE__*/_react.default.createElement(_SvgIcons.TwoSvg, null), /*#__PURE__*/_react.default.createElement(_SvgIcons.FourSvg, null)],
+  stepsProgressList: [/*#__PURE__*/_react.default.createElement(_SvgIcons.OneSvg, null), /*#__PURE__*/_react.default.createElement(_SvgIcons.TwoSvg, null), /*#__PURE__*/_react.default.createElement(_SvgIcons.FourSvg, null)],
+  touchedStepsIndexes: [1],
+  doneStepsIndexes: [0]
+};
+
+//doublecheck:
+// no story for StepControllerContext. varying export names

package/dist/components/StepController/StepController.styles.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StepsProgressContainer = exports.StepContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _rwd = _interopRequireDefault(require("../../styles/rwd"));
+var _theme = _interopRequireDefault(require("../../styles/theme"));
+var _templateObject, _templateObject2;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var StepsProgressContainer = _styledComponents.default.div.withConfig({
+  displayName: "StepControllerstyles__StepsProgressContainer",
+  componentId: "sc-143sf1l-0"
+})(["position:relative;width:100%;height:40px;padding:4px 0;box-shadow:0 1px 0 0 ", ";", ""], function (props) {
+  return _theme.default.cLightGrey;
+}, _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: 56px;\n    padding: 12px 0;\n  "]))));
+exports.StepsProgressContainer = StepsProgressContainer;
+var StepContainer = _styledComponents.default.div.withConfig({
+  displayName: "StepControllerstyles__StepContainer",
+  componentId: "sc-143sf1l-1"
+})(["width:100%;height:100%;position:relative;overflow:hidden;", ""], _rwd.default.Medium(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    ", "\n  "])), function (props) {
+  return props.heightLimited && "\n      height: 80vh;\n    ";
+}));
+exports.StepContainer = StepContainer;

package/dist/components/StepController/StepControllerContext.js

@@ -0,0 +1,104 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StepControllerProvider = exports.StepControllerConsumer = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var StepControllerContext = /*#__PURE__*/_react.default.createContext();
+var StepControllerProvider = /*#__PURE__*/function (_Component) {
+  _inherits(StepControllerProvider, _Component);
+  var _super = _createSuper(StepControllerProvider);
+  function StepControllerProvider() {
+    var _this;
+    _classCallCheck(this, StepControllerProvider);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      currentStep: '',
+      prevStep: '',
+      prevStepIndex: null,
+      activeStepIndex: 0,
+      doneStepsIndexes: [],
+      touchedStepsIndexes: []
+    });
+    _defineProperty(_assertThisInitialized(_this), "changeStep", function (stepName) {
+      var activeStep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+      var doneStep = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+      var _this$state = _this.state,
+        activeStepIndex = _this$state.activeStepIndex,
+        doneStepsIndexes = _this$state.doneStepsIndexes,
+        touchedStepsIndexes = _this$state.touchedStepsIndexes;
+      var nextActiveStep = activeStep === null ? activeStepIndex : activeStep;
+      var nextDoneStepIndexes = doneStepsIndexes.slice();
+      var nextTouchedStepsIndexes = touchedStepsIndexes.slice();
+      var emptyDoneStep;
+      if (doneStep !== null && !nextDoneStepIndexes.includes(doneStep)) {
+        nextDoneStepIndexes.push(doneStep);
+      }
+      if (!nextTouchedStepsIndexes.includes(nextActiveStep)) {
+        nextTouchedStepsIndexes.push(nextActiveStep);
+      }
+      if (Array.isArray(doneStep) && doneStep.length === 0) {
+        emptyDoneStep = [];
+      }
+      _this.setState(function () {
+        return {
+          currentStep: stepName,
+          activeStepIndex: nextActiveStep,
+          doneStepsIndexes: emptyDoneStep || nextDoneStepIndexes,
+          touchedStepsIndexes: nextTouchedStepsIndexes
+        };
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "setPrevStep", function (prevStep) {
+      var prevStepIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+      _this.setState({
+        prevStep: prevStep,
+        prevStepIndex: prevStepIndex
+      });
+    });
+    return _this;
+  }
+  _createClass(StepControllerProvider, [{
+    key: "render",
+    value: function render() {
+      var children = this.props.children;
+      return /*#__PURE__*/_react.default.createElement(StepControllerContext.Provider, {
+        value: _objectSpread(_objectSpread({}, this.state), {}, {
+          changeStep: this.changeStep,
+          setPrevStep: this.setPrevStep
+        })
+      }, children);
+    }
+  }]);
+  return StepControllerProvider;
+}(_react.Component);
+exports.StepControllerProvider = StepControllerProvider;
+StepControllerProvider.propTypes = {
+  children: _propTypes.default.node.isRequired
+};
+var StepControllerConsumer = StepControllerContext.Consumer;
+exports.StepControllerConsumer = StepControllerConsumer;

package/dist/components/StepController/StepControllerProgress.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StepControllerProgress = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _StepsProgress = require("../StepsProgress/StepsProgress.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var StepControllerProgress = function StepControllerProgress(_ref) {
+  var touchedStepsIndexes = _ref.touchedStepsIndexes,
+    doneStepsIndexes = _ref.doneStepsIndexes,
+    activeStepIndex = _ref.activeStepIndex,
+    stepsProgressList = _ref.stepsProgressList;
+  var handleItemClick = function handleItemClick(item, key) {
+    if (touchedStepsIndexes.includes(key)) {
+      item.handleClick(item.id);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_StepsProgress.Container, null, /*#__PURE__*/_react.default.createElement(_StepsProgress.Wrap, null, /*#__PURE__*/_react.default.createElement(_StepsProgress.Items, null, stepsProgressList.map(function (item, key) {
+    return /*#__PURE__*/_react.default.createElement(_StepsProgress.Item, {
+      key: item.id,
+      isDone: doneStepsIndexes.includes(key),
+      isActive: key === activeStepIndex,
+      onClick: function onClick() {
+        return handleItemClick(item, key);
+      }
+    });
+  }))));
+};
+exports.StepControllerProgress = StepControllerProgress;
+StepControllerProgress.propTypes = {
+  touchedStepsIndexes: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
+  doneStepsIndexes: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
+  activeStepIndex: _propTypes.default.number.isRequired,
+  stepsProgressList: _propTypes.default.instanceOf(Array).isRequired
+};
+var _default = StepControllerProgress;
+exports.default = _default;

package/dist/components/StepController/StepControllerProgress.stories.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SCPTouched2Done2 = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _StepControllerProgress = require("./StepControllerProgress");
+var _SvgIcons = require("../SvgIcons");
+var _global = _interopRequireDefault(require("../../styles/global"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/StepController/StepControllerProgress',
+  component: _StepControllerProgress.StepControllerProgress,
+  argTypes: {
+    stepsProgressList: {
+      type: 'node',
+      defaultValue: [],
+      required: true
+    },
+    activeStepIndex: {
+      type: 'number',
+      defaultValue: 1,
+      required: true
+    },
+    touchedStepsIndexes: {
+      type: 'array of numbers',
+      defaultValue: []
+    },
+    doneStepsIndexes: {
+      type: 'array of numbers',
+      defaultValue: []
+    },
+    handleItemClick: {
+      type: 'function',
+      action: 'handleItemClick'
+    }
+  }
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_StepControllerProgress.StepControllerProgress, args));
+};
+var SCPTouched2Done2 = Template.bind({});
+exports.SCPTouched2Done2 = SCPTouched2Done2;
+SCPTouched2Done2.args = {
+  stepsProgressList: [/*#__PURE__*/_react.default.createElement(_SvgIcons.OneSvg, null), /*#__PURE__*/_react.default.createElement(_SvgIcons.TwoSvg, null), /*#__PURE__*/_react.default.createElement(_SvgIcons.FourSvg, null)],
+  touchedStepsIndexes: [2],
+  doneStepsIndexes: [2]
+};
+
+//doublecheck:
+// no story for StepControllerContext bc of varying export names

package/dist/components/StepsProgress/StepsProgress.js

@@ -0,0 +1,146 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StepsProgressSignup = exports.StepsProgressHeader = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _StepsProgress = require("./StepsProgress.styles");
+var _globalVariables = require("../../constants/globalVariables");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var StepsProgressSignup = function StepsProgressSignup(props) {
+  var navigate = (0, _reactRouterDom.useNavigate)();
+  var user = props.user;
+  var country = user.country,
+    kyc_status = user.kyc_status,
+    _user$KYCDocuments = user.KYCDocuments,
+    KYCDocuments = _user$KYCDocuments === void 0 ? {} : _user$KYCDocuments,
+    entity_name = user.entity_name,
+    _user$investor_eth_ad = user.investor_eth_addresses,
+    investor_eth_addresses = _user$investor_eth_ad === void 0 ? [] : _user$investor_eth_ad,
+    is_risk_questionnaire_finished = user.is_risk_questionnaire_finished,
+    taxId = user.taxId,
+    _user$wallets = user.wallets,
+    wallets = _user$wallets === void 0 ? [] : _user$wallets;
+  var isKYCRejected = !kyc_status || kyc_status === 'Reaply' || kyc_status === 'Draft';
+  var hasLiquidWallet = (wallets === null || wallets === void 0 ? void 0 : wallets.filter(function (wallet) {
+    return wallet.type === _globalVariables.walletTypes.LIQUID;
+  }).length) > 0;
+  var areAllDoneInvestor = !!country && !isKYCRejected && hasLiquidWallet && !!taxId && !!is_risk_questionnaire_finished;
+  var areAllDoneEntity = hasLiquidWallet && !!is_risk_questionnaire_finished;
+  var isActiveStep = function isActiveStep(path) {
+    return window.location.pathname.includes(path);
+  };
+  var items = entity_name ? [{
+    id: 'taxId',
+    handleClick: function handleClick() {
+      return navigate('/taxid');
+    },
+    isDone: !!taxId,
+    isActive: isActiveStep('/taxid')
+  }, {
+    id: 'ampID',
+    handleClick: function handleClick() {
+      return navigate('/register-liquid-securities');
+    },
+    isDone: hasLiquidWallet,
+    isActive: isActiveStep('/register-liquid-securities')
+  }, {
+    id: 'risk',
+    handleClick: function handleClick() {
+      return navigate('/risk-questionnaire');
+    },
+    isDone: !!is_risk_questionnaire_finished,
+    isActive: isActiveStep('/risk-questionnaire')
+  }, {
+    id: 'overview',
+    handleClick: function handleClick() {
+      return navigate('/overview/remaining');
+    },
+    isDone: areAllDoneEntity,
+    isActive: isActiveStep('/overview/remaining')
+  }] : [{
+    id: 'country',
+    handleClick: function handleClick() {
+      return navigate('/country-of-residence');
+    },
+    isDone: !!country,
+    isActive: isActiveStep('/country-of-residence')
+  }, {
+    id: 'verify',
+    handleClick: function handleClick() {
+      return navigate('/verify-identity');
+    },
+    isDone: !isKYCRejected,
+    isActive: isActiveStep('/verify-identity')
+  }, {
+    id: 'taxId',
+    handleClick: function handleClick() {
+      return navigate('/taxid');
+    },
+    isDone: !!taxId,
+    isActive: isActiveStep('/taxid')
+  }, {
+    id: 'ampID',
+    handleClick: function handleClick() {
+      return navigate('/register-liquid-securities');
+    },
+    isDone: hasLiquidWallet,
+    isActive: isActiveStep('/register-liquid-securities')
+  }, {
+    id: 'risk',
+    handleClick: function handleClick() {
+      return navigate('/risk-questionnaire');
+    },
+    isDone: !!is_risk_questionnaire_finished,
+    isActive: isActiveStep('/risk-questionnaire')
+  }, {
+    id: 'overview',
+    handleClick: function handleClick() {
+      return navigate('/overview/remaining');
+    },
+    isDone: areAllDoneInvestor,
+    isActive: isActiveStep('/overview/remaining')
+  }];
+  return /*#__PURE__*/_react.default.createElement(_StepsProgress.Container, null, /*#__PURE__*/_react.default.createElement(_StepsProgress.Wrap, null, /*#__PURE__*/_react.default.createElement(_StepsProgress.Items, null, items.map(function (item, key) {
+    return /*#__PURE__*/_react.default.createElement(_StepsProgress.Item, {
+      key: item.id,
+      isDone: item.isDone,
+      isActive: item.isActive,
+      onClick: function onClick() {
+        if (item.handleClick) {
+          item.handleClick(item.id);
+        }
+      }
+    });
+  }))));
+};
+exports.StepsProgressSignup = StepsProgressSignup;
+var StepsProgressHeader = function StepsProgressHeader(_ref) {
+  var items = _ref.items,
+    doneIndex = _ref.doneIndex,
+    activeIndex = _ref.activeIndex;
+  return /*#__PURE__*/_react.default.createElement(_StepsProgress.Container, null, /*#__PURE__*/_react.default.createElement(_StepsProgress.Wrap, null, /*#__PURE__*/_react.default.createElement(_StepsProgress.Items, null, items === null || items === void 0 ? void 0 : items.map(function (item, key) {
+    return /*#__PURE__*/_react.default.createElement(_StepsProgress.Item, {
+      key: item.id,
+      isDone: key <= doneIndex,
+      isActive: key === activeIndex,
+      onClick: function onClick() {
+        item.handleClick && item.handleClick(item.id);
+      }
+    });
+  }))));
+};
+
+// StepsProgress.propTypes = {
+//   user: PropTypes.object,
+// }
+exports.StepsProgressHeader = StepsProgressHeader;
+StepsProgressSignup.defaultProps = {
+  user: {}
+};
+var _default = StepsProgressSignup;
+exports.default = _default;

package/dist/components/StepsProgress/StepsProgress.stories.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.stepsProgress = exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _StepsProgress = require("./StepsProgress");
+var _AuthContext = require("../context/AuthContext");
+var _reactRouterDom = require("react-router-dom");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//import { withKnobs, select, boolean, array } from '@storybook/addon-knobs'
+var _default = {
+  title: 'Components Library/Steps Progress',
+  component: _StepsProgress.StepsProgress
+  //decorators: [withKnobs],
+}; //maybe change to args
+exports.default = _default;
+var stepsProgress = function stepsProgress() {
+  return /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_AuthContext.AuthProvider, null, /*#__PURE__*/_react.default.createElement(_StepsProgress.StepsProgress, {
+    user: {
+      //country: select('country', ['', 'Austria', 'Brazil']),
+      // kyc_status: select('kyc_status', [
+      //   '',
+      //   'Draft',
+      //   'Pending',
+      //   'Approved',
+      //   'Accepted',
+      //   'Rejected',
+      //   'Denied',
+      //   'Escalated',
+      //   'In progress',
+      //   'Reapply',
+      // ]),
+      // KYCDocuments: {
+      //   status: select('KYCDocuments', [
+      //     '',
+      //     'Pending',
+      //     'Approved',
+      //     'Rejected',
+      //   ]),
+      // },
+      // entity_name: select('entity_name', ['', 'Some entity name']),
+      // investor_eth_addresses: array('investor_eth_addresses', []),
+      // is_risk_questionnaire_finished: boolean(
+      //   'is_risk_questionnaire_finished',
+      // ),
+    }
+  })));
+};
+exports.stepsProgress = stepsProgress;

package/dist/components/StepsProgress/StepsProgress.styles.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrap = exports.Items = exports.Item = exports.Container = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _rwd = _interopRequireDefault(require("../../styles/rwd"));
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+var _templateObject, _templateObject2;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var Container = _styledComponents.default.div.withConfig({
+  displayName: "StepsProgressstyles__Container",
+  componentId: "sc-1gnllve-0"
+})(["display:block;width:100%;height:100%;"]);
+exports.Container = Container;
+var Wrap = _styledComponents.default.div.withConfig({
+  displayName: "StepsProgressstyles__Wrap",
+  componentId: "sc-1gnllve-1"
+})(["display:block;margin:0 auto;"]);
+exports.Wrap = Wrap;
+var Items = _styledComponents.default.div.withConfig({
+  displayName: "StepsProgressstyles__Items",
+  componentId: "sc-1gnllve-2"
+})(["display:flex;height:100%;font-size:0;flex-direction:row;flex-wrap:nowrap;justify-content:center;margin:0 -6px;text-align:center;", ""], _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: block;\n  "]))));
+exports.Items = Items;
+var Item = _styledComponents.default.button.withConfig({
+  displayName: "StepsProgressstyles__Item",
+  componentId: "sc-1gnllve-3"
+})(["position:relative;display:inline-block;vertical-align:middle;padding:0;flex:1;margin:0 4px;height:32px;max-width:32px;cursor:pointer;&:before{z-index:0;content:'';display:block;width:100%;height:4px;position:absolute;top:14px;left:0;border-radius:3px;box-shadow:inset 0 1px 3px 0 rgba(0,0,0,0.05);background-color:", ";}&:after{z-index:1;content:'';display:block;width:100%;height:4px;position:absolute;top:14px;left:0;border-radius:3px;background-color:transparent;transition:background-color .2s;}&:focus{outline:none;}&:hover:after{background-color:", ";}", " ", " ", ""], _colors.default.grey, _colors.default.black, function (props) {
+  return props.isDone && "\n    &:after {\n      background-color: ".concat(_colors.default.progressGreen, ";\n    }\n\n    &:hover:after {\n      background-color: ").concat(_colors.default.black, ";\n    }\n  ");
+}, function (props) {
+  return props.isActive && "\n    &:after {\n      background-color: ".concat(_colors.default.grey2, ";\n    }\n\n    &:hover:after {\n      background-color: ").concat(_colors.default.black, ";\n    }\n  ");
+}, _rwd.default.Medium(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: 32px;\n  "]))));
+exports.Item = Item;