contentoh-components-library 0.1.1

package/src/components/molecules/ImageSelector/index.js

@@ -0,0 +1,19 @@
+import { Container } from "./styles";
+import { ProductImage } from "../../atoms/ProductImage/index";
+
+export const ImageSelector = ({ images, setActiveImage, modalSelector }) => {
+  return (
+    <Container className={modalSelector && "modal-image-selector"}>
+      {images.length > 0 &&
+        images?.map((image, index) => (
+          <ProductImage
+            key={index}
+            img={image.img}
+            altText={image.altText}
+            imageType={modalSelector ? "catalogue-modal-image" : "carousel-image"}
+            onClick={() => setActiveImage(images[index])}
+          />
+        ))}
+    </Container>
+  );
+};

package/src/components/molecules/ImageSelector/styles.js

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  width: 340px;
+  display: flex;
+  overflow: auto;
+
+  &.modal-image-selector {
+    width: 345px;
+    height: 218px;
+    flex-wrap: wrap;
+  }
+`;

package/src/components/molecules/PlanSelection/PlanSelection.stories.js

@@ -0,0 +1,22 @@
+import { PlanSelection } from "./index";
+// import { number } from "prop-types";
+// import { GeneralTextBox } from "../../atoms/GeneralTextBox";
+// import { GeneralTextBoxDefault } from "../../atoms/GeneralTextBox/GeneralTextBox.stories";
+
+export default {
+  title: "Components/molecules/PlanSelection",
+  component: PlanSelection,
+};
+
+const Template = (args) => <PlanSelection {...args} />;
+
+export const PlanSelectionDefault = Template.bind({});
+
+PlanSelectionDefault.args = {
+  planSelection:[
+    {number:"300",name:"Proveedores"},
+    {number:"1500",name:"Proveedores"},
+    {number:"+3000",name:"Proveedores"},
+    {number:"On demand",name:"agrega proveedores a tu forma"},
+  ]
+};

package/src/components/molecules/PlanSelection/index.js

@@ -0,0 +1,26 @@
+import { Container} from "./styles";
+import { GeneralTextBox } from "../../atoms/GeneralTextBox/index";
+
+export const PlanSelection = ({ planSelection , setbuttonActive }) => {
+  const setActivePlan = (e) => { 
+    const buttonsPlan = document.querySelectorAll(".button-plan")
+    buttonsPlan.forEach((button)=>
+    button.classList.remove("active")
+    )
+    e.target.closest(".button-plan").classList.add("active")
+    setbuttonActive (true)
+  };
+  return (
+    <Container>
+      {planSelection.map((plan,index)=>
+        <GeneralTextBox 
+          className="button-plan"
+          onClick= {(e) => setActivePlan(e)}
+          key = {index}
+          number = {plan?.number}
+          name = {plan?.name}
+        />
+      )}
+      </Container>
+  );
+};

package/src/components/molecules/PlanSelection/styles.js

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: grid;
+  row-gap: 30px;
+  column-gap: 30px;
+  grid-template-columns: repeat(3, 1fr);
+  button:nth-child(4) {
+    grid-column-start: 1;
+    grid-column-end: 4;
+  }
+  & + * {
+    margin-top: 90px;
+  }
+`;

package/src/components/molecules/ProductNameHeader/ProductNameHeader.stories.js

@@ -0,0 +1,37 @@
+import { ProductNameHeader } from "./index";
+import { GlobalStatus, GlobalColors } from "../../../global-files/variables";
+
+export default {
+  title: "Components/molecules/ProductNameHeader",
+  component: ProductNameHeader,
+  argTypes: {
+    statusType: {
+      options: Object.values(GlobalStatus),
+      control: { type: "select" },
+    },
+    percent: {
+      control: { type: "range", min: 0, max: 100, step: 1 },
+    },
+    backgroundColor: {
+      options: Object.keys(GlobalColors),
+      control: { type: "select" },
+    },
+    priority: {
+      options: ["no priority", "low", "medium", "high"],
+      control: { type: "select" },
+    },
+  },
+};
+
+const Template = (args) => <ProductNameHeader {...args} />;
+
+export const ProductNameHeaderDefault = Template.bind({});
+
+ProductNameHeaderDefault.args = {
+  productName: "Nombre del producto",
+  statusType: "AP",
+  percent: 10,
+  backgroundColor: "s2",
+  priority: "no priority",
+  date: new Date().toLocaleDateString(),
+};

package/src/components/molecules/ProductNameHeader/index.js

