contentoh-components-library 21.5.34 → 21.5.36

package/src/components/atoms/GradientPanel/GradientPanel.stories.js

@@ -1,134 +1,134 @@
-import { GradientPanel } from "./index";
-import { ScreenHeader } from "../../atoms/ScreenHeader/index";
-import { CustomerTypeImages } from "../../atoms/CustomerTypeImage/index";
-import { Button } from "../../atoms/GeneralButton/index";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-import { LogoImage } from "../../atoms/LogoImage/index";
-import { CheckBox } from "../CheckBox/index";
-import { PayMethod } from "../../molecules/PayMethod";
-import { TagAndInput } from "../../molecules/TagAndInput";
-import { AtomList } from "../AtomList";
-import { FullPlan } from "../../organisms/Fullplan";
-
-export default {
-  title: "Components/atoms/GradientPanel",
-  component: GradientPanel,
-};
-
-const Template = (args) => <GradientPanel {...args} />;
-
-export const GradientPanelDefault = Template.bind({});
-GradientPanelDefault.args = {
-  componentsArray: [
-    <ScreenHeader
-      fontFamily={FontFamily.Raleway_600}
-      color={GlobalColors.white}
-      text={"Cadena"}
-      key="1"
-    />,
-    <AtomList content={["texto de prueba", "Atomlist"]} key="2" />,
-    <CustomerTypeImages key="3" />,
-    <p key={"4"}>Elige esta opción si eres una Cadena Retailer.</p>,
-    <Button
-      buttonType={"general-white-button"}
-      label={"Seleccionar"}
-      key="5"
-    />,
-  ],
-  panelType: "home-panel",
-};
-export const LoginPanelDefault = Template.bind({});
-LoginPanelDefault.args = {
-  panelColor: GlobalColors.white,
-  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>,
-  ],
-  panelType: "home-login",
-};
-export const PaymentMetodhDefault = Template.bind({});
-PaymentMetodhDefault.args = {
-  panelColor: GlobalColors.white,
-  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",
-};
-export const FullPlanDefault = Template.bind({});
-FullPlanDefault.args = {
-  panelColor: GlobalColors.white,
-  componentsArray: [
-    <FullPlan
-      key="1"
-      title="Elige el número de proveedores"
-      textGeneral="Bienvido a nuestra plataforma de cadena, para continuar elige el número de proveedores que tiene tu cadena"
-      containerData={[
-        { number: "300", name: "Proveedores" },
-        { number: "1500", name: "Proveedores" },
-        { number: "+3000", name: "Proveedores" },
-        { number: "Ondemand", name: "agrega proveedores a tu forma" },
-      ]}
-    />,
-  ],
-  panelType: "home-plan",
-};
+import { GradientPanel } from "./index";
+import { ScreenHeader } from "../../atoms/ScreenHeader/index";
+import { CustomerTypeImages } from "../../atoms/CustomerTypeImage/index";
+import { Button } from "../../atoms/GeneralButton/index";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+import { LogoImage } from "../../atoms/LogoImage/index";
+import { CheckBox } from "../CheckBox/index";
+import { PayMethod } from "../../molecules/PayMethod";
+import { TagAndInput } from "../../molecules/TagAndInput";
+import { AtomList } from "../AtomList";
+import { FullPlan } from "../../organisms/Fullplan";
+
+export default {
+  title: "Components/atoms/GradientPanel",
+  component: GradientPanel,
+};
+
+const Template = (args) => <GradientPanel {...args} />;
+
+export const GradientPanelDefault = Template.bind({});
+GradientPanelDefault.args = {
+  componentsArray: [
+    <ScreenHeader
+      fontFamily={FontFamily.Raleway_600}
+      color={GlobalColors.white}
+      text={"Cadena"}
+      key="1"
+    />,
+    <AtomList content={["texto de prueba", "Atomlist"]} key="2" />,
+    <CustomerTypeImages key="3" />,
+    <p key={"4"}>Elige esta opción si eres una Cadena Retailer.</p>,
+    <Button
+      buttonType={"general-white-button"}
+      label={"Seleccionar"}
+      key="5"
+    />,
+  ],
+  panelType: "home-panel",
+};
+export const LoginPanelDefault = Template.bind({});
+LoginPanelDefault.args = {
+  panelColor: GlobalColors.white,
+  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>,
+  ],
+  panelType: "home-login",
+};
+export const PaymentMetodhDefault = Template.bind({});
+PaymentMetodhDefault.args = {
+  panelColor: GlobalColors.white,
+  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",
+};
+export const FullPlanDefault = Template.bind({});
+FullPlanDefault.args = {
+  panelColor: GlobalColors.white,
+  componentsArray: [
+    <FullPlan
+      key="1"
+      title="Elige el número de proveedores"
+      textGeneral="Bienvido a nuestra plataforma de cadena, para continuar elige el número de proveedores que tiene tu cadena"
+      containerData={[
+        { number: "300", name: "Proveedores" },
+        { number: "1500", name: "Proveedores" },
+        { number: "+3000", name: "Proveedores" },
+        { number: "Ondemand", name: "agrega proveedores a tu forma" },
+      ]}
+    />,
+  ],
+  panelType: "home-plan",
+};

package/src/components/atoms/GradientPanel/index.js

