contentoh-components-library 21.2.29 → 21.2.31

package/.env.production

@@ -19,7 +19,7 @@ REACT_APP_RETAILER_ENDPOINT=https://6jqnpjf841.execute-api.us-east-1.amazonaws.c
 REACT_APP_READ_ORDERS_BY_STATUS=https://6jqnpjf841.execute-api.us-east-1.amazonaws.com/prod/read-orders-by-status
 REACT_APP_READ_REQUIRED_ORDERS=https://6jqnpjf841.execute-api.us-east-1.amazonaws.com/prod/read-required-orders
 REACT_APP_CATEGORY_ENDPOINT=https://6jqnpjf841.execute-api.us-east-1.amazonaws.com/prod/categories
-REACT_APP_READ_PROVIDERS=6jqnpjf841.execute-api.us-east-1.amazonaws.com/prod/providers
+REACT_APP_READ_PROVIDERS=https://6jqnpjf841.execute-api.us-east-1.amazonaws.com/prod/providers
 
 REACT_APP_IMAGES_BUCKET=content-management-images-prod
 REACT_APP_KEY_UPLOAD_TO_S3=AKIA5CPHLQTT46EQ5TIK

package/dist/components/atoms/ListCommercialRetailers/ListCommercialRetailers.stories.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ListCommercialRetailersDefault = void 0;
+
+var _index = require("./index");
+
+var _default = {
+  title: "Components/atoms/ListCommercialRetailers",
+  component: _index.ListCommercialRetailers
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.ListCommercialRetailers, args);
+};
+
+var ListCommercialRetailersDefault = Template.bind({});
+exports.ListCommercialRetailersDefault = ListCommercialRetailersDefault;
+ListCommercialRetailersDefault.args = {
+  retailersAvailable: [{
+    id: 54,
+    name: "Construrama",
+    country: "México",
+    id_region: 1,
+    active: 1
+  }, {
+    id: 4,
+    name: "Walmart Super y Superama"
+  }, {
+    id: 6,
+    name: "HEB"
+  }]
+};

package/dist/components/atoms/ListCommercialRetailers/index.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListCommercialRetailers = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _listCommercialRetailers = _interopRequireDefault(require("../../../assets/images/listCommercialRetailers/listCommercialRetailers.svg"));
+
+var _react = require("react");
+
+var _index = require("../CheckBox/index");
+
+var ListCommercialRetailers = function ListCommercialRetailers(_ref) {
+  var retailersAvailable = _ref.retailersAvailable;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showMenu = _useState2[0],
+      setShowMenu = _useState2[1];
+
+  var closeMenu = function closeMenu(e) {
+    if (!e.target.closest(".menu-list-commercial-retailers") && showMenu) {
+      document.removeEventListener("click", closeMenu, false);
+      setShowMenu(false);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    if (showMenu) {
+      document.addEventListener("click", closeMenu, false);
+    }
+  }, [showMenu]);
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    onClick: function onClick(event) {
+      if (!showMenu) {
+        setShowMenu(true);
+      } else if (showMenu && !event.target.closest(".menu-list-commercial-retailers")) {
+        setShowMenu(false);
+        document.removeEventListener("click", closeMenu, false);
+      }
+    },
+    className: "list-commercial-retailers"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: _listCommercialRetailers.default,
+    alt: "button up icon"
+  }), showMenu && /*#__PURE__*/React.createElement("div", {
+    className: "menu-list-commercial-retailers"
+  }, retailersAvailable === null || retailersAvailable === void 0 ? void 0 : retailersAvailable.map(function (component, index) {
+    return /*#__PURE__*/React.createElement(_index.CheckBox, {
+      id: component.id,
+      label: component.name,
+      key: index + "-" + component.id
+    });
+  })));
+};
+
+exports.ListCommercialRetailers = ListCommercialRetailers;

package/dist/components/atoms/ListCommercialRetailers/styles.js