@@ -0,0 +1,24 @@
+import { Container } from "./styles";
+import { ScreenHeader } from "../../atoms/ScreenHeader/index";
+import { StatusTag } from "../../atoms/StatusTag/index";
+import { ProgressBar } from "../../atoms/ProgressBar/index";
+import { PriorityFlag } from "../../atoms/PriorityFlag/index";
+
+export const ProductNameHeader = ({
+  productName,
+  statusType,
+  percent,
+  backgroundColor,
+  priority,
+  date,
+}) => {
+  return (
+    <Container>
+      <ScreenHeader headerType={"product-name-header"} text={productName} />
+      <StatusTag statusType={statusType} />
+      <ProgressBar percent={percent} backgroundColor={backgroundColor} />
+      <PriorityFlag priority={priority} />
+      <ScreenHeader headerType={"date-header"} text={date} />
+    </Container>
+  );
+};

package/src/components/molecules/ProductNameHeader/styles.js

@@ -0,0 +1,10 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+
+  * + * {
+    margin-left: 10px;
+  }
+`;

package/src/components/molecules/StatusAsignationInfo/StatusAsignationInfo.stories.js

@@ -0,0 +1,17 @@
+import { StatusAsignationInfo } from "./index";
+
+export default {
+  title: "Components/molecules/StatusAsignationInfo",
+  component: StatusAsignationInfo,
+};
+
+const Template = (args) => <StatusAsignationInfo {...args} />;
+
+export const StatusAsignationInfoDefault = Template.bind({});
+StatusAsignationInfoDefault.args = {
+  status: "AA",
+  image: {
+    src: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+  },
+  imagesSection: true,
+};

package/src/components/molecules/StatusAsignationInfo/index.js

@@ -0,0 +1,104 @@
+import { Container } from "./styles";
+import { ScreenHeader } from "../../atoms/ScreenHeader/index";
+import { Avatar } from "../../atoms/Avatar";
+import { StatusTag } from "../../atoms/StatusTag/index";
+import { Button } from "../../atoms/GeneralButton";
+import { useEffect, useState } from "react";
+import { AsignationOption } from "../../atoms/AsignationOption/index";
+
+export const StatusAsignationInfo = ({
+  status = "-",
+  src,
+  imagesSection,
+  setImageLayout,
+  asignationsList,
+  percent = 0,
+  id = "default-id",
+}) => {
+  const [showAsignationPanel, setShowAsignationPanel] = useState(false);
+  const [layout, setLayout] = useState(true);
+
+  const closeAsignations = (e) => {
+    if (!e.target.closest("#default-id") && showAsignationPanel) {
+      document.removeEventListener("click", closeAsignations, false);
+      setShowAsignationPanel(false);
+    }
+  };
+
+  useEffect(() => {
+    if (showAsignationPanel) {
+      document.addEventListener("click", closeAsignations, false);
+    }
+  }, [showAsignationPanel]);
+
+  return (
+    <Container
+      onClick={() => {
+        setShowAsignationPanel(true);
+      }}
+      id={id}
+    >
+      {imagesSection && (
+        <Button
+          buttonType={layout ? "grid-layout" : "row-layout"}
+          onClick={() => {
+            setLayout(!layout);
+            setImageLayout(!layout);
+          }}
+        />
+      )}
+      <StatusTag statusType={status} ovalForm={true} />
+      <Avatar
+        imageType={"small-image"}
+        image={src}
+        altText="user profile image"
+      />
+      <ScreenHeader
+        text={"Asig."}
+        color={"#969696"}
+        fontFamily={"Avenir Next"}
+        headerType={"input-name-header"}
+      />
+      {showAsignationPanel && (
+        <div className="asignation-panel">
+          <div className="asignation-header">
+            <div className="asignation-status">
+              <p>Estatus</p>
+              <StatusTag statusType={status} ovalForm={true} />
+            </div>
+            <div className="asignation-percent">
+              <p>Estatus</p>
+              <p className="percent">{percent}%</p>
+            </div>
+          </div>
+          <div className="asignations-list">
+            {asignationsList !== undefined ? (
+              asignationsList.map((asigantion, index) => (
+                <AsignationOption
+                  profileImage={asignation.image}
+                  asignationType={asignation.asignationType}
+                  name={asignation.name}
+                  team={asigantion.team}
+                />
+              ))
+            ) : (
+              <p className="no-asignations">Sin personas para asignar</p>
+            )}
+          </div>
+          <div className="default-asignations-list">
+            <AsignationOption
+              asignationType={"provider"}
+              name={"Solicitar a"}
+              team={"Proveedor"}
+            />
+            <AsignationOption
+              asignationType={"team"}
+              name={"Solicitar a"}
+              team={"Content-oh!"}
+            />
+          </div>
+        </div>
+      )}
+    </Container>
+  );
+};

package/src/components/molecules/StatusAsignationInfo/styles.js

@@ -0,0 +1,66 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  > * + * {
+    margin-left: 8px;
+  }
+
+  .asignation-panel {
+    background: ${GlobalColors.s2};
+    border: 1px solid ${GlobalColors.s3};
+    box-sizing: border-box;
+    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
+    border-radius: 4px;
+    padding: 10px;
+    position: absolute;
+    top: calc(100% + 10px);
+    right: 0;
+
+    .asignation-header {
+      display: flex;
+      justify-content: space-between;
+
+      .asignation-status,
+      .asignation-percent {
+        & > p {
+          font-family: ${FontFamily.AvenirNext};
+          font-weight: 500;
+          font-size: 14px;
+          line-height: 16px;
+          color: ${GlobalColors.s5};
+        }
+      }
+
+      .asignation-percent {
+        text-align: right;
+      }
+
+      & + * {
+        margin-top: 10px;
+      }
+    }
+
+    .asignations-list {
+      min-height: 40px;
+      border-bottom: 1px solid ${GlobalColors.s3};
+
+      .no-asignations {
+        padding: 5px;
+        font-family: ${FontFamily.AvenirNext};
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 16px;
+        color: ${GlobalColors.s5};
+      }
+
+      & + * {
+        margin-top: 10px;
+      }
+    }
+  }
+`;

