contentoh-components-library 0.1.1 → 6.0.0

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

@@ -10,12 +10,12 @@ export const Container = styled.div`
 
     .buttons-container {
       position: absolute;
-      top: 0;
+      top: 5px;
+      left: 5px;
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 0 5px;
     }
 
     .image-container {
@@ -40,10 +40,10 @@ export const Container = styled.div`
   &.row-gallery {
     display: flex;
     align-items: center;
+    padding-right: 10px;
 
     .buttons-container {
       position: relative;
-      width: 58px;
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -52,18 +52,17 @@ export const Container = styled.div`
     .image-container {
       display: flex;
       align-items: center;
+      flex: 1;
       .information-container {
         display: flex;
+        flex: 1;
 
         p {
           font-family: ${FontFamily.Lato};
           color: ${GlobalColors.s4};
           font-size: 14px;
           line-height: 17px;
-
-          & + p {
-            margin-left: 18px;
-          }
+          text-align: center;
 
           &.highlighted-data {
             font-family: ${FontFamily.AvenirNext};
@@ -75,12 +74,40 @@ export const Container = styled.div`
             line-height: 18px;
             padding: 0 10px;
           }
+
+          &:nth-child(1) {
+            //min-width: calc(20% - 76px);
+            //flex: 1 0 20%;
+            min-width: 22%;
+          }
+
+          &:nth-child(2),
+          &:nth-child(3) {
+            text-align: center;
+          }
+          &:nth-child(2) {
+            max-width: 90px;
+            min-width: 90px;
+          }
+          &:nth-child(3) {
+            max-width: 60px;
+            min-width: 60px;
+          }
+          /* &:nth-child(4) {
+            max-width: 90px;
+            min-width: 90px;
+          }
+          &:nth-child(5) {
+            max-width: 80px;
+            min-width: 80px;
+          } */
         }
-      }
-    }
 
-    & > * + * {
-      margin-left: 18px;
+        & > * {
+          flex: 1;
+          padding: 5px;
+        }
+      }
     }
   }
 `;

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

@@ -0,0 +1,10 @@
+import { GalleryHeader } from ".";
+
+export default {
+  title: "Components/molecules/GalleryHeader",
+  component: GalleryHeader,
+};
+
+const Template = (args) => <GalleryHeader {...args} />;
+export const GalleryHeaderDefault = Template.bind({});
+GalleryHeaderDefault.args = {};

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

@@ -0,0 +1,19 @@
+import { Container } from "./styles";
+import { CheckBox } from "../../atoms/CheckBox";
+
+export const GalleryHeader = () => {
+  return (
+    <Container>
+      <div>
+        <CheckBox />
+      </div>
+      <p className="image-header">Image</p>
+      <p className="image-name">Nombre</p>
+      <p className="image-size">Tamaño</p>
+      <p className="image-format">Formato</p>
+      <p className="">Tipo de toma</p>
+      <p className="">Tipo de imagen</p>
+      <p className="">Tipo de empaque</p>
+    </Container>
+  );
+};

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

@@ -0,0 +1,45 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  padding: 10px;
+  padding-left: 0;
+  align-items: center;
+
+  p {
+    font-family: ${FontFamily.AvenirNext};
+    font-style: normal;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 21px;
+    letter-spacing: -0.015em;
+    color: ${GlobalColors.s5};
+    flex: 1;
+    text-align: center;
+
+    &.value-header {
+      max-width: 60px;
+    }
+
+    &.image-header {
+      max-width: 60px;
+    }
+
+    &.image-name {
+      min-width: 20%;
+    }
+
+    &.image-format {
+      max-width: 60px;
+    }
+
+    &.image-size {
+      max-width: 90px;
+    }
+
+    &.image-identifier {
+      max-width: 80px;
+    }
+  }
+`;

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

@@ -1,19 +1,22 @@
 import { Container } from "./styles";
 import { ProductImage } from "../../atoms/ProductImage/index";
 
