contentoh-components-library 21.1.25 → 21.1.26

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

@@ -16,12 +16,10 @@ var _react = require("react");
 var _jsxRuntime = require("react/jsx-runtime");
 
 var SliderToolTip = function SliderToolTip(_ref) {
-  var InfoIcon = _ref.InfoIcon,
-      Slide1 = _ref.Slide1,
-      Slide2 = _ref.Slide2,
-      Slide3 = _ref.Slide3,
-      Slide4 = _ref.Slide4,
-      Slide5 = _ref.Slide5;
+  var infoIcon = _ref.infoIcon,
+      slidefront = _ref.slidefront,
+      iconSize = _ref.iconSize,
+      slidePosition = _ref.slidePosition;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -42,40 +40,18 @@ var SliderToolTip = function SliderToolTip(_ref) {
   }, [showMenu]);
 
   var color = function color(id) {
-    if (id === "slidea1") {
-      document.getElementById("slidea1").style.backgroundColor = "#E33AA9";
-      document.getElementById("slidea2").style.backgroundColor = "#C4C4C4";
-      document.getElementById("slidea3").style.backgroundColor = "#C4C4C4";
-      document.getElementById("slidea4").style.backgroundColor = "#C4C4C4";
-      document.getElementById("slidea5").style.backgroundColor = "#C4C4C4";
-    }
-
-    if (id === "slidea2") {
-      document.getElementById("slidea1").style.backgroundColor = "#FAFAFA";
-      document.getElementById("slidea2").style.backgroundColor = "#E33AA9";
-      document.getElementById("slidea3").style.backgroundColor = "#C4C4C4";
-      document.getElementById("slidea4").style.backgroundColor = "#C4C4C4";
-      document.getElementById("slidea5").style.backgroundColor = "#C4C4C4";
-    }
+    for (var i = 1; i <= slidefront.length; i++) {
+      if (id === "slidea".concat(i)) {
+        document.getElementById("slidea".concat(i)).style.backgroundColor = "#E33AA9";
 
-    if (id === "slidea3") {
-      document.getElementById("slidea1").style.backgroundColor = "#FAFAFA";
-      document.getElementById("slidea2").style.backgroundColor = "#FAFAFA";
-      document.getElementById("slidea3").style.backgroundColor = "#E33AA9";
-      document.getElementById("slidea4").style.backgroundColor = "#C4C4C4";
-      document.getElementById("slidea5").style.backgroundColor = "#C4C4C4";
-    }
-
-    if (id === "slidea4") {
-      document.getElementById("slidea1").style.backgroundColor = "#FAFAFA";
-      document.getElementById("slidea2").style.backgroundColor = "#FAFAFA";
-      document.getElementById("slidea3").style.backgroundColor = "#FAFAFA";
-      document.getElementById("slidea4").style.backgroundColor = "#E33AA9";
-      document.getElementById("slidea5").style.backgroundColor = "#C4C4C4";
-    }
-
-    if (id === "slidea5") {
-      document.getElementById("button-slide").style.display = "flex";
+        if (id === "slidea".concat(slidefront.length)) {
+          document.getElementById("button-slide").style.display = "flex";
+        }
+      } else if (id > "slidea".concat(i)) {
+        document.getElementById("slidea".concat(i)).style.backgroundColor = "#FAFAFA";
+      } else if (id < "slidea".concat(i)) {
+        document.getElementById("slidea".concat(i)).style.backgroundColor = "#C4C4C4";
+      }
     }
   };
 
@@ -83,8 +59,9 @@ var SliderToolTip = function SliderToolTip(_ref) {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
       className: "container-slider",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-        src: InfoIcon,
+        src: infoIcon,
         alt: "info icon",
+        className: iconSize,
         onClick: function onClick(e) {
           setShowMenu(!showMenu);
 
@@ -94,103 +71,56 @@ var SliderToolTip = function SliderToolTip(_ref) {
         }
       }), showMenu && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Slider, {
         id: "div-slider",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
+        className: slidePosition,
+        length: slidefront.length,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
           className: "slider",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
-            id: "slide1",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-                src: Slide1
-              })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-              children: "Creamos tu contenido, y todo lo que haga falta para tu producto, cada secci\xF3n puedes socilitar contenido enriquecido, y nosotros lo haremos por ti."
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
-            id: "slide2",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-              src: Slide2
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-              children: "Puedes agregar solicitudes de contenido enriquecido a tu carrito de compra las veces que sean necesarias. Una vez completada tu lista con los servicios necesitados sigue el proceso de compra en checkout."
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
-            id: "slide3",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-              src: Slide3
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-              children: "Revisa el contenido que deseas solicilitar, valida y tambien puedes agregar contenido extra, traducciones, o simplemente completar el checkout."
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
-            id: "slide4",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-              src: Slide4
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-              children: "Elige el tipo de entrega de tu producto, puedes ser recolecci\xF3n en el lugar o por el contrario puedes dejarlo en nuestras oficinas."
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
-            id: "slide5",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-                src: Slide5
-              })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              className: "lema-end",
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-                children: "Finalmente elige la forma de pago que m\xE1s te guste, procede con el pago y listo."
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                children: "Bienvenido al modo Content-oh!"
+          children: slidefront.map(function (item, index) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+              id: "slide".concat(index + 1),
+              className: "slide".concat(index + 1) === "slide".concat(slidefront.length) ? "end-div" : "",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                  src: slidefront[index].slide
+                })
+              }), "slide".concat(index + 1) === "slide".concat(slidefront.length) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                  className: "lema-end",
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                    children: slidefront[index].title
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                    children: slidefront[index].description
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+                  id: "button-slide",
+                  onClick: function onClick(e) {
+                    document.removeEventListener("click", closeMenu, false);
+                    setShowMenu(false);
+                  },
+                  children: "Cerrar"
+                })]
+              }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                children: [slidefront[index].title !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  children: slidefront[index].title
+                }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                  children: slidefront[index].description
+                })]
               })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-              id: "button-slide",
