@configuratorware/configurator-frontendgui 1.28.4 → 1.29.0

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

@@ -0,0 +1,220 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));
+
+var _Icon = _interopRequireDefault(require("@material-ui/core/Icon/Icon"));
+
+var _core = require("@material-ui/core");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 textShadow = '0px 0px 4px rgba(255, 255, 255, 0.8)';
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    '@keyframes left': {
+      '0%': {
+        transform: 'translateX(0)'
+      },
+      '50%': {
+        transform: 'translateX(100%)'
+      },
+      '100%': {
+        transform: 'translateX(0)'
+      }
+    },
+    '@keyframes right': {
+      '0%': {
+        transform: 'translateX(0)'
+      },
+      '50%': {
+        transform: 'translateX(-100%)'
+      },
+      '100%': {
+        transform: 'translateX(0)'
+      }
+    },
+    '@keyframes top': {
+      '0%': {
+        transform: 'translateY(0)'
+      },
+      '50%': {
+        transform: 'translateY(100%)'
+      },
+      '100%': {
+        transform: 'translateY(0)'
+      }
+    },
+    '@keyframes bottom': {
+      '0%': {
+        transform: 'translateY(0)'
+      },
+      '50%': {
+        transform: 'translateY(-100%)'
+      },
+      '100%': {
+        transform: 'translateY(0)'
+      }
+    },
+    popoverRoot: _defineProperty({}, theme.breakpoints.down('xs'), {
+      display: 'none'
+    }),
+    container: {
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'center'
+    },
+    popper: {
+      zIndex: 2
+    },
+    topContainer: function topContainer(_ref) {
+      var offset = _ref.offset,
+          perpendicularOffset = _ref.perpendicularOffset;
+      return {
+        top: -offset,
+        right: perpendicularOffset,
+        flexDirection: 'column-reverse'
+      };
+    },
+    leftContainer: function leftContainer(_ref2) {
+      var offset = _ref2.offset,
+          perpendicularOffset = _ref2.perpendicularOffset;
+      return {
+        right: offset,
+        top: perpendicularOffset,
+        flexDirection: 'row-reverse'
+      };
+    },
+    bottomContainer: function bottomContainer(_ref3) {
+      var offset = _ref3.offset,
+          perpendicularOffset = _ref3.perpendicularOffset;
+      return {
+        bottom: -offset,
+        right: perpendicularOffset,
+        flexDirection: 'column'
+      };
+    },
+    rightContainer: function rightContainer(_ref4) {
+      var offset = _ref4.offset,
+          perpendicularOffset = _ref4.perpendicularOffset;
+      return {
+        top: perpendicularOffset,
+        left: offset,
+        flexDirection: 'row'
+      };
+    },
+    animation: {
+      animation: '$left 1s infinite',
+      display: 'flex',
+      alignItems: 'center',
+      '&:before': {
+        fontSize: '1.5em'
+      }
+    },
+    topAnimation: {
+      animationName: '$top'
+    },
+    rightAnimation: {
+      animationName: '$right'
+    },
+    bottomAnimation: {
+      animationName: '$bottom'
+    },
+    leftAnimation: {
+      animationName: '$left'
+    },
+    icon: {
+      margin: '0 5px',
+      textShadow: textShadow
+    },
+    leftIcon: {
+      transform: 'rotate(0deg)'
+    },
+    topIcon: {
+      transform: 'rotate(90deg)'
+    },
+    rightIcon: {
+      transform: 'rotate(180deg)'
+    },
+    bottomIcon: {
+      transform: 'rotate(270deg)'
+    },
+    typography: _defineProperty({
+      textAlign: 'center',
+      whiteSpace: 'nowrap'
+    }, theme.breakpoints.down('xs'), {
+      fontSize: '1rem'
+    }),
+    hintText: {
+      textShadow: textShadow
+    }
+  };
+}, {
+  name: 'CallToAction'
+});
+
+var CallToAction = function CallToAction(props) {
+  var anchorRef = props.anchorRef,
+      offsetDirection = props.offsetDirection,
+      label = props.label,
+      width = props.width,
+      className = props.className;
+  var classes = useStyles(props);
+
+  if (!anchorRef || width === 'xs') {
+    return null;
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_Popper["default"], {
+    className: classes.popper,
+    open: true,
+    anchorEl: anchorRef,
+    placement: offsetDirection
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _clsx["default"])(classes.container, classes["".concat(offsetDirection, "Container")], className)
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _clsx["default"])(classes.animation, classes["".concat(offsetDirection, "Animation")])
+  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    className: (0, _clsx["default"])(classes.icon, classes["".concat(offsetDirection, "Icon")])
+  }, "forward")), /*#__PURE__*/_react["default"].createElement(_core.Typography, {
+    className: classes.hintText,
+    variant: "h5"
+  }, label)));
+};
+
+CallToAction.propTypes = {
+  offsetDirection: _propTypes["default"].oneOf(['top', 'right', 'bottom', 'left']).isRequired,
+  offset: _propTypes["default"].number,
+  perpendicularOffset: _propTypes["default"].number,
+  anchorRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].shape({
+    current: _propTypes["default"].instanceOf(Element)
+  })]),
+  label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  width: _propTypes["default"].string,
+  className: _propTypes["default"].string
+};
+CallToAction.defaultProps = {
+  offset: 100,
+  perpendicularOffset: 0,
+  className: ''
+};
+
+var _default = (0, _core.withWidth)({
+  initialWidth: 'lg'
+})(CallToAction);
+
+exports["default"] = _default;