-export const ImageSelector = ({ images, setActiveImage, modalSelector }) => {
+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])}
-          />
-        ))}
+      {images?.values?.map((image, index) => (
+        <ProductImage
+          key={index}
+          img={image.src}
+          altText={image.altText}
+          imageType={modalSelector ? "catalogue-modal-image" : "carousel-image"}
+          onClick={() => setActiveImage(index)}
+        />
+      ))}
     </Container>
   );
 };

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

@@ -0,0 +1,18 @@
+import { ParentComponent } from "./index";
+
+export default {
+  title: "Components/molecules/ParentComponent",
+  component: ParentComponent,
+  decorators: [
+    (Story) => (
+      <ParentComponent>
+        <Story />
+      </ParentComponent>
+    ),
+  ],
+};
+
+const Template = (args) => <ParentComponent {...args} />;
+export const ParentComponentDefault = Template.bind({});
+
+ParentComponentDefault.args = {};

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

@@ -0,0 +1,66 @@
+import { Container } from "./styles";
+import { SidebarNotification } from "../SidebarNotification/index";
+import { useEffect, useState } from "react";
+import profileImg from "../../../assets/images/defaultImages/defaultProfileImage.svg";
+
+export const ParentComponent = () => {
+  const [showSidebar, setShowSidebar] = useState(true);
+  const array = [
+    {
+      dates: "2/16/2022",
+      notifications: [
+        {
+          profilePicture: profileImg,
+          notification: "ODT 23441244",
+          newNotification: true,
+        },
+        {
+          profilePicture: profileImg,
+          notification: "ODT 23441244",
+          newNotification: true,
+        },
+      ],
+    },
+    {
+      dates: "2/14/2022",
+      notifications: [
+        {
+          profilePicture: profileImg,
+          notification: "ODT 23441244",
+          newNotification: true,
+        },
+        {
+          profilePicture: profileImg,
+          notification: "ODT 23441244",
+          newNotification: true,
+        },
+      ],
+    },
+    {
+      dates: "2/17/2022",
+      notifications: [
+        {
+          profilePicture: profileImg,
+          notification: "ODT 23441244",
+          newNotification: true,
+        },
+        {
+          profilePicture: profileImg,
+          notification: "ODT 23441244",
+          newNotification: true,
+        },
+      ],
+    },
+  ];
+  return (
+    <Container>
+      {showSidebar && (
+        <SidebarNotification
+          array={array}
+          showSidebar={showSidebar}
+          setShowSidebar={setShowSidebar}
+        ></SidebarNotification>
+      )}
+    </Container>
+  );
+};

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

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  position: relative;
+  height: 100vh;
+  width: 100%;
+`;

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

@@ -0,0 +1,12 @@
+import { PayMethod } from "./index";
+
+export default {
+  title: "Components/molecules/PayMethod",
+  component: PayMethod,
+};
+
+const Template = (args) => <PayMethod {...args} />;
+
+export const PayMethodDefault = Template.bind({});
+
+PayMethodDefault.args = {};

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

@@ -0,0 +1,46 @@
+import { Container } from "./styles";
+import { ScreenHeader } from "../../atoms/ScreenHeader/index";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+import { Card } from "../../atoms/Card";
+import { TagAndInput } from "../TagAndInput";
+import masterCardIcon from "../../../assets/images/card/masterCardIcon.svg";
+
+export const PayMethod = ({}) => {
+  return (
+    <Container key={`pay`}>
+      <div className="master">
+        <ScreenHeader
+          fontFamily={FontFamily.AvenirNext}
+          color={GlobalColors.s5}
+          headerType={"input-name-header"}
+          text={"Agrega tarjeta de credito"}
+        />
+        <Card cardIcon={masterCardIcon} altText={"master-card-icon"} />
+      </div>
+      <div className="card-number">
+        <TagAndInput
+          inputType={"text"}
+          label={"Número de tarjeta de credito"}
+          inputPlaceHolder={"1234 5678 1234 5678"}
+        />
+      </div>
+      <div className="card-data">
+        <TagAndInput
+          inputType={"text"}
+          label={"Nombre del titular"}
+          inputPlaceHolder={"Bart Simpson"}
+        />
+        <TagAndInput
+          inputType={"text"}
+          label={"Expira"}
+          inputPlaceHolder={"22/27"}
+        />
+        <TagAndInput
+          inputType={"text"}
+          label={"CVV"}
+          inputPlaceHolder={"***"}
+        />
+      </div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,31 @@
+import styled from "styled-components";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  border: 2px solid ${GlobalColors.s2};
+  border-radius: 7px;
+  padding: 15px 25px;
+
+  .card-number{ 
+    & + * {
+        margin-top: 5px;
+      }
+  }
+  .master {
+    display: flex;
+    justify-content: space-between;
+  }
+  .card-data {
+    display: flex;
+    justify-content: space-between;
+    .input-container {
+      flex: 1;
+      &:first-child {
+        flex: 3;
+      }
+      & + * {
+        margin-left: 10px;
+      }
+    }
+  }
+`;

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