-              onClick: function onClick(e) {
-                document.removeEventListener("click", closeMenu, false);
-                setShowMenu(false);
-              },
-              children: "Cerrar"
-            })]
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
+            });
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
           className: "menu",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-              href: "#slide1",
-              id: "slidea1",
-              onClick: function onClick(e) {
-                color("slidea1");
-              }
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-              href: "#slide2",
-              id: "slidea2",
-              onClick: function onClick(e) {
-                color("slidea2");
-              }
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-              href: "#slide3",
-              id: "slidea3",
-              onClick: function onClick(e) {
-                color("slidea3");
-              }
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-              href: "#slide4",
-              id: "slidea4",
-              onClick: function onClick(e) {
-                color("slidea4");
-              }
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-              href: "#slide5",
-              id: "slidea5",
-              onClick: function onClick(e) {
-                color("slidea5");
-              }
-            })
-          })]
+          children: slidefront.map(function (item, index) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+                href: "#slide".concat(index + 1),
+                id: "slidea".concat(index + 1),
+                onClick: function onClick(e) {
+                  color("slidea".concat(index + 1));
+                }
+              })
+            });
+          })
         })]
       })]
     })

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

@@ -15,10 +15,10 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject, _templateObject2;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: transparent;\n  cursor: pointer;\n  width: 40px !important;\n  margin: 9px;\n  position: relative;\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: transparent;\n  cursor: pointer;\n  position: relative;\n  & + * {\n    margin-left: 10px;\n  }\n  img {\n    &.small-image {\n      width: 20px;\n      height: 20px;\n    }\n    &.medium-image {\n      width: 30px;\n      height: 30px;\n    }\n    &.big-image {\n      width: 40px;\n      height: 40px;\n    }\n  }\n"])));
 
 exports.Container = Container;
 