@@ -0,0 +1,20 @@
+"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 _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+var Container = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: transparent;\n  border: 1px solid ", ";\n  border-radius: 2px;\n  padding: 3px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  position: relative;\n  height: 30px;\n  .menu-list-commercial-retailers {\n    width: 540px;\n    height: auto;\n    border-radius: 7px;\n    background-color: ", ";\n    padding: 14px 14px 8px 20px;\n    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);\n    position: absolute;\n    top: calc(100% + 3px);\n    right: calc(100% - 20px);\n    display: flex;\n    flex-wrap: wrap;\n    z-index: 1;\n    div {\n      & + * {\n        margin-left: 15px;\n      }\n      p {\n        font-size: 11px;\n      }\n    }\n  }\n"])), _variables.GlobalColors.magenta_s2, _variables.GlobalColors.s2);
+
+exports.Container = Container;

package/dist/components/atoms/MenuCommercialRetailers/MenuCommercialRetailers.stories.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MenuCommercialRetailersDefault = void 0;
+
+var _index = require("./index");
+
+var _default = {
+  title: "Components/atoms/MenuCommercialRetailers",
+  component: _index.MenuCommercialRetailers
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.MenuCommercialRetailers, args);
+};
+
+var MenuCommercialRetailersDefault = Template.bind({});
+exports.MenuCommercialRetailersDefault = MenuCommercialRetailersDefault;
+MenuCommercialRetailersDefault.args = {
+  editType: "3",
+  retailersAvailable: [{
+    id: 54,
+    name: "Construrama",
+    country: "México",
+    id_region: 1,
+    active: 1
+  }, {
+    id: 4,
+    name: "Walmart Super y Superama"
+  }, {
+    id: 6,
+    name: "HEB"
+  }]
+};

package/dist/components/atoms/MenuCommercialRetailers/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuCommercialRetailers = void 0;
+
+var _styles = require("./styles");
+
+var _StatusTag = require("../StatusTag");
+
+var _ListCommercialRetailers = require("../ListCommercialRetailers");
+
+var MenuCommercialRetailers = function MenuCommercialRetailers(_ref) {
+  var editType = _ref.editType,
+      retailersAvailable = _ref.retailersAvailable;
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement(_StatusTag.StatusTag, {
+    editType: editType,
+    ovalForm: true
+  }), /*#__PURE__*/React.createElement(_ListCommercialRetailers.ListCommercialRetailers, {
+    retailersAvailable: retailersAvailable
+  }));
+};
+
+exports.MenuCommercialRetailers = MenuCommercialRetailers;

package/dist/components/atoms/MenuCommercialRetailers/styles.js

@@ -0,0 +1,20 @@
+"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 _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  .status-version {\n    & + * {\n      margin-left: 5px;\n    }\n  }\n  .list-commercial-retailers {\n    border: 1px solid transparent;\n    img {\n      display: none;\n    }\n    &:hover {\n      border: 1px solid ", ";\n      img {\n        display: block;\n      }\n    }\n  }\n"])), _variables.GlobalColors.magenta_s2);
+
+exports.Container = Container;

package/dist/components/atoms/MenuProductImage/MenuProductImage.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MenuProductImageDefault = void 0;
+
+var _index = require("./index");
+
+var _menuProductImage = _interopRequireDefault(require("../../../assets/images/menuProductImage/menuProductImage.svg"));
+
+var _default = {
+  title: "Components/atoms/MenuProductImage",
+  component: _index.MenuProductImage
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.MenuProductImage, args);
+};
+
+var MenuProductImageDefault = Template.bind({});
+exports.MenuProductImageDefault = MenuProductImageDefault;
+MenuProductImageDefault.args = {
+  ProductImg: _menuProductImage.default
+};

