@configuratorware/configurator-frontendgui 1.28.6 → 1.29.3

package/App/Modules/Creator/Components/Optiondetail/index.js

@@ -0,0 +1,499 @@
+"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 _lodash = _interopRequireDefault(require("lodash"));
+
+var _reactSwipeable = require("react-swipeable");
+
+var _clsx2 = _interopRequireDefault(require("clsx"));
+
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
+var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+
+var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _withWidth = _interopRequireDefault(require("@material-ui/core/withWidth"));
+
+var _configuration = require("../../../../configuration");
+
+var _LoadingOverlay = _interopRequireDefault(require("../../../../../Framework/Components/LoadingOverlay"));
+
+var _i18n = require("../../../../../Framework/i18n");
+
+var _CustomDialog = _interopRequireDefault(require("../../../../../Shared/Components/CustomDialog"));
+
+var _OptionAmount = _interopRequireDefault(require("../OptionAmount"));
+
+var _getImageUrl = _interopRequireDefault(require("../../../../Utils/getImageUrl"));
+
+var _Markdown = _interopRequireDefault(require("../../../../../Framework/Components/Markdown"));
+
+var _ZoomImage = _interopRequireDefault(require("./ZoomImage"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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 {
+    detailNav: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      cursor: 'pointer',
+      fontWeight: 'bold',
+      fontSize: '72px',
+      transform: 'scaleX(0.5)',
+      opacity: 0.7,
+      '&.prev': {
+        '&:before': {
+          content: '"<"'
+        }
+      },
+      '&.next': {
+        '&:before': {
+          content: '">"'
+        }
+      }
+    },
+    detailFooter: {
+      clear: 'both',
+      padding: '10px 0 0 32px',
+      textAlign: 'right',
+      '& button': {
+        marginLeft: 10,
+        background: theme.palette.primary.darkText,
+        color: 'white',
+        '&:hover': {
+          cursor: 'pointer',
+          backgroundColor: '#616161'
+        }
+      }
+    },
+    detailContainerWithNav: {
+      display: 'grid',
+      gridTemplateColumns: 'auto 1fr auto'
+    },
+    detailContainer: {},
+    detailsWithImageContainer: {
+      display: 'grid',
+      gridTemplateColumns: 'minMax(300px, 4fr) 6fr',
+      columnGap: 24
+    },
+    priceFormatted: {
+      marginTop: 32,
+      marginBottom: 32
+    },
+    detailsTitle: {
+      fontWeight: 'bold'
+    },
+    detailsTypography: {
+      marginTop: 12,
+      marginBottom: 12
+    },
+    imageContainer: {
+      display: 'grid',
+      placeItems: 'start center'
+    },
+    imageContainerWithZoom: {
+      display: 'grid',
+      placeItems: 'start center',
+      cursor: 'zoom-in'
+    },
+    image: {
+      marginTop: 12,
+      maxWidth: '100%',
+      maxHeight: '100%'
+    },
+    imageHidden: {
+      visibility: 'hidden'
+    },
+    dialogContentRootWithZoom: {
+      overflow: 'hidden'
+    }
+  };
+};
+
+var Optiondetail = /*#__PURE__*/function (_React$Component) {
+  _inherits(Optiondetail, _React$Component);
+
+  var _super = _createSuper(Optiondetail);
+
+  function Optiondetail(props) {
+    var _this;
+
+    _classCallCheck(this, Optiondetail);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "prev", function () {
+      var _this$props = _this.props,
+          details = _this$props.details,
+          options = _this$props.options,
+          viewDetails = _this$props.viewDetails;
+
+      if (options.length) {
+        var optionIndex = _lodash["default"].findIndex(options, {
+          identifier: details.identifier
+        });
+
+        var prevIndex = optionIndex === 0 ? options.length - 1 : optionIndex - 1;
+        var prev = options[prevIndex];
+        viewDetails(prev);
+
+        _this.setState({
+          currentOption: prev,
+          loading: true,
+          loadingContainerHeight: _this.detailContainerRef.clientHeight
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "next", function () {
+      var _this$props2 = _this.props,
+          details = _this$props2.details,
+          options = _this$props2.options,
+          viewDetails = _this$props2.viewDetails;
+
+      if (options.length) {
+        var optionIndex = _lodash["default"].findIndex(options, {
+          identifier: details.identifier
+        });
+
+        var nextIndex = optionIndex === options.length - 1 ? 0 : optionIndex + 1;
+        var next = options[nextIndex];
+        viewDetails(next);
+
+        _this.setState({
+          currentOption: next,
+          loading: true,
+          loadingContainerHeight: _this.detailContainerRef.clientHeight
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "swiped", function (e, deltaX, deltaY) {
+      // use only horizontal swiping
+      if (Math.abs(deltaX) >= Math.abs(deltaY)) {
+        if (deltaX > 0) {
+          _this.next();
+        } else {
+          _this.prev();
+        }
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleImageLoaded", function () {
+      return _this.setState({
+        imageStatus: 'loaded'
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "toggleZoomImage", function () {
+      return _this.setState({
+        zoomImage: !_this.state.zoomImage
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "setDetailsImageRef", function (ref) {
+      _this.detailImageRef = ref;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "setDetailsContainerRef", function (ref) {
+      _this.detailContainerRef = ref;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getMaxZoomedWidth", function (width) {
+      var isWideScreen = width === 'sm' || width === 'md' || width === 'lg' || width === 'xl';
+      var maxZoomedWidth = width === 'xl' ? 1080 : 720;
+      return isWideScreen ? maxZoomedWidth : '100%';
+    });
+
+    var _details = props.details,
+        _options = props.options;
+    _this.state = {
+      currentOption: _lodash["default"].find(_options, {
+        identifier: _details.identifier
+      }),
+      loading: false,
+      zoomImage: false,
+      hasZoomSet: false,
+      hasZoom: false,
+      imageStatus: 'loading'
+    };
+    _this.optionDetailsWithImage = (0, _configuration.getConf)('optionDetailsWithImage') || false;
+    _this.detailContainerRef = /*#__PURE__*/_react["default"].createRef();
+    _this.detailImageRef = /*#__PURE__*/_react["default"].createRef();
+    return _this;
+  }
+
+  _createClass(Optiondetail, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this$props3 = this.props,
+          details = _this$props3.details,
+          options = _this$props3.options;
+
+      if (details.identifier !== prevProps.details.identifier) {
+        this.setState({
+          currentOption: _lodash["default"].find(options, {
+            identifier: details.identifier
+          }),
+          loading: false
+        });
+      }
+    }
+  }, {
+    key: "getOptionData",
+    value: function getOptionData() {
+      if (!this.state.currentOption) {
+        return null;
+      }
+
+      var optionclassification = this.props.optionclassification;
+      var currentOption = this.state.currentOption;
+      var identifier = currentOption.identifier;
+      return _lodash["default"].find(optionclassification.selectedoptions, {
+        identifier: identifier
+      }) || currentOption;
+    }
+  }, {
+    key: "onAmountChange",
+    value: function onAmountChange(delta) {
+      var onSelect = this.props.onSelect;
+      var option = this.getOptionData();
+      var amount = option.amount + delta;
+
+      if (amount < 0) {
+        return; // prevent setting below 0
+      }
+
+      onSelect(_objectSpread(_objectSpread({}, option), {}, {
+        amount: amount
+      }), true, true);
+    }
+  }, {
+    key: "onSelect",
+    value: function onSelect() {
+      var _this$props4 = this.props,
+          onSelect = _this$props4.onSelect,
+          onClose = _this$props4.onClose; // just close it if it's already selected
+
+      if (this.state.currentOption.amount > 0) {
+        onClose && onClose();
+      } else {
+        onSelect(_objectSpread(_objectSpread({}, this.state.currentOption), {}, {
+          amount: this.state.currentOption.amount || 1
+        }));
+      }
+    }
+  }, {
+    key: "renderControls",
+    value: function renderControls() {
+      var OptionlistitemAmount = this.props.OptionlistitemAmount;
+      var option = this.getOptionData();
+
+      if (!option) {
+        return null;
+      }
+
+      if (option.amount_is_selectable) {
+        return /*#__PURE__*/_react["default"].createElement(OptionlistitemAmount, {
+          option: option,
+          onAmountChange: this.onAmountChange.bind(this)
+        });
+      } else {
+        return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+          className: "primary-button",
+          onClick: this.onSelect.bind(this),
+          variant: "contained"
+        }, (0, _i18n.T)('optiondetail.choose'));
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props5 = this.props,
+          LoadingComponent = _this$props5.LoadingComponent,
+          options = _this$props5.options,
+          show = _this$props5.show,
+          onClose = _this$props5.onClose,
+          details = _this$props5.details,
+          classes = _this$props5.classes,
+          width = _this$props5.width,
+          isTabletDevice = _this$props5.isTabletDevice;
+      var _this$state = this.state,
+          loading = _this$state.loading,
+          loadingContainerHeight = _this$state.loadingContainerHeight;
+      var showNav = _lodash["default"].isArray(options) && options.length > 1;
+      var detailImage = details.detailImage;
+      var query = new URLSearchParams(location.search);
+      var hidePrices = query.has('_hide_prices') && query.get('_hide_prices') === '1';
+
+      var detailsContent = /*#__PURE__*/_react["default"].createElement("div", null, details["abstract"] && /*#__PURE__*/_react["default"].createElement(_Markdown["default"], {
+        MdComponent: _Typography["default"],
+        variant: "body2",
+        component: "div",
+        className: classes.detailsTypography
+      }, details["abstract"]), !hidePrices && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        component: "div",
+        variant: "body2",
+        className: classes.priceFormatted
+      }, details.priceFormatted), details.description && /*#__PURE__*/_react["default"].createElement(_Markdown["default"], {
+        MdComponent: _Typography["default"],
+        variant: "body2",
+        component: "div",
+        className: classes.detailsTypography
+      }, details.description));
+
+      var showFullScreenModal = ['xs', 'sm'].includes(width) && !isTabletDevice;
+      var maxZoomedWidth = this.getMaxZoomedWidth(width);
+      var isLandscapeFormat = false;
+
+      if (!!this.detailImageRef && this.detailImageRef.current !== null && this.state.imageStatus === 'loaded') {
+        if (this.detailImageRef.naturalHeight < this.detailImageRef.naturalWidth) {
+          isLandscapeFormat = true;
+        }
+
+        if (!this.state.hasZoomSet) {
+          var hasZoom = this.detailImageRef.naturalHeight * this.detailImageRef.naturalWidth >= 1.2 * this.detailImageRef.width * this.detailImageRef.height;
+          this.setState({
+            hasZoomSet: true,
+            hasZoom: hasZoom
+          });
+        }
+
+        if (this.detailImageRef.naturalWidth < 720) {
+          maxZoomedWidth = this.detailImageRef.naturalWidth;
+        }
+      }
+
+      return /*#__PURE__*/_react["default"].createElement(_CustomDialog["default"], {
+        open: show,
+        dialogTitle: details.title,
+        onClose: onClose,
+        onCancel: onClose,
+        fullScreen: showFullScreenModal
+      }, /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], {
+        classes: this.state.hasZoom ? {
+          root: classes.dialogContentRootWithZoom
+        } : null
+      }, loading ? /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          height: loadingContainerHeight,
+          boxSizing: 'border-box'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(LoadingComponent, {
+        show: loading
+      })) : /*#__PURE__*/_react["default"].createElement(_reactSwipeable.Swipeable, {
+        disabled: !showNav,
+        trackMouse: true,
+        onSwiped: this.swiped,
+        delta: Optiondetail.swipeDelta
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        ref: this.setDetailsContainerRef,
+        className: showNav ? classes.detailContainerWithNav : classes.detailContainer
+      }, showNav && /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _clsx2["default"])(classes.detailNav, 'prev'),
+        onClick: this.prev
+      }), detailImage ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _clsx2["default"])(_defineProperty({}, classes.detailsWithImageContainer, !showFullScreenModal))
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: this.state.hasZoom ? classes.imageContainerWithZoom : classes.imageContainer,
+        onClick: this.state.hasZoom ? this.toggleZoomImage : null
+      }, /*#__PURE__*/_react["default"].createElement("img", {
+        ref: this.setDetailsImageRef,
+        onLoad: this.handleImageLoaded,
+        className: this.state.zoomImage && ['xs', 'sm'].includes(width) ? classes.imageHidden : classes.image,
+        src: (0, _getImageUrl["default"])(detailImage),
+        alt: details.title
+      })), detailsContent) : detailsContent, showNav && /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _clsx2["default"])(classes.detailNav, 'next'),
+        onClick: this.next
+      })))), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.detailFooter
+      }, this.renderControls())), /*#__PURE__*/_react["default"].createElement(_ZoomImage["default"], {
+        onClose: this.toggleZoomImage,
+        show: this.state.zoomImage,
+        image: detailImage,
+        loadingContainerHeight: loadingContainerHeight,
+        isLandscapeFormat: isLandscapeFormat,
+        width: maxZoomedWidth,
+        title: details.title
+      }));
+    }
+  }]);
+
+  return Optiondetail;
+}(_react["default"].Component);
+
+_defineProperty(Optiondetail, "propTypes", {
+  details: _propTypes["default"].object,
+  optionclassification: _propTypes["default"].object,
+  classes: _propTypes["default"].object,
+  options: _propTypes["default"].array,
+  viewDetails: _propTypes["default"].func,
+  onSelect: _propTypes["default"].func,
+  OptionlistitemAmount: _propTypes["default"].elementType,
+  show: _propTypes["default"].bool,
+  title: _propTypes["default"].string,
+  onClose: _propTypes["default"].func,
+  LoadingComponent: _propTypes["default"].elementType,
+  width: _propTypes["default"].string,
+  isTabletDevice: _propTypes["default"].bool,
+  isLoading: _propTypes["default"].bool
+});
+
+_defineProperty(Optiondetail, "swipeDelta", 50);
+
+Optiondetail.defaultProps = {
+  OptionlistitemAmount: _OptionAmount["default"],
+  LoadingComponent: _LoadingOverlay["default"]
+};
+
+var _default = (0, _styles.withStyles)(styles, {
+  name: 'Optiondetail'
+})((0, _withWidth["default"])({
+  initialWidth: 'xl'
+})(Optiondetail));
+
+exports["default"] = _default;