@@ -1,7 +1,5 @@
 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",

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

@@ -12,7 +12,7 @@ export const PlanSelection = ({ planSelection , setbuttonActive }) => {
   };
   return (
     <Container>
-      {planSelection.map((plan,index)=>
+      {planSelection?.map((plan,index)=>
         <GeneralTextBox 
           className="button-plan"
           onClick= {(e) => setActivePlan(e)}

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

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

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

@@ -8,7 +8,6 @@ export const ProductNameHeader = ({
   productName,
   statusType,
   percent,
-  backgroundColor,
   priority,
   date,
 }) => {
@@ -16,7 +15,7 @@ export const ProductNameHeader = ({
     <Container>
       <ScreenHeader headerType={"product-name-header"} text={productName} />
       <StatusTag statusType={statusType} />
-      <ProgressBar percent={percent} backgroundColor={backgroundColor} />
+      <ProgressBar percent={percent} progressBarType={statusType} />
       <PriorityFlag priority={priority} />
       <ScreenHeader headerType={"date-header"} text={date} />
     </Container>

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

@@ -0,0 +1,13 @@
+import { ProductNotification } from "./index";
+
+export default {
+  title: "Components/molecules/ProductNotification",
+  component: ProductNotification,
+};
+
+const Template = (args) => <ProductNotification {...args} />;
+export const ProductNotificationDefault = Template.bind({});
+
+ProductNotificationDefault.args = {
+  notification: false,
+};

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

@@ -0,0 +1,53 @@
+import { Container } from "./styles";
+import { Avatar } from "../../atoms/Avatar/index";
+import { useState, useEffect } from "react";
+import { MenuNotification } from "../../atoms/MenuNotification";
+import productNotification from "../../../assets/images/productNotification/productNotification.svg";
+
+export const ProductNotification = ({ notification }) => {
+  const [showMenu, setShowMenu] = useState(false);
+  const closeMenu = (e) => {
+    if (!e.target.closest("#menu-notification") && showMenu) {
+      document.removeEventListener("click", closeMenu, false);
+      setShowMenu(false);
+    }
+  };
+  useEffect(() => {
+    if (showMenu) {
+      document.addEventListener("click", closeMenu, false);
+    }
+  }, [showMenu]);
+  const content = [
+    {
+      notificationType: "productComment",
+      label: "Asignaron el producto 23441244",
+    },
+    {
+      notificationType: "productAssignation",
+      label: "Ajustaron el nombre del producto",
+    },
+    {
+      notificationType: "productAssignation",
+      label: "Agregaron comentario en producto 123",
+    },
+  ];
+  return (
+    <Container
+      onClick={(e) => {
+        e.stopPropagation();
+        setShowMenu(!showMenu);
+        if (showMenu) {
+          document.removeEventListener("click", closeMenu, false);
+        }
+      }}
+      className={notification && "new-notification"}
+    >
+      <Avatar
+        image={productNotification}
+        imageType={"big-image"}
+        altText={"Notification Picture"}
+      />
+      {showMenu && <MenuNotification content={content} />}
+    </Container>
+  );
+};

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

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.button`
+  background-color: ${GlobalColors.s2};
+  border-radius: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 3px;
+  width: 50px;
+  height: 50px;
+  border: none;
+  position: relative;
+  &.new-notification::before {
+    content: "";
+    width: 10px;
+    height: 10px;
+    display: block;
+    border-radius: 100%;
+    background-color: #ff0094;
+    position: absolute;
+    left: 56%;
+    top: 11px;
+    z-index: 1;
+    animation: pulse 0.4s alternate infinite;
+    @keyframes pulse {
+      from {
+        transform: scale(1);
+      }
+      to {
+        transform: scale(1.1);
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,16 @@
+import { ProfileHeader } from "./index";
+import customerProfileImg from "../../../assets/images/profileHeader/profilePicture.svg";
+
+export default {
+  title: "Components/molecules/ProfileHeader",
+  component: ProfileHeader,
+};
+
+const Template = (args) => <ProfileHeader {...args} />;
+export const ProfileHeaderDefault = Template.bind({});
+
+ProfileHeaderDefault.args = {
+  customerProfileImg: customerProfileImg,
+  customerName: "Name default",
+  customer: "Customer default",
+};

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

@@ -0,0 +1,54 @@
+import { Container } from "./styles";
+import { ScreenHeader } from "../../atoms/ScreenHeader/index";
+import { GlobalColors } from "../../../global-files/variables";
+import { Avatar } from "../../atoms/Avatar/index";
+import { useState, useEffect } from "react";
+import { MenuProfile } from "../../atoms/MenuProfile";
+
+export const ProfileHeader = ({
+  customerProfileImg,
+  customerName,
+  customer,
+}) => {
+  const [showMenu, setShowMenu] = useState(false);
+  const closeMenu = (e) => {
+    if (!e.target.closest("#menu-profile") && showMenu) {
+      document.removeEventListener("click", closeMenu, false);
+      setShowMenu(false);
+    }
+  };
+  useEffect(() => {
+    if (showMenu) {
+      document.addEventListener("click", closeMenu, false);
+    }
+  }, [showMenu]);
+  const MenuInfo = {
+    user: "Administrador",
+  };
+  return (
+    <Container
+      onClick={(e) => {
+        e.stopPropagation();
+        setShowMenu(!showMenu);
+        if (showMenu) {
+          document.removeEventListener("click", closeMenu, false);
+        }
+      }}
+    >
+      <Avatar
+        image={customerProfileImg}
+        imageType={"profile-image"}
+        altText={"Profile Picture"}
+      />
+      <div className="user-info">
+        <ScreenHeader
+          headerType={"retailer-name-header"}
+          text={customerName}
+          color={GlobalColors.original_magenta}
+        />
+        {customer && <p>{customer}</p>}
+      </div>
+      {showMenu && <MenuProfile user={MenuInfo.user} />}
+    </Container>
+  );
+};

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

@@ -0,0 +1,30 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.button`
+  background-color: ${GlobalColors.s2};
+  border-radius: 25px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 5px 20px 6px 5px;
+  width: 195px;
+  height: 50px;
+  border: none;
+  position: relative;
+  .profile-image {
+    & + * {
+      margin-left: 12px;
+    }
+  }
+  .user-info {
+    text-align: right;
+    p {
+      font-family: ${FontFamily.Raleway};
+      color: ${GlobalColors.s4};
+      font-style: normal;
+      font-weight: normal;
+      font-size: 12px;
+    }
+  }
+`;

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

@@ -0,0 +1,35 @@
+import { RetailerSelector } from "./index";
+
+export default {
+  title: "Components/molecules/RetailerSelector",
+  component: RetailerSelector,
+};
+
+const Template = (args) => <RetailerSelector {...args} />;
+
+export const RetailerSelectorDefault = Template.bind({});
+RetailerSelectorDefault.args = {
+  retailers: [
+    {
+      id: 2,
+      name: "Walmart Mercancías Generales",
+      country: "México",
+      id_region: 1,
+      active: 1,
+    },
+    {
+      id: 3,
+      name: "Sam´s Club",
+      country: "México",
+      id_region: 1,
+      active: 1,
+    },
+    {
+      id: 14,
+      name: "Maskota y Petsy",
+      country: "México",
+      id_region: 1,
+      active: 1,
+    },
+  ],
+};