package/dist/components/atoms/MenuProductImage/index.js

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuProductImage = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _menuProductImageButton = _interopRequireDefault(require("../../../assets/images/menuProductImage/menuProductImageButton.svg"));
+
+var _react = require("react");
+
+var _index = require("../LoadImageMenu/index");
+
+var _listCommercialRetailers = _interopRequireDefault(require("../../../assets/images/listCommercialRetailers/listCommercialRetailers.svg"));
+
+var MenuProductImage = function MenuProductImage(_ref) {
+  var ProductImg = _ref.ProductImg;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showMenu = _useState2[0],
+      setShowMenu = _useState2[1];
+
+  var closeMenu = function closeMenu(e) {
+    if (!e.target.closest(".menu-upload-product") && showMenu) {
+      document.removeEventListener("click", closeMenu, false);
+      setShowMenu(false);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    if (showMenu) {
+      document.addEventListener("click", closeMenu, false);
+    }
+  }, [showMenu]);
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    className: "div-upload-image"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "profile-image",
+    src: ProductImg,
+    alt: "Product Image"
+  }), /*#__PURE__*/React.createElement("button", {
+    onClick: function onClick(event) {
+      if (!showMenu) {
+        setShowMenu(true);
+      } else if (showMenu && !event.target.closest(".menu-upload-product")) {
+        setShowMenu(false);
+        document.removeEventListener("click", closeMenu, false);
+      }
+    },
+    className: "upload-image-button " + (showMenu && "show-menu-upload-image")
+  }, /*#__PURE__*/React.createElement("img", {
+    src: showMenu ? _listCommercialRetailers.default : _menuProductImageButton.default,
+    alt: "Product Image Button"
+  })), showMenu && /*#__PURE__*/React.createElement("div", {
+    className: "menu-upload-product"
+  }, /*#__PURE__*/React.createElement(_index.LoadImageMenu, {
+    tipo: "Tipo de empaque ",
+    product: "Producto expuesto",
+    content: [{
+      label: "Enbalaje adicional - 0"
+    }, {
+      label: "En paquete - 1"
+    }, {
+      label: "Producto expuesto - 2"
+    }, {
+      label: "Embalaje multiforme - 3"
+    }, {
+      label: "Si no es una imagen / no corresponde - X"
+    }],
+    id: "menu-packaging-type"
+  }), /*#__PURE__*/React.createElement(_index.LoadImageMenu, {
+    tipo: "Tipo de imagen ",
+    product: "Render",
+    content: [{
+      label: "fotografía del producto"
+    }],
+    id: "menu-image-type"
+  })));
+};
+
+exports.MenuProductImage = MenuProductImage;

package/dist/components/atoms/MenuProductImage/styles.js

@@ -0,0 +1,20 @@
+"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 _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  position: relative;\n  .profile-image {\n    width: 23px;\n    height: 23px;\n    & + * {\n      margin-left: 8px;\n    }\n  }\n  .upload-image-button {\n    background: transparent;\n    border: 1px solid transparent;\n    border-radius: 2px;\n    padding: 3px;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    height: 30px;\n    width: 15px;\n    left: 100%;\n    img {\n      display: none;\n    }\n    &:hover {\n      border: 1px solid ", ";\n      img {\n        display: block;\n      }\n    }\n    &.show-menu-upload-image {\n      border: 1px solid ", ";\n      img {\n        display: block;\n      }\n    }\n  }\n  .menu-upload-product {\n    background: ", ";\n    border: 1px solid ", ";\n    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);\n    border-radius: 7px;\n    width: 324px;\n    padding: 8px 0px;\n    position: absolute;\n    right: 0%;\n    z-index: 1;\n    top: 30px;\n    button {\n      left: 0%;\n      border-radius: 7px;\n      span,\n      .tipo {\n        color: ", ";\n      }\n      .products {\n        color: ", ";\n      }\n    }\n  }\n"])), _variables.GlobalColors.s3, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.s2, _variables.GlobalColors.s3, _variables.GlobalColors.s5, _variables.GlobalColors.s4);
+
+exports.Container = Container;

package/dist/components/atoms/VerticalSideMenuMainPage/VerticalSideMenuMainPage.stories.js

@@ -15,8 +15,6 @@ var _iconProduct = _interopRequireDefault(require("../../../assets/images/vertic
 
 var _iconGroup = _interopRequireDefault(require("../../../assets/images/verticalSideMenuMainPage/iconGroup.svg"));
 
-var _iconLogo = _interopRequireDefault(require("../../../assets/images/verticalSideMenuMainPage/iconLogo.svg"));
-
 var _iconSpeedometer = _interopRequireDefault(require("../../../assets/images/verticalSideMenuMainPage/iconSpeedometer.svg"));
 
 var _iconTask = _interopRequireDefault(require("../../../assets/images/verticalSideMenuMainPage/iconTask.svg"));
@@ -58,6 +56,6 @@ VerticalSideMenuMainPageDefault.args = {
   }, {
     icon: _iconTask.default,
     path: "/tasks",
-    title: "Tareas"
+    title: "Content Oh!"
   }]
 };

