contentoh-components-library 21.0.15 → 21.0.16

package/src/assets/images/verticalSideMenuMainPage/verticalSideMenuMainPageTask.svg

@@ -1,10 +0,0 @@
-<svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2066_1912)">
-<path d="M17.3454 2.1929H15.2541V1.35938C15.2541 0.884705 14.8694 0.5 14.3947 0.5H7.634C7.15933 0.5 6.77463 0.884705 6.77463 1.35938V2.1929H4.68359C3.49893 2.1929 2.53516 3.15668 2.53516 4.34134V20.3516C2.53516 21.5362 3.49893 22.5 4.68359 22.5H17.3454C18.5301 22.5 19.4939 21.5362 19.4939 20.3516V4.34134C19.4939 3.15668 18.5299 2.1929 17.3454 2.1929ZM13.5353 2.21875V3.88597H8.49321C8.49321 3.31479 8.49321 2.84297 8.49321 2.21875H13.5353ZM17.7751 20.3516C17.7751 20.5886 17.5823 20.7812 17.3454 20.7812H4.68359C4.44659 20.7812 4.25391 20.5886 4.25391 20.3516V4.34134C4.25391 4.10451 4.44659 3.91165 4.68359 3.91165H6.77446V4.74535C6.77446 5.22002 7.15933 5.60472 7.63383 5.60472H14.3947C14.8692 5.60472 15.2541 5.22002 15.2541 4.74535V3.91165H17.3454C17.5823 3.91165 17.7751 4.10451 17.7751 4.34134V20.3516ZM15.0021 10.534C15.3378 10.8697 15.3378 11.4139 15.0021 11.7494L10.4861 16.2655C10.1505 16.6012 9.60637 16.6012 9.27068 16.2655L7.0264 14.0212C6.69087 13.6857 6.69087 13.1415 7.0264 12.8058C7.36209 12.4703 7.90608 12.4703 8.24178 12.8058L9.87845 14.4425L13.7868 10.5342C14.1225 10.1985 14.6664 10.1985 15.0021 10.534Z" fill="#FAFAFA"/>
-</g>
-<defs>
-<clipPath id="clip0_2066_1912">
-<rect width="22" height="22" fill="white" transform="translate(0 0.5)"/>
-</clipPath>
-</defs>
-</svg>

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

@@ -1,17 +0,0 @@
-import { ListCommercialRetailers } from "./index";
-
-export default {
-  title: "Components/atoms/ListCommercialRetailers",
-  component: ListCommercialRetailers,
-};
-
-const Template = (args) => <ListCommercialRetailers {...args} />;
-export const ListCommercialRetailersDefault = Template.bind({});
-
-ListCommercialRetailersDefault.args = {
-  retailersAvailable: [
-    { id: 54, name: "Construrama", country: "México", id_region: 1, active: 1 },
-    { id: 4, name: "Walmart Super y Superama" },
-    { id: 6, name: "HEB" },
-  ],
-};

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

@@ -1,45 +0,0 @@
-import { Container } from "./styles";
-import ListCommercialRetailersUp from "../../../assets/images/listCommercialRetailers/listCommercialRetailers.svg";
-import { useEffect, useState } from "react";
-import { CheckBox } from "../CheckBox/index";
-
-export const ListCommercialRetailers = ({ retailersAvailable }) => {
-  const [showMenu, setShowMenu] = useState(false);
-  const closeMenu = (e) => {
-    if (!e.target.closest(".menu-list-commercial-retailers") && showMenu) {
-      document.removeEventListener("click", closeMenu, false);
-      setShowMenu(false);
-    }
-  };
-  useEffect(() => {
-    if (showMenu) {
-      document.addEventListener("click", closeMenu, false);
-    }
-  }, [showMenu]);
-  return (
-    <Container
-      onClick={(event) => {
-        if (!showMenu) {
-          setShowMenu(true);
-        } else if (
-          showMenu &&
-          !event.target.closest(".menu-list-commercial-retailers")
-        ) {
-          setShowMenu(false);
-          document.removeEventListener("click", closeMenu, false);
-        }
-      }}
-      className="list-commercial-retailers"
-    >
-      <img src={ListCommercialRetailersUp} alt="button up icon" />
-      {showMenu && (
-        <div className="menu-list-commercial-retailers">
-          {retailersAvailable?.map((component, index) => (
-            <CheckBox id={component.id} label={component.name} key={index+"-"+component.id}></CheckBox>
-      
-          ))}
-        </div>
-      )}
-    </Container>
-  );
-};

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

