contentoh-components-library 21.5.32 → 21.5.34

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

@@ -1,78 +1,78 @@
-import { CustomerLogin } from "./index";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-import { CustomerTypeImages } from "../../atoms/CustomerTypeImage";
-import { ScreenHeader } from "../../atoms/ScreenHeader";
-import { LogoImage } from "../../atoms/LogoImage/index";
-import { CheckBox } from "../../atoms/CheckBox/index";
-import { Button } from "../../atoms/GeneralButton/index";
-import { TagAndInput } from "../../molecules/TagAndInput";
-
-export default {
-  title: "Components/pages/CustomerLogin",
-  component: CustomerLogin,
-};
-const Template = (args) => <CustomerLogin {...args} />;
-
-export const CustomerLoginDefault = Template.bind({});
-
-CustomerLoginDefault.args = {
-  loginLeft: {
-    componentsArray: [
-      <ScreenHeader
-        fontFamily={FontFamily.Raleway_600}
-        color={GlobalColors.white}
-        text={"Bienvenido a Cadena"}
-        key="1"
-      />,
-      <p key="2">
-        La platarforma que conecta cadenas retailers con proveedores.
-      </p>,
-      <CustomerTypeImages key="3" />,
-    ],
-  },
-  loginRight: {
-    componentsArray: [
-      <LogoImage key="1" />,
-      <div className="credenciales" key="2">
-        <ScreenHeader
-          fontFamily={FontFamily.AvenirNext}
-          color={GlobalColors.s5}
-          text={"Ingresa tus credenciales"}
-        />
-      </div>,
-      <div className="user" key="3">
-        <TagAndInput
-          inputType={"text"}
-          label={"Nombre de usuario"}
-          inputPlaceHolder={"username@contentoh.com"}
-        />
-      </div>,
-      <div className="password" key="4">
-        <TagAndInput
-          inputType={"text"}
-          label={"Contraseña"}
-          inputPlaceHolder={"Escribe tu contraseña"}
-        />
-      </div>,
-      <div className="select" key="5">
-        <CheckBox
-          label={"Mantener sesión activada"}
-          id={"chk-default"}
-          className="active-left"
-        />
-        <p className="active-right">Olvidé mi contraseña</p>
-      </div>,
-      <div className="button-right" key="6">
-        <Button
-          buttonType={"general-default-button"}
-          label={"Iniciar sesión"}
-        />
-      </div>,
-      <div className="new-login" key="7">
-        <p className="pre-registro">
-          ¿Aún no tienes cuenta?<span> Regístrate</span>
-        </p>
-      </div>,
-    ],
-  },
-};
+import { CustomerLogin } from "./index";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+import { CustomerTypeImages } from "../../atoms/CustomerTypeImage";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { LogoImage } from "../../atoms/LogoImage/index";
+import { CheckBox } from "../../atoms/CheckBox/index";
+import { Button } from "../../atoms/GeneralButton/index";
+import { TagAndInput } from "../../molecules/TagAndInput";
+
+export default {
+  title: "Components/pages/CustomerLogin",
+  component: CustomerLogin,
+};
+const Template = (args) => <CustomerLogin {...args} />;
+
+export const CustomerLoginDefault = Template.bind({});
+
+CustomerLoginDefault.args = {
+  loginLeft: {
+    componentsArray: [
+      <ScreenHeader
+        fontFamily={FontFamily.Raleway_600}
+        color={GlobalColors.white}
+        text={"Bienvenido a Cadena"}
+        key="1"
+      />,
+      <p key="2">
+        La platarforma que conecta cadenas retailers con proveedores.
+      </p>,
+      <CustomerTypeImages key="3" />,
+    ],
+  },
+  loginRight: {
+    componentsArray: [
+      <LogoImage key="1" />,
+      <div className="credenciales" key="2">
+        <ScreenHeader
+          fontFamily={FontFamily.AvenirNext}
+          color={GlobalColors.s5}
+          text={"Ingresa tus credenciales"}
+        />
+      </div>,
+      <div className="user" key="3">
+        <TagAndInput
+          inputType={"text"}
+          label={"Nombre de usuario"}
+          inputPlaceHolder={"username@contentoh.com"}
+        />
+      </div>,
+      <div className="password" key="4">
+        <TagAndInput
+          inputType={"text"}
+          label={"Contraseña"}
+          inputPlaceHolder={"Escribe tu contraseña"}
+        />
+      </div>,
+      <div className="select" key="5">
+        <CheckBox
+          label={"Mantener sesión activada"}
+          id={"chk-default"}
+          className="active-left"
+        />
+        <p className="active-right">Olvidé mi contraseña</p>
+      </div>,
+      <div className="button-right" key="6">
+        <Button
+          buttonType={"general-default-button"}
+          label={"Iniciar sesión"}
+        />
+      </div>,
+      <div className="new-login" key="7">
+        <p className="pre-registro">
+          ¿Aún no tienes cuenta?<span> Regístrate</span>
+        </p>
+      </div>,
+    ],
+  },
+};

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