package/dist/components/atoms/VerticalSideMenuMainPage/index.js

@@ -24,61 +24,68 @@ var _reactRouterDom = require("react-router-dom");
 var _jsxRuntime = require("react/jsx-runtime");
 
 var VerticalSideMenuMainPage = function VerticalSideMenuMainPage(_ref) {
-  var menuoption = _ref.menuoption;
+  var _ref$menuoption = _ref.menuoption,
+      menuoption = _ref$menuoption === void 0 ? [] : _ref$menuoption,
+      containerdash = _ref.containerdash;
 
   var _useState = (0, _react.useState)(),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       trueBar = _useState2[0],
       setTrueBar = _useState2[1];
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-    className: trueBar,
-    bar: trueBar,
-    onMouseOver: function onMouseOver() {
-      return setTrueBar(true);
-    },
-    onMouseOut: function onMouseOut() {
-      return setTrueBar(false);
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "navbar-top",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-        src: trueBar ? _iconLogoContentoh.default : _iconLogo.default,
-        alt: "Logo",
-        className: "logo"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "option",
-        children: menuoption.map(function (item, index) {
-          var _item$suboption;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.BrowserRouter, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ContainerPrincipal, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+        bar: trueBar,
+        onMouseOver: function onMouseOver() {
+          return setTrueBar(true);
+        },
+        onMouseOut: function onMouseOut() {
+          return setTrueBar(false);
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "navbar-top",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            src: trueBar ? _iconLogoContentoh.default : _iconLogo.default,
+            alt: "Logo",
+            className: "logo"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "option",
+            children: menuoption.map(function (item, index) {
+              var _item$suboption;
 
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.NavLink, {
-              to: item.path,
-              className: "option-link",
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-                src: item.icon,
-                alt: item.title
-              }), trueBar && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-                children: item.title
-              })]
-            }), item.suboption !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-              children: item === null || item === void 0 ? void 0 : (_item$suboption = item.suboption) === null || _item$suboption === void 0 ? void 0 : _item$suboption.map(function (subitem) {
-                return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                  className: "sub-option",
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.NavLink, {
-                    to: subitem.path,
-                    className: "sub-option-link",
-                    children: trueBar && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-                      children: subitem.title
-                    })
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                bar: trueBar,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.NavLinkOption, {
+                  to: item.path,
+                  bar: trueBar,
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                    src: item.icon,
+                    alt: item.title
+                  }), trueBar && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                    children: item.title
+                  })]
+                }), item.suboption !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+                  children: item === null || item === void 0 ? void 0 : (_item$suboption = item.suboption) === null || _item$suboption === void 0 ? void 0 : _item$suboption.map(function (subitem) {
+                    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                      className: "sub-option",
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.NavLinkOption, {
+                        to: subitem.path,
+                        className: "sub-option-link",
+                        bar: trueBar,
+                        children: trueBar && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                          children: subitem.title
+                        })
+                      })
+                    });
                   })
-                });
-              })
-            })]
-          }, index);
+                })]
+              }, index);
+            })
+          })]
         })
-      })]
-    })
+      }), containerdash]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.GlobalStyle, {})]
   });
 };
 

package/dist/components/atoms/VerticalSideMenuMainPage/styles.js

@@ -2,50 +2,59 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Container = void 0;
+exports.NavLinkOption = exports.GlobalStyle = exports.ContainerPrincipal = exports.Container = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _reactRouterDom = require("react-router-dom");
 
