contentoh-components-library 0.1.1 → 6.0.0

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

@@ -0,0 +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",
+  },
+};

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

@@ -0,0 +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>
+  );
+};

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

@@ -0,0 +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;
+    }
+  }
+`;

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

@@ -17,18 +17,18 @@ export const CustomerTypeDefault = Template.bind({});
 CustomerTypeDefault.args = {
   homeLeft:{
     componentsArray:[
-    <ScreenHeader fontFamily={FontFamily.Raleway_600} color={GlobalColors.white} text={"Cadena"}/>,
-    <CustomerTypeImages />,
-    <p>Elige esta opción si eres una Cadena Retailer.</p>,
-    <Button buttonType={"general-white-button"} label={"Seleccionar"} />,
+    <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"}/>,
-    <CustomerTypeImages className={"imagen"} imageType/>,
-    <p>Elige esta opción si eres una Proveedor o Dueño de producto.</p>,
-    <Button buttonType={"general-default-button"} label={"Seleccionar"} />,
+    <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/styles.js

@@ -1,9 +1,9 @@
 import styled from "styled-components";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
 
 export const Container = styled.div`
   display: flex;
   width: 100%;
+  height: 100vh;
 
   .home-retailer,
   .home-provider {

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

@@ -1,8 +1,12 @@
 import { OnboardPlan } from "./index";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { AtomList } from "../../atoms/AtomList";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+import { FullPlan } from "../../organisms/Fullplan";
 
 export default {
   title: "Components/pages/OnboardPlan",
-  component: OnboardPlan,
+  Component: OnboardPlan,
 };
 
 const Template = (args) => <OnboardPlan {...args} />;
@@ -10,27 +14,38 @@ export const OnboardPlanDefault = Template.bind({});
 
 OnboardPlanDefault.args = {
   leftPanel: {
-    title: "Beneficios de cadenas",
-    containerList: {
-      content: [
-        "Crea proveedores y agregalos a tu cadena",
-        "Valida los proveedores",
-        "Solicita actualización a proveedores",
-        "Analiza el número de productos totales",
-      ],
-    },
+    componentsArray: [
+      <ScreenHeader
+        key="1"
+        fontFamily={FontFamily.Raleway_600}
+        color={GlobalColors.white}
+        text={"Beneficios de cadenas"}
+      />,
+      <AtomList
+        key="2"
+        content={[
+          "Crea proveedores y agregalos a tu cadena",
+          "Solicita actualización a proveedores",
+          "Valida los proveedores",
+          "Analiza el número de productos totales",
+        ]}
+      />,
+    ],
   },
+
   planContainerData: {
-    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: {
-      planSelection: [
-        { number: "300", name: "Proveedores" },
-        { number: "1500", name: "Proveedores" },
-        { number: "+3000", name: "Proveedores" },
-        { number: "Ondemand", name: "agrega proveedores a tu forma" },
-      ],
-    },
+    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" },
+        ]}
+      />,
+    ],
   },
 };

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

@@ -1,21 +1,20 @@
 import { Container } from "./styles";
-import { TextAndGradient } from "../../molecules/TextAndGradient";
-import { FullPlan } from "../../organisms/Fullplan";
+import { GradientPanel } from "../../atoms/GradientPanel";
 
 export const OnboardPlan = ({ leftPanel, planContainerData }) => {
   return (
     <Container>
       <div className="left">
-        <TextAndGradient
-          title={leftPanel.title}
-          containerList={leftPanel.containerList}
+        <GradientPanel
+          componentsArray={leftPanel.componentsArray}
+          panelType={"home-panel"}
         />
       </div>
       <div className="rigth">
-        <FullPlan
-          title={planContainerData.title}
-          textGeneral={planContainerData.textGeneral}
-          containerData={planContainerData.containerData}
+        <GradientPanel
+          panelColor
+          componentsArray={planContainerData.componentsArray}
+          panelType={"home-plan"}
         />
       </div>
     </Container>

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

@@ -1,15 +1,24 @@
 import styled from "styled-components";
 
 export const Container = styled.div`
-
   display: flex;
-  flex-direction: row-reverse;
-  width: 1440px;
-  height: 720px;
+  width: 100%;
+  height: 100vh;
+  
+  .left,
+  .rigth {
+    width: 50%;
+  }
+  .left {
+    .title {
+      & + * {
+        margin-top: 35px;
+      }
+    }
+  }
   .rigth {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+display: flex;
+align-items: center;
     .title {
       & + * {
         margin-top: 30px;
@@ -20,8 +29,5 @@ export const Container = styled.div`
         margin-top: 50px;
       }
     }
-    /* button{
-            margin:auto;
-        } */
   }
 `;

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

@@ -0,0 +1,49 @@
+import { RetailerPlan } from "./index";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { AtomList } from "../../atoms/AtomList";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+import { FullPlan } from "../../organisms/Fullplan";
+
+export default {
+  title: "Components/pages/RetailerPlan",
+  Component: RetailerPlan,
+};
+
+const Template = (args) => <RetailerPlan {...args} />;
+export const RetailerPlanDefault = Template.bind({});
+
+RetailerPlanDefault.args = {
+  retailerLeft: {
+    componentsArray: [
+      <ScreenHeader
+        key="1"
+        fontFamily={FontFamily.Raleway_600}
+        color={GlobalColors.white}
+        text={"Benficios de crear productos"}
+      />,
+      <AtomList
+        key="2"
+        content={[
+          "Crea productos",
+          "Solicita actualización",
+          "Revisa, valida o rechaza productos",
+          "Comparte con colaboradores",
+        ]}
+      />,
+    ],
+  },
+  planRetailerData: {
+    componentsArray: [
+      <FullPlan
+        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" },
+        ]}
+        key="1"
+      />,
+    ],
+  },
+};

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

@@ -0,0 +1,24 @@
+import { Container } from "./styles";
+import { GradientPanel } from "../../atoms/GradientPanel";
+import { FullPlan } from "../../organisms/Fullplan";
+
+
+export const RetailerPlan = ({ retailerLeft, planRetailerData }) => {
+  return (
+    <Container>
+      <div className="left-retailer">
+        <GradientPanel
+          componentsArray={retailerLeft.componentsArray}
+          panelType={"home-panel"}
+        />
+      </div>
+      <div className="righ-retailer">
+      <GradientPanel
+          panelColor
+          componentsArray={planRetailerData.componentsArray}
+          panelType={"home-plan"}
+        />
+      </div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,27 @@
+import  styled from "styled-components";
+
+export const Container = styled.div`
+display: flex;
+width: 100%;
+height: 100vh;
+
+
+  .righ-retailer,
+  .left-retailer{
+      width: 50%;
+  }
+  
+  .righ-retailer {
+    .title {
+      & + * {
+        margin-top: 30px;
+      }
+    }
+    .general-text {
+      & + * {
+        margin-top: 50px;
+      }
+    }
+  }
+
+`;