@@ -1,22 +1,22 @@
-import { GradientPanel } from "../../atoms/GradientPanel";
-import { Container } from "./styles";
-
-export const CustomerLogin = ({ loginLeft, loginRight }) => {
-  return (
-    <Container>
-      <div className="home-retailer">
-        <GradientPanel
-          componentsArray={loginLeft.componentsArray}
-          panelType={"home-panel"}
-        />
-      </div>
-      <div className="home-login-retailer">
-        <GradientPanel
-          panelColor
-          componentsArray={loginRight.componentsArray}
-          panelType={"home-login"}
-        />
-      </div>
-    </Container>
-  );
-};
+import { GradientPanel } from "../../atoms/GradientPanel";
+import { Container } from "./styles";
+
+export const CustomerLogin = ({ loginLeft, loginRight }) => {
+  return (
+    <Container>
+      <div className="home-retailer">
+        <GradientPanel
+          componentsArray={loginLeft.componentsArray}
+          panelType={"home-panel"}
+        />
+      </div>
+      <div className="home-login-retailer">
+        <GradientPanel
+          panelColor
+          componentsArray={loginRight.componentsArray}
+          panelType={"home-login"}
+        />
+      </div>
+    </Container>
+  );
+};

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

@@ -1,12 +1,12 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-  display: flex;
-  width: 100%;
-  height: 100vh;
-
-  .home-login-retailer,
-  .home-retailer {
-    width: 50%;
-  }
-`;
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100vh;
+
+  .home-login-retailer,
+  .home-retailer {
+    width: 50%;
+  }
+`;

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

@@ -1,56 +1,56 @@
-import { CustomerPayMethod } from "./index";
-import { ScreenHeader } from "../../atoms/ScreenHeader";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-import { PayMethod } from "../../molecules/PayMethod";
-import { Button } from "../../atoms/GeneralButton";
-
-export default {
-  title: "Components/pages/CustomerPayMethod",
-  component: CustomerPayMethod,
-};
-const Template = (args) => <CustomerPayMethod {...args} />;
-
-export const CustomerPayMethodDefault = Template.bind({});
-
-CustomerPayMethodDefault.args = {
-  left: {
-    componentsArray: [
-      <ScreenHeader
-        key="1"
-        fontFamily={FontFamily.Raleway_600}
-        color={GlobalColors.white}
-        text={"Que incluye la plataforma"}
-      />,
-    ],
-  },
-  homeRegister: {
-    componentsArray: [
-      <div className="arrowimage" key="1">
-        <Button buttonType={"general-arrow-button"} />
-      </div>,
-      <div className="plan" key="2">
-        <ScreenHeader
-          fontFamily={FontFamily.AvenirNext}
-          color={GlobalColors.s5}
-          text={"Prueba de 7 días"}
-        />
-      </div>,
-      <div className="general-text" key="3">
-        <p>
-          Para continuar te solicitamos el método de pago. Tienes un plazo de 7
-          días para crear tus productos con base en el plan elegido.
-        </p>
-      </div>,
-      <div className="payment-register" key="4">
-        <PayMethod />
-      </div>,
-      <div className="button-continuar" key="5">
-        <Button buttonType={"general-default-button"} label={"Continuar"} />
-      </div>,
-      <div className="continue" key="6">
-        <p className="free">Continuar de forma gratuita</p>
-      </div>,
-    ],
-    panelType: "home-card",
-  },
-};
+import { CustomerPayMethod } from "./index";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+import { PayMethod } from "../../molecules/PayMethod";
+import { Button } from "../../atoms/GeneralButton";
+
+export default {
+  title: "Components/pages/CustomerPayMethod",
+  component: CustomerPayMethod,
+};
+const Template = (args) => <CustomerPayMethod {...args} />;
+
+export const CustomerPayMethodDefault = Template.bind({});
+
+CustomerPayMethodDefault.args = {
+  left: {
+    componentsArray: [
+      <ScreenHeader
+        key="1"
+        fontFamily={FontFamily.Raleway_600}
+        color={GlobalColors.white}
+        text={"Que incluye la plataforma"}
+      />,
+    ],
+  },
+  homeRegister: {
+    componentsArray: [
+      <div className="arrowimage" key="1">
+        <Button buttonType={"general-arrow-button"} />
+      </div>,
+      <div className="plan" key="2">
+        <ScreenHeader
+          fontFamily={FontFamily.AvenirNext}
+          color={GlobalColors.s5}
+          text={"Prueba de 7 días"}
+        />
+      </div>,
+      <div className="general-text" key="3">
+        <p>
+          Para continuar te solicitamos el método de pago. Tienes un plazo de 7
+          días para crear tus productos con base en el plan elegido.
+        </p>
+      </div>,
+      <div className="payment-register" key="4">
+        <PayMethod />
+      </div>,
+      <div className="button-continuar" key="5">
+        <Button buttonType={"general-default-button"} label={"Continuar"} />
+      </div>,
+      <div className="continue" key="6">
+        <p className="free">Continuar de forma gratuita</p>
+      </div>,
+    ],
+    panelType: "home-card",
+  },
+};

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

