contentoh-components-library 21.5.35 → 21.5.36

package/src/components/pages/ProviderProductEdition/styles.js

@@ -1,122 +1,122 @@
-import styled from "styled-components";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  flex: 1;
-  overflow: auto;
-
-  .data-container {
-    display: flex;
-    flex: 0%;
-    height: calc(100% - ${({ headerTop }) => headerTop}px);
-    .image-data-panel {
-      width: 340px;
-
-      & + * {
-        margin-left: 10px;
-      }
-    }
-
-    .product-information {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-
-      .services-information-container {
-        height: 100%;
-        overflow: auto;
-      }
-
-      .image-services {
-        aside {
-          display: grid;
-          grid-template-columns: repeat(auto-fill, 179px);
-          column-gap: 15px;
-          row-gap: 15px;
-          padding: 20px;
-        }
-      }
-
-      .commentary-box {
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-end;
-        padding: 10px;
-        padding-left: 0;
-
-        .commentary {
-          display: flex;
-          align-items: flex-end;
-
-          .input-container {
-            width: 500px;
-
-            .quill {
-              height: 100px;
-            }
-
-            & + * {
-              margin-left: 5px;
-            }
-          }
-
-          .buttons-box {
-            display: flex;
-            width: 210px;
-            flex-wrap: wrap;
-
-            .general-transparent-button {
-              & + * {
-                margin-top: 5px;
-              }
-            }
-
-            .general-transparent-button,
-            .general-green-button,
-            .general-button-disabled {
-              width: fit-content;
-              min-width: 201px;
-              height: 40px;
-            }
-          }
-        }
-      }
-
-      .feedback-box {
-        display: flex;
-      }
-
-      .required-inputs-message {
-        font-family: ${FontFamily.AvenirNext};
-        font-size: 13px;
-        color: ${GlobalColors.s4};
-        padding: 10px;
-        display: flex;
-        align-items: center;
-
-        p + * {
-          margin-top: 10px;
-        }
-
-        button {
-          min-width: fit-content;
-        }
-      }
-    }
-  }
-  #modal-message-box {
-    width: 400px;
-    height: 100px;
-  }
-  .container {
-    width: 100%;
-    height: 100%;
-    .dropzone {
-      height: 100%;
-      width: 100%;
-    }
-  }
-`;
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  flex: 1;
+  overflow: auto;
+
+  .data-container {
+    display: flex;
+    flex: 0%;
+    height: calc(100% - ${({ headerTop }) => headerTop}px);
+    .image-data-panel {
+      width: 340px;
+
+      & + * {
+        margin-left: 10px;
+      }
+    }
+
+    .product-information {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+
+      .services-information-container {
+        height: 100%;
+        overflow: auto;
+      }
+
+      .image-services {
+        aside {
+          display: grid;
+          grid-template-columns: repeat(auto-fill, 179px);
+          column-gap: 15px;
+          row-gap: 15px;
+          padding: 20px;
+        }
+      }
+
+      .commentary-box {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        padding: 10px;
+        padding-left: 0;
+
+        .commentary {
+          display: flex;
+          align-items: flex-end;
+
+          .input-container {
+            width: 500px;
+
+            .quill {
+              height: 100px;
+            }
+
+            & + * {
+              margin-left: 5px;
+            }
+          }
+
+          .buttons-box {
+            display: flex;
+            width: 210px;
+            flex-wrap: wrap;
+
+            .general-transparent-button {
+              & + * {
+                margin-top: 5px;
+              }
+            }
+
+            .general-transparent-button,
+            .general-green-button,
+            .general-button-disabled {
+              width: fit-content;
+              min-width: 201px;
+              height: 40px;
+            }
+          }
+        }
+      }
+
+      .feedback-box {
+        display: flex;
+      }
+
+      .required-inputs-message {
+        font-family: ${FontFamily.AvenirNext};
+        font-size: 13px;
+        color: ${GlobalColors.s4};
+        padding: 10px;
+        display: flex;
+        align-items: center;
+
+        p + * {
+          margin-top: 10px;
+        }
+
+        button {
+          min-width: fit-content;
+        }
+      }
+    }
+  }
+  #modal-message-box {
+    width: 400px;
+    height: 100px;
+  }
+  .container {
+    width: 100%;
+    height: 100%;
+    .dropzone {
+      height: 100%;
+      width: 100%;
+    }
+  }
+`;

package/src/components/pages/RegistrationLoginSecondStep/RegistrationLoginSecondStep.stories.js

