contentoh-components-library 21.0.5 → 21.0.8

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

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CarouselImagesLogin = void 0;
+
+var _styles = require("./styles");
+
+var _ScreenHeader = require("../../atoms/ScreenHeader");
+
+var _variables = require("../../../global-files/variables");
+
+var _react = require("react");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var CarouselImagesLogin = function CarouselImagesLogin(_ref) {
+  var _ref$panelImg = _ref.panelImg,
+      panelImg = _ref$panelImg === void 0 ? [] : _ref$panelImg,
+      panelText = _ref.panelText,
+      panelColor = _ref.panelColor;
+
+  var carouselStart = function carouselStart() {
+    addEventListener("DOMContentLoaded", function () {
+      var images = panelImg;
+      var i = 1;
+      var img1 = document.querySelector("#img1");
+      var img2 = document.querySelector("#img2");
+      var divIndicadores = document.querySelector("#indicadores");
+
+      for (var index = 0; index < images.length; index++) {
+        var div = document.createElement("div");
+        div.classList.add("circles");
+        div.id = index;
+        divIndicadores.appendChild(div);
+      }
+
+      img1.src = images[0];
+      var circulos = document.querySelectorAll(".circles");
+      circulos[0].classList.add("resaltado");
+
+      var slideshow = function slideshow() {
+        img2.src = images[i];
+        var circulo_actual = Array.from(circulos).find(function (el) {
+          return el.id == i;
+        });
+        Array.from(circulos).forEach(function (cir) {
+          return cir.classList.remove("resaltado");
+        });
+        circulo_actual.classList.add("resaltado");
+        img1.classList.add("right");
+        img2.classList.add("active");
+        i++;
+
+        if (i == images.length) {
+          i = 0;
+        }
+
+        setTimeout(function () {
+          img1.src = img2.src;
+          img2.classList.remove("active");
+          img1.classList.remove("right");
+        }, 1000);
+      };
+
+      setInterval(slideshow, 4000);
+    });
+  };
+
+  (0, _react.useEffect)(function () {
+    carouselStart();
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    panelColor: panelColor,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      id: "slideshow",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        id: "img1"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        id: "img2"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+      fontFamily: _variables.FontFamily.Raleway,
+      color: _variables.GlobalColors.white,
+      headerType: "product-name-header",
+      text: panelText
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      id: "indicadores"
+    })]
+  });
+};
+
+exports.CarouselImagesLogin = CarouselImagesLogin;

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

@@ -0,0 +1,21 @@
+"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  background: ", ";\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  #slideshow {\n    position: relative;\n    height: 65%;\n    img {\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      top: 8%;\n      left: 0;\n    }\n    #img2 {\n      left: 100%;\n    }\n    .right {\n      transform: translate(-100%, 0);\n      transition: all 1s;\n    }\n    .active {\n      left: 0 !important;\n      transition: all 1s;\n    }\n  }\n  .product-name-header {\n    position: absolute;\n    bottom: 16%;\n    right: 50%;\n    transform: translateX(50%);\n  }\n  #indicadores {\n    width: 100%;\n    text-align: center;\n    position: absolute;\n    bottom: 7%;\n    .circles {\n      background-color: white;\n      border: white 2px solid;\n      width: 20px;\n      height: 20px;\n      display: inline-block;\n      margin: 0 5px;\n      border-radius: 50%;\n      &.resaltado {\n      background-color: rgba(255, 255, 255, 0);\n      transition: background-color 0.8s;\n    }\n    }\n  }\n"])), function (_ref) {
+  var panelColor = _ref.panelColor;
+  return panelColor ? panelColor : "linear-gradient(180deg,#ffffff 0%,rgba(255, 255, 255, 0.887706) 49.27%,rgba(255, 255, 255, 0) 100%),#d43594";
+});
+
+exports.Container = Container;

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

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