-var Slider = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: sans-serif;\n  margin: auto;\n  background: #281f33;\n  border-radius: 6px;\n  \n  padding: 16px;\n  padding-top: 20px;\n  box-sizing: border-box;\n  position: absolute;\n  top: calc(100% + 25px);\n  left: calc(50% - 223px / 2);\n  #div-slider {\n    width: 310px;\n  }\n  ul,\n  li {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n  .slider {\n    position: relative;\n    max-width: 300px;\n    width: 100%;\n    height: 270px;\n    margin: 0;\n    li {\n      position: absolute;\n      left: 0px;\n      top: 0px;\n      opacity: 0;\n      width: inherit;\n      height: inherit;\n      transition: opacity 0.5s;\n      background: transparent;\n      img {\n        width: 100%;\n        height: 180px;\n        border-radius: 4px;\n        background-color: #fafafa;\n        & + * {\n          margin-top: 10px;\n        }\n      }\n      p {\n        font-family: \"Avenir Next\";\n        font-style: normal;\n        font-weight: 400;\n        font-size: 10px;\n        line-height: 12px;\n        text-align: center;\n        letter-spacing: -0.015em;\n        color: #fafafa;\n        background-color: #281f33;\n      }\n      div {\n        background-color: #fafafa;\n        height: 180px;\n        border-radius: 4px;\n        display: flex;\n        justify-content: center;\n        flex-direction: column;\n        img {\n          height: 40px;\n        }\n        & + * {\n          margin-top: 13px;\n        }\n      }\n    }\n    #slide5 {\n      div {\n        height: 130px;\n        width: 100%;\n        background-color: #fafafa;\n        display: flex;\n        align-items: center;\n        border-radius: 4px;\n        img {\n          width: 100%;\n          height: 115px;\n          object-fit: contain;\n        }\n      }\n      .lema-end {\n        justify-content: center;\n        justify-content: space-evenly;\n        height: 100px;\n        background-color: #281f33;\n        flex-direction: column;\n        justify-content: space-evenly;\n        border-radius: inherit;\n        span {\n          font-family: \"Avenir Next\";\n          font-style: normal;\n          font-weight: 700;\n          font-size: 17px;\n          line-height: 15px;\n          text-align: center;\n          letter-spacing: -0.015em;\n          color: #fafafa;\n        }\n      }\n      button {\n        display: none;\n        justify-content: center;\n        align-items: center;\n        padding: 10px;\n        width: 160px;\n        height: 30px;\n        border: 1px solid #d4d1d7;\n        border-radius: 15px;\n        color: #fafafa;\n        background-color: #281f33;\n        font-family: \"Avenir Next\";\n        font-style: normal;\n        font-weight: 400;\n        font-size: 18px;\n        line-height: 25px;\n        letter-spacing: -0.015em;\n        position: absolute;\n        left: 22%;\n        top: 88%;\n        cursor: pointer;\n      }\n    }\n  }\n\n  li:first-child {\n    opacity: 1; /*Mostramos el primer <li>*/\n  }\n  li:target {\n    opacity: 1; /*Mostramos el primer <li>*/\n  }\n  .menu {\n    margin: 0;\n    text-align: center;\n    li {\n      display: inline-block;\n      text-align: center;\n      & + * {\n        margin-left: 15px;\n      }\n      a {\n        display: inline-block;\n        text-decoration: none;\n        background-color: #c4c4c4;\n        width: 10px;\n        height: 10px;\n        border-radius: 100%;\n      }\n      #slidea1 {\n        background-color: #e33aa9;\n      }\n    }\n  }\n"])));
+var Slider = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: sans-serif;\n  margin: auto;\n  background: #281f33;\n  border-radius: 6px;\n  width: 310px !important;\n  padding: 16px;\n  padding-top: 20px;\n  box-sizing: border-box;\n  position: absolute;\n  cursor: default;\n  z-index: 2;\n  &.top-slide {\n    top: calc(100% - 370px);\n    left: calc(100% - 1168px);\n  }\n  &.bottom-slide {\n    top: calc(100%);\n    left: calc(-280px / 2);\n  }\n  #div-slider {\n    width: 310px;\n  }\n  ul,\n  li {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n  .slider {\n    position: relative;\n    max-width: 300px;\n    width: 100%;\n    height: 270px;\n    margin: 0;\n    span {\n      font-family: \"Avenir Next\";\n      font-style: normal;\n      font-weight: 500;\n      font-size: 15px;\n      line-height: 15px;\n      text-align: center;\n      letter-spacing: -0.015em;\n      color: #fafafa;\n      display: flex;\n      justify-content: center;\n      background-color: #281f33;\n      & + * {\n        margin-top: 10px;\n      }\n    }\n    li {\n      position: absolute;\n      left: 0px;\n      top: 0px;\n      opacity: 0;\n      width: inherit;\n      height: inherit;\n      transition: opacity 0.5s;\n      background: transparent;\n      img {\n        width: 100%;\n        height: 180px;\n        border-radius: 4px;\n        background-color: #fafafa;\n        & + * {\n          margin-top: 10px;\n        }\n      }\n      p {\n        font-family: \"Avenir Next\";\n        font-style: normal;\n        font-weight: 400;\n        font-size: 10px;\n        line-height: 12px;\n        text-align: center;\n        letter-spacing: -0.015em;\n        color: #fafafa;\n        background-color: #281f33;\n      }\n      div {\n        background-color: #fafafa;\n        height: 180px;\n        border-radius: 4px;\n        display: flex;\n        justify-content: center;\n        flex-direction: column;\n        align-items: center;\n        img {\n          width: 90%;\n        }\n        & + * {\n          margin-top: 13px;\n        }\n      }\n    }\n    .end-div {\n      div {\n        height: 130px;\n        width: 100%;\n        background-color: #fafafa;\n        display: flex;\n        align-items: center;\n        border-radius: 4px;\n        img {\n          width: 100%;\n          height: 115px;\n          object-fit: contain;\n        }\n      }\n      .lema-end {\n        justify-content: center;\n        justify-content: space-evenly;\n        height: 110px;\n        background-color: #281f33;\n        flex-direction: column;\n        justify-content: space-evenly;\n        border-radius: inherit;\n      }\n      button {\n        display: none;\n        justify-content: center;\n        align-items: center;\n        padding: 10px;\n        width: 160px;\n        height: 30px;\n        border: 1px solid #d4d1d7;\n        border-radius: 15px;\n        color: #fafafa;\n        background-color: #281f33;\n        font-family: \"Avenir Next\";\n        font-style: normal;\n        font-weight: 400;\n        font-size: 18px;\n        line-height: 25px;\n        letter-spacing: -0.015em;\n        position: absolute;\n        left: 22%;\n        top: 90%;\n        cursor: pointer;\n      }\n    }\n  }\n  li:first-child {\n    opacity: 1;\n  }\n  li:target {\n    opacity: 1;\n  }\n  .menu {\n    margin: 0;\n    text-align: center;\n    li {\n      display: inline-block;\n      text-align: center;\n      & + * {\n        margin-left: 15px;\n      }\n      a {\n        display: inline-block;\n        text-decoration: none;\n        background-color: #c4c4c4;\n        width: 10px;\n        height: 10px;\n        border-radius: 100%;\n      }\n      #slidea1 {\n        background-color: #e33aa9;\n      }\n    }\n  }\n"])));
 
 exports.Slider = Slider;

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

