contentoh-components-library 21.0.21 → 21.0.22

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

@@ -22,50 +22,48 @@ var CarouselImagesLogin = function CarouselImagesLogin(_ref) {
       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);
+    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;
       }
 
-      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);
-    });
+      setTimeout(function () {
+        img1.src = img2.src;
+        img2.classList.remove("active");
+        img1.classList.remove("right");
+      }, 1000);
+    };
+
+    setInterval(slideshow, 4000);
   };
 
   (0, _react.useEffect)(function () {

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

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

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Login = void 0;
+
+var _styles = require("./styles");
+
+var _index = require("../../atoms/LogoImage/index");
+
+var _index2 = require("../../atoms/ScreenHeader/index");
+
+var _index3 = require("../../atoms/GeneralButton/index");
+
+var _index4 = require("../../atoms/CheckBox/index");
+
+var _TagAndInput = require("../TagAndInput");
+
+var _variables = require("../../../global-files/variables");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var Login = function Login() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    className: "home-login",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "main-container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.LogoImage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "credenciales",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.ScreenHeader, {
+          fontFamily: _variables.FontFamily.AvenirNext,
+          color: _variables.GlobalColors.s5,
+          text: "Ingresa tus credenciales"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "user",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+          inputType: "text",
+          label: "Nombre de usuario",
+          inputPlaceHolder: "username@contentoh.com"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "password",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+          inputType: "text",
+          label: "Contraseña",
+          inputPlaceHolder: "Escribe tu contraseña"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "select",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.CheckBox, {
+          label: "Mantener sesión activada",
+          id: "chk-default",
+          className: "active-left"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          className: "active-right",
+          children: "Olvide mi contrase\xF1a"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "button-right",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Button, {
+          buttonType: "general-default-button",
+          label: "Iniciar sesión"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "new-login",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+          className: "pre-registro",
+          children: ["\xBFA\xFAn no tienes cuenta?", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: " Reg\xEDstrate"
+          })]
+        })
+      })]
+    })
+  });
+};
+
+exports.Login = Login;

package/dist/components/molecules/Login/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  background: \"white\";\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\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  .main-container {\n    max-width: 80%;\n    max-height: 80%;\n  }\n"])), _variables.FontFamily.Raleway_700, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.GlobalColors.secondary_magenta);
+
+exports.Container = Container;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.0.21",
+  "version": "21.0.22",
   "dependencies": {
     "@babel/runtime": "^7.17.2",
     "@storybook/addon-postcss": "^2.0.0",
@@ -10,7 +10,6 @@
     "axios": "^0.25.0",
     "babel-preset-react-app": "^10.0.1",
     "chart.js": "^3.7.1",
-    "contentoh-components-library": "^21.0.18",
     "js-base64": "^3.7.2",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
@@ -71,6 +70,7 @@
     "auto": "^10.36.5",
     "babel-loader": "^8.2.3",
     "chromatic": "^6.3.3",
+    "contentoh-components-library": "^21.0.21",
     "cross-env": "^7.0.3",
     "storybook-css-modules-preset": "^1.1.1"
   },

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