@@ -0,0 +1,131 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LoginPasswordStrength = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _react = require("react");
+
+var _TagAndInput = require("../TagAndInput");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var LoginPasswordStrength = function LoginPasswordStrength(_ref) {
+  var emptyPassword = _ref.emptyPassword,
+      emptyConfirmPassword = _ref.emptyConfirmPassword,
+      matchPasswords = _ref.matchPasswords;
+
+  var _useState = (0, _react.useState)(0),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      passwordStrength = _useState2[0],
+      setPasswordStrength = _useState2[1];
+
+  var upperCaseLetters = /[A-Z]/g;
+  var numbers = /[0-9]/g;
+  var specialChar = /[‘!’,‘@’,‘#’,‘$’,‘%’,‘^’,‘&’,‘*’]/g;
+  (0, _react.useEffect)(function () {
+    var inputValue = document.getElementById("newPasswordInput");
+    inputValue.addEventListener("input", function (e) {
+      updateInfo(e, e.target.value);
+    }, false);
+  }, []);
+
+  var updateInfo = function updateInfo(e, newValue) {
+    switch (e.target.id) {
+      case "newPasswordInput":
+        setPasswordStrength(0);
+
+        if (newValue.length >= 8) {
+          setPasswordStrength(function (passwordStrength) {
+            return passwordStrength + 1;
+          });
+        } //Verificar si la contraseña contiene mayuscula, numeros y un caracter especial
+
+
+        newValue.match(upperCaseLetters) && setPasswordStrength(function (passwordStrength) {
+          return passwordStrength + 1;
+        });
+        newValue.match(numbers) && setPasswordStrength(function (passwordStrength) {
+          return passwordStrength + 1;
+        });
+        newValue.match(specialChar) && setPasswordStrength(function (passwordStrength) {
+          return passwordStrength + 1;
+        });
+        break;
+
+      case "confirmPasswordInput":
+        break;
+
+      default:
+        return;
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "user",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+        inputType: "password",
+        inputId: "newPasswordInput",
+        label: "Ingrese su nueva contraseña"
+      }), emptyPassword && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+        children: "La contrase\xF1a debe ser minimo de 8 caracteres"
+      })]
+    }, "3"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "divPasswordStrength",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ItemPasswordStrength, {
+        paso: 1,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Password, {
+          level: 1,
+          passwordStrength: passwordStrength
+        }), passwordStrength === 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: "Baja"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ItemPasswordStrength, {
+        paso: 2,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Password, {
+          level: 2,
+          passwordStrength: passwordStrength
+        }), passwordStrength === 2 && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: "Regular"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ItemPasswordStrength, {
+        paso: 3,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Password, {
+          level: 3,
+          passwordStrength: passwordStrength
+        }), passwordStrength === 3 && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: "Segura"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ItemPasswordStrength, {
+        paso: 4,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Password, {
+          level: 4,
+          passwordStrength: passwordStrength
+        }), passwordStrength === 4 && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: "Fuerte"
+        })]
+      })]
+    }, "4"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "user",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+        inputType: "password",
+        inputId: "confirmPasswordInput",
+        label: "Confirme la nueva contraseña"
+      }), emptyConfirmPassword && !emptyPassword && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+        children: "Confirme la contrase\xF1a"
+      }), !emptyConfirmPassword && !emptyPassword && !matchPasswords && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+        children: "La contrase\xF1a no coincide"
+      })]
+    }, "5")]
+  });
+};
+
+exports.LoginPasswordStrength = LoginPasswordStrength;

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

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Password = exports.ItemPasswordStrength = 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, _templateObject3;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  .divPasswordStrength {\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-top: 30px;\n    & + * {\n      margin-top: 40px;\n    }\n  }\n  label {\n    color: red;\n    margin-top: 3px;\n    margin-left: 15px;\n    font-family: ", ";\n    font-size: 11px;\n  }\n"])), _variables.FontFamily.Raleway_700);
+
+exports.Container = Container;
+
+var Password = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 8px;\n  width: 100%;\n  background-color: ", ";\n"])), function (props) {
+  switch (props.passwordStrength) {
+    case 0:
+      return "#F0F0F0";
+
+    case 1:
+      if (props.level === 1) {
+        return "#E67432";
+      } else {
+        return "#F0F0F0";
+      }
+
+    case 2:
+      if (props.level <= 2) {
+        return "#EDD34D";
+      } else {
+        return "#F0F0F0";
+      }
+
+    case 3:
+      if (props.level <= 3) {
+        return "#71DE56";
+      } else {
+        return "#F0F0F0";
+      }
+
+    case 4:
+      if (props.level <= 4) {
+        return "#71DE56";
+      } else {
+        return "#F0F0F0";
+      }
+
+    default:
+      return;
+  }
+});
+
+exports.Password = Password;
+
+var ItemPasswordStrength = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 24%;\n  position: relative;\n  p {\n    margin-top: 1.5%;\n    font-weight: 700;\n    display: flex;\n    justify-content: flex-end;\n    font-size: 11px;\n    position: absolute;\n    right: 0;\n    top: 100%;\n    color: ", ";\n  }\n"])), function (props) {
+  switch (props.paso) {
+    case 1:
+      return "#E67432";
+
+    case 2:
+      return "#EDD34D";
+
+    case 3:
+      return "#71DE56";
+
+    case 4:
+      return "#71DE56";
+  }
+});
+
+exports.ItemPasswordStrength = ItemPasswordStrength;

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