@@ -11,6 +11,16 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/
 
 var _index = require("./index");
 
+var _iconProduct = _interopRequireDefault(require("../../../assets/images/verticalSideMenuMainPage/iconProduct.svg"));
+
+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"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _default = {
@@ -25,4 +35,37 @@ var Template = function Template(args) {
 
 var VerticalSideMenuMainPageDefault = Template.bind({});
 exports.VerticalSideMenuMainPageDefault = VerticalSideMenuMainPageDefault;
-VerticalSideMenuMainPageDefault.args = {};
+VerticalSideMenuMainPageDefault.args = {
+  menuoption: [{
+    icon: _iconSpeedometer.default,
+    path: "/Dashboard",
+    title: "Dashborad"
+  }, {
+    icon: _iconProduct.default,
+    path: "/products",
+    title: "Productos",
+    suboption: [{
+      path: "/Dashboard",
+      title: "General"
+    }, {
+      path: "/AddProducts",
+      title: "Agregar Producto"
+    }]
+  }, {
+    icon: _iconGroup.default,
+    path: "/providers",
+    title: "Proovedores"
+  }, {
+    icon: _iconLogo.default,
+    path: "/ContentohProducts",
+    title: "Content Oh!",
+    suboption: {
+      path: "/ContentohProducts",
+      title: "Productos"
+    }
+  }, {
+    icon: _iconTask.default,
+    path: "/tasks/7",
+    title: "Tareas"
+  }]
+};

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

@@ -15,32 +15,29 @@ var _styles = require("./styles");
 
 var _iconLogoContentoh = _interopRequireDefault(require("../../../assets/images/verticalSideMenuMainPage/iconLogoContentoh.svg"));
 
-var _iconProduct = _interopRequireDefault(require("../../../assets/images/verticalSideMenuMainPage/iconProduct.svg"));
-
-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"));
-
 var _openMenu = _interopRequireDefault(require("../../../assets/images/verticalSideMenuMainPage/openMenu.svg"));
 
+var _closeMenu = _interopRequireDefault(require("../../../assets/images/verticalSideMenuMainPage/closeMenu.svg"));
+
 var _react = _interopRequireWildcard(require("react"));
 
+var _styles2 = require("../../molecules/LoginPasswordStrength/styles");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
-var VerticalSideMenuMainPage = function VerticalSideMenuMainPage() {
-  var _useState = (0, _react.useState)(false),
+var VerticalSideMenuMainPage = function VerticalSideMenuMainPage(_ref) {
+  var menuoption = _ref.menuoption;
+
+  var _useState = (0, _react.useState)(""),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       trueBar = _useState2[0],
       setTrueBar = _useState2[1];
 
-  var active = function active() {//document.getElementById("slidea1").style.border= "1px solid rgb(227, 58, 169)";
-  };
-
+  var sub;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    className: trueBar,
     bar: trueBar,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "navbar-top",
@@ -48,47 +45,49 @@ var VerticalSideMenuMainPage = function VerticalSideMenuMainPage() {
         src: trueBar ? _iconLogoContentoh.default : _iconLogo.default,
         alt: "Logo",
         className: "logo"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "option",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-            src: _iconSpeedometer.default,
-            alt: "Speed Meter",
-            width: "25px"
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-            src: _iconProduct.default,
-            alt: "Focus Product",
-            width: "25px"
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-            src: _iconGroup.default,
-            alt: "Group",
-            width: "25px"
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-            src: _iconLogo.default,
-            alt: "Logo",
-            width: "25px"
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-            src: _iconTask.default,
-            alt: "Task",
-            width: "25px"
-          })
-        })]
+        children: menuoption.map(function (item) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "option-link",
+              exact: true,
+              activeClassName: "active",
+              to: item.path,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                src: item.icon,
+                alt: item.title,
+                width: "25px"
+              }), trueBar && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                children: item.title
+              })]
+            }), item.suboption === undefined ? "" : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+              children: menuoption[1].suboption.map(function (subitem) {
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  className: "sub-option",
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                    exact: true,
+                    activeClassName: "active",
+                    to: subitem.path,
+                    children: trueBar && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                      children: subitem.title
+                    })
+                  })
+                });
+              })
+            })]
+          });
+        })
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "menu-bottom",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-        src: _openMenu.default,
+        src: trueBar ? _closeMenu.default : _openMenu.default,
         alt: "Open Menu",
         onClick: function onClick() {
-          setTrueBar(true);
-          active();
+          {
+            trueBar ? setTrueBar("") : setTrueBar("actived");
+          }
         }
       })
     })]

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

