contentoh-components-library 21.4.68 → 21.4.70

package/dist/components/molecules/HeaderTopv2/HeaderTopv2.stories.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ButtonChatDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/molecules/HeaderTopv2",
+  component: _index.HeaderTopv2
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.HeaderTopv2, (0, _objectSpread2.default)({}, args));
+};
+
+var ButtonChatDefault = Template.bind({});
+exports.ButtonChatDefault = ButtonChatDefault;

package/dist/components/molecules/HeaderTopv2/index.js

@@ -0,0 +1,123 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeaderTopv2 = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _index = require("../../atoms/GeneralButton/index");
+
+var _react = require("react");
+
+var _Chat = require("../../organisms/Chat");
+
+var _IconoAB = _interopRequireDefault(require("../../../../src/assets/images/generalButton/Icono AB.svg"));
+
+var _react2 = require("@testing-library/react");
+
+var _ScreenHeaderv = require("../../atoms/ScreenHeaderv2");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var HeaderTopv2 = function HeaderTopv2(_ref) {
+  var setHeaderTop = _ref.setHeaderTop,
+      withChat = _ref.withChat,
+      chatType = _ref.chatType,
+      productSelected = _ref.productSelected,
+      token = _ref.token,
+      auditableVersion = _ref.auditableVersion,
+      setCompare = _ref.setCompare,
+      isAuditor = _ref.isAuditor,
+      activeRetailer = _ref.activeRetailer;
+  var HeaderTopv2 = (0, _react.useRef)();
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      chat = _useState2[0],
+      setChat = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      chatData = _useState4[0],
+      setChatData = _useState4[1];
+
+  (0, _react.useEffect)(function () {
+    if (activeRetailer.id && productSelected && token.length) {
+      var _productSelected$arti;
+
+      setChatData({
+        id: (productSelected === null || productSelected === void 0 ? void 0 : (_productSelected$arti = productSelected.article) === null || _productSelected$arti === void 0 ? void 0 : _productSelected$arti.id_article) || (productSelected === null || productSelected === void 0 ? void 0 : productSelected.id_article),
+        version: productSelected === null || productSelected === void 0 ? void 0 : productSelected.version,
+        retailerId: activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id,
+        status: productSelected === null || productSelected === void 0 ? void 0 : productSelected.status,
+        userToken: token
+      });
+    }
+  }, [activeRetailer, productSelected, token]);
+  (0, _react.useEffect)(function () {
+    if (chatType) renderChat(chatType);
+  }, [chatData, chatType]);
+  (0, _react.useEffect)(function () {
+    setHeaderTop && setHeaderTop(HeaderTopv2.current.clientHeight);
+  }, []);
+
+  var renderChat = function renderChat(chatType) {
+    switch (chatType) {
+      case "product_status":
+        chatData && setChat( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chat.Chat, {
+          chatType: "product_status",
+          chatContainerType: "popUp",
+          chatData: {
+            id: chatData === null || chatData === void 0 ? void 0 : chatData.id,
+            version: chatData === null || chatData === void 0 ? void 0 : chatData.version,
+            retailerId: chatData === null || chatData === void 0 ? void 0 : chatData.retailerId,
+            status: chatData === null || chatData === void 0 ? void 0 : chatData.status,
+            userToken: chatData === null || chatData === void 0 ? void 0 : chatData.userToken
+          },
+          size: 18,
+          activeRetailer: activeRetailer
+        }));
+        break;
+
+      default:
+        setChat( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chat.Chat, {
+          chatType: "merchant_product",
+          chatContainerType: "popUp",
+          chatData: {
+            userToken: token,
+            id: productSelected.id_article,
+            version: productSelected.version
+          },
+          size: 18,
+          activeRetailer: activeRetailer
+        }));
+        break;
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    ref: HeaderTopv2,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeaderv.ScreenHeaderv2, {
+      text: "Edici\xF3n de producto"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "buttons-container",
+      children: [withChat && chat, isAuditor && auditableVersion && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Button, {
+        buttonType: "general-white-button circular-button",
+        onClick: function onClick() {
+          setCompare(function (current) {
+            return !current;
+          });
+        },
+        image: _IconoAB.default
+      })]
+    })]
+  });
+};
+
+exports.HeaderTopv2 = HeaderTopv2;