@@ -29,7 +29,8 @@ var TagAndInput = function TagAndInput(_ref) {
       isRequired = _ref.isRequired,
       dinamicHeight = _ref.dinamicHeight,
       inputCols = _ref.inputCols,
-      inputRows = _ref.inputRows;
+      inputRows = _ref.inputRows,
+      maxChar = _ref.maxChar;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     inputType: inputType,
     className: "input-container",
@@ -51,7 +52,8 @@ var TagAndInput = function TagAndInput(_ref) {
       version: version,
       dinamicHeight: dinamicHeight,
       inputCols: inputCols,
-      inputRows: inputRows
+      inputRows: inputRows,
+      maxChar: maxChar
     })]
   }, "generalTagInput-".concat(inputType));
 };

package/dist/components/organisms/InputGroup/index.js

@@ -50,26 +50,28 @@ var InputGroup = function InputGroup(_ref) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "inputs-container",
       children: inputGroup === null || inputGroup === void 0 ? void 0 : (_inputGroup$inputs = inputGroup.inputs) === null || _inputGroup$inputs === void 0 ? void 0 : _inputGroup$inputs.map(function (input, index) {
-        var _dataInputs$input, _dataInputs$input2, _dataInputs$input3, _dataInputs$input4, _dataInputs$input5, _dataInputs$input6;
+        var _dataInputs$input, _dataInputs$input2, _dataInputs$input3, _dataInputs$input4, _dataInputs$input5, _dataInputs$input6, _dataInputs$input7, _dataInputs$input8, _dataInputs$input9, _dataInputs$input10;
 
         return activeSection === "Ficha técnica" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
-          inputId: (_dataInputs$input2 = dataInputs[input]) === null || _dataInputs$input2 === void 0 ? void 0 : _dataInputs$input2.id,
+          inputId: (_dataInputs$input3 = dataInputs[input]) === null || _dataInputs$input3 === void 0 ? void 0 : _dataInputs$input3.id,
           version: version,
-          inputType: inputTypeValue((_dataInputs$input3 = dataInputs[input]) === null || _dataInputs$input3 === void 0 ? void 0 : _dataInputs$input3.type),
-          label: (_dataInputs$input4 = dataInputs[input]) === null || _dataInputs$input4 === void 0 ? void 0 : _dataInputs$input4.name,
-          value: (_dataInputs$input5 = dataInputs[input]) === null || _dataInputs$input5 === void 0 ? void 0 : _dataInputs$input5.value,
+          inputType: inputTypeValue((_dataInputs$input4 = dataInputs[input]) === null || _dataInputs$input4 === void 0 ? void 0 : _dataInputs$input4.type),
+          label: ((_dataInputs$input5 = dataInputs[input]) === null || _dataInputs$input5 === void 0 ? void 0 : _dataInputs$input5.name) + ((_dataInputs$input6 = dataInputs[input]) !== null && _dataInputs$input6 !== void 0 && _dataInputs$input6.required ? "*" : ""),
+          value: (_dataInputs$input7 = dataInputs[input]) === null || _dataInputs$input7 === void 0 ? void 0 : _dataInputs$input7.value,
           inputPlaceHolder: input === null || input === void 0 ? void 0 : input.placeholder,
           articleId: articleId,
-          isRequired: (_dataInputs$input6 = dataInputs[input]) === null || _dataInputs$input6 === void 0 ? void 0 : _dataInputs$input6.required,
+          isRequired: (_dataInputs$input8 = dataInputs[input]) === null || _dataInputs$input8 === void 0 ? void 0 : _dataInputs$input8.required,
           updatedDatasheets: updatedDatasheets,
-          setUpdatedDatasheets: setUpdatedDatasheets
-        }, index + "-" + ((_dataInputs$input = dataInputs[input]) === null || _dataInputs$input === void 0 ? void 0 : _dataInputs$input.value)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
-          inputId: input === null || input === void 0 ? void 0 : input.id,
+          setUpdatedDatasheets: setUpdatedDatasheets,
+          maxChar: (_dataInputs$input9 = dataInputs[input]) !== null && _dataInputs$input9 !== void 0 && _dataInputs$input9.max_chars ? (_dataInputs$input10 = dataInputs[input]) === null || _dataInputs$input10 === void 0 ? void 0 : _dataInputs$input10.max_chars : 999
+        }, index + "-" + ((_dataInputs$input = dataInputs[input]) === null || _dataInputs$input === void 0 ? void 0 : _dataInputs$input.value) + "-" + ((_dataInputs$input2 = dataInputs[input]) === null || _dataInputs$input2 === void 0 ? void 0 : _dataInputs$input2.id)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+          inputId: input.id,
           index: index,
           inputType: "textarea",