package/App/Modules/Creator/Components/Optiondetail/index.story.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mockedProps = exports.optionData = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _ThemeProvider = _interopRequireDefault(require("../../../../Screens/Configurator/ThemeProvider"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+var _redux = require("redux");
+
+var _reactRedux = require("react-redux");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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 optionData = {
+  "abstract": 'Das sind schwarze Reissverschlüsse',
+  amount: null,
+  amount_is_selectable: null,
+  attributes: [],
+  description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ',
+  detailImageExists: false,
+  identifier: 'reissverschluesse_black',
+  imageIdentifier: 'reissverschluesse_black',
+  netPrice: null,
+  price: 0,
+  priceFormatted: '0,00 €',
+  stock: null,
+  title: 'Reissverschlüsse schwarz'
+};
+exports.optionData = optionData;
+var mockedProps = {
+  channelSettings: {
+    currencySymbol: '€',
+    channel: '_default'
+  },
+  details: optionData,
+  isTabletDevice: false,
+  languageSettings: {
+    currencysymbolposition: 'right',
+    dateformat: 'd.m.Y',
+    decimalpoint: ',',
+    id: '2',
+    iso: 'de_DE',
+    pricedecimals: 2,
+    thousandsseparator: '.',
+    user_created_id: '0'
+  },
+  optionclassification: {
+    attributes: [],
+    description: '',
+    identifier: 'reissverschluss',
+    is_mandatory: true,
+    is_multiselect: false,
+    optionsCount: '2',
+    selectedoptions: [optionData],
+    title: 'Reissverschluss'
+  },
+  options: [optionData],
+  show: true,
+  title: 'Reissverschluss',
+  viewDetails: function viewDetails() {},
+  OptionlistitemAmount: _react["default"].Fragment
+};
+exports.mockedProps = mockedProps;
+(0, _react2.storiesOf)('OptionDetail', module).add('renders as fullscreen on small screens', function () {
+  return /*#__PURE__*/_react["default"].createElement(_reactRedux.Provider, {
+    store: (0, _redux.createStore)(function () {
+      var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      return state;
+    })
+  }, /*#__PURE__*/_react["default"].createElement(_ThemeProvider["default"], null, /*#__PURE__*/_react["default"].createElement(_index["default"], _objectSpread(_objectSpread({}, mockedProps), {}, {
+    width: 'sm'
+  }))));
+}).add('renders as a modal on larger screens', function () {
+  return /*#__PURE__*/_react["default"].createElement(_reactRedux.Provider, {
+    store: (0, _redux.createStore)(function () {
+      var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      return state;
+    })
+  }, /*#__PURE__*/_react["default"].createElement(_ThemeProvider["default"], null, /*#__PURE__*/_react["default"].createElement(_index["default"], _objectSpread(_objectSpread({}, mockedProps), {}, {
+    width: 'md'
+  }))));
+}).add('renders with previous and next navigation', function () {
+  return /*#__PURE__*/_react["default"].createElement(_reactRedux.Provider, {
+    store: (0, _redux.createStore)(function () {
+      var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      return state;
+    })
+  }, /*#__PURE__*/_react["default"].createElement(_ThemeProvider["default"], null, /*#__PURE__*/_react["default"].createElement(_index["default"], _objectSpread(_objectSpread({}, mockedProps), {}, {
+    options: [{}, {}]
+  }))));
+}).add('renders the provided loading component with the same size as the previous screen after navigating to another tile', function () {
+  return /*#__PURE__*/_react["default"].createElement(_reactRedux.Provider, {
+    store: (0, _redux.createStore)(function () {
+      var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      return state;
+    })
+  }, /*#__PURE__*/_react["default"].createElement(_ThemeProvider["default"], null, /*#__PURE__*/_react["default"].createElement(_index["default"], _objectSpread(_objectSpread({}, mockedProps), {}, {
+    options: [{}, {}],
+    LoadingComponent: function LoadingComponent() {
+      return null;
+    }
+  }))));
+});