@@ -11,14 +11,39 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _reactRouterDom = require("react-router-dom");
+
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  width: ", "px;\n  box-sizing: border-box;\n  padding: 23px 10px 70px 10px;\n  flex-direction: column;\n  justify-content: space-between;\n  overflow: auto;\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  img {\n    cursor: pointer;\n    width:\"25px\" !important;\n  }\n  .navbar-top {\n    & + * {\n      margin-top: 15px;\n    }\n    .option {\n      div {\n        height: 38px;\n        display: flex;\n        justify-content: center;\n        border-radius: 100%;\n        & + * {\n          margin-top: 12px;\n        }\n      }\n      div:hover {\n        background: #e33aa9;\n      }\n    }\n    .logo {\n      cursor: default;\n      & + * {\n        margin-top: 225%;\n      }\n    }\n  }\n"])), function (_ref) {
+var Container = (0, _styledComponents.default)(_reactRouterDom.NavLink)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  width: 58px;\n  box-sizing: border-box;\n  padding: 23px 10px 70px 10px;\n  flex-direction: column;\n  justify-content: space-between;\n  overflow: auto;\n  border-radius: 50px;\n  background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);\n  scrollbar-width: none;\n  display: flex;\n  text-align: center;\n  &.actived {\n    width: 200px;\n    padding: 23px 10px 15px 10px;\n    border-radius: 20px;\n  }\n  .navbar-top {\n    .logo {\n      & + * {\n        margin-top: ", "%;\n      }\n    }\n    .option {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      padding-left: ", "px;\n      div {\n        height: ", "px;\n        width: ", "px;\n        display: flex;\n        justify-content: ", ";\n        border-radius: ", "px;\n        align-items: center;\n        font-family: \"Raleway\";\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          margin-top: 12px;\n          padding-left: ", "px;\n        }\n        p {\n          cursor: pointer;\n        }\n        img {\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        div {\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: 20px;\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            left: ", "%;\n            bottom: 1%;\n          }\n        }\n      }\n    }\n  }\n  .menu-bottom {\n    display: flex;\n    justify-content: ", ";\n    cursor: pointer;\n  }\n"])), function (_ref) {
   var bar = _ref.bar;
-  return bar ? 200 : 58;
+  return bar === "" ? 145 : 50;
 }, function (_ref2) {
   var bar = _ref2.bar;
-  return bar ? 20 : 50;
+  return bar ? 5 : 0;
+}, function (_ref3) {
+  var bar = _ref3.bar;
+  return bar ? 32 : 38;
+}, function (_ref4) {
+  var bar = _ref4.bar;
+  return bar ? 165 : 38;
+}, function (_ref5) {
+  var bar = _ref5.bar;
+  return bar ? "flex-start" : "center";
+}, function (_ref6) {
+  var bar = _ref6.bar;
+  return bar ? 18 : 100;
+}, function (_ref7) {
+  var bar = _ref7.bar;
+  return bar ? 15 : 0;
+}, function (_ref8) {
+  var bar = _ref8.bar;
+  return bar ? 28 : 20;
+}, function (_ref9) {
+  var bar = _ref9.bar;
+  return bar ? -4 : -16;
+}, function (_ref10) {
+  var bar = _ref10.bar;
+  return bar ? "flex-end" : "center";
 });