-          label: input === null || input === void 0 ? void 0 : input.name,
+          label: (input === null || input === void 0 ? void 0 : input.name) + (input.required ? "*" : ""),
           value: input === null || input === void 0 ? void 0 : input.value,
           isRequired: input.required,
+          maxChar: input.max_chars,
           inputPlaceHolder: input === null || input === void 0 ? void 0 : input.placeholder,
           updatedDescriptions: updatedDescriptions,
           setUpdatedDescriptions: setUpdatedDescriptions,

package/dist/components/pages/ChangePasswordLogin/ChangePasswordLogin.stories.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ChangePasswordLoginDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _loginImage = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/loginImage.svg"));
+
+var _login = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/login2.svg"));
+
+var _login2 = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/login3.svg"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/pages/ChangePasswordLogin",
+  component: _index.ChangePasswordLogin
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChangePasswordLogin, (0, _objectSpread2.default)({}, args));
+};
+
+var ChangePasswordLoginDefault = Template.bind({});
+exports.ChangePasswordLoginDefault = ChangePasswordLoginDefault;
+ChangePasswordLoginDefault.args = {
+  imageArrayCarousel: [_loginImage.default, _login.default, _login2.default],
+  textCarousel: "Elige la plataforma que conecta proovedores y retailers",
+  textHeaderRight: "Ingresa tus credenciales"
+};

package/dist/components/pages/ChangePasswordLogin/index.js