package/App/Shared/Components/Header/Header.js

@@ -0,0 +1,150 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _AppBar = _interopRequireDefault(require("@material-ui/core/AppBar/AppBar"));
+
+var _Toolbar = _interopRequireDefault(require("@material-ui/core/Toolbar/Toolbar"));
+
+var _i18n = require("../../../../Framework/i18n");
+
+var _customClassName = _interopRequireDefault(require("../../../Utils/customClassName"));
+
+var _Stepper = _interopRequireDefault(require("../Stepper"));
+
+var _VariantChooser = _interopRequireDefault(require("../VariantChooser"));
+
+var _ToolbarList = _interopRequireDefault(require("../ToolbarList"));
+
+var _core = require("@material-ui/core");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    root: {
+      flexGrow: 1
+    },
+    grow: {
+      flexGrow: 1
+    },
+    headerRoot: {
+      overflow: 'hidden'
+    },
+    toolbarHeaderWrapper: _defineProperty({
+      minHeight: 64,
+      padding: '0 20px'
+    }, theme.breakpoints.down('xs'), {
+      padding: '0 0 0 20px'
+    }),
+    hiddenEmailShareIframe: {
+      visibility: 'hidden',
+      position: 'absolute'
+    },
+    itemIdentifierLabel: _defineProperty({
+      fontSize: 15
+    }, theme.breakpoints.down('sm'), {
+      fontSize: 12
+    }),
+    itemIdentifier: _defineProperty({
+      fontWeight: 'bold',
+      fontSize: 15,
+      marginLeft: theme.spacing(1)
+    }, theme.breakpoints.down('sm'), {
+      fontSize: 12
+    }),
+    itemIdentifierContainer: _defineProperty({
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      display: 'flex',
+      flexDirection: 'row',
+      marginLeft: theme.spacing(2)
+    }, theme.breakpoints.down('xs'), {
+      display: 'none'
+    })
+  };
+}, {
+  name: 'Header'
+});
+
+var Header = function Header(props) {
+  var classes = useStyles(props);
+  var tools = props.tools,
+      steps = props.steps,
+      variants = props.variants,
+      selectedVariantIdentifier = props.selectedVariantIdentifier,
+      title = props.title,
+      VariantChooserComponent = props.VariantChooserComponent,
+      selectedVariant = props.selectedVariant,
+      showItemIdentifier = props.showItemIdentifier;
+
+  var handleVariantChange = function handleVariantChange(e) {
+    var switchSelectedAmount = props.switchSelectedAmount,
+        selectedVariantIdentifier = props.selectedVariantIdentifier;
+    switchSelectedAmount(selectedVariantIdentifier, e.target.value);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.root
+  }, /*#__PURE__*/_react["default"].createElement(_AppBar["default"], {
+    position: "static",
+    color: "default",
+    className: (0, _clsx["default"])(classes.headerRoot, (0, _customClassName["default"])('header'))
+  }, /*#__PURE__*/_react["default"].createElement(_Toolbar["default"], {
+    classes: {
+      regular: classes.toolbarHeaderWrapper
+    }
+  }, /*#__PURE__*/_react["default"].createElement(VariantChooserComponent, {
+    variants: variants,
+    value: selectedVariant || '',
+    title: title,
+    handleChange: handleVariantChange
+  }), showItemIdentifier && /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.itemIdentifierContainer
+  }, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
+    component: "div",
+    className: classes.itemIdentifierLabel,
+    variant: "body2"
+  }, (0, _i18n.t)('headerMenu.item_identifier_label') !== 'headerMenu.item_identifier_label' ? (0, _i18n.t)('headerMenu.item_identifier_label') : ''), /*#__PURE__*/_react["default"].createElement(_core.Typography, {
+    component: "div",
+    className: classes.itemIdentifier,
+    variant: "body2"
+  }, selectedVariantIdentifier)), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.grow
+  }, steps && /*#__PURE__*/_react["default"].createElement(_Stepper["default"], {
+    tabs: steps
+  })), /*#__PURE__*/_react["default"].createElement(_ToolbarList["default"], {
+    tools: tools
+  }))));
+};
+
+Header.propTypes = {
+  tools: _propTypes["default"].array,
+  steps: _propTypes["default"].array,
+  variants: _propTypes["default"].array,
+  selectedVariant: _propTypes["default"].string,
+  selectedVariantIdentifier: _propTypes["default"].string,
+  title: _propTypes["default"].string,
+  switchSelectedAmount: _propTypes["default"].func,
+  VariantChooserComponent: _propTypes["default"].elementType,
+  showItemIdentifier: _propTypes["default"].bool
+};
+Header.defaultProps = {
+  variants: [],
+  VariantChooserComponent: _VariantChooser["default"]
+};
+var _default = Header;
+exports["default"] = _default;

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Header["default"];
+  }
+});
+
+var _Header = _interopRequireDefault(require("./Header"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

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

@@ -0,0 +1,143 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _index = _interopRequireDefault(require("./index"));
+
+var _storybookState = require("@sambego/storybook-state");
+
+var _i18n = require("../../../../Framework/i18n");
+
+var _green = _interopRequireDefault(require("../VariantChooser/res/green.jpg"));
+
+var _white = _interopRequireDefault(require("../VariantChooser/res/white.jpg"));
+
+var _black = _interopRequireDefault(require("../VariantChooser/res/black.jpg"));
+
+var _red = _interopRequireDefault(require("../VariantChooser/res/red.jpg"));
+
+var _blue = _interopRequireDefault(require("../VariantChooser/res/blue.jpg"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var mockVariantsData = [{
+  key: 'green',
+  title: 'Light Softshell Green',
+  value: 'green',
+  url: _green["default"]
+}, {
+  key: 'white ',
+  title: 'Weiße Premium Kapuzenjacke zur Weihnacht',
+  value: 'white',
+  url: _white["default"]
+}, {
+  key: 'black',
+  title: 'Schwarze Kapuzenjacke nach Weihnachten',
+  value: 'black',
+  url: _black["default"]
+}, {
+  key: 'red',
+  title: 'Rote Premium Kapuzenjacke',
+  value: 'red',
+  url: _red["default"]
+}, {
+  key: 'blue',
+  title: 'Blau Premium Kapuzenjacke',
+  value: 'blue',
+  url: _blue["default"]
+}, {
+  key: 'blue1',
+  title: 'Blaue Premium Kapuzenjacke zur Weihnacht',
+  value: 'blue1',
+  url: _blue["default"]
+}, {
+  key: 'blue2',
+  title: 'Weiße Premium Jacke',
+  value: 'blue2',
+  url: _blue["default"]
+}];
+var mockIcons = [{
+  key: 'save',
+  identifier: 'save',
+  title: (0, _i18n.t)('headerMenu.save')
+}, {
+  key: 'mail',
+  identifier: 'mail',
+  title: (0, _i18n.t)('headerMenu.sendEmail')
+}, {
+  key: 'picture_as_pdf',
+  identifier: 'picture_as_pdf',
+  title: (0, _i18n.t)('headerMenu.saveAsPdf')
+}, {
+  key: 'help',
+  identifier: 'help',
+  title: (0, _i18n.t)('mockedData.help')
+}];
+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'
+}];
+var store = new _storybookState.Store({
+  name: 'Light Softshell Green'
+});
+
+function handleChange(event) {
+  store.set({
+    name: event.target.value
+  });
+}
+
+(0, _react2.storiesOf)('Header', module).add('with two steps', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storybookState.State, {
+    store: store
+  }, function (state) {
+    return /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      tools: mockIcons,
+      steps: mockedStepsData,
+      variantChooser: mockVariantsData,
+      handleVariantChange: handleChange,
+      variantValue: state.name,
+      variantItem: (0, _i18n.t)('mockedData.Premium_Kapuzenjacke')
+    });
+  });
+}).add('with only one step', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storybookState.State, {
+    store: store
+  }, function (state) {
+    return /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      tools: mockIcons,
+      steps: mockedStepData,
+      variantChooser: mockVariantsData,
+      handleVariantChange: handleChange,
+      variantValue: state.name,
+      variantItem: (0, _i18n.t)('mockedData.Premium_Kapuzenjacke')
+    });
+  });
+}).add('without steps', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storybookState.State, {
+    store: store
+  }, function (state) {
+    return /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      icons: mockIcons,
+      variantChooser: mockVariantsData,
+      handleVariantChange: handleChange,
+      variantValue: state.name,
+      variantItem: (0, _i18n.t)('mockedData.Premium_Kapuzenjacke')
+    });
+  });
+});

