@configuratorware/configurator-frontendgui 1.28.4 → 1.29.0

package/App/Shared/Components/SaveConfiguration/index.js

@@ -0,0 +1,286 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _i18n = require("../../../../Framework/i18n");
+
+var _withWidth = _interopRequireDefault(require("@material-ui/core/withWidth/withWidth"));
+
+var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
+
+var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography/Typography"));
+
+var _CheckCircle = _interopRequireDefault(require("@material-ui/icons/CheckCircle"));
+
+var _FileCopy = _interopRequireDefault(require("@material-ui/icons/FileCopy"));
+
+var _Error = _interopRequireDefault(require("@material-ui/icons/Error"));
+
+var _MainButton = _interopRequireDefault(require("../../../../Shared/Components/MainButton"));
+
+var _CustomDialog = _interopRequireDefault(require("../../../../Shared/Components/CustomDialog"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip/Tooltip"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); 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 } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || 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; } 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 : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var styles = function styles(theme) {
+  return {
+    dialogTitleRoot: {
+      padding: '12px 12px 20px',
+      fontSize: '1.5rem',
+      fontWeight: 400
+    },
+    dialogContentRoot: {
+      padding: '0 24px 0 12px'
+    },
+    saveconfigurationDialog: {
+      borderTop: '7px solid ' + theme.palette.primary.main
+    },
+    activeButton: {
+      padding: '6px 15px'
+    },
+    saveConfigurationCode: _defineProperty({
+      textAlign: 'center',
+      marginTop: 24,
+      marginBottom: 48,
+      height: 40,
+      fontSize: 24,
+      lineHeight: '28px'
+    }, theme.breakpoints.down('xs'), {
+      height: 56,
+      marginBottom: 32
+    }),
+    TypographyCaption: {
+      fontSize: 12,
+      lineHeight: 1.7
+    },
+    successResult: {
+      background: '#4FC36D',
+      color: '#fff',
+      padding: '14px 8px',
+      borderRadius: '4px'
+    },
+    successResultIcon: {
+      "float": 'left'
+    },
+    copyShareUrlIcon: {
+      "float": 'right',
+      '&:hover': {
+        color: 'rgba(0,0,0, 0.5)',
+        cursor: 'pointer'
+      }
+    },
+    errorResult: {
+      background: '#ED1C29',
+      color: '#fff',
+      padding: '14px 8px',
+      borderRadius: '4px',
+      fontSize: 14,
+      lineHeight: 1.7,
+      textAlign: 'center'
+    },
+    errorResultIcon: {
+      "float": 'left'
+    },
+    dialogSavingInProgress: {
+      flex: 1,
+      alignItems: 'center',
+      flexDirection: 'column',
+      display: 'flex',
+      height: 50,
+      marginTop: 24
+    }
+  };
+};
+
+var SaveConfiguration = /*#__PURE__*/function (_React$Component) {
+  _inherits(SaveConfiguration, _React$Component);
+
+  var _super = _createSuper(SaveConfiguration);
+
+  function SaveConfiguration() {
+    var _this;
+
+    _classCallCheck(this, SaveConfiguration);
+
+    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), "onCopyShareUrl", function (shareUrl) {
+      try {
+        navigator.clipboard.writeText(shareUrl);
+      } catch (err) {
+        // clipboard api only available in secure contexts (localhost, htttps) and modern(ish) browsers
+        var textArea = document.createElement('textarea');
+        textArea.textContent = shareUrl;
+        textArea.style.position = 'fixed'; //avoid scrolling to bottom
+
+        document.body.appendChild(textArea);
+        var selection = document.getSelection();
+        var range = document.createRange();
+        range.selectNode(textArea);
+        selection.removeAllRanges();
+        selection.addRange(range);
+
+        try {
+          document.execCommand('copy');
+        } catch (err) {
+          // eslint-disable-next-line no-console
+          console.log('Configuration link could not be copied: ', err);
+        } finally {
+          selection.removeAllRanges();
+          document.body.removeChild(textArea);
+        }
+      }
+    });
+
+    return _this;
+  }
+
+  _createClass(SaveConfiguration, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          workInProgress = _this$props.workInProgress,
+          errorMessage = _this$props.errorMessage,
+          code = _this$props.code,
+          loadLoginInfoInProgress = _this$props.loadLoginInfoInProgress,
+          show = _this$props.show,
+          onClose = _this$props.onClose,
+          onOkClick = _this$props.onOkClick,
+          ProgressComponent = _this$props.ProgressComponent,
+          shareUrl = _this$props.shareUrl,
+          IconCopyShareUrl = _this$props.IconCopyShareUrl;
+      return /*#__PURE__*/_react["default"].createElement(_CustomDialog["default"], {
+        open: show,
+        onClose: onClose,
+        "aria-labelledby": "alert-dialog-title",
+        "aria-describedby": "alert-dialog-description",
+        onCancel: onClose,
+        dialogTitle: (0, _i18n.t)('saveConfiguration.dialogTitle')
+      }, /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], {
+        className: classes.dialogContentRoot
+      }, workInProgress && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.dialogSavingInProgress
+      }, /*#__PURE__*/_react["default"].createElement(ProgressComponent, null)), errorMessage && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        variant: "body1",
+        classes: {
+          root: classes.TypographyCaption
+        },
+        id: "alert-dialog-description"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorResult
+      }, /*#__PURE__*/_react["default"].createElement(_Error["default"], {
+        className: classes.errorResultIcon
+      }), (0, _i18n.t)(errorMessage))), !workInProgress && code && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        variant: "body1",
+        classes: {
+          root: classes.TypographyCaption
+        },
+        id: "alert-dialog-description"
+      }, (0, _i18n.t)('saveConfiguration.successfullySaved')), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        variant: "body1",
+        classes: {
+          root: classes.TypographyCaption
+        },
+        id: "alert-dialog-description"
+      }, (0, _i18n.t)('saveConfiguration.infoText')), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        id: "alert-dialog-description",
+        variant: "h5",
+        classes: {
+          root: classes.saveConfigurationCode
+        }
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.successResult
+      }, /*#__PURE__*/_react["default"].createElement(_CheckCircle["default"], {
+        className: classes.successResultIcon
+      }), /*#__PURE__*/_react["default"].createElement("b", null, code), IconCopyShareUrl && /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+        title: (0, _i18n.t)('saveConfiguration.copyConfigurationLink')
+      }, /*#__PURE__*/_react["default"].createElement(IconCopyShareUrl, {
+        className: classes.copyShareUrlIcon,
+        onClick: function onClick() {
+          return _this2.onCopyShareUrl(shareUrl);
+        }
+      })))), loadLoginInfoInProgress && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        variant: "body1",
+        classes: {
+          root: classes.TypographyCaption
+        },
+        id: "alert-dialog-description"
+      }, (0, _i18n.t)('saveConfiguration.loadLoginInfoInProgressText')))), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, !workInProgress && code && /*#__PURE__*/_react["default"].createElement(_MainButton["default"], {
+        onClick: onOkClick,
+        variant: "contained",
+        size: "medium",
+        className: classes.activeButton
+      }, (0, _i18n.t)('saveConfiguration.okText'))));
+    }
+  }]);
+
+  return SaveConfiguration;
+}(_react["default"].Component);
+
+_defineProperty(SaveConfiguration, "propTypes", {
+  classes: _propTypes["default"].object,
+  workInProgress: _propTypes["default"].bool,
+  errorMessage: _propTypes["default"].string,
+  code: _propTypes["default"].string,
+  loadLoginInfoInProgress: _propTypes["default"].bool,
+  show: _propTypes["default"].bool,
+  onClose: _propTypes["default"].func,
+  onOkClick: _propTypes["default"].func,
+  ProgressComponent: _propTypes["default"].object,
+  shareUrl: _propTypes["default"].string,
+  IconCopyShareUrl: _propTypes["default"].elementType
+});
+
+_defineProperty(SaveConfiguration, "defaultProps", {
+  IconCopyShareUrl: _FileCopy["default"]
+});
+
+var _default = (0, _withWidth["default"])()((0, _styles.withStyles)(styles, {
+  name: 'SaveConfiguration'
+})(SaveConfiguration));
+
+exports["default"] = _default;

