contentoh-components-library 21.4.136 → 21.4.138

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

@@ -0,0 +1,126 @@
+"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,
+      required = _ref.required;
+
+  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;
+
+  var updateInfo = function updateInfo(e) {
+    switch (e.target.id) {
+      case "newPasswordInput":
+        setPasswordStrength(0);
+
+        if (e.target.value.length >= 8) {
+          setPasswordStrength(function (passwordStrength) {
+            return passwordStrength + 1;
+          });
+        } //Verificar si la contraseña contiene mayuscula, numeros y un caracter especial
+
+
+        e.target.value.match(upperCaseLetters) && setPasswordStrength(function (passwordStrength) {
+          return passwordStrength + 1;
+        });
+        e.target.value.match(numbers) && setPasswordStrength(function (passwordStrength) {
+          return passwordStrength + 1;
+        });
+        e.target.value.match(specialChar) && setPasswordStrength(function (passwordStrength) {
+          return passwordStrength + 1;
+        });
+        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",
+        isRequired: required,
+        inputOnChange: updateInfo
+      }), emptyPassword && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+        children: "La contrase\xF1a debe ser minimo de 8 caracteres"
+      })]
+    }), /*#__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"
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "user",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+        inputType: "password",
+        inputId: "confirmPasswordInput",
+        label: "Confirme la nueva contraseña",
+        isRequired: required
+      }), 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"
+      })]
+    })]
+  });
+};
+
+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  margin-bottom: 15px;\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  & + * {\n    margin-top: 20px;\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/LogoLoading/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.LogoLoadingDefault = 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/LogoLoading",
+  component: _index.LogoLoading
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.LogoLoading, (0, _objectSpread2.default)({}, args));
+};
+
+var LogoLoadingDefault = Template.bind({});
+exports.LogoLoadingDefault = LogoLoadingDefault;
+LogoLoadingDefault.args = {};

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LogoLoading = void 0;
+
+var _styles = require("./styles");
+
+var _Loading = require("../../atoms/Loading");
+
+var _LogoImage = require("../../atoms/LogoImage");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var LogoLoading = function LogoLoading() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoImage.LogoImage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {})]
+  });
+};
+
+exports.LogoLoading = LogoLoading;

package/dist/components/molecules/LogoLoading/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  height: 100vh;\n  width: 50%;\n  padding-top: 25%;\n  .logo {\n    text-align: center;\n    img {\n      width: 65%;\n    }\n  }\n  .loading {\n    height: 10%;\n  }\n"])));
+
+exports.Container = Container;

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

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ParentComponentDefault = 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/ParentComponent",
+  component: _index.ParentComponent,
+  decorators: [function (Story) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ParentComponent, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Story, {})
+    });
+  }]
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ParentComponent, (0, _objectSpread2.default)({}, args));
+};
+
+var ParentComponentDefault = Template.bind({});
+exports.ParentComponentDefault = ParentComponentDefault;
+ParentComponentDefault.args = {};

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

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ParentComponent = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _index = require("../SidebarNotification/index");
+
+var _react = require("react");
+
+var _defaultProfileImage = _interopRequireDefault(require("../../../assets/images/defaultImages/defaultProfileImage.svg"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var ParentComponent = function ParentComponent() {
+  var _useState = (0, _react.useState)(true),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showSidebar = _useState2[0],
+      setShowSidebar = _useState2[1];
+
+  var array = [{
+    dates: "2/16/2022",
+    notifications: [{
+      profilePicture: _defaultProfileImage.default,
+      notification: "ODT 23441244",
+      newNotification: true
+    }, {
+      profilePicture: _defaultProfileImage.default,
+      notification: "ODT 23441244",
+      newNotification: true
+    }]
+  }, {
+    dates: "2/14/2022",
+    notifications: [{
+      profilePicture: _defaultProfileImage.default,
+      notification: "ODT 23441244",
+      newNotification: true
+    }, {
+      profilePicture: _defaultProfileImage.default,
+      notification: "ODT 23441244",
+      newNotification: true
+    }]
+  }, {
+    dates: "2/17/2022",
+    notifications: [{
+      profilePicture: _defaultProfileImage.default,
+      notification: "ODT 23441244",
+      newNotification: true
+    }, {
+      profilePicture: _defaultProfileImage.default,
+      notification: "ODT 23441244",
+      newNotification: true
+    }]
+  }];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    children: showSidebar && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SidebarNotification, {
+      array: array,
+      showSidebar: showSidebar,
+      setShowSidebar: setShowSidebar
+    })
+  });
+};
+
+exports.ParentComponent = ParentComponent;

package/dist/components/molecules/ParentComponent/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  position: relative;\n  height: 100vh;\n  width: 100%;\n"])));
+
+exports.Container = Container;

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

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

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PayMethod = void 0;
+
+var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectDestructuringEmpty"));
+
+var _styles = require("./styles");
+
+var _index = require("../../atoms/ScreenHeader/index");
+
+var _variables = require("../../../global-files/variables");
+
+var _Card = require("../../atoms/Card");
+
+var _TagAndInput = require("../TagAndInput");
+
+var _masterCardIcon = _interopRequireDefault(require("../../../assets/images/card/masterCardIcon.svg"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var PayMethod = function PayMethod(_ref) {
+  (0, _objectDestructuringEmpty2.default)(_ref);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "master",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
+        fontFamily: _variables.FontFamily.AvenirNext,
+        color: _variables.GlobalColors.s5,
+        headerType: "input-name-header",
+        text: "Agrega tarjeta de credito"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.Card, {
+        cardIcon: _masterCardIcon.default,
+        altText: "master-card-icon"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "card-number",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+        inputType: "text",
+        label: "Número de tarjeta de credito",
+        inputPlaceHolder: "1234 5678 1234 5678"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "card-data",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+        inputType: "text",
+        label: "Nombre del titular",
+        inputPlaceHolder: "Bart Simpson"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+        inputType: "text",
+        label: "Expira",
+        inputPlaceHolder: "22/27"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+        inputType: "text",
+        label: "CVV",
+        inputPlaceHolder: "***"
+      })]
+    })]
+  }, "pay");
+};
+
+exports.PayMethod = PayMethod;

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

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 2px solid ", ";\n  border-radius: 7px;\n  padding: 15px 25px;\n\n  .card-number{ \n    & + * {\n        margin-top: 5px;\n      }\n  }\n  .master {\n    display: flex;\n    justify-content: space-between;\n  }\n  .card-data {\n    display: flex;\n    justify-content: space-between;\n    .input-container {\n      flex: 1;\n      &:first-child {\n        flex: 3;\n      }\n      & + * {\n        margin-left: 10px;\n      }\n    }\n  }\n"])), _variables.GlobalColors.s2);
+
+exports.Container = Container;

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

@@ -0,0 +1,103 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PhaseDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _variables = require("../../../global-files/variables");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/molecules/Phase",
+  component: _index.Phase,
+  argTypes: {}
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Phase, (0, _objectSpread2.default)({}, args));
+};
+
+var PhaseDefault = Template.bind({});
+exports.PhaseDefault = PhaseDefault;
+PhaseDefault.args = {
+  id: 0,
+  phases: [{
+    "phaseId": 2,
+    "phaseName": "Fase Evaluación",
+    "isInitialPhase": 1,
+    "nextPhaseIfApproved": 3,
+    "groupsAssigned": [{
+      "groupId": 1,
+      "groupName": "Preguntas",
+      "groupActive": 1
+    }, {
+      "groupId": 8,
+      "groupName": "Inteligencia",
+      "groupActive": 1
+    }, {
+      "groupId": 9,
+      "groupName": "Legal",
+      "groupActive": 0
+    }]
+  }, {
+    "phaseId": 3,
+    "phaseName": "Fase comercial",
+    "isInitialPhase": 0,
+    "nextPhaseIfApproved": 4,
+    "groupsAssigned": [{
+      "groupId": 1,
+      "groupName": "Preguntas",
+      "groupActive": 1
+    }, {
+      "groupId": 8,
+      "groupName": "Inteligencia",
+      "groupActive": 1
+    }, {
+      "groupId": 9,
+      "groupName": "Legal",
+      "groupActive": 0
+    }]
+  }, {
+    "phaseId": 4,
+    "phaseName": "Fase legal",
+    "isInitialPhase": 0,
+    "nextPhaseIfApproved": null,
+    "groupsAssigned": [{
+      "groupId": 1,
+      "groupName": "Preguntas",
+      "groupActive": 0
+    }, {
+      "groupId": 8,
+      "groupName": "Inteligencia",
+      "groupActive": 0
+    }, {
+      "groupId": 9,
+      "groupName": "Legal",
+      "groupActive": 0
+    }]
+  }],
+  phaseName: "Fase Evaluación",
+  nextPhase: 3,
+  groups: [{
+    "groupId": 1,
+    "groupName": "Preguntas",
+    "groupActive": 1
+  }, {
+    "groupId": 8,
+    "groupName": "Inteligencia",
+    "groupActive": 1
+  }, {
+    "groupId": 9,
+    "groupName": "Legal",
+    "groupActive": 0
+  }]
+};