@@ -1,15 +1,15 @@
-import { Container } from "./styles";
-
-export const GradientPanel = ({
-  panelColor,
-  componentsArray = [],
-  panelType,
-}) => {
-  return (
-    <Container panelColor={panelColor} className={panelType}>
-      <div className="main-container">
-        {componentsArray?.map((component)=> component)}
-      </div>
-    </Container>
-  );
-};
+import { Container } from "./styles";
+
+export const GradientPanel = ({
+  panelColor,
+  componentsArray = [],
+  panelType,
+}) => {
+  return (
+    <Container panelColor={panelColor} className={panelType}>
+      <div className="main-container">
+        {componentsArray?.map((component)=> component)}
+      </div>
+    </Container>
+  );
+};

package/src/components/atoms/GradientPanel/styles.js

@@ -1,139 +1,139 @@
-import styled from "styled-components";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  background: ${({ panelColor }) =>
-    panelColor
-      ? panelColor
-      : "linear-gradient(180deg, #E33AA9 0%, #3B1366 100%)"};
-  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-panel {
-    text-align: center;
-    h2 {
-      & + * {
-        margin-top: 20px;
-      }
-    }
-    p {
-      font-family: ${FontFamily.AvenirNext};
-      color: ${({ panelColor }) => (panelColor ? GlobalColors.s4 : "#FBFBFB")};
-      font-size: 18px;
-      line-height: 21px;
-      letter-spacing: -0.015em;
-      & + * {
-        margin-top: 20px;
-      }
-    }
-  }
-
-  &.home-login {
-    width: 100%;
-    .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};
-        }
-      }
-    }
-  }
-  &.home-card {
-    position: relative;
-    .plan {
-      text-align: center;
-      & + * {
-        margin-top: 40px;
-      }
-    }
-    .arrowimage {
-      position: absolute;
-      top: 50px;
-      left: 40px;
-    }
-    .general-text {
-      font-family: ${FontFamily.AvenirNext};
-      font-size: 14px;
-      line-height: 19px;
-      text-align: center;
-      letter-spacing: -0.015em;
-      & + * {
-        margin-top: 50px;
-      }
-    }
-    .payment-register {
-      & + * {
-        margin-top: 50px;
-      }
-    }
-    .button-continuar {
-      text-align: center;
-      & + * {
-        margin-top: 35px;
-      }
-    }
-    .continue {
-      text-align: center;
-      font-family: ${FontFamily.AvenirNext};
-      font-size: 14px;
-      line-height: 19px;
-      letter-spacing: -0.015em;
-      text-decoration-line: underline;
-      color: ${GlobalColors.s4};
-    }
-  }
-  .main-container{
-    max-width: 80%;
-    max-height: 80%;
-  }
-`;
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  background: ${({ panelColor }) =>
+    panelColor
+      ? panelColor
+      : "linear-gradient(180deg, #E33AA9 0%, #3B1366 100%)"};
+  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-panel {
+    text-align: center;
+    h2 {
+      & + * {
+        margin-top: 20px;
+      }
+    }
+    p {
+      font-family: ${FontFamily.AvenirNext};
+      color: ${({ panelColor }) => (panelColor ? GlobalColors.s4 : "#FBFBFB")};
+      font-size: 18px;
+      line-height: 21px;
+      letter-spacing: -0.015em;
+      & + * {
+        margin-top: 20px;
+      }
+    }
+  }
+
+  &.home-login {
+    width: 100%;
+    .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};
+        }
+      }
+    }
+  }
+  &.home-card {
+    position: relative;
+    .plan {
+      text-align: center;
+      & + * {
+        margin-top: 40px;
+      }
+    }
+    .arrowimage {
+      position: absolute;
+      top: 50px;
+      left: 40px;
+    }
+    .general-text {
+      font-family: ${FontFamily.AvenirNext};
+      font-size: 14px;
+      line-height: 19px;
+      text-align: center;
+      letter-spacing: -0.015em;
+      & + * {
+        margin-top: 50px;
+      }
+    }
+    .payment-register {
+      & + * {
+        margin-top: 50px;
+      }
+    }
+    .button-continuar {
+      text-align: center;
+      & + * {
+        margin-top: 35px;
+      }
+    }
+    .continue {
+      text-align: center;
+      font-family: ${FontFamily.AvenirNext};
+      font-size: 14px;
+      line-height: 19px;
+      letter-spacing: -0.015em;
+      text-decoration-line: underline;
+      color: ${GlobalColors.s4};
+    }
+  }
+  .main-container{
+    max-width: 80%;
+    max-height: 80%;
+  }
+`;

package/src/components/atoms/Graphic/Graphic.stories.js

@@ -1,29 +1,29 @@
-import { Graphic } from "./index";
-
-export default {
-  title: "Components/atoms/Graphic",
-  component: Graphic,
-};
-
-const Template = (args) => <Graphic {...args} />;
-
-export const GraphicDefault = Template.bind({});
-GraphicDefault.args = {
-  data: {
-    labels: ["Ejemplo1", "Ejemplo2"],
-    datasets: [
-      {
-        data: [89, 11],
-        backgroundColor: ["#FF0000", "blue"],
-      },
-    ],
-  },
-  options: {
-    plugins: {
-      legend: {
-        position: "left",
-      },
-    },
-  },
-  type: "doughnut",
-};
+import { Graphic } from "./index";
+
+export default {
+  title: "Components/atoms/Graphic",
+  component: Graphic,
+};
+
+const Template = (args) => <Graphic {...args} />;
+
+export const GraphicDefault = Template.bind({});
+GraphicDefault.args = {
+  data: {
+    labels: ["Ejemplo1", "Ejemplo2"],
+    datasets: [
+      {
+        data: [89, 11],
+        backgroundColor: ["#FF0000", "blue"],
+      },
+    ],
+  },
+  options: {
+    plugins: {
+      legend: {
+        position: "left",
+      },
+    },
+  },
+  type: "doughnut",
+};