-
 exports.Container = Container;

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
+};

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

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ApproveRejetPanel = void 0;
+
+var _ScreenHeader = require("../../atoms/ScreenHeader");
+
+var _Avatar = require("../../atoms/Avatar");
+
+var _styles = require("./styles");
+
+var _approveRejetPanelDelete = _interopRequireDefault(require("../../../assets/images/approveRejetPanel/approveRejetPanelDelete.svg"));
+
+var _approveRejetPanelCancel = _interopRequireDefault(require("../../../assets/images/approveRejetPanel/approveRejetPanelCancel.svg"));
+
+var _approveRejetPanelSave = _interopRequireDefault(require("../../../assets/images/approveRejetPanel/approveRejetPanelSave.svg"));
+
+var _approveRejetPanelExclude = _interopRequireDefault(require("../../../assets/images/approveRejetPanel/approveRejetPanelExclude.svg"));
+
+var _variables = require("../../../global-files/variables");
+
+var ApproveRejetPanel = function ApproveRejetPanel(_ref) {
+  var text = _ref.text,
+      check = _ref.check;
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+    fontFamily: _variables.FontFamily.AvenirNext,
+    headerType: "date-header",
+    color: _variables.GlobalColors.s4,
+    text: text
+  }), /*#__PURE__*/React.createElement(_Avatar.Avatar, {
+    image: _approveRejetPanelDelete.default,
+    imageType: "big-image",
+    altText: "delete button"
+  }), /*#__PURE__*/React.createElement(_Avatar.Avatar, {
+    image: check ? _approveRejetPanelCancel.default : _approveRejetPanelExclude.default,
+    imageType: "big-image",
+    altText: check ? "cancel button" : "exclude button"
+  }), /*#__PURE__*/React.createElement(_Avatar.Avatar, {
+    image: check ? _approveRejetPanelSave.default : _approveRejetPanelExclude.default,
+    imageType: "big-image",
+    altText: check ? "save button" : "exclude button"
+  }));
+};
+
+exports.ApproveRejetPanel = ApproveRejetPanel;

package/dist/components/molecules/ApproveRejetPanel/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: end;\n  align-items: center;\n  .date-header + * {\n    margin-left: 30px;\n  }\n  .big-image + * {\n    margin-left: 10px;\n  }\n"])));
+
+exports.Container = Container;

package/dist/components/molecules/SignInLoginCreationApp/SignInLogin.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.SignInLoginCreationAppDefault = 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/SignInLoginCreationApp",
+  component: _index.SignInLoginCreationApp
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SignInLoginCreationApp, (0, _objectSpread2.default)({}, args));
+};
+
+var SignInLoginCreationAppDefault = Template.bind({});
+exports.SignInLoginCreationAppDefault = SignInLoginCreationAppDefault;
+SignInLoginCreationAppDefault.args = {};