@@ -9,46 +9,43 @@ export const CarouselImagesLogin = ({
   panelColor,
 }) => {
   const carouselStart = () => {
-    addEventListener("DOMContentLoaded", () => {
-      const images = panelImg;
-      let i = 1;
-      const img1 = document.querySelector("#img1");
-      const img2 = document.querySelector("#img2");
-      const divIndicadores = document.querySelector("#indicadores");
-      for (let index = 0; index < images.length; index++) {
-        const div = document.createElement("div");
-        div.classList.add("circles");
-        div.id = index;
-        divIndicadores.appendChild(div);
+    const images = panelImg;
+    let i = 1;
+    const img1 = document.querySelector("#img1");
+    const img2 = document.querySelector("#img2");
+    const divIndicadores = document.querySelector("#indicadores");
+    for (let index = 0; index < images.length; index++) {
+      const div = document.createElement("div");
+      div.classList.add("circles");
+      div.id = index;
+      divIndicadores.appendChild(div);
+    }
+    img1.src = images[0];
+    const circulos = document.querySelectorAll(".circles");
+    circulos[0].classList.add("resaltado");
+    const slideshow = () => {
+      img2.src = images[i];
+      const circulo_actual = Array.from(circulos).find((el) => el.id == i);
+      Array.from(circulos).forEach((cir) => cir.classList.remove("resaltado"));
+      circulo_actual.classList.add("resaltado");
+      img1.classList.add("right");
+      img2.classList.add("active");
+      i++;
+      if (i == images.length) {
+        i = 0;
       }
-      img1.src = images[0];
-      const circulos = document.querySelectorAll(".circles");
-      circulos[0].classList.add("resaltado");
-      const slideshow = () => {
-        img2.src = images[i];
-        const circulo_actual = Array.from(circulos).find((el) => el.id == i);
-        Array.from(circulos).forEach((cir) =>
-          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(() => {
-          img1.src = img2.src;
-          img2.classList.remove("active");
-          img1.classList.remove("right");
-        }, 1000);
-      };
-      setInterval(slideshow, 4000);
-    });
+      setTimeout(() => {
+        img1.src = img2.src;
+        img2.classList.remove("active");
+        img1.classList.remove("right");
+      }, 1000);
+    };
+    setInterval(slideshow, 4000);
   };
-  useEffect(()=>{
+
+  useEffect(() => {
     carouselStart();
-  },[]) 
+  }, []);
 
   return (
     <Container panelColor={panelColor}>

package/src/components/molecules/Login/Login.stories.js

@@ -0,0 +1,11 @@
+import { Login } from "./index";
+
+export default {
+  title: "Components/molecules/Login",
+  component: Login,
+};
+
+const Template = (args) => <Login {...args} />;
+
+export const LoginDefault = Template.bind({});
+LoginDefault.args = {};

package/src/components/molecules/Login/index.js

@@ -0,0 +1,57 @@
+import { Container } from "./styles";
+import { LogoImage } from "../../atoms/LogoImage/index";
+import { ScreenHeader } from "../../atoms/ScreenHeader/index";
+import { Button } from "../../atoms/GeneralButton/index";
+import { CheckBox } from "../../atoms/CheckBox/index";
+import { TagAndInput } from "../TagAndInput";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Login = () => {
+  return (
+    <Container className={"home-login"}>
+      <div className="main-container">
+        <LogoImage />
+        <div className="credenciales">
+          <ScreenHeader
+            fontFamily={FontFamily.AvenirNext}
+            color={GlobalColors.s5}
+            text={"Ingresa tus credenciales"}
+          />
+        </div>
+        <div className="user">
+          <TagAndInput
+            inputType={"text"}
+            label={"Nombre de usuario"}
+            inputPlaceHolder={"username@contentoh.com"}
+          />
+        </div>
+        <div className="password">
+          <TagAndInput
+            inputType={"text"}
+            label={"Contraseña"}
+            inputPlaceHolder={"Escribe tu contraseña"}
+          />
+        </div>
+        <div className="select">
+          <CheckBox
+            label={"Mantener sesión activada"}
+            id={"chk-default"}
+            className="active-left"
+          />
+          <p className="active-right">Olvide mi contraseña</p>
+        </div>
+        <div className="button-right">
+          <Button
+            buttonType={"general-default-button"}
+            label={"Iniciar sesión"}
+          />
+        </div>
+        <div className="new-login">
+          <p className="pre-registro">
+            ¿Aún no tienes cuenta?<span> Regístrate</span>
+          </p>
+        </div>
+      </div>
+    </Container>
+  );
+};

package/src/components/molecules/Login/styles.js

@@ -0,0 +1,73 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  background: "white";
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  label {
+    color: red;
+    margin-top: 3px;
+    margin-left: 15px;
+    font-family: ${FontFamily.Raleway_700};
+    font-size: 11px;
+  }
+
+  &.home-login {
+    .credenciales {
+      & + * {
+        margin-top: 30px;
+      }
+    }
+    .user {
+      & + * {
+        margin-top: 20px;
+      }
+    }
+    .password {
+      & + * {
+        margin-top: 20px;
+      }
+    }
+    .select {
+      display: flex;
+      justify-content: space-between;
+      .active-right {
+        font-family: ${FontFamily.AvenirNext};
+        font-weight: 500;
+        font-size: 13px;
+        line-height: 24px;
+        letter-spacing: -0.015em;
+        color: ${GlobalColors.s5};
+      }
+      & + * {
+        margin-top: 50px;
+      }
+    }
+    .button-right {
+      text-align: right;
+      & + * {
+        margin-top: 55px;
+      }
+    }
+    .new-login {
+      p {
+        font-family: ${FontFamily.AvenirNext};
+        text-align: right;
+        font-weight: 500;
+        font-size: 13px;
+        line-height: 24px;
+        color: ${GlobalColors.s5};
+        span {
+          color: ${GlobalColors.secondary_magenta};
+        }
+      }
+    }
+  }
+  .main-container {
+    max-width: 80%;
+    max-height: 80%;
+  }
+`;