contentoh-components-library 0.1.1 → 8.0.0

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

@@ -0,0 +1,126 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+import closeIcon from "../../../assets/images/genericModal/genericModalClose.svg";
+
+export const Container = styled.div`
+  width: 100%;
+  height: 100%;
+  background-color: ${GlobalColors.white};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  background-color: rgba(59, 59, 59, 0.53);
+  backdrop-filter: blur(4px);
+
+  .global-styles {
+    background-color: ${GlobalColors.deep_gray};
+    height: auto;
+    width: auto;
+    position: relative;
+    border-radius: 15px;
+    padding: 40px;
+    text-align: center;
+    .close-button {
+      background-image: url(${closeIcon});
+      background-color: transparent;
+      width: 14px;
+      height: 14px;
+      cursor: pointer;
+      border: none;
+      position: absolute;
+      right: 20px;
+      top: 20px;
+    }
+    .general-white-button {
+      width: 160px;
+      height: 40px;
+      color: ${GlobalColors.s2};
+      border: 1px solid ${GlobalColors.white};
+      background-color: transparent;
+      & + * {
+        margin-left: 45px;
+        height: 40px;
+        width: 161px;
+      }
+    }
+
+    &.log-out {
+      padding-bottom: 60px;
+      img {
+        & + * {
+          margin-top: 20px;
+        }
+      }
+      .with-bold-text {
+        font-size: 24px;
+        & + * {
+          margin-top: 20px;
+        }
+      }
+    }
+
+    &.delete-product {
+      img {
+        height: 50px;
+        width: 56px;
+        & + * {
+          margin-top: 30px;
+        }
+      }
+      .product-name-header {
+        & + * {
+          margin-bottom: 30px;
+        }
+      }
+    }
+
+    &.product-edition {
+      padding-top: 50px;
+      .product-name-header {
+        & + * {
+          margin-top: 25px;
+        }
+      }
+    }
+
+    &.send-invitation {
+      width: 604px;
+      img {
+        & + * {
+          margin-top: 40px;
+        }
+      }
+      p {
+        font-family: ${FontFamily.Raleway_500};
+        font-style: normal;
+        font-size: 24px;
+        color: ${GlobalColors.white};
+        line-height: 28px;
+        span {
+          font-family: ${FontFamily.Raleway_700};
+        }
+      }
+    }
+
+    &.upload-image {
+      width: 430px;
+      padding: 50px;
+      img {
+        & + * {
+          margin-top: 33px;
+        }
+      }
+      .input-name-header {
+        & + * {
+          margin-top: 20px;
+        }
+      }
+      .list-container {
+        & + .general-button-default {
+          margin-top: 40px;
+        }
+      }
+    }
+  }
+`;

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

@@ -3,6 +3,12 @@ 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",
@@ -18,10 +24,111 @@ GradientPanelDefault.args = {
       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"
     />,
-    <CustomerTypeImages />,
-    <p>Elige esta opción si eres una Cadena Retailer.</p>,
-  <Button buttonType={"general-white-button"} label={"Seleccionar"} />,
   ],
   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">Olvide 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

@@ -7,7 +7,9 @@ export const GradientPanel = ({
 }) => {
   return (
     <Container panelColor={panelColor} className={panelType}>
-      {componentsArray.map((component) => component)}
+      <div className="main-container">
+        {componentsArray?.map((component)=> component)}
+      </div>
     </Container>
   );
-};
+};

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

@@ -6,24 +6,127 @@ export const Container = styled.div`
     panelColor
       ? panelColor
       : "linear-gradient(180deg, #E33AA9 0%, #3B1366 100%)"};
+  display: flex;
   height: 100%;
+  justify-content: center;
+  align-items: center;
 
-  
   &.home-panel {
-    
     text-align: center;
-    padding: 80px;
     h2 {
       & + * {
-        margin-top: 5px;
+        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 {
+    .credenciales {
+      & + * {
+        margin-top: 30px;
       }
     }
-    p{
-      font-family:${FontFamily.AvenirNext};
-      color: ${({panelColor})=> panelColor? GlobalColors.s4 :"#FBFBFB"};
+    .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

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

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

@@ -0,0 +1,18 @@
+import { Container } from "./styles";
+import { Chart } from "react-chartjs-2";
+import "chart.js/auto";
+
+export const Graphic = ({ data }) => {
+  const options = {
+    plugins: {
+      legend: {
+        position: "left",
+      },
+    },
+  };
+  return (
+    <Container>
+      <Chart type="doughnut" data={data} options={options} />
+    </Container>
+  );
+};

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

@@ -0,0 +1,4 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+`;

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

@@ -0,0 +1,14 @@
+import { MainContainer, InputCustom } from "./style";
+
+export default function Input(props) {
+  return (
+    <MainContainer width={props.width} error={props.error}>
+      <InputCustom
+        onChange={(event) =>
+          props.onChange && props.onChange(event.target.value)
+        }
+        {...props}
+      />
+    </MainContainer>
+  );
+}

package/src/components/atoms/Input/style.js

@@ -0,0 +1,27 @@
+import styled from "styled-components";
+
+export const MainContainer = styled.div`
+  display: flex;
+  align-items: center;
+  width: ${(props) => (props.width ? props.width : "150px")};
+  height: 20px;
+  padding: 0 5px;
+  box-sizing: border-box;
+  background: #fafafa;
+  border-radius: 2px;
+  border: ${(props) => props.error && "1px solid red"};
+`;
+
+export const InputCustom = styled.input`
+  border-width: 0;
+  width: 100%;
+  font-family: Avenir Next;
+  font-style: normal;
+  font-weight: normal;
+  border-width: 0;
+  background-color: rgba(0, 0, 0, 0);
+  &::placeholder {
+    font-size: 12px;
+    color: #d4d1d7;
+  }
+`;

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