@@ -0,0 +1,131 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChangePasswordLogin = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _CarouselImagesLogin = require("../../molecules/CarouselImagesLogin");
+
+var _LoginPasswordStrength = require("../../molecules/LoginPasswordStrength");
+
+var _react = require("react");
+
+var _GeneralButton = require("../../atoms/GeneralButton");
+
+var _LogoImage = require("../../atoms/LogoImage");
+
+var _ScreenHeader = require("../../atoms/ScreenHeader");
+
+var _variables = require("../../../global-files/variables");
+
+var _GradientPanel = require("../../atoms/GradientPanel");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var ChangePasswordLogin = function ChangePasswordLogin(_ref) {
+  var _ref$imageArrayCarous = _ref.imageArrayCarousel,
+      imageArrayCarousel = _ref$imageArrayCarous === void 0 ? [] : _ref$imageArrayCarous,
+      textCarousel = _ref.textCarousel,
+      backogroundColorCarousel = _ref.backogroundColorCarousel,
+      textHeaderRight = _ref.textHeaderRight;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      emptyPassword = _useState2[0],
+      setEmptyPassword = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      emptyConfirmPassword = _useState4[0],
+      setEmptyConfirmPassword = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(true),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      matchPasswords = _useState6[0],
+      setMatchPasswords = _useState6[1];
+
+  var validate = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
+      var password, confirmPassword;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              e.preventDefault();
+              password = document.querySelector("#newPasswordInput").value;
+              password.length < 8 ? setEmptyPassword(true) : setEmptyPassword(false);
+              confirmPassword = document.querySelector("#confirmPasswordInput").value;
+              confirmPassword === "" ? setEmptyConfirmPassword(true) : setEmptyConfirmPassword(false);
+
+              if (password === confirmPassword) {
+                setMatchPasswords(true);
+              } else {
+                setMatchPasswords(false);
+              }
+
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function validate(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var loginRight = [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoImage.LogoImage, {}, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "credenciales",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+      fontFamily: _variables.FontFamily.AvenirNext,
+      color: _variables.GlobalColors.s5,
+      text: textHeaderRight
+    })
+  }, "2"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoginPasswordStrength.LoginPasswordStrength, {
+    emptyPassword: emptyPassword,
+    emptyConfirmPassword: emptyConfirmPassword,
+    matchPasswords: matchPasswords,
+    textTittle: textHeaderRight
+  }, "3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "button-center",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+      buttonType: "general-default-button",
+      label: "Enviar",
+      onClick: function onClick(e) {
+        return validate(e);
+      }
+    })
+  }, "4")];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "home-retailer",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselImagesLogin.CarouselImagesLogin, {
+        panelImg: imageArrayCarousel,
+        panelText: textCarousel,
+        panelColor: backogroundColorCarousel
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "home-login-retailer",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GradientPanel.GradientPanel, {
+        panelColor: _variables.GlobalColors.white,
+        componentsArray: loginRight,
+        panelType: "home-login"
+      })
+    })]
+  });
+};
+
+exports.ChangePasswordLogin = ChangePasswordLogin;

package/dist/components/pages/ChangePasswordLogin/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  width: 100%;\n  height: 100vh;\n  .home-login-retailer,\n  .home-retailer {\n    width: 50%;\n    .button-center {\n      text-align: center;\n      position: absolute;\n      bottom: 5%;\n      left: calc(75% - 80px);\n      .general-default-button {\n        width: 160px;\n      }\n    }\n  }\n"])));
+
+exports.Container = Container;

package/dist/components/pages/EmailResetPassword/EmailResetPassword.stories.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.EmailResetPasswordDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _loginImage = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/loginImage.svg"));
+
+var _login = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/login2.svg"));
+
+var _login2 = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/login3.svg"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/pages/EmailResetPassword",
+  component: _index.EmailResetPassword
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.EmailResetPassword, (0, _objectSpread2.default)({}, args));
+};
+
+var EmailResetPasswordDefault = Template.bind({});
+exports.EmailResetPasswordDefault = EmailResetPasswordDefault;
+EmailResetPasswordDefault.args = {
+  imageArrayCarousel: [_loginImage.default, _login.default, _login2.default],
+  textCarousel: "Elige la plataforma que conecta proovedores y retailers"
+};