@@ -1,23 +1,23 @@
-import { Container } from "./styles";
-import { GradientPanel } from "../../atoms/GradientPanel";
-
-
-export const CustomerPayMethod = ({ left, homeRegister }) => {
-  return (
-    <Container>
-      <div className="general-left">
-        <GradientPanel
-          componentsArray={left.componentsArray}
-          panelType={"home-panel"}
-        />
-      </div>
-      <div className="register-payment-method">
-        <GradientPanel
-          panelColor
-          componentsArray={homeRegister.componentsArray}
-          panelType={"home-card"}
-        />
-      </div>
-    </Container>
-  );
-};
+import { Container } from "./styles";
+import { GradientPanel } from "../../atoms/GradientPanel";
+
+
+export const CustomerPayMethod = ({ left, homeRegister }) => {
+  return (
+    <Container>
+      <div className="general-left">
+        <GradientPanel
+          componentsArray={left.componentsArray}
+          panelType={"home-panel"}
+        />
+      </div>
+      <div className="register-payment-method">
+        <GradientPanel
+          panelColor
+          componentsArray={homeRegister.componentsArray}
+          panelType={"home-card"}
+        />
+      </div>
+    </Container>
+  );
+};

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

@@ -1,21 +1,21 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-  display: flex;
-  width: 100%;
-  height: 100vh;
-  .register-payment-method,
-  .general-left {
-    width: 50%;
-  }
-  .register-payment-method {
-    position: relative;
-    .arrowimage {
-      width: 26px;
-      height: 26px;
-      position: absolute;
-      top: 50px;
-      left: 40px;
-    }
-  }
-`;
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  .register-payment-method,
+  .general-left {
+    width: 50%;
+  }
+  .register-payment-method {
+    position: relative;
+    .arrowimage {
+      width: 26px;
+      height: 26px;
+      position: absolute;
+      top: 50px;
+      left: 40px;
+    }
+  }
+`;

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