package/src/components/molecules/TableHeader/TableHeader.stories.js

@@ -0,0 +1,20 @@
+import { TableHeader } from "./index";
+
+export default {
+  title: "Components/molecules/TableHeader",
+  component: TableHeader,
+};
+
+const Template = (args) => <TableHeader {...args} />;
+
+export const TableHeaderDefault = Template.bind({});
+
+TableHeaderDefault.args = {
+  imageData: {
+    image: {
+      name: "Hero.jpg",
+      src: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+    },
+    status: "AA",
+  },
+};

package/src/components/molecules/TableHeader/index.js

@@ -0,0 +1,17 @@
+import { Container } from "./styles";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { StatusAsignationInfo } from "../StatusAsignationInfo";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const TableHeader = ({ headerInfo, activeImage }) => {
+  return (
+    <Container>
+      <ScreenHeader
+        text={activeImage?.name}
+        color={GlobalColors.s5}
+        headerType={"input-name-header"}
+      />
+      <StatusAsignationInfo status={headerInfo?.status} src={headerInfo?.src} />
+    </Container>
+  );
+};

package/src/components/molecules/TableHeader/styles.js

@@ -0,0 +1,22 @@
+import styled from "styled-components";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: 5px;
+  border-bottom: 1px solid ${GlobalColors.s2};
+
+  .status-asignation-info {
+    display: flex;
+    align-items: center;
+
+    * + * {
+      margin-left: 5px;
+    }
+  }
+
+  & + * {
+    margin-top: 4px;
+  }
+`;

package/src/components/molecules/TableRow/TableRow.stories.js

@@ -0,0 +1,18 @@
+import { TableRow } from ".";
+
+export default {
+  title: "Components/molecules/TableRow",
+  component: TableRow,
+  argTypes: {
+    valueType: {
+      options: [true, false],
+      control: { type: "boolean" },
+    },
+  },
+};
+
+const Template = (args) => <TableRow {...args} />;
+
+export const TableRowDefault = Template.bind({});
+
+TableRowDefault.args = {};

package/src/components/molecules/TableRow/index.js

@@ -0,0 +1,14 @@
+import { Container } from "./styles";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+
+export const TableRow = ({ feature, value, valueType }) => {
+  return (
+    <Container>
+      <ScreenHeader headerType={"table-row-text"} text={feature} />
+      <ScreenHeader
+        headerType={"table-row-text " + (valueType && "gray-table-row")}
+        text={value}
+      />
+    </Container>
+  );
+};

package/src/components/molecules/TableRow/styles.js

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  & + * {
+    margin-top: 4px;
+  }
+`;

package/src/components/molecules/TabsMenu/TabsMenu.stories.js

@@ -0,0 +1,19 @@
+import { TabsMenu } from "./index";
+
+export default {
+  title: "Components/molecules/TabsMenu",
+  component: TabsMenu,
+};
+
+const Template = (args) => <TabsMenu {...args} />;
+
+export const TabsSectionDefault = Template.bind({});
+
+TabsSectionDefault.args = {
+  tabsSections: {
+    Descripción: true,
+    "Ficha técnica": false,
+    Imágenes: false,
+    "Golden SKU": false,
+  },
+};

package/src/components/molecules/TabsMenu/index.js