package/dist/components/molecules/HeaderTopv2/styles.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  .buttons-top {\n    display: flex;\n    align-items: center;\n    padding-top: 10px;\n  }\n\n  .buttons-container {\n    display: flex;\n\n    button {\n      width: 30px;\n      height: 30px;\n      border: 1px solid #f0f0f0;\n      background-size: 20px;\n      padding: 0;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      img {\n        height: 15px;\n      }\n\n      & + * {\n        margin-left: 10px;\n      }\n    }\n  }\n"])));
+
+exports.Container = Container;

package/dist/components/molecules/ImageSelectorv2/ImageSelectorv2.stories.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ImageSelectorv2Default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/molecules/ImageSelectorv2",
+  component: _index.ImageSelectorv2,
+  images: {},
+  argTypes: {
+    modalSelector: {
+      options: [true, false],
+      type: "boolean"
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ImageSelectorv2, (0, _objectSpread2.default)({}, args));
+};
+
+var ImageSelectorv2Default = Template.bind({});
+exports.ImageSelectorv2Default = ImageSelectorv2Default;
+ImageSelectorv2Default.args = {
+  images: [{
+    img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+    alt: "img"
+  }, {
+    img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+    alt: "img"
+  }, {
+    img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+    alt: "img"
+  }, {
+    img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+    alt: "img"
+  }, {
+    img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+    alt: "img"
+  }, {
+    img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+    alt: "img"
+  }]
+};

package/dist/components/molecules/ImageSelectorv2/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageSelectorv2 = void 0;
+
+var _styles = require("./styles");
+
+var _ProductImagev = require("../../atoms/ProductImagev2");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var ImageSelectorv2 = function ImageSelectorv2(_ref) {
+  var _images$values;
+
+  var _ref$images = _ref.images,
+      images = _ref$images === void 0 ? [] : _ref$images,
+      setActiveImage = _ref.setActiveImage,
+      modalSelector = _ref.modalSelector;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    className: modalSelector && "modal-image-selector",
+    children: images === null || images === void 0 ? void 0 : (_images$values = images.values) === null || _images$values === void 0 ? void 0 : _images$values.map(function (image, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductImagev.ProductImagev2, {
+        img: image.src,
+        altText: image.altText,
+        imageType: modalSelector ? "catalogue-modal-image" : "carousel-image",
+        onClick: function onClick() {
+          return setActiveImage(index);
+        }
+      }, index);
+    })
+  });
+};
+
+exports.ImageSelectorv2 = ImageSelectorv2;