@@ -1,34 +1,34 @@
-import { CustomerType } from "./index";
-import { ScreenHeader } from "../../atoms/ScreenHeader";
-import { CustomerTypeImages } from "../../atoms/CustomerTypeImage";
-import { Button } from "../../atoms/GeneralButton";
-import { FontFamily,GlobalColors } from "../../../global-files/variables";
-
-
-export default {
-  title: "Components/pages/CustomerType",
-  component: CustomerType,
-};
-
-const Template = (args) => <CustomerType {...args} />;
-
-export const CustomerTypeDefault = Template.bind({});
-
-CustomerTypeDefault.args = {
-  homeLeft:{
-    componentsArray:[
-    <ScreenHeader key="1" fontFamily={FontFamily.Raleway_600} color={GlobalColors.white} text={"Cadena"}/>,
-    <CustomerTypeImages key="2"/>,
-    <p key="3">Elige esta opción si eres una Cadena Retailer.</p>,
-    <Button buttonType={"general-white-button"} label={"Seleccionar"} key="4"/>,
-    ],
-  },
-  homeRight:{
-    componentsArray:[
-    <ScreenHeader fontFamily={FontFamily.Raleway_600} color="#000000" text={"Proveedor"} key="1"/>,
-    <CustomerTypeImages className={"imagen"} imageType key="2"/>,
-    <p key="3">Elige esta opción si eres una Proveedor o Dueño de producto.</p>,
-    <Button key="4" buttonType={"general-default-button"} label={"Seleccionar"} />,
-    ],
-  },
+import { CustomerType } from "./index";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { CustomerTypeImages } from "../../atoms/CustomerTypeImage";
+import { Button } from "../../atoms/GeneralButton";
+import { FontFamily,GlobalColors } from "../../../global-files/variables";
+
+
+export default {
+  title: "Components/pages/CustomerType",
+  component: CustomerType,
+};
+
+const Template = (args) => <CustomerType {...args} />;
+
+export const CustomerTypeDefault = Template.bind({});
+
+CustomerTypeDefault.args = {
+  homeLeft:{
+    componentsArray:[
+    <ScreenHeader key="1" fontFamily={FontFamily.Raleway_600} color={GlobalColors.white} text={"Cadena"}/>,
+    <CustomerTypeImages key="2"/>,
+    <p key="3">Elige esta opción si eres una Cadena Retailer.</p>,
+    <Button buttonType={"general-white-button"} label={"Seleccionar"} key="4"/>,
+    ],
+  },
+  homeRight:{
+    componentsArray:[
+    <ScreenHeader fontFamily={FontFamily.Raleway_600} color="#000000" text={"Proveedor"} key="1"/>,
+    <CustomerTypeImages className={"imagen"} imageType key="2"/>,
+    <p key="3">Elige esta opción si eres una Proveedor o Dueño de producto.</p>,
+    <Button key="4" buttonType={"general-default-button"} label={"Seleccionar"} />,
+    ],
+  },
 };

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

@@ -1,22 +1,22 @@
-import { Container } from "./styles";
-import { GradientPanel } from "../../atoms/GradientPanel";
-
-export const CustomerType = ({ homeLeft, homeRight }) => {
-  return (
-    <Container>
-      <div className="home-retailer">
-        <GradientPanel
-          componentsArray={homeLeft.componentsArray}
-          panelType={"home-panel"}
-        />
-      </div>
-      <div className="home-provider">
-        <GradientPanel
-          panelColor
-          componentsArray={homeRight.componentsArray}
-          panelType={"home-panel"}
-        />
-      </div>
-    </Container>
-  );
-};
+import { Container } from "./styles";
+import { GradientPanel } from "../../atoms/GradientPanel";
+
+export const CustomerType = ({ homeLeft, homeRight }) => {
+  return (
+    <Container>
+      <div className="home-retailer">
+        <GradientPanel
+          componentsArray={homeLeft.componentsArray}
+          panelType={"home-panel"}
+        />
+      </div>
+      <div className="home-provider">
+        <GradientPanel
+          panelColor
+          componentsArray={homeRight.componentsArray}
+          panelType={"home-panel"}
+        />
+      </div>
+    </Container>
+  );
+};

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

@@ -1,21 +1,21 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-  display: flex;
-  width: 100%;
-  height: 100vh;
-
-  .home-retailer,
-  .home-provider {
-    width: 50%;
-  }
-  .home-provider {
-    .home-panel {
-      h2 {
-        & + * {
-          margin-top: 45px;
-        }
-      }
-    }
-  }
-`;
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100vh;
+
+  .home-retailer,
+  .home-provider {
+    width: 50%;
+  }
+  .home-provider {
+    .home-panel {
+      h2 {
+        & + * {
+          margin-top: 45px;
+        }
+      }
+    }
+  }
+`;