package/App/Shared/Components/SendEmail/index.js

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _makeStyles = _interopRequireDefault(require("@material-ui/core/styles/makeStyles"));
+
+var _i18n = require("../../../../Framework/i18n");
+
+var _withWidth = _interopRequireDefault(require("@material-ui/core/withWidth/withWidth"));
+
+var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
+
+var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography/Typography"));
+
+var _CustomDialog = _interopRequireDefault(require("../../../../Shared/Components/CustomDialog"));
+
+var _MainButton = _interopRequireDefault(require("../../../../Shared/Components/MainButton"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var useStyles = (0, _makeStyles["default"])(function (theme) {
+  return {
+    dialogTitleRoot: {
+      padding: '12px 12px 20px',
+      fontSize: '1.5rem',
+      fontWeight: 400
+    },
+    dialogContentRoot: {
+      padding: '0 24px 24px 12px'
+    },
+    sendEmailDialog: {
+      borderTop: '7px solid ' + theme.palette.primary.main
+    },
+    activeButton: {
+      padding: '4px 15px',
+      textDecoration: 'none'
+    },
+    TypographyCaption: {
+      fontSize: 12,
+      lineHeight: 1.7
+    }
+  };
+}, {
+  name: 'SendEmail'
+});
+
+var SendEmail = function SendEmail(props) {
+  var show = props.show,
+      shareUrl = props.shareUrl,
+      onClose = props.onClose;
+  var emailUrl = "mailto:?subject=".concat((0, _i18n.t)('share.email.subject'), "&body=").concat((0, _i18n.t)('share.email.body', {
+    shareUrl: window.encodeURIComponent(shareUrl)
+  }));
+  var classes = useStyles();
+  return /*#__PURE__*/_react["default"].createElement(_CustomDialog["default"], {
+    open: show,
+    onClose: onClose,
+    "aria-labelledby": "alert-dialog-title",
+    "aria-describedby": "alert-dialog-description",
+    dialogTitle: (0, _i18n.t)('sendEmailDialog.title'),
+    onCancel: onClose
+  }, /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], {
+    className: classes.dialogContentRoot
+  }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    variant: "body1",
+    classes: {
+      root: classes.TypographyCaption
+    },
+    id: "alert-dialog-description"
+  }, (0, _i18n.t)('sendEmailDialog.content')), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    variant: "body1",
+    classes: {
+      root: classes.TypographyCaption
+    },
+    id: "alert-dialog-description"
+  }, (0, _i18n.t)('sendEmailDialog.info'))), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement(_MainButton["default"], {
+    href: emailUrl,
+    onClick: onClose,
+    variant: "contained",
+    className: classes.activeButton
+  }, (0, _i18n.t)('sendEmailDialog.actionButton'))));
+};
+
+SendEmail.propTypes = {
+  onClose: _propTypes["default"].func,
+  show: _propTypes["default"].bool,
+  shareUrl: _propTypes["default"].string.isRequired
+};
+
+var _default = (0, _withWidth["default"])({
+  initialWidth: 'lg'
+})(SendEmail);
+
+exports["default"] = _default;