package/dist/components/molecules/ImageSelectorv2/styles.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 340px;\n  display: flex;\n  overflow: auto;\n  gap: 10px;\n\n  &.modal-image-selector {\n    width: 377px;\n    height: auto;\n    background: #ffff;\n    border-radius: 10px;\n  }\n"])));
+
+exports.Container = Container;

package/dist/components/molecules/Phase/Phase.stories.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PhaseDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _variables = require("../../../global-files/variables");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/molecules/Phase",
+  component: _index.Phase,
+  argTypes: {
+    statusType: {
+      options: Object.values(_variables.GlobalStatus),
+      control: {
+        type: "select"
+      }
+    },
+    percent: {
+      control: {
+        type: "range",
+        min: 0,
+        max: 100,
+        step: 1
+      }
+    },
+    backgroundColor: {
+      options: Object.keys(_variables.GlobalColors),
+      control: {
+        type: "select"
+      }
+    },
+    priority: {
+      options: ["no priority", "low", "medium", "high"],
+      control: {
+        type: "select"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Phase, (0, _objectSpread2.default)({}, args));
+};
+
+var PhaseDefault = Template.bind({});
+exports.PhaseDefault = PhaseDefault;
+PhaseDefault.args = {
+  productName: "Nombre del producto",
+  statusType: "AP",
+  percent: 10,
+  backgroundColor: "s2",
+  priority: "no priority",
+  date: new Date().toLocaleDateString()
+};

package/dist/components/molecules/Phase/index.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Phase = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styles = require("./styles");
+
+var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
+
+var _material = require("@mui/material");
+
+var _Select = _interopRequireDefault(require("../../atoms/Select"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var Phase = function Phase(_ref) {
+  var id = _ref.id,
+      grupos = _ref.grupos,
+      phases = _ref.phases;
+
+  var _useState = (0, _react.useState)(""),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      selectedValue = _useState2[0],
+      setSelectedValue = _useState2[1];
+
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      chips = _useState4[0],
+      setChips = _useState4[1];
+
+  var onAdd = function onAdd() {
+    if (selectedValue) {
+      setChips(function (prevChips) {
+        return [].concat((0, _toConsumableArray2.default)(prevChips), [selectedValue]);
+      });
+      setSelectedValue("");
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "header-phase",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("h2", {
+        children: ["Fase ", id]
+      }), id === 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        className: "text-phase",
+        children: "Al rechazar en esta fase enviar a proveedor"
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "phase-sel",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          className: "text-phase",
+          children: "Al rechazar en esta fase enviar a "
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
+          width: "100px",
+          valueSelected: selectedValue,
+          placeholder: "Fase",
+          options: Array.from({
+            length: phases.length
+          }, function (_, i) {
+            return {
+              value: "".concat(i + 1),
+              name: "Fase ".concat(i + 1)
+            };
+          }),
+          onChange: function onChange(e) {
+            setSelectedValue(e.target.value);
+          }
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "attributes-container",
+      children: [grupos.map(function (grupo, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+          label: grupo,
+          disabled: false
+        }, index);
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+        onClick: onAdd,
+        variant: "outlined",
+        className: "button-circle",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ContainerIcon, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "iconos-out iconos-grises",
+            children: "add"
+          })
+        })
+      })]
+    })]
+  });
+};
+
+exports.Phase = Phase;

package/dist/components/molecules/Phase/styles.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContainerIcon = exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject, _templateObject2;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction:column;\n  gap:10px;\n  align-items: center;\n  border-radius:10px;\n  border:1px solid ", ";\n  padding:10px 15px;\n  font-family:", ", sans-serif;\n  font-size:17px;\n\n .header-phase{\n  display:flex;\n  justify-content: space-between;\n  width: 100%;\n  padding-bottom: 5px;\n  border-bottom: 1px solid ", ";\n\n  h2{\n    font-family:", ", sans-serif;\n    font-size:17px;\n  }\n  p{\n    font-family:", ", sans-serif;\n    font-size:12px;\n  }\n }\n .attributes-container{\n  display: flex;\n  align-self: flex-start;\n  flex-wrap: wrap;\n  gap: 10px;\n }\n .phase-sel{\n  display: flex;\n  align-items: center;\n  gap: 10px;\n }\n .button-circle{\n  width:30px;\n  height:30px;\n  padding:2px;\n  border-radius:100%;\n  min-width:30px;\n  border: 1px solid ", ";\n}\n.button-circle:hover {\n  border: 1px solid ", ";\n}\n.text-phase{\n  font-family:", ", sans-serif;\n  font-size:12px;\n  color:", ";\n}\n"])), _variables.GlobalColors.gray_light, _variables.FontFamily.Roboto, _variables.GlobalColors.gray_light, _variables.FontFamily.Roboto, _variables.FontFamily.Roboto, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _variables.FontFamily.Roboto, _variables.GlobalColors.gray);
+
+exports.Container = Container;
+
+var ContainerIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\ncursor: pointer;\n@font-face {\n  font-family: \"Material Symbols Outlined\";\n  font-style: normal;\n  font-weight: 100 700;\n  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v68/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2)\n    format(\"woff2\");\n}\n.iconos-out {\n  font-family: \"Material Symbols Outlined\";\n  font-size: 20px;\n  //line-height: 1;\n  margin-top: 10px;\n}\n.iconos-out {\n  font-variation-settings: \"FILL\" 0, \"wght\" 400, \"GRAD\" 0, \"opsz\" 48;\n  color:  #B64545;\n}\n.iconos-grises {\n  font-variation-settings: \"FILL\" 0, \"wght\" 400, \"GRAD\" 0, \"opsz\" 48;\n  color:  ", ";\n}"])), _variables.GlobalColors.magenta_s2);
+
+exports.ContainerIcon = ContainerIcon;