package/App/Shared/Components/InformationTag/InformationTag.js

@@ -0,0 +1,155 @@
+"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 _Icon = _interopRequireDefault(require("@material-ui/core/Icon/Icon"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _core = require("@material-ui/core");
+
+var _Popover = _interopRequireDefault(require("@material-ui/core/Popover"));
+
+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() {
+  return {
+    alignText: {
+      padding: '5px',
+      whiteSpace: 'pre-line'
+    },
+    popoverRootElement: {
+      '& > *': {
+        maxWidth: '500px',
+        maxHeight: '200px',
+        marginRight: '10px',
+        marginBottom: '30px'
+      }
+    },
+    iconButton: {
+      padding: '12px 0 12px 12px',
+      marginLeft: 5,
+      '&:hover': {
+        backgroundColor: 'transparent'
+      }
+    },
+    infoIcon: {
+      '&:hover': {
+        color: '#76777A'
+      }
+    }
+  };
+};
+
+var InformationTag = /*#__PURE__*/function (_React$Component) {
+  _inherits(InformationTag, _React$Component);
+
+  var _super = _createSuper(InformationTag);
+
+  function InformationTag() {
+    var _this;
+
+    _classCallCheck(this, InformationTag);
+
+    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", {
+      anchorElement: null
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleClose", function () {
+      _this.setState({
+        anchorElement: null
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleToggle", function (event) {
+      _this.setState({
+        anchorElement: event.target
+      });
+    });
+
+    return _this;
+  }
+
+  _createClass(InformationTag, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          infoText = _this$props.infoText,
+          classes = _this$props.classes;
+      var anchorElement = this.state.anchorElement;
+      var open = Boolean(anchorElement);
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
+        classes: {
+          root: classes.iconButton
+        },
+        onClick: this.handleToggle
+      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        className: classes.infoIcon
+      }, "info")), /*#__PURE__*/_react["default"].createElement(_Popover["default"], {
+        className: classes.popoverRootElement,
+        onClose: this.handleClose,
+        onClick: this.handleClose,
+        open: open,
+        anchorEl: anchorElement,
+        anchorOrigin: {
+          vertical: 'center',
+          horizontal: 'left'
+        },
+        transformOrigin: {
+          vertical: 'bottom',
+          horizontal: 'right'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
+        className: classes.alignText
+      }, infoText)));
+    }
+  }]);
+
+  return InformationTag;
+}(_react["default"].Component);
+
+_defineProperty(InformationTag, "propTypes", {
+  infoText: _propTypes["default"].string,
+  classes: _propTypes["default"].object
+});
+
+var _default = (0, _core.withStyles)(styles, {
+  name: 'InformationTag'
+})(InformationTag);
+
+exports["default"] = _default;