@@ -1,18 +1,18 @@
-import { RegistrationLoginSecondStep } from "./index";
-import LoginImage from "../../../assets/images/carouselImagesLogin/loginImage.svg";
-import Login2 from "../../../assets/images/carouselImagesLogin/login2.svg";
-import Login3 from "../../../assets/images/carouselImagesLogin/login3.svg";
-
-export default {
-  title: "Components/pages/RegistrationLoginSecondStep",
-  component: RegistrationLoginSecondStep,
-};
-const Template = (args) => <RegistrationLoginSecondStep {...args} />;
-
-export const RegistrationLoginSecondStepDefault = Template.bind({});
-
-RegistrationLoginSecondStepDefault.args = {
-  imageArrayCarousel: [LoginImage, Login2, Login3],
-  textCarousel: "Elige la plataforma que conecta proovedores y retailers",
-  textHeaderRight: "Ingresa tus credenciales",
-};
+import { RegistrationLoginSecondStep } from "./index";
+import LoginImage from "../../../assets/images/carouselImagesLogin/loginImage.svg";
+import Login2 from "../../../assets/images/carouselImagesLogin/login2.svg";
+import Login3 from "../../../assets/images/carouselImagesLogin/login3.svg";
+
+export default {
+  title: "Components/pages/RegistrationLoginSecondStep",
+  component: RegistrationLoginSecondStep,
+};
+const Template = (args) => <RegistrationLoginSecondStep {...args} />;
+
+export const RegistrationLoginSecondStepDefault = Template.bind({});
+
+RegistrationLoginSecondStepDefault.args = {
+  imageArrayCarousel: [LoginImage, Login2, Login3],
+  textCarousel: "Elige la plataforma que conecta proovedores y retailers",
+  textHeaderRight: "Ingresa tus credenciales",
+};

package/src/components/pages/RegistrationLoginSecondStep/index.js