@@ -0,0 +1,30 @@
+import { Container } from "./styles";
+import { TabSection } from "../../atoms/TabSection";
+import { useEffect, useState } from "react";
+
+export const TabsMenu = ({ tabsSections, setImagesSection, setActiveTab }) => {
+  const [sections, setSections] = useState(tabsSections);
+
+  const activeSection = (key, array) => {
+    let tempArray = {};
+    setImagesSection(key === "Imágenes");
+    Object.keys(array).forEach((section) => {
+      tempArray[section] = section === key;
+      if (section === key) setActiveTab(key);
+    });
+    setSections(tempArray);
+  };
+
+  return (
+    <Container>
+      {Object.keys(sections).map((key, index) => (
+        <TabSection
+          key={index}
+          label={key}
+          active={sections[key]}
+          onClick={() => activeSection(key, sections)}
+        />
+      ))}
+    </Container>
+  );
+};

package/src/components/molecules/TabsMenu/styles.js

@@ -0,0 +1,5 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+`;

package/src/components/molecules/TagAndInput/TagAndInput.stories.js

@@ -0,0 +1,24 @@
+import { TagAndInput } from "./index";
+
+export default {
+  title: "Components/molecules/TagAndInput",
+  component: TagAndInput,
+};
+
+const Template = (args) => <TagAndInput {...args} />;
+
+export const InputType = Template.bind({});
+InputType.args = {
+  label: "Default text label",
+  inputType: "text",
+  value: "default text",
+  inputPlaceHolder: "default placeholder",
+};
+
+export const TextAreaType = Template.bind({});
+TextAreaType.args = {
+  label: "Default textarea label",
+  inputType: "textarea",
+  value: "default textarea text",
+  inputPlaceHolder: "default textarea placeholder",
+};

package/src/components/molecules/TagAndInput/index.js

@@ -0,0 +1,16 @@
+import { Container } from "./styles";
+import { ScreenHeader } from "../../atoms/ScreenHeader/index";
+import { GeneralInput } from "../../atoms/GeneralInput/index";
+
+export const TagAndInput = ({ inputType, label, value, inputPlaceHolder }) => {
+  return (
+    <Container inputType={inputType} className={"input-container"}>
+      <ScreenHeader text={label} headerType={"input-name-header"} />
+      <GeneralInput
+        inputType={inputType}
+        inputValue={value}
+        inputPlaceholder={inputPlaceHolder}
+      />
+    </Container>
+  );
+};

package/src/components/molecules/TagAndInput/styles.js

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  & > :first-child {
+    & + * {
+      margin-top: ${({ inputType }) => (inputType === "text" ? 4 : 15)}px;
+    }
+  }
+`;

package/src/components/molecules/TextAndGradient/TextAndGradient.stories.js

@@ -0,0 +1,23 @@
+import { TextAndGradient } from "./index";
+import Cadena from '../../../assets/images/providerAndCadena/Cadena.svg';
+
+export default {
+    title: "Components/molecules/TextAndGradient",
+    component: TextAndGradient,
+};
+  
+  const Template = (args) => <TextAndGradient {...args} />;
+  
+  export const TextAndGradientDefault = Template.bind({});
+
+TextAndGradientDefault.args = {
+  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",
+    ],
+  },
+};

package/src/components/molecules/TextAndGradient/index.js

@@ -0,0 +1,23 @@
+import { Container } from "./styles";
+import { AtomList } from "../../atoms/AtomList";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const TextAndGradient = ({ title, image, containerList }) => {
+  return (
+    <Container>
+      <div className="title">
+        <ScreenHeader
+          className="title"
+          headerType={"with-bold-text"}
+          text={title}
+          color={GlobalColors.s1}
+        />
+      </div>
+      {image && <img src={image}/>}
+      <div className="list">
+        <AtomList content={containerList.content} />
+      </div>
+    </Container>
+  );
+};

package/src/components/molecules/TextAndGradient/styles.js

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+
+export const Container = styled.button`
+
+    position: absolute;
+    width: 720px;
+    height: 720px;
+    left: 0px;
+    top: 0px;
+    background: linear-gradient(180deg, #E33AA9 0%, #3B1366 100%);
+    align-content: center;
+
+    .title{
+        position: absolute;
+        width: 475px;
+        height: 36px;
+        left: 110px;
+        top: 140px;
+        letter-spacing: -0.015em;
+        font-feature-settings: 'pnum' on, 'lnum' on;
+    }
+    .list{
+        position: absolute;
+        height: 160px;
+        left: 180px;
+        top: 219px;
+        font-family: Raleway;
+        font-style: normal;
+        font-weight: 500;
+        font-size: 18px;
+        line-height: 40px;
+        letter-spacing: -0.015em;
+        text-align: left;
+        
+    }
+
+`;