@@ -0,0 +1,27 @@
+import React, { useState, useEffect } from "react";
+import { MainContainer } from "./style";
+import Input from "../Input";
+
+export default function LabelToInput(props) {
+  const [isActive, setIsActive] = useState(false);
+  const [defaultValue, setDefaultValue] = useState("");
+  useEffect(() => {
+    setDefaultValue(props.defaultValue === "" ? "-" : props.defaultValue);
+  }, [props.defaultValue]);
+  return (
+    <MainContainer width={props.width} error={!isActive && props.error}>
+      {!isActive ? (
+        <p onClick={() => setIsActive(true)}>{defaultValue}</p>
+      ) : (
+        <Input
+          {...props}
+          width={"100%"}
+          onBlur={() => {
+            props.onBlur && props.onBlur();
+            setIsActive(false);
+          }}
+        />
+      )}
+    </MainContainer>
+  );
+}

package/src/components/atoms/LabelToInput/style.js

@@ -0,0 +1,30 @@
+import styled from "styled-components";
+
+export const MainContainer = styled.div`
+  display: flex;
+  align-items: center;
+  width: ${(props) => (props.width ? props.width : "150px")};
+  height: 20px;
+  padding: 0 5px;
+  box-sizing: border-box;
+  border-radius: 2px;
+  margin-left: 15px;
+  white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  & > p {
+    color: #000;
+  }
+  border: ${(props) => props.error && "1px solid red"};
+  ::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+  }
+  ::-webkit-scrollbar-track {
+    background: #f1f1f1;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: #d4d1d7;
+    border-radius: 3px;
+  }
+`;

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

@@ -0,0 +1,17 @@
+import { LoadImageMenu } from "./index";
+
+export default {
+  title: "Components/atoms/LoadImageMenu",
+  component: LoadImageMenu,
+};
+
+const Template = (args) => <LoadImageMenu {...args} />;
+
+export const LoadImageMenuDefault = Template.bind({});
+
+LoadImageMenuDefault.args = {
+  tipo: "Tipo de imagen ",
+  product: "Render",
+  content: [{ label: "fotografía del producto" }],
+  id: "menu-image-type"
+};

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

@@ -0,0 +1,58 @@
+import { Container } from "./styles";
+import GenericModalDown from "../../../assets/images/genericModal/genericModalDown.svg";
+import GenericModalUp from "../../../assets/images/genericModal/genericModalUp.svg";
+import { useEffect, useState } from "react";
+
+export const LoadImageMenu = ({ tipo, product, content, id }) => {
+  const [showMenu, setShowMenu] = useState(false);
+  const closeMenu = (e) => {
+    if (!e.target.closest("#" + id) && showMenu) {
+      document.removeEventListener("click", closeMenu, false);
+      setShowMenu(false);
+    }
+  };
+  useEffect(() => {
+    if (showMenu) {
+      document.addEventListener("click", closeMenu, false);
+    }
+  }, [showMenu]);
+  return (
+    <Container
+      onClick={(e) => {
+        setShowMenu(!showMenu);
+        if (showMenu) {
+          document.removeEventListener("click", closeMenu, false);
+        }
+      }}
+      className={"list-container " + (showMenu && "show-menu")}
+    >
+      <p className="tipo">
+        {tipo}
+        <span>*</span>
+      </p>
+      <p className="products">
+        {product}
+        <img
+          src={showMenu ? GenericModalUp : GenericModalDown}
+          alt="Check icon"
+        />
+      </p>
+      {showMenu && (
+        <div id={id} className="upload-image-menu">
+          <ul className="overall-list">
+            {content?.map((item, index) => (
+              <li
+                key={index + item.label}
+                onClick={() => {
+                  console.log(item.label);
+                }}
+              >
+                <p>{item.label}</p>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </Container>
+  );
+};

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

@@ -0,0 +1,72 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.button`
+  background: transparent;
+  border: 1px solid ${GlobalColors.s3};
+  border-radius: 7px;
+  padding: 5px;
+  width: 310px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: auto;
+  cursor: pointer;
+  position: relative;
+  & + * {
+    margin-top: 7px;
+  }
+  p {
+    font-family: ${FontFamily.AvenirNext};
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 18px;
+    color: ${GlobalColors.s3};
+    letter-spacing: -0.015em;
+    span {
+      color: ${GlobalColors.white};
+    }
+  }
+  .products {
+    line-height: 13px;
+    font-weight: 500;
+    img {
+      margin-left: 3px;
+    }
+  }
+  &.show-menu {
+    border: 1px solid ${GlobalColors.magenta_s2};
+    .tipo {
+      color: ${GlobalColors.s5};
+    }
+    .products {
+      color: ${GlobalColors.s4};
+    }
+  }
+  .upload-image-menu {
+    width: 310px;
+    height: auto;
+    border-radius: 7px;
+    background-color: ${GlobalColors.s2};
+    padding: 5px 20px;
+    border: 1px solid ${GlobalColors.s3};
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    position: absolute;
+    left: calc(50% - 155px);
+    top: 35px;
+    z-index: 1;
+    .overall-list {
+      list-style: none;
+      li {
+        & + * {
+          margin-top: 7px;
+        }
+        p {
+          line-height: 16px;
+          color: ${GlobalColors.s4};
+          text-align: right;
+        }
+      }
+    }
+  }
+`;