contentoh-components-library 21.0.74 → 21.0.75

package/.env.development

@@ -17,6 +17,8 @@ REACT_APP_CART = https://lqrc8jfjqi.execute-api.us-east-1.amazonaws.com/dev/cart
 REACT_APP_RETAILER_REQUEST = https://lqrc8jfjqi.execute-api.us-east-1.amazonaws.com/dev/retailers-request
 
 REACT_APP_IMAGES_BUCKET=content-management-images
-REACT_APP_IMAGES_PROFILE_BUCKET=content-management-profile
 REACT_APP_KEY_UPLOAD_TO_S3=AKIA5CPHLQTT46EQ5TIK
-REACT_APP_ACCESS_KEY_UPLOAD_TO_S3=tZDdrmvwxM1cScspfxFM3XpU4HSYrCNPazyHd0BL
+REACT_APP_IMAGES_PROFILE_BUCKET=content-management-profile
+REACT_APP_ACCESS_KEY_UPLOAD_TO_S3=tZDdrmvwxM1cScspfxFM3XpU4HSYrCNPazyHd0BL
+REACT_APP_USER_POOL_ID=us-east-1_XMZQdqkGj
+REACT_APP_USER_POOL_WEB_CLIENT_ID=5ac8tpgs6gbsq13frvrpieep40

package/.env.production

@@ -17,6 +17,8 @@ REACT_APP_CART = https://6jqnpjf841.execute-api.us-east-1.amazonaws.com/prod/car
 REACT_APP_RETAILER_REQUEST = https://6jqnpjf841.execute-api.us-east-1.amazonaws.com/prod/retailers-request
 
 REACT_APP_IMAGES_BUCKET=content-management-images-prod
-REACT_APP_IMAGES_PROFILE_BUCKET=content-management-profile-prod
 REACT_APP_KEY_UPLOAD_TO_S3=AKIA5CPHLQTT46EQ5TIK
-REACT_APP_ACCESS_KEY_UPLOAD_TO_S3=tZDdrmvwxM1cScspfxFM3XpU4HSYrCNPazyHd0BL
+REACT_APP_IMAGES_PROFILE_BUCKET=content-management-profile-prod
+REACT_APP_ACCESS_KEY_UPLOAD_TO_S3=tZDdrmvwxM1cScspfxFM3XpU4HSYrCNPazyHd0BL
+REACT_APP_USER_POOL_ID=us-east-1_XMZQdqkGj
+REACT_APP_USER_POOL_WEB_CLIENT_ID=5ac8tpgs6gbsq13frvrpieep40

package/CHANGELOG.md

