@configuratorware/configurator-frontendgui 1.28.4 → 1.29.0

package/App/Shared/Components/LicenseNotice/LicenseNotice.js

@@ -0,0 +1,148 @@
+"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 _core = require("@material-ui/core");
+
+var _i18n = require("../../../../Framework/i18n");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Error = _interopRequireDefault(require("@material-ui/icons/Error"));
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+
+var _Link = _interopRequireDefault(require("@material-ui/core/Link"));
+
+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); }
+
+var styles = function styles() {
+  return {
+    root: {
+      position: 'absolute',
+      width: '100%',
+      top: 145
+    },
+    noticeContainer: {
+      display: 'flex',
+      justifyContent: 'center'
+    },
+    notice: {
+      maxWidth: '90vw',
+      backgroundColor: 'rgb(253, 236, 234)',
+      color: 'rgb(97, 26, 21)',
+      display: 'flex',
+      padding: 12,
+      zIndex: 2,
+      borderRadius: 4
+    },
+    icon: {
+      paddingRight: 8
+    },
+    tooltip: {
+      backgroundColor: 'rgb(253, 236, 234)',
+      color: 'rgb(97, 26, 21)'
+    }
+  };
+};
+
+var LicenseNotice = /*#__PURE__*/function (_React$Component) {
+  _inherits(LicenseNotice, _React$Component);
+
+  var _super = _createSuper(LicenseNotice);
+
+  function LicenseNotice() {
+    _classCallCheck(this, LicenseNotice);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(LicenseNotice, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          mobileOffset = _this$props.mobileOffset,
+          width = _this$props.width,
+          classes = _this$props.classes,
+          displayMissingLicenseNotice = _this$props.displayMissingLicenseNotice;
+
+      if (!displayMissingLicenseNotice) {
+        return null;
+      }
+
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.root,
+        style: {
+          top: (width === 'xs' || width === 'sm') && mobileOffset ? mobileOffset : 145
+        }
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.noticeContainer
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.notice
+      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, (0, _i18n.t)('licenseNotice.message'), " -", ' ', /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+        href: (0, _i18n.t)('licenseNotice.buyLicenseLink'),
+        rel: "noopener noreferrer",
+        target: "_blank"
+      }, (0, _i18n.t)('licenseNotice.linkText'))), /*#__PURE__*/_react["default"].createElement(_core.Tooltip, {
+        classes: {
+          tooltip: classes.tooltip
+        },
+        interactive: true,
+        title: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+          href: (0, _i18n.t)('licenseNotice.licenseInfoLink'),
+          rel: "noopener noreferrer",
+          target: "_blank"
+        }, (0, _i18n.t)('licenseNotice.viewLicense'))))
+      }, /*#__PURE__*/_react["default"].createElement(_Error["default"], {
+        className: classes.icon
+      })))));
+    }
+  }]);
+
+  return LicenseNotice;
+}(_react["default"].Component);
+
+LicenseNotice.propTypes = {
+  classes: _propTypes["default"].object.isRequired,
+  displayMissingLicenseNotice: _propTypes["default"].bool.isRequired,
+  width: _propTypes["default"].string,
+  mobileOffset: _propTypes["default"].number
+};
+LicenseNotice.defaultProps = {
+  displayMissingLicenseNotice: false
+};
+
+var _default = (0, _core.withWidth)({
+  initialWidth: 'lg'
+})((0, _core.withStyles)(styles, {
+  name: 'LicenseNotice'
+})(LicenseNotice));
+
+exports["default"] = _default;

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

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

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