-var _templateObject;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 98%;\n  box-sizing: border-box;\n  padding: 23px 10px 70px 10px;\n  flex-direction: column;\n  justify-content: space-between;\n  overflow: auto;\n  width: ", "px;\n  border-radius: ", "px;\n  background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);\n  scrollbar-width: none;\n  display: flex;\n  text-align: center;\n  transition: width 0.3s linear;\n  margin: 10px 0 10px 20px;\n  & + * {\n    margin-left: 30px;\n  }\n  .navbar-top {\n    transition: all 0.3s linear;\n    .option {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      margin-top: ", "%;\n      padding-left: ", "px;\n      .active {\n        background: #e33aa9;\n      }\n      & + div {\n        margin-top: 5px;\n      }\n      a {\n        height: ", "px;\n        display: flex;\n        justify-content: ", ";\n        border-radius: ", "px;\n        align-items: center;\n        font-family: sans-serif;\n        font-style: normal;\n        font-weight: 400;\n        font-size: 18px;\n        line-height: 21px;\n        letter-spacing: -0.015em;\n        color: #fafafa;\n        text-decoration: none;\n        &.option-link {\n          cursor: pointer;\n          width: ", "px;\n          margin: 5px 0;\n          padding-left: ", "px;\n        }\n        p {\n          cursor: pointer;\n          margin: 0%;\n          pointer-events: none;\n        }\n        img {\n          width: 22px;\n          & + * {\n            margin-left: 12px;\n          }\n        }\n      }\n      .option-link:hover {\n        background: #e33aa9;\n      }\n      .sub-option {\n        display: flex;\n        flex-direction: column;\n        padding-left: ", "px;\n        height: auto;\n        width: auto;\n        a {\n          display: flex;\n          justify-content: flex-start;\n          text-decoration: none;\n          position: relative;\n          font-size: 13px;\n          border-left: 1px solid #f0eef2;\n          border-radius: 0;\n          color: #f0eef2;\n          padding-top: 14px;\n          padding-left: 12px;\n          height: 25px;\n          &::before {\n            border-left: 1px solid #e33aa9;\n            width: 10px;\n            content: \"\";\n            border-radius: 50%;\n            height: 10px;\n            background-color: white;\n            position: absolute;\n            bottom: 0;\n            left: ", "%;\n          }\n          &.active {\n            background: none;\n            &::before {\n              background-color: #e33aa9;\n            }\n          }\n        }\n      }\n    }\n  }\n"])), function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 98%;\n  box-sizing: border-box;\n  padding: 23px 10px 70px 10px;\n  flex-direction: column;\n  justify-content: space-between;\n  overflow: none;\n  width: ", "px;\n  border-radius: ", "px;\n  background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);\n  scrollbar-width: none;\n  display: flex;\n  text-align: center;\n  transition: width 0.3s linear;\n  margin: 10px 0 10px 20px;\n  & + * {\n    margin-left: 30px;\n  }\n  .navbar-top {\n    transition: all 0.3s linear;\n    .option {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      margin-top: ", "%;\n      padding-left: ", "px;\n      .active {\n        background: #e33aa9;\n      }\n      & + div {\n        margin-top: 5px;\n      }\n      .sub-option {\n        display: flex;\n        flex-direction: column;\n        padding-left: ", "px;\n        height: auto;\n        width: auto;\n      }\n    }\n  }\n"])), function (_ref) {
   var bar = _ref.bar;
-  return bar ? 270 : 58;
+  return bar ? 260 : 58;
 }, function (_ref2) {
   var bar = _ref2.bar;
   return bar ? 20 : 50;
 }, function (_ref3) {
   var bar = _ref3.bar;
-  return bar === "" ? 145 : 50;
+  return bar === "" ? 145 : 40;
 }, function (_ref4) {
   var bar = _ref4.bar;
-  return bar ? 5 : 0;
+  return bar ? 10 : 0;
 }, function (_ref5) {
   var bar = _ref5.bar;
-  return bar ? 32 : 38;
-}, function (_ref6) {
+  return bar ? 28 : 20;
+});
+
+exports.Container = Container;
+var NavLinkOption = (0, _styledComponents.default)(_reactRouterDom.NavLink)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: ", "px;\n  display: flex;\n  justify-content: ", ";\n  border-radius: ", "px;\n  align-items: center;\n  font-family: sans-serif;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 18px;\n  line-height: 21px;\n  margin: 5px 0;\n  letter-spacing: -0.015em;\n  color: #fafafa;\n  text-decoration: none;\n  cursor: pointer;\n  width: ", "px;\n  padding: 0 17px;\n  &:hover {\n    background: #e33aa9;\n  }\n  p {\n    cursor: pointer;\n    margin: 0%;\n    pointer-events: none;\n  }\n  img {\n    width: 22px;\n    & + * {\n      margin-left: 12px;\n    }\n  }\n  &.sub-option-link {\n    display: flex;\n    justify-content: flex-start;\n    text-decoration: none;\n    position: relative;\n    font-size: 13px;\n    border-left: 1px solid #f0eef2;\n    border-radius: 0;\n    color: #f0eef2;\n    padding-top: 14px;\n    height: 25px;\n    margin: 0;\n    padding-left: 12px;\n    &::before {\n      border-left: 1px solid #e33aa9;\n      width: 10px;\n      content: \"\";\n      border-radius: 50%;\n      height: 10px;\n      background-color: white;\n      position: absolute;\n      bottom: 0;\n      left: ", "%;\n    }\n    &.active {\n      background: none !important;\n      &::before {\n        background-color: #e33aa9;\n      }\n    }\n    &:hover {\n      background: none;\n    }\n  }\n"])), function (_ref6) {
   var bar = _ref6.bar;
-  return bar ? "flex-start" : "center";
+  return bar ? 32 : 38;
 }, function (_ref7) {
   var bar = _ref7.bar;
-  return bar ? 18 : 100;
+  return bar ? "flex-start" : "center";
 }, function (_ref8) {
   var bar = _ref8.bar;
-  return bar ? "160" : "38";
+  return bar ? 18 : 100;
 }, function (_ref9) {
   var bar = _ref9.bar;
-  return bar ? 15 : 0;
+  return bar ? "163" : "38";
 }, function (_ref10) {
   var bar = _ref10.bar;
-  return bar ? 28 : 20;
-}, function (_ref11) {
-  var bar = _ref11.bar;
-  return bar ? -4 : -34;
+  return bar ? -4 : -16;
 });