@@ -35,6 +35,45 @@
 - [@MrArthuro](https://github.com/MrArthuro)
 - Elizabeth Inda Olvera (elizabethindaolvera@Elizabeths-MacBook-Air.local)
 - Ismael López ([@IsmaelLopez0](https://github.com/IsmaelLopez0))
+# v21.0.19 (Tue May 03 2022)
+
+
+
+---
+
+# v21.0.19 (Tue May 03 2022)
+
+
+
+---
+
+# v21.0.19 (Tue May 03 2022)
+
+
+
+---
+
+# v21.0.17 (Tue May 03 2022)
+
+
+
+---
+
+# v21.0.17 (Tue May 03 2022)
+
+
+
+---
+
+# v21.0.17 (Tue May 03 2022)
+
+
+
+---
+
+# v21.0.17 (Tue May 03 2022)
+
+
 
 ---
 

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

@@ -36,7 +36,8 @@ var GeneralInput = function GeneralInput(_ref) {
       setUpdatedDescriptions = _ref.setUpdatedDescriptions,
       maxChar = _ref.maxChar,
       isRequired = _ref.isRequired,
-      version = _ref.version;
+      version = _ref.version,
+      required = _ref.required;
 
   var _useState = (0, _react.useState)({
     value: inputValue
@@ -108,8 +109,8 @@ var GeneralInput = function GeneralInput(_ref) {
       onInput: function onInput(e) {
         return onHandleChange(e);
       },
-      required: isRequired,
-      maxLength: maxChar
+      required: isRequired || required,
+      maxLength: maxChar || maxLength
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputFormatter.InputFormatter, {
       name: inputName,
       inputId: inputId,

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

@@ -15,7 +15,7 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n  label {\n    color: red;\n    margin-top: 3px;\n    margin-left: 15px;\n    font-family: ", ";\n    font-size: 11px;\n  }\n  &.home-panel {\n    text-align: center;\n    h2 {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n    p {\n      font-family: ", ";\n      color: ", ";\n      font-size: 18px;\n      line-height: 21px;\n      letter-spacing: -0.015em;\n      & + * {\n        margin-top: 20px;\n      }\n    }\n  }\n\n  &.home-login {\n    .credenciales {\n      & + * {\n        margin-top: 30px;\n      }\n    }\n    .user {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n    .password {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n    .select {\n      display: flex;\n      justify-content: space-between;\n      .active-right {\n        font-family: ", ";\n        font-weight: 500;\n        font-size: 13px;\n        line-height: 24px;\n        letter-spacing: -0.015em;\n        color: ", ";\n      }\n      & + * {\n        margin-top: 50px;\n      }\n    }\n    .button-right {\n      text-align: right;\n      & + * {\n        margin-top: 55px;\n      }\n    }\n    .new-login {\n      p {\n        font-family: ", ";\n        text-align: right;\n        font-weight: 500;\n        font-size: 13px;\n        line-height: 24px;\n        color: ", ";\n        span {\n          color: ", ";\n        }\n      }\n    }\n  }\n  &.home-card {\n    position: relative;\n    .plan {\n      text-align: center;\n      & + * {\n        margin-top: 40px;\n      }\n    }\n    .arrowimage {\n      position: absolute;\n      top: 50px;\n      left: 40px;\n    }\n    .general-text {\n      font-family: ", ";\n      font-size: 14px;\n      line-height: 19px;\n      text-align: center;\n      letter-spacing: -0.015em;\n      & + * {\n        margin-top: 50px;\n      }\n    }\n    .payment-register {\n      & + * {\n        margin-top: 50px;\n      }\n    }\n    .button-continuar {\n      text-align: center;\n      & + * {\n        margin-top: 35px;\n      }\n    }\n    .continue {\n      text-align: center;\n      font-family: ", ";\n      font-size: 14px;\n      line-height: 19px;\n      letter-spacing: -0.015em;\n      text-decoration-line: underline;\n      color: ", ";\n    }\n  }\n  .main-container{\n    max-width: 80%;\n    max-height: 80%;\n  }\n"])), function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n  label {\n    color: red;\n    margin-top: 3px;\n    margin-left: 15px;\n    font-family: ", ";\n    font-size: 11px;\n  }\n  &.home-panel {\n    text-align: center;\n    h2 {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n    p {\n      font-family: ", ";\n      color: ", ";\n      font-size: 18px;\n      line-height: 21px;\n      letter-spacing: -0.015em;\n      & + * {\n        margin-top: 20px;\n      }\n    }\n  }\n\n  &.home-login {\n    width: 100%;\n    .credenciales {\n      & + * {\n        margin-top: 30px;\n      }\n    }\n    .user {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n    .password {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n    .select {\n      display: flex;\n      justify-content: space-between;\n      .active-right {\n        font-family: ", ";\n        font-weight: 500;\n        font-size: 13px;\n        line-height: 24px;\n        letter-spacing: -0.015em;\n        color: ", ";\n      }\n      & + * {\n        margin-top: 50px;\n      }\n    }\n    .button-right {\n      text-align: right;\n      & + * {\n        margin-top: 55px;\n      }\n    }\n    .new-login {\n      p {\n        font-family: ", ";\n        text-align: right;\n        font-weight: 500;\n        font-size: 13px;\n        line-height: 24px;\n        color: ", ";\n        span {\n          color: ", ";\n        }\n      }\n    }\n  }\n  &.home-card {\n    position: relative;\n    .plan {\n      text-align: center;\n      & + * {\n        margin-top: 40px;\n      }\n    }\n    .arrowimage {\n      position: absolute;\n      top: 50px;\n      left: 40px;\n    }\n    .general-text {\n      font-family: ", ";\n      font-size: 14px;\n      line-height: 19px;\n      text-align: center;\n      letter-spacing: -0.015em;\n      & + * {\n        margin-top: 50px;\n      }\n    }\n    .payment-register {\n      & + * {\n        margin-top: 50px;\n      }\n    }\n    .button-continuar {\n      text-align: center;\n      & + * {\n        margin-top: 35px;\n      }\n    }\n    .continue {\n      text-align: center;\n      font-family: ", ";\n      font-size: 14px;\n      line-height: 19px;\n      letter-spacing: -0.015em;\n      text-decoration-line: underline;\n      color: ", ";\n    }\n  }\n  .main-container{\n    max-width: 80%;\n    max-height: 80%;\n  }\n"])), function (_ref) {
   var panelColor = _ref.panelColor;
   return panelColor ? panelColor : "linear-gradient(180deg, #E33AA9 0%, #3B1366 100%)";
 }, _variables.FontFamily.Raleway_700, _variables.FontFamily.AvenirNext, function (_ref2) {

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

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

@@ -11,6 +11,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var Loading = function Loading() {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    className: "loading",
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Loader, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "first"

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

@@ -15,6 +15,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var LogoImage = function LogoImage() {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    className: "logo",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
       src: _logoLogin.default,
       alt: "logo"

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

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SliderToolTipDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _infoIcon = _interopRequireDefault(require("../../../assets/images/sliderToolTip/infoIcon.svg"));
+
+var _slide = _interopRequireDefault(require("../../../assets/images/sliderToolTip/slide1.svg"));
+
+var _slide2 = _interopRequireDefault(require("../../../assets/images/sliderToolTip/slide2.svg"));
+
+var _slide3 = _interopRequireDefault(require("../../../assets/images/sliderToolTip/slide3.svg"));
+
+var _slide4 = _interopRequireDefault(require("../../../assets/images/sliderToolTip/slide4.svg"));
+
+var _slide5 = _interopRequireDefault(require("../../../assets/images/sliderToolTip/slide5.svg"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/atoms/SliderToolTip",
+  component: _index.SliderToolTip
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SliderToolTip, (0, _objectSpread2.default)({}, args));
+};
+
+var SliderToolTipDefault = Template.bind({});
+exports.SliderToolTipDefault = SliderToolTipDefault;
+SliderToolTipDefault.args = {
+  InfoIcon: _infoIcon.default,
+  Slide1: _slide.default,
+  Slide2: _slide2.default,
+  Slide3: _slide3.default,
+  Slide4: _slide4.default,
+  Slide5: _slide5.default
+};

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

@@ -0,0 +1,200 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SliderToolTip = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+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 _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("#div-slider") && showMenu) {
+      document.removeEventListener("click", closeMenu, false);
+      setShowMenu(false);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    if (showMenu) {
+      document.addEventListener("click", closeMenu, false);
+    }
+  }, [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";
+    }
+
+    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";
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+      className: "container-slider",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: InfoIcon,
+        alt: "info icon",
+        onClick: function onClick(e) {
+          setShowMenu(!showMenu);
+
+          if (showMenu) {
+            document.removeEventListener("click", closeMenu, false);
+          }
+        }
+      }), showMenu && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Slider, {
+        id: "div-slider",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("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!"
+              })]
+            }), /*#__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", {
+          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");
+              }
+            })
+          })]
+        })]
+      })]
+    })
+  });
+};
+
+exports.SliderToolTip = SliderToolTip;

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

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Slider = 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  background: transparent;\n  cursor: pointer;\n  width: 40px !important;\n  margin: 9px;\n  position: relative;\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"])));
+
+exports.Slider = Slider;

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

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

@@ -0,0 +1,99 @@
+"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.VerticalSideMenuMainPage = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+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 _react = _interopRequireWildcard(require("react"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var VerticalSideMenuMainPage = function VerticalSideMenuMainPage() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      trueBar = _useState2[0],
+      setTrueBar = _useState2[1];
+
+  var active = function active() {
+    console.log(window.location.href); //document.getElementById("slidea1").style.border= "1px solid rgb(227, 58, 169)";
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    bar: trueBar,
+    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.jsxs)("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"
+          })
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: _openMenu.default,
+        alt: "Open Menu",
+        onClick: function onClick() {
+          setTrueBar(true);
+          active();
+        }
+      })
+    })]
+  });
+};
+
+exports.VerticalSideMenuMainPage = VerticalSideMenuMainPage;

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

@@ -0,0 +1,24 @@
+"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  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 bar = _ref.bar;
+  return bar ? 200 : 58;
+}, function (_ref2) {
+  var bar = _ref2.bar;
+  return bar ? 20 : 50;
+});
+
+exports.Container = Container;