@@ -1,111 +1,111 @@
-import { Container } from "./styles";
-import { GradientPanel } from "../../atoms/GradientPanel";
-import { CarouselImagesLogin } from "../../molecules/CarouselImagesLogin";
-import { useState } from "react";
-import { ScreenHeader } from "../../atoms/ScreenHeader";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-import { Button } from "../../atoms/GeneralButton";
-import { CheckBox } from "../../atoms/CheckBox";
-import { LoginPasswordStrength } from "../../molecules/LoginPasswordStrength";
-import { LogoImage } from "../../atoms/LogoImage";
-export const RegistrationLoginSecondStep = ({
-  imageArrayCarousel = [],
-  textCarousel,
-  backogroundColorCarousel,
-  textHeaderRight,
-}) => {
-  const [emptyPassword, setEmptyPassword] = useState(false);
-  const [emptyConfirmPassword, setEmptyConfirmPassword] = useState(false);
-  const [matchPasswords, setMatchPasswords] = useState(true);
-  const validate = async (e) => {
-    e.preventDefault();
-    const password = document.querySelector("#newPasswordInput").value;
-    password.length < 8 ? setEmptyPassword(true) : setEmptyPassword(false);
-    const confirmPassword = document.querySelector(
-      "#confirmPasswordInput"
-    ).value;
-    confirmPassword === ""
-      ? setEmptyConfirmPassword(true)
-      : setEmptyConfirmPassword(false);
-    if (password === confirmPassword) {
-      setMatchPasswords(true);
-    } else {
-      setMatchPasswords(false);
-    }
-  };
-  const loginRight = [
-    <LogoImage key="1" />,
-    <div className="credenciales" key={"2"}>
-      <ScreenHeader
-        fontFamily={FontFamily.AvenirNext}
-        color={GlobalColors.s5}
-        text={textHeaderRight}
-      />
-    </div>,
-    <LoginPasswordStrength
-      key={"3"}
-      emptyPassword={emptyPassword}
-      emptyConfirmPassword={emptyConfirmPassword}
-      matchPasswords={matchPasswords}
-      textTittle={textHeaderRight}
-    />,
-    <label className="label-terms">Términos y condiciones</label>,
-    <div className="checkbox-terms">
-      <input type="checkbox" />
-      <ScreenHeader
-        text={
-          "Conoce nuestros termnios y condiciones de cada uno de nuestros servicios. Si tienes algunda duda o comentario escríbenos."
-        }
-        headerType={"date-header"}
-      />
-    </div>,
-    <label className="label-terms">Aviso de privacidad</label>,
-    <div className="checkbox-terms">
-      <input type="checkbox" />
-      <ScreenHeader
-        text={"Todos los datos estan protegidos."}
-        headerType={"date-header"}
-      />
-    </div>,
-    <div className="button-end" key="6">
-      <Button
-        buttonType={"general-default-button"}
-        label={"Enviar"}
-        onClick={(e) => validate(e)}
-      />
-    </div>,
-    <div className="progress-bar">
-      <div className="progress-bar-first-step-check"></div>
-      <div className="progress-bar-second-step"></div>
-      <div className="progress-bar-registration"></div>
-    </div>,
-    <ScreenHeader
-      text={"Paso 2"}
-      headerType={"date-header"}
-      color={GlobalColors.s4}
-    />,
-    <div className="new-login" key="7">
-      <p className="pre-registro">
-        ¿Aún no tienes cuenta?<span> Regístrate</span>
-      </p>
-    </div>,
-  ];
-  return (
-    <Container>
-      <div className="home-retailer">
-        <CarouselImagesLogin
-          panelImg={imageArrayCarousel}
-          panelText={textCarousel}
-          panelColor={backogroundColorCarousel}
-        />
-      </div>
-      <div className="home-login-retailer">
-        <GradientPanel
-          panelColor={GlobalColors.white}
-          componentsArray={loginRight}
-          panelType={"home-login"}
-        ></GradientPanel>
-      </div>
-    </Container>
-  );
-};
+import { Container } from "./styles";
+import { GradientPanel } from "../../atoms/GradientPanel";
+import { CarouselImagesLogin } from "../../molecules/CarouselImagesLogin";
+import { useState } from "react";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+import { Button } from "../../atoms/GeneralButton";
+import { CheckBox } from "../../atoms/CheckBox";
+import { LoginPasswordStrength } from "../../molecules/LoginPasswordStrength";
+import { LogoImage } from "../../atoms/LogoImage";
+export const RegistrationLoginSecondStep = ({
+  imageArrayCarousel = [],
+  textCarousel,
+  backogroundColorCarousel,
+  textHeaderRight,
+}) => {
+  const [emptyPassword, setEmptyPassword] = useState(false);
+  const [emptyConfirmPassword, setEmptyConfirmPassword] = useState(false);
+  const [matchPasswords, setMatchPasswords] = useState(true);
+  const validate = async (e) => {
+    e.preventDefault();
+    const password = document.querySelector("#newPasswordInput").value;
+    password.length < 8 ? setEmptyPassword(true) : setEmptyPassword(false);
+    const confirmPassword = document.querySelector(
+      "#confirmPasswordInput"
+    ).value;
+    confirmPassword === ""
+      ? setEmptyConfirmPassword(true)
+      : setEmptyConfirmPassword(false);
+    if (password === confirmPassword) {
+      setMatchPasswords(true);
+    } else {
+      setMatchPasswords(false);
+    }
+  };
+  const loginRight = [
+    <LogoImage key="1" />,
+    <div className="credenciales" key={"2"}>
+      <ScreenHeader
+        fontFamily={FontFamily.AvenirNext}
+        color={GlobalColors.s5}
+        text={textHeaderRight}
+      />
+    </div>,
+    <LoginPasswordStrength
+      key={"3"}
+      emptyPassword={emptyPassword}
+      emptyConfirmPassword={emptyConfirmPassword}
+      matchPasswords={matchPasswords}
+      textTittle={textHeaderRight}
+    />,
+    <label className="label-terms">Términos y condiciones</label>,
+    <div className="checkbox-terms">
+      <input type="checkbox" />
+      <ScreenHeader
+        text={
+          "Conoce nuestros termnios y condiciones de cada uno de nuestros servicios. Si tienes algunda duda o comentario escríbenos."
+        }
+        headerType={"date-header"}
+      />
+    </div>,
+    <label className="label-terms">Aviso de privacidad</label>,
+    <div className="checkbox-terms">
+      <input type="checkbox" />
+      <ScreenHeader
+        text={"Todos los datos estan protegidos."}
+        headerType={"date-header"}
+      />
+    </div>,
+    <div className="button-end" key="6">
+      <Button
+        buttonType={"general-default-button"}
+        label={"Enviar"}
+        onClick={(e) => validate(e)}
+      />
+    </div>,
+    <div className="progress-bar">
+      <div className="progress-bar-first-step-check"></div>
+      <div className="progress-bar-second-step"></div>
+      <div className="progress-bar-registration"></div>
+    </div>,
+    <ScreenHeader
+      text={"Paso 2"}
+      headerType={"date-header"}
+      color={GlobalColors.s4}
+    />,
+    <div className="new-login" key="7">
+      <p className="pre-registro">
+        ¿Aún no tienes cuenta?<span> Regístrate</span>
+      </p>
+    </div>,
+  ];
+  return (
+    <Container>
+      <div className="home-retailer">
+        <CarouselImagesLogin
+          panelImg={imageArrayCarousel}
+          panelText={textCarousel}
+          panelColor={backogroundColorCarousel}
+        />
+      </div>
+      <div className="home-login-retailer">
+        <GradientPanel
+          panelColor={GlobalColors.white}
+          componentsArray={loginRight}
+          panelType={"home-login"}
+        ></GradientPanel>
+      </div>
+    </Container>
+  );
+};