@@ -0,0 +1,218 @@
+"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 _core = require("@material-ui/core");
+
+var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
+
+var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+
+var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+
+var _Error = _interopRequireDefault(require("@material-ui/icons/Error"));
+
+var _withWidth = _interopRequireDefault(require("@material-ui/core/withWidth"));
+
+var _i18n = require("../../../../Framework/i18n");
+
+var _MainButton = _interopRequireDefault(require("../../../../Shared/Components/MainButton"));
+
+var _CustomDialog = _interopRequireDefault(require("../../../../Shared/Components/CustomDialog"));
+
+var _AnalyticsWrapper = _interopRequireDefault(require("../Analytics/AnalyticsWrapper"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+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: {
+      fontSize: '1.5rem',
+      fontWeight: 400
+    },
+    TypographyCaption: {
+      fontSize: 12,
+      lineHeight: 1.7
+    },
+    errorResult: {
+      background: '#ED1C29',
+      color: '#fff',
+      padding: '20px',
+      borderRadius: '4px',
+      fontSize: 16,
+      lineHeight: 1.7,
+      textAlign: 'center'
+    },
+    errorResultIcon: {
+      "float": 'left'
+    },
+    codeFieldWrapper: {
+      display: 'flex',
+      justifyContent: 'center',
+      marginTop: 24,
+      marginBottom: 32
+    },
+    codeField: _defineProperty({
+      fontSize: '26px',
+      borderRadius: 4,
+      height: 40,
+      fontWeight: 'bold'
+    }, theme.breakpoints.down('xs'), {
+      height: 56,
+      width: '100%'
+    }),
+    codeFieldInput: _defineProperty({
+      fontSize: '15px',
+      lineHeight: '18px',
+      textAlign: 'center',
+      height: 20,
+      padding: '10px 16px',
+      minWidth: 320
+    }, theme.breakpoints.down('xs'), {
+      padding: '0 5px',
+      height: 56,
+      minWidth: 50
+    }),
+    activeButton: {
+      padding: '6px 15px'
+    }
+  };
+};
+
+var LoadConfiguration = /*#__PURE__*/function (_React$Component) {
+  _inherits(LoadConfiguration, _React$Component);
+
+  var _super = _createSuper(LoadConfiguration);
+
+  function LoadConfiguration() {
+    var _this;
+
+    _classCallCheck(this, LoadConfiguration);
+
+    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), "onChange", function (e) {
+      _this.props.onCodeChange(e.target.value);
+    });
+
+    return _this;
+  }
+
+  _createClass(LoadConfiguration, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          workInProgress = _this$props.workInProgress,
+          onLoadClick = _this$props.onLoadClick,
+          errorMessage = _this$props.errorMessage,
+          show = _this$props.show,
+          onClose = _this$props.onClose,
+          loadCode = _this$props.loadCode;
+      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)('loadConfiguration.dialogTitle'),
+        onCancel: onClose
+      }, /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], null, workInProgress && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        variant: "body1",
+        classes: {
+          root: classes.TypographyCaption
+        },
+        id: "alert-dialog-description"
+      }, (0, _i18n.t)('loadConfiguration.loadingInProgress')), !workInProgress && /*#__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)('loadConfiguration.enterCode')), /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.codeFieldWrapper
+      }, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+        className: classes.codeField,
+        value: loadCode,
+        variant: 'outlined',
+        onChange: this.onChange,
+        placeholder: (0, _i18n.t)('loadConfiguration.codeInputPlaceholder'),
+        InputProps: {
+          classes: {
+            input: classes.codeFieldInput
+          },
+          disableUnderline: true
+        }
+      }))), errorMessage && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorResult
+      }, /*#__PURE__*/_react["default"].createElement(_Error["default"], {
+        className: classes.errorResultIcon
+      }), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        variant: "body1"
+      }, (0, _i18n.t)(errorMessage)))), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement(_AnalyticsWrapper["default"], {
+        targetId: "load_request",
+        data: loadCode
+      }, /*#__PURE__*/_react["default"].createElement(_MainButton["default"], {
+        onClick: onLoadClick,
+        variant: "contained",
+        size: "medium",
+        className: classes.activeButton
+      }, (0, _i18n.t)('loadConfiguration.loadButton')))));
+    }
+  }]);
+
+  return LoadConfiguration;
+}(_react["default"].Component);
+
+_defineProperty(LoadConfiguration, "propTypes", {
+  onLoadClick: _propTypes["default"].func,
+  onClose: _propTypes["default"].func,
+  onCodeChange: _propTypes["default"].func,
+  loadCode: _propTypes["default"].string,
+  errorMessage: _propTypes["default"].string,
+  classes: _propTypes["default"].object,
+  workInProgress: _propTypes["default"].bool,
+  show: _propTypes["default"].bool
+});
+
+var _default = (0, _withWidth["default"])()((0, _core.withStyles)(styles, {
+  name: 'LoadConfiguration'
+})(LoadConfiguration));
+
+exports["default"] = _default;

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

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _ErrorRounded = _interopRequireDefault(require("@material-ui/icons/ErrorRounded"));
+
+var _WarningRounded = _interopRequireDefault(require("@material-ui/icons/WarningRounded"));
+
+var _CheckCircle = _interopRequireDefault(require("@material-ui/icons/CheckCircle"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    root: {
+      borderRadius: '4px',
+      color: '#fff',
+      padding: '10px 16px',
+      display: 'flex',
+      alignItems: 'center'
+    },
+    successRoot: {
+      backgroundColor: theme.palette.primary.success
+    },
+    warningRoot: {
+      backgroundColor: theme.palette.primary.warning
+    },
+    errorRoot: {
+      backgroundColor: theme.palette.primary.error
+    },
+    messageText: {
+      color: '#fff',
+      fontWeight: 500,
+      fontSize: 15
+    },
+    icon: {
+      marginRight: 8
+    }
+  };
+}, {
+  name: 'MessageBox'
+});
+
+var MessageBox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+  var text = _ref.text,
+      type = _ref.type;
+  var classes = useStyles();
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: ref,
+    className: (0, _clsx["default"])(classes.root, classes["".concat(type, "Root")])
+  }, type === 'success' && /*#__PURE__*/_react["default"].createElement(_CheckCircle["default"], {
+    className: classes.icon
+  }), type === 'warning' && /*#__PURE__*/_react["default"].createElement(_WarningRounded["default"], {
+    className: classes.icon
+  }), type === 'error' && /*#__PURE__*/_react["default"].createElement(_ErrorRounded["default"], {
+    className: classes.icon
+  }), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    variant: "body1",
+    className: classes.messageText
+  }, text));
+});
+
+MessageBox.propTypes = {
+  text: _propTypes["default"].string.isRequired,
+  type: _propTypes["default"].oneOf(['success', 'warning', 'error'])
+};
+MessageBox.defaultProps = {
+  type: 'success'
+};
+var _default = MessageBox;
+exports["default"] = _default;

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