@@ -1,36 +0,0 @@
-import styled from "styled-components";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-
-export const Container = styled.button`
-  background: transparent;
-  border: 1px solid ${GlobalColors.magenta_s2};
-  border-radius: 2px;
-  padding: 3px;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  position: relative;
-  height: 30px;
-  .menu-list-commercial-retailers {
-    width: 540px;
-    height: auto;
-    border-radius: 7px;
-    background-color: ${GlobalColors.s2};
-    padding: 14px 14px 8px 20px;
-    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-    position: absolute;
-    top: calc(100% + 3px);
-    right: calc(100% - 20px);
-    display: flex;
-    flex-wrap: wrap;
-    z-index: 1;
-    div {
-      & + * {
-        margin-left: 15px;
-      }
-      p {
-        font-size: 11px;
-      }
-    }
-  }
-`;

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

@@ -1,19 +0,0 @@
-import { MenuCommercialRetailers } from "./index";
-
-export default {
-  title: "Components/atoms/MenuCommercialRetailers",
-  component: MenuCommercialRetailers,
-};
-
-const Template = (args) => <MenuCommercialRetailers {...args} />;
-
-export const MenuCommercialRetailersDefault = Template.bind({});
-
-MenuCommercialRetailersDefault.args = {
-  editType:"3",
-  retailersAvailable: [
-    { id: 54, name: "Construrama", country: "México", id_region: 1, active: 1 },
-    { id: 4, name: "Walmart Super y Superama" },
-    { id: 6, name: "HEB" },
-  ],
-};

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

@@ -1,14 +0,0 @@
-import { Container } from "./styles";
-import { StatusTag } from "../StatusTag";
-import { ListCommercialRetailers } from "../ListCommercialRetailers";
-
-export const MenuCommercialRetailers = ({editType,retailersAvailable}) => {
-  return (
-    <Container>
-      <StatusTag editType={editType} ovalForm={true} />
-      <ListCommercialRetailers
-        retailersAvailable={retailersAvailable}
-      />
-    </Container>
-  );
-};

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

