contentoh-components-library 21.4.71 → 21.4.73

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

@@ -1,37 +0,0 @@
-import { ProductSkuStatus } from "./index";
-import { GlobalStatus, GlobalColors } from "../../../global-files/variables";
-
-export default {
-  title: "Components/molecules/ProductSkuStatus",
-  component: ProductSkuStatus,
-  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) => <ProductSkuStatus {...args} />;
-
-export const ProductSkuStatusDefault = Template.bind({});
-
-ProductSkuStatusDefault.args = {
-  statusType: "AP",
-  percent: 84,
-  backgroundColor: "s2",
-  priority: "no priority",
-  percentRequired:100,
-  // date: new Date().toLocaleDateString(),
-};

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

@@ -1,26 +0,0 @@
-import { Container } from "./styles";
-import { Status } from "../../atoms/Status/index";
-import { Progress } from "../../atoms/Progress";
-
-export const ProductSkuStatus = ({
-  statusType,
-  percentRequired,
-  version,
-  setShowVersionSelector,
-  showShield
-}) => {
-  return (
-    <Container>
-      {statusType && <Status statusType={statusType} />}
-      <Progress
-        percent={percentRequired}
-        progressBarType={statusType}
-        percentRequired={percentRequired}
-        version={version}
-        setShowVersionSelector={setShowVersionSelector}
-        showShield={showShield}
-      />
-       
-    </Container>
-  );
-};

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

@@ -1,7 +0,0 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-  display: flex;
-  align-items: center;
-  gap:10px;
-`;

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

@@ -1,35 +0,0 @@
-import { RetailerSelectorv2 } from "./index";
-
-export default {
-  title: "Components/molecules/RetailerSelectorv2",
-  component: RetailerSelectorv2,
-};
-
-const Template = (args) => <RetailerSelectorv2 {...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,
-    },
-  ],
-};

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

@@ -1,80 +0,0 @@
-import { Container } from "./styles";
-import { Avatar } from "../../atoms/Avatar";
-import { useEffect, useState } from "react";
-import { AsignationOption } from "../../atoms/AsignationOption";
-
-export const RetailerSelectorv2 = ({
-  retailers,
-  activeRetailer,
-  setActiveRetailer,
-  showStatus,
-}) => {
-  const [retailersPanel, setRetailersPanel] = useState(false);
-
-  const closeRetailersPanel = (e) => {
-    if (!e.target.closest("#retailers-assignation") && retailersPanel) {
-      document.removeEventListener("click", closeRetailersPanel, false);
-      setRetailersPanel(false);
-    }
-  };
-
-  const getRetailerImage = async () => {
-    activeRetailer.image = `https://content-management-images.s3.amazonaws.com/retailers/${activeRetailer.id}.png`;
-    retailers.forEach(
-      (retailer) =>
-        (retailer.image = `https://content-management-images.s3.amazonaws.com/retailers/${retailer.id}.png`)
-    );
-  };
-
-  useEffect(() => {
-    if (retailersPanel) {
-      document.addEventListener("click", closeRetailersPanel, false);
-    }
-  }, [retailersPanel]);
-
-  useEffect(() => {
-    getRetailerImage();
-  }, [activeRetailer]);
-
-  return (
-    <Container id="retailers-assignation">
-      <Avatar
-        image={activeRetailer?.image}
-        altText={activeRetailer?.name}
-        imageType={"medium-image"}
-        onClick={() => {
-          retailers?.length > 0 && setRetailersPanel(!retailersPanel);
-          if (retailersPanel)
-            document.removeEventListener("click", closeRetailersPanel, false);
-        }}
-      />
-      
-      {retailersPanel && (
-        <div className="retailers-panel">
-          {retailers.map((retailer, index) => (
-            <AsignationOption
-              key={`${index}-${retailer?.name}`}
-              profileImage={retailer?.image}
-              imageType={"medium-image"}
-              asignationType={null}
-              name={retailer?.name}
-              team={retailer?.team}
-              services={retailer?.services}
-              onClick={() => {
-                setActiveRetailer(retailer);
-                document.removeEventListener(
-                  "click",
-                  closeRetailersPanel,
-                  false
-                );
-                setRetailersPanel(false);
-              }}
-              active={retailer.id === activeRetailer.id}
-              showStatus={showStatus}
-            />
-          ))}
-        </div>
-      )}
-    </Container>
-  );
-};

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

@@ -1,21 +0,0 @@
-import styled from "styled-components";
-import { GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  position: relative;
-  cursor: pointer;
-  display: flex;
-
-  .retailers-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;
-    z-index: 10;
-  }
-`;

package/src/components/molecules/RowItem/ColumnItem.js

@@ -1,9 +0,0 @@
-import { Column } from "./styles";
-
-export const ColumnItem = ({ element, flex, minWidth }) => {
-  return (
-    <Column flex={flex} minWidth={minWidth}>
-      {element}
-    </Column>
-  );
-};