@@ -0,0 +1,49 @@
+"use strict";
+
+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 }; }
+
+var store = (0, _redux.createStore)(function () {
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return state;
+});
+(0, _react2.storiesOf)('Messagebox', module).add('renders with a success message', function () {
+  return /*#__PURE__*/_react["default"].createElement(_reactRedux.Provider, {
+    store: store
+  }, /*#__PURE__*/_react["default"].createElement(_ThemeProvider["default"], null, /*#__PURE__*/_react["default"].createElement(_index["default"], {
+    type: "success",
+    text: "I am a nice success message"
+  })));
+}).add('renders with a warning message', function () {
+  return /*#__PURE__*/_react["default"].createElement(_reactRedux.Provider, {
+    store: store
+  }, /*#__PURE__*/_react["default"].createElement(_ThemeProvider["default"], null, /*#__PURE__*/_react["default"].createElement(_index["default"], {
+    type: "warning",
+    text: "I am a nice warning message"
+  })));
+}).add('renders with a error message', function () {
+  return /*#__PURE__*/_react["default"].createElement(_reactRedux.Provider, {
+    store: store
+  }, /*#__PURE__*/_react["default"].createElement(_ThemeProvider["default"], null, /*#__PURE__*/_react["default"].createElement(_index["default"], {
+    type: "error",
+    text: "I am a nice error message"
+  })));
+}).add('renders with a message with long title', function () {
+  return /*#__PURE__*/_react["default"].createElement(_reactRedux.Provider, {
+    store: store
+  }, /*#__PURE__*/_react["default"].createElement(_ThemeProvider["default"], null, /*#__PURE__*/_react["default"].createElement(_index["default"], {
+    type: "success",
+    text: "I am a nice success message with a title that will wrap into more than one line, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad asperiores dolorum eligendi est necessitatibus odio pariatur praesentium quae saepe voluptatum."
+  })));
+});

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