package/App/Shared/Components/Stepper/index.js

@@ -0,0 +1,136 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Tabs = _interopRequireDefault(require("@material-ui/core/Tabs/Tabs"));
+
+var _Tab = _interopRequireDefault(require("@material-ui/core/Tab/Tab"));
+
+var _index = _interopRequireDefault(require("@material-ui/core/Icon/index"));
+
+var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); 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 } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || 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; } 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 : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var styles = function styles(theme) {
+  return {
+    MuiTabRoot: _defineProperty({
+      textTransform: 'none'
+    }, theme.breakpoints.down('xs'), {
+      display: 'none'
+    }),
+    MuiTabWrapper: _defineProperty({
+      flexDirection: 'row'
+    }, theme.breakpoints.down('sm'), {
+      flexDirection: 'column'
+    }),
+    MuiTabLabelIcon: {
+      minHeight: '50px'
+    },
+    MuiIconRoot: {
+      paddingLeft: '9px'
+    }
+  };
+};
+
+var Stepper = /*#__PURE__*/function (_React$Component) {
+  _inherits(Stepper, _React$Component);
+
+  var _super = _createSuper(Stepper);
+
+  function Stepper() {
+    var _this;
+
+    _classCallCheck(this, Stepper);
+
+    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", {
+      value: 0
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleChange", function (event, value) {
+      _this.setState({
+        value: value
+      });
+    });
+
+    return _this;
+  }
+
+  _createClass(Stepper, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          tabs = _this$props.tabs,
+          classes = _this$props.classes;
+      return /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+        value: this.state.value,
+        onChange: this.handleChange,
+        indicatorColor: tabs.length > 1 ? 'primary' : '',
+        centered: true
+      }, tabs.map(function (tab) {
+        return [/*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+          classes: {
+            root: classes.MuiTabRoot,
+            wrapper: classes.MuiTabWrapper,
+            labelIcon: classes.MuiTabLabelIcon
+          },
+          key: tab.key,
+          label: tab.title,
+          icon: /*#__PURE__*/_react["default"].createElement(_index["default"], {
+            className: classes.MuiIconRoot
+          }, tab.icon)
+        })];
+      }));
+    }
+  }]);
+
+  return Stepper;
+}(_react["default"].Component);
+
+_defineProperty(Stepper, "propTypes", {
+  classes: _propTypes["default"].object,
+  tabs: _propTypes["default"].array
+});
+
+var _default = (0, _withStyles["default"])(styles, {
+  name: 'Stepper'
+})(Stepper);
+
+exports["default"] = _default;

package/App/Shared/Components/Stepper/index.story.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _i18n = require("../../../../Framework/i18n");
+
+var _index = _interopRequireDefault(require("./index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var mockedStepsData = [{
+  key: 'variants',
+  identifier: 'variants',
+  title: (0, _i18n.t)('mockedData.variant'),
+  icon: 'brush'
+}, {
+  key: 'designer',
+  identifier: 'designer',
+  title: (0, _i18n.t)('mockedData.configure'),
+  icon: 'tune'
+}];
+var mockedStepData = [{
+  key: 'variants',
+  identifier: 'variants',
+  title: (0, _i18n.t)('mockedData.variant'),
+  icon: 'brush'
+}];
+(0, _react2.storiesOf)('Stepper', module).add('with two steps', function () {
+  return /*#__PURE__*/_react["default"].createElement(_index["default"], {
+    tabs: mockedStepsData
+  });
+}).add('with only one step', function () {
+  return /*#__PURE__*/_react["default"].createElement(_index["default"], {
+    tabs: mockedStepData
+  });
+});