+exports.NavLinkOption = NavLinkOption;
+
+var ContainerPrincipal = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: flex;\n  height: 100vh;\n"])));
 
-exports.Container = Container;
+exports.ContainerPrincipal = ContainerPrincipal;
+var GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n@font-face {\n  font-family: 'Avenir Next';\n  font-style: normal;\n  font-weight: normal;\n  src:\n    url('../../assets/fonts/AvenirNextLTPro-Bold.otf') format('otf'),\n    url('../../assets/fonts/AvenirNextLTPro-Regular.otf') format('otf');\n}\n\nhtml, body, div, span, applet, object, iframe,\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\na, abbr, acronym, address, big, cite, code,\ndel, dfn, em, font, img, ins, kbd, q, s, samp,\nsmall, strike, strong, sub, sup, tt, var,\nb, u, i, center,\ndl, dt, dd, ol, ul, li,\nfieldset, figure, form, label, legend,\ntable, caption, tbody, tfoot, thead, tr, th, td {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  outline: 0;\n  font-size: 100%;\n  vertical-align: baseline;\n  background: transparent;\n}\nbody {\n  line-height: 1;\n}\nol, ul {\n  list-style: none;\n}\nblockquote, q {\n  quotes: none;\n}\nblockquote:before, blockquote:after,\nq:before, q:after {\n  content: '';\n  content: none;\n}\n:focus {\n  outline: 0;\n}\nins {\n  text-decoration: none;\n}\ndel {\n  text-decoration: line-through;\n}\ntable {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n\n"])));
+exports.GlobalStyle = GlobalStyle;

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ApproveRejetPanelDefault = void 0;
+
+var _index = require("./index");
+
+var _default = {
+  title: "Components/molecules/ApproveRejetPanel",
+  component: _index.ApproveRejetPanel
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.ApproveRejetPanel, args);
+};
+
+var ApproveRejetPanelDefault = Template.bind({});
+exports.ApproveRejetPanelDefault = ApproveRejetPanelDefault;
+ApproveRejetPanelDefault.args = {
+  text: "113 productos",
+  check: false
+};