@@ -1,24 +0,0 @@
-import styled from "styled-components";
-import { GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  display: flex;
-  align-items: center;
-  .status-version {
-    & + * {
-      margin-left: 5px;
-    }
-  }
-  .list-commercial-retailers {
-    border: 1px solid transparent;
-    img {
-      display: none;
-    }
-    &:hover {
-      border: 1px solid ${GlobalColors.magenta_s2};
-      img {
-        display: block;
-      }
-    }
-  }
-`;

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

@@ -1,14 +0,0 @@
-import { MenuProductImage } from "./index";
-import productImage from "../../../assets/images/menuProductImage/menuProductImage.svg";
-
-export default {
-  title: "Components/atoms/MenuProductImage",
-  component: MenuProductImage,
-};
-
-const Template = (args) => <MenuProductImage {...args} />;
-
-export const MenuProductImageDefault = Template.bind({});
-MenuProductImageDefault.args = {
-  ProductImg: productImage,
-};

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

@@ -1,63 +0,0 @@
-import { Container } from "./styles";
-import menuProductImage from "../../../assets/images/menuProductImage/menuProductImageButton.svg";
-import { useEffect, useState } from "react";
-import { LoadImageMenu } from "../LoadImageMenu/index";
-import GenericModalUp from "../../../assets/images/listCommercialRetailers/listCommercialRetailers.svg";
-
-export const MenuProductImage = ({ProductImg}) => {
-  const [showMenu, setShowMenu] = useState(false);
-  const closeMenu = (e) => {
-    if (!e.target.closest(".menu-upload-product") && showMenu) {
-      document.removeEventListener("click", closeMenu, false);
-      setShowMenu(false);
-    }
-  };
-  useEffect(() => {
-    if (showMenu) {
-      document.addEventListener("click", closeMenu, false);
-    }
-  }, [showMenu]);
-  return (
-    <Container className="div-upload-image">
-      <img className="profile-image" src={ProductImg} alt="Product Image"></img>
-      <button
-        onClick={(event) => {
-          if (!showMenu) {
-            setShowMenu(true);
-          } else if (
-            showMenu &&
-            !event.target.closest(".menu-upload-product")
-          ) {
-            setShowMenu(false);
-            document.removeEventListener("click", closeMenu, false);
-          }
-        }}
-        className={"upload-image-button " + (showMenu && "show-menu-upload-image")}
-      >
-        <img src={showMenu ? GenericModalUp : menuProductImage} alt="Product Image Button" />
-      </button>
-      {showMenu && (
-        <div className="menu-upload-product">
-          <LoadImageMenu
-            tipo={"Tipo de empaque "}
-            product={"Producto expuesto"}
-            content={[
-              { label: "Enbalaje adicional - 0" },
-              { label: "En paquete - 1" },
-              { label: "Producto expuesto - 2" },
-              { label: "Embalaje multiforme - 3" },
-              { label: "Si no es una imagen / no corresponde - X" },
-            ]}
-            id={"menu-packaging-type"}
-          />
-          <LoadImageMenu
-            tipo={"Tipo de imagen "}
-            product={"Render"}
-            content={[{ label: "fotografía del producto" }]}
-            id={"menu-image-type"}
-          />
-        </div>
-      )}
-    </Container>
-  );
-};

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

@@ -1,66 +0,0 @@
-import styled from "styled-components";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: relative;
-  .profile-image {
-    width: 23px;
-    height: 23px;
-    & + * {
-      margin-left: 8px;
-    }
-  }
-  .upload-image-button {
-    background: transparent;
-    border: 1px solid transparent;
-    border-radius: 2px;
-    padding: 3px;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    height: 30px;
-    width: 15px;
-    left: 100%;
-    img {
-      display: none;
-    }
-    &:hover {
-      border: 1px solid ${GlobalColors.s3};
-      img {
-        display: block;
-      }
-    }
-    &.show-menu-upload-image {
-      border: 1px solid ${GlobalColors.magenta_s2};
-      img {
-        display: block;
-      }
-    }
-  }
-  .menu-upload-product {
-    background: ${GlobalColors.s2};
-    border: 1px solid ${GlobalColors.s3};
-    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-    border-radius: 7px;
-    width: 324px;
-    padding: 8px 0px;
-    position: absolute;
-    right: 0%;
-    z-index: 1;
-    top: 30px;
-    button {
-      left: 0%;
-      border-radius: 7px;
-      span,
-      .tipo {
-        color: ${GlobalColors.s5};
-      }
-      .products {
-        color: ${GlobalColors.s4};
-      }
-    }
-  }
-`;

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

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

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

@@ -1,23 +0,0 @@
-import { Container } from "./styles";
-import verticalSideMenuMainPageFaqs from "../../../assets/images/verticalSideMenuMainPage/verticalSideMenuMainPageFAQS.svg";
-import verticalSideMenuMainPageFocusProduct from "../../../assets/images/verticalSideMenuMainPage/verticalSideMenuMainPageFocusProduct.svg";
-import verticalSideMenuMainPageGroup from "../../../assets/images/verticalSideMenuMainPage/verticalSideMenuMainPageGroup.svg";
-import verticalSideMenuMainPageLogo from "../../../assets/images/verticalSideMenuMainPage/verticalSideMenuMainPageLogo.svg";
-import verticalSideMenuMainPageSpeedometer from "../../../assets/images/verticalSideMenuMainPage/verticalSideMenuMainPageSpeedometer.svg";
-import verticalSideMenuMainPageTask from "../../../assets/images/verticalSideMenuMainPage/verticalSideMenuMainPageTask.svg";
-
-export const VerticalSideMenuMainPage = () => {
-  return (
-    <Container>
-      <img src={verticalSideMenuMainPageLogo} alt="Logo"></img>
-      <div>
-        <img src={verticalSideMenuMainPageSpeedometer} alt="Speed Meter"></img>
-        <img src={verticalSideMenuMainPageFocusProduct} alt="Focus Product"></img>
-        <img src={verticalSideMenuMainPageGroup} alt="Group"></img>
-        <img src={verticalSideMenuMainPageLogo} alt="Logo"></img>
-        <img src={verticalSideMenuMainPageTask} alt="Task"></img>
-      </div>
-      <img src={verticalSideMenuMainPageFaqs} alt="FAQS"></img>
-    </Container>
-  );
-};

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

@@ -1,24 +0,0 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-  width: 60px;
-  height: 700px;
-  background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);
-  border-radius: 50px;
-  padding: 30px 10px 20px 10px;
-  text-align: center;
-  img {
-    cursor: pointer;
-  }
-  img + div {
-    margin-top: 100px;
-  }
-  div {
-    img + * {
-      margin-top: 20px;
-    }
-    & + * {
-      margin-top: 250px;
-    }
-  }
-`;

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

@@ -1,14 +0,0 @@
-import { ApproveRejetPanel } from "./index";
-
-export default {
-  title: "Components/molecules/ApproveRejetPanel",
-  component: ApproveRejetPanel,
-};
-
-const Template = (args) => <ApproveRejetPanel {...args} />;
-
-export const ApproveRejetPanelDefault = Template.bind({});
-ApproveRejetPanelDefault.args = {
-  text:"113 productos",
-  check:false,
-}

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

@@ -1,36 +0,0 @@
-import { ScreenHeader } from "../../atoms/ScreenHeader";
-import { Avatar } from "../../atoms/Avatar";
-import { Container } from "./styles";
-import approveRejetPanelDelete from "../../../assets/images/approveRejetPanel/approveRejetPanelDelete.svg";
-import approveRejetPanelCancel from "../../../assets/images/approveRejetPanel/approveRejetPanelCancel.svg";
-import approveRejetPanelSave from "../../../assets/images/approveRejetPanel/approveRejetPanelSave.svg";
-import approveRejetPanelExclude from "../../../assets/images/approveRejetPanel/approveRejetPanelExclude.svg";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-
-export const ApproveRejetPanel = ({ text, check }) => {
-  return (
-    <Container>
-      <ScreenHeader
-        fontFamily={FontFamily.AvenirNext}
-        headerType={"date-header"}
-        color={GlobalColors.s4}
-        text={text}
-      ></ScreenHeader>
-      <Avatar
-        image={approveRejetPanelDelete}
-        imageType={"big-image"}
-        altText={"delete button"}
-      ></Avatar>
-      <Avatar
-        image={check?approveRejetPanelCancel:approveRejetPanelExclude}
-        imageType={"big-image"}
-        altText={check?"cancel button":"exclude button"}
-      ></Avatar>
-      <Avatar
-        image={check?approveRejetPanelSave:approveRejetPanelExclude}
-        imageType={"big-image"}
-        altText={check?"save button":"exclude button"}
-      ></Avatar>
-    </Container>
-  );
-};

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

@@ -1,13 +0,0 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-  display: flex;
-  justify-content: end;
-  align-items: center;
-  .date-header + * {
-    margin-left: 30px;
-  }
-  .big-image + * {
-    margin-left: 10px;
-  }
-`;