package/dist/components/molecules/ProductNameHeaderv2/ProductNameHeaderv2.stories.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProductNameHeaderv2Default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _variables = require("../../../global-files/variables");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/molecules/ProductNameHeaderv2",
+  component: _index.ProductNameHeaderv2,
+  argTypes: {
+    statusType: {
+      options: Object.values(_variables.GlobalStatus),
+      control: {
+        type: "select"
+      }
+    },
+    percent: {
+      control: {
+        type: "range",
+        min: 0,
+        max: 100,
+        step: 1
+      }
+    },
+    backgroundColor: {
+      options: Object.keys(_variables.GlobalColors),
+      control: {
+        type: "select"
+      }
+    },
+    priority: {
+      options: ["no priority", "low", "medium", "high"],
+      control: {
+        type: "select"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ProductNameHeaderv2, (0, _objectSpread2.default)({}, args));
+};
+
+var ProductNameHeaderv2Default = Template.bind({});
+exports.ProductNameHeaderv2Default = ProductNameHeaderv2Default;
+ProductNameHeaderv2Default.args = {
+  productName: "Nombre del producto",
+  statusType: "AP",
+  percent: 10,
+  backgroundColor: "s2",
+  priority: "no priority",
+  date: new Date().toLocaleDateString()
+};

package/dist/components/molecules/ProductNameHeaderv2/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProductNameHeaderv2 = void 0;
+
+var _styles = require("./styles");
+
+var _ScreenHeaderv = require("../../atoms/ScreenHeaderv2");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var ProductNameHeaderv2 = function ProductNameHeaderv2(_ref) {
+  var productName = _ref.productName;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeaderv.ScreenHeaderv2, {
+      headerType: "product-name-header",
+      text: productName
+    })
+  });
+};
+
+exports.ProductNameHeaderv2 = ProductNameHeaderv2;

package/dist/components/molecules/ProductNameHeaderv2/styles.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n\n  * + * {\n    margin-left: 10px;\n  }\n"])));
+
+exports.Container = Container;

package/dist/components/molecules/ProductSkuStatus/ProductSkuStatus.stories.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProductSkuStatusDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _variables = require("../../../global-files/variables");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/molecules/ProductSkuStatus",
+  component: _index.ProductSkuStatus,
+  argTypes: {
+    statusType: {
+      options: Object.values(_variables.GlobalStatus),
+      control: {
+        type: "select"
+      }
+    },
+    percent: {
+      control: {
+        type: "range",
+        min: 0,
+        max: 100,
+        step: 1
+      }
+    },
+    backgroundColor: {
+      options: Object.keys(_variables.GlobalColors),
+      control: {
+        type: "select"
+      }
+    },
+    priority: {
+      options: ["no priority", "low", "medium", "high"],
+      control: {
+        type: "select"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ProductSkuStatus, (0, _objectSpread2.default)({}, args));
+};
+
+var ProductSkuStatusDefault = Template.bind({});
+exports.ProductSkuStatusDefault = ProductSkuStatusDefault;
+ProductSkuStatusDefault.args = {
+  statusType: "AP",
+  percent: 84,
+  backgroundColor: "s2",
+  priority: "no priority",
+  percentRequired: 100 // date: new Date().toLocaleDateString(),
+
+};