package/src/components/pages/RegistrationLoginSecondStep/styles.js

@@ -1,64 +1,64 @@
-import styled from "styled-components";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  display: flex;
-  width: 100%;
-  height: 100vh;
-  .button-end {
-    text-align: end;
-    .general-default-button {
-      width: 160px;
-    }
-    & + * {
-      margin-top: 10px;
-    }
-  }
-  .progress-bar {
-    width: 100%;
-    height: 8px;
-    display: flex;
-    justify-content: space-between;
-    .progress-bar-first-step-check {
-      width: 33.33%;
-      background-color: ${GlobalColors.exported};
-    }
-    .progress-bar-second-step {
-      width: 33.33%;
-      background-color: rgb(196, 196, 196);
-    }
-    .progress-bar-registration {
-      background-color: rgb(226, 226, 226);
-      width: 33.33%;
-    }
-  }
-  .date-header {
-    margin-left: 33.33%;
-  }
-  .home-login-retailer,
-  .home-retailer {
-    width: 50%;
-  }
-  .checkbox-terms {
-    display: flex;
-    margin-bottom: 5px;
-    input {
-      cursor: pointer;
-      & + * {
-        margin-left: 15px;
-      }
-    }
-  }
-  .label-terms {
-    //color: ${GlobalColors.original_purpura};
-    color: rgb(129, 115, 147);
-    font-size: 13px;
-    line-height: 24px;
-    font-weight: 700;
-    cursor: pointer;
-    margin-left: 25px;
-    & + * {
-      margin-top: 5px;
-    }
-  }
-`;
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  .button-end {
+    text-align: end;
+    .general-default-button {
+      width: 160px;
+    }
+    & + * {
+      margin-top: 10px;
+    }
+  }
+  .progress-bar {
+    width: 100%;
+    height: 8px;
+    display: flex;
+    justify-content: space-between;
+    .progress-bar-first-step-check {
+      width: 33.33%;
+      background-color: ${GlobalColors.exported};
+    }
+    .progress-bar-second-step {
+      width: 33.33%;
+      background-color: rgb(196, 196, 196);
+    }
+    .progress-bar-registration {
+      background-color: rgb(226, 226, 226);
+      width: 33.33%;
+    }
+  }
+  .date-header {
+    margin-left: 33.33%;
+  }
+  .home-login-retailer,
+  .home-retailer {
+    width: 50%;
+  }
+  .checkbox-terms {
+    display: flex;
+    margin-bottom: 5px;
+    input {
+      cursor: pointer;
+      & + * {
+        margin-left: 15px;
+      }
+    }
+  }
+  .label-terms {
+    //color: ${GlobalColors.original_purpura};
+    color: rgb(129, 115, 147);
+    font-size: 13px;
+    line-height: 24px;
+    font-weight: 700;
+    cursor: pointer;
+    margin-left: 25px;
+    & + * {
+      margin-top: 5px;
+    }
+  }
+`;

package/src/components/pages/RegistrationLoginThirdStep/RegistrationLoginThirdStep.stories.js

@@ -1,17 +1,17 @@
-import { RegistrationLoginThirdStep } from "./index";
-import LoginImage from "../../../assets/images/carouselImagesLogin/loginImage.svg";
-import Login2 from "../../../assets/images/carouselImagesLogin/login2.svg";
-import Login3 from "../../../assets/images/carouselImagesLogin/login3.svg";
-
-export default {
-  title: "Components/pages/RegistrationLoginThirdStep",
-  component: RegistrationLoginThirdStep,
-};
-const Template = (args) => <RegistrationLoginThirdStep {...args} />;
-
-export const RegistrationLoginThirdStepDefault = Template.bind({});
-
-RegistrationLoginThirdStepDefault.args = {
-  imageArrayCarousel: [LoginImage, Login2, Login3],
-  textCarousel: "Elige la plataforma que conecta proovedores y retailers",
-};
+import { RegistrationLoginThirdStep } from "./index";
+import LoginImage from "../../../assets/images/carouselImagesLogin/loginImage.svg";
+import Login2 from "../../../assets/images/carouselImagesLogin/login2.svg";
+import Login3 from "../../../assets/images/carouselImagesLogin/login3.svg";
+
+export default {
+  title: "Components/pages/RegistrationLoginThirdStep",
+  component: RegistrationLoginThirdStep,
+};
+const Template = (args) => <RegistrationLoginThirdStep {...args} />;
+
+export const RegistrationLoginThirdStepDefault = Template.bind({});
+
+RegistrationLoginThirdStepDefault.args = {
+  imageArrayCarousel: [LoginImage, Login2, Login3],
+  textCarousel: "Elige la plataforma que conecta proovedores y retailers",
+};