@@ -0,0 +1,105 @@
+"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 _Grid = _interopRequireDefault(require("@material-ui/core/Grid/Grid"));
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography/Typography"));
+
+var _Icon = _interopRequireDefault(require("@material-ui/core/Icon/Icon"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+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 {
+    iconHover: {
+      margin: 'auto 10px auto 0'
+    },
+    MuiBodyRoot: {
+      display: 'flex',
+      margin: '20px 0',
+      lineHeight: 1.6
+    }
+  };
+};
+
+var Notification = /*#__PURE__*/function (_React$Component) {
+  _inherits(Notification, _React$Component);
+
+  var _super = _createSuper(Notification);
+
+  function Notification() {
+    _classCallCheck(this, Notification);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(Notification, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          icon = _this$props.icon,
+          notification = _this$props.notification,
+          classes = _this$props.classes,
+          color = _this$props.color;
+      return /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
+        item: true
+      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        variant: "body2",
+        color: color,
+        className: classes.MuiBodyRoot
+      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        key: icon,
+        className: classes.iconHover
+      }, icon), notification));
+    }
+  }]);
+
+  return Notification;
+}(_react["default"].Component);
+
+_defineProperty(Notification, "propTypes", {
+  icon: _propTypes["default"].string,
+  notification: _propTypes["default"].string,
+  classes: _propTypes["default"].object,
+  color: _propTypes["default"].string
+});
+
+var _default = (0, _styles.withStyles)(styles, {
+  name: 'Notification'
+})(Notification);
+
+exports["default"] = _default;

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

@@ -0,0 +1,55 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _index = _interopRequireDefault(require("./index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var mockedPriceData = [{
+  key: 'Damen Polo Organic, JAMES & NICHOLSON',
+  identifier: 'precosts',
+  label: 'Damen Polo Organic, JAMES & NICHOLSON',
+  selectable: false,
+  price: '98,00 €'
+}, {
+  key: 'Vorkosten',
+  identifier: 'precosts',
+  label: 'Vorkosten',
+  selectable: false,
+  price: '29,00 €'
+}, {
+  key: 'Werbedruck',
+  identifier: 'advertisePrinting',
+  label: 'Werbedruck',
+  selectable: false,
+  price: '42,00 €'
+}, {
+  key: 'Logokosten',
+  identifier: 'logisticsCosts',
+  label: 'Logokosten',
+  selectable: false,
+  price: '0,00 €'
+}, {
+  key: 'Korrekturanzug',
+  identifier: 'proof',
+  label: 'Korrekturabzug',
+  selectable: true,
+  price: '0,00 €'
+}, {
+  key: 'Korrekturmuster',
+  identifier: 'correctionDraft',
+  label: 'Korrekturmuster',
+  selectable: true,
+  price: '0,00 €'
+}];
+(0, _react2.storiesOf)('PriceNotification', module).add('with icon on the left', function () {
+  return /*#__PURE__*/_react["default"].createElement(_index["default"], {
+    icon: "error",
+    color: "secondary",
+    notification: "Noch 25 Artikel bis zur n\xE4chsten Mengenstaffel und sparen Sie 17% auf den Artikelpreis.",
+    priceList: mockedPriceData
+  });
+});