contentoh-components-library 21.4.123 → 21.4.124

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

@@ -1,104 +0,0 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-  /* position: relative;
-  height: 100%;
-  width: 100%; */
-`;
-export const Observation = styled.div`
-  position: relative;
-  /* height: 100%;
-  width: 100%; */
-  z-index: 10000;
-`;
-
-export const Content = styled.div`
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-  & > div {
-    width: 30px;
-    height: 20px;
-    font-family: Lato;
-    font-style: normal;
-    font-weight: normal;
-    font-size: 12px;
-    line-height: 20px;
-    text-align: center;
-    border-radius: 3px;
-    color: ${({ cont }) =>
-      cont === "-" || cont === "Pt" ? "#817393" : "#FFF"};
-    background-color: ${({ cont }) => backgroundContent(cont)};
-  }
-`;
-
-export const ServTab = styled.div`
-  position: absolute;
-  top: 0;
-  right: 10%;
-  z-index: 2;
-  width: 300px;
-  max-height: 280px;
-  overflow-y: auto;
-  box-sizing: border-box;
-  background: #281f33;
-  padding: 8px;
-  white-space: normal;
-  font-family: Avenir Next;
-  font-style: normal;
-  > div {
-    background-color: #503d66;
-    margin-bottom: 8px;
-    color: #f0eef2;
-    box-sizing: border-box;
-    padding: 8px;
-    text-align: left;
-    > span {
-      font-weight: bold;
-      font-size: 14px;
-      line-height: 19px;
-    }
-    > p {
-      font-weight: normal;
-      font-size: 12px;
-      line-height: 16px;
-    }
-  }
-  .flex {
-    display: flex;
-    width: 100%;
-    background-color: #503d6644;
-    margin-left: 0px;
-    p {
-      width: 16%;
-      &:first-child {
-        width: 50%;
-      }
-    }
-  }
-  .title {
-    position: sticky;
-    top: -9px;
-    background-color: #503d66;
-  }
-  .ignore-background {
-    background-color: #1111;
-    margin: 0;
-  }
-`;
-
-export const SaveButton = styled.button`
-  position: sticky;
-  bottom: 0;
-  left: 100%;
-  background-color: #fbfbfb;
-  border: 2px solid #e33aa9;
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  cursor: pointer;
-  min-height: initial;
-`;

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

@@ -1,7 +0,0 @@
-import { PercentTag } from ".";
-
-export default { title: "Components/atoms/PercentTag", component: PercentTag };
-
-const Template = (args) => <PercentTag {...args} />;
-export const PercentTagDefault = Template.bind({});
-PercentTagDefault.args = { percent: 88, progressBarType: "AA" };

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

@@ -1,9 +0,0 @@
-import { Container } from "./styles";
-
-export const PercentTag = ({ percent, progressBarType }) => {
-  return (
-    <Container className={`status-${progressBarType}`}>
-      <p>{percent}%</p>
-    </Container>
-  );
-};

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

@@ -1,69 +0,0 @@
-import styled from "styled-components";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  background-color: ${GlobalColors.s3};
-  display: inline-block;
-  padding: 0 10px;
-  border-radius: 5px;
-  font-family: ${FontFamily.Lato};
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 20px;
-  color: ${(backgroundColor) =>
-    backgroundColor === "s2" || backgroundColor === "s1"
-      ? GlobalColors.s4
-      : GlobalColors.white};
-
-  &.status-CA,
-  &.status-IE {
-    background-color: ${GlobalColors.in_progress};
-  }
-
-  &.status-R,
-  &.status-AS,
-  &.status-PA {
-    background-color: ${GlobalColors.reception};
-  }
-
-  &.status-AA,
-  &.status-AP,
-  &.status-ACA,
-  &.status-AC {
-    background-color: ${GlobalColors.finished};
-  }
-
-  &.status-RA,
-  &.status-RC,
-  &.status-RP,
-  &.status-RCA {
-    background-color: ${GlobalColors.rejected_status};
-  }
-
-  &.status-Dat,
-  &.status-Dsc,
-  &.status-Imgs {
-    background-color: ${GlobalColors.s4};
-  }
-
-  &.status-Ex {
-    background-color: ${GlobalColors.exported};
-  }
-
-  &.status-DDI {
-    background-color: ${GlobalColors.original_purpura};
-  }
-
-  &.status-GLD {
-    background-color: ${GlobalColors.in_progress};
-  }
-
-  &.status-TAB {
-    background-color: ${GlobalColors.deep_gray};
-  }
-
-  &.status-Pt {
-    background-color: ${GlobalColors.s2};
-    color: ${GlobalColors.s4};
-  }
-`;

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

@@ -1,20 +0,0 @@
-import { PriorityFlagv2 } from "./index";
-
-export default {
-  title: "Components/atoms/PriorityFlagv2",
-  component: PriorityFlagv2,
-  argTypes: {
-    priority: {
-      options: ["no priority", "low", "medium", "high"],
-      control: { type: "select" },
-    },
-  },
-};
-
-const Template = (args) => <PriorityFlagv2 {...args} />;
-
-export const PriorityFlagDefault = Template.bind({});
-
-PriorityFlagDefault.args = {
-  priority: "no priority",
-};

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

@@ -1,20 +0,0 @@
-import { Container } from "./styles";
-import without from "../../../assets/images/flagsv2/noPriority.svg";
-import high from "../../../assets/images/flagsv2/highPriority.svg";
-import medium from "../../../assets/images/flagsv2/mediumPriority.svg";
-import low from "../../../assets/images/flagsv2/lowPriority.svg";
-
-export const PriorityFlagv2 = ({ priority }) => {
-  const PriorityFlags = {
-    ["none"]: without,
-    ["low"]: low,
-    ["medium"]: medium,
-    ["high"]: high,
-  };
-
-  return (
-    <Container>
-      <img src={PriorityFlags[priority]} alt={priority} />
-    </Container>
-  );
-};

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

@@ -1,6 +0,0 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-width:20px;
-height:20px;
-`;

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

@@ -1,28 +0,0 @@
-import { ProductImagev2 } from ".";
-
-export default {
-  title: "Components/atoms/ProductImagev2",
-  component: ProductImagev2,
-  argTypes: {
-    imageType: {
-      options: [
-        "main-image",
-        "carousel-image",
-        "catalogue-image-big-size",
-        "catalogue-image-small-size",
-        "catalogue-modal-image",
-        "expanded-modal-image",
-      ],
-      control: { type: "select" },
-    },
-  },
-};
-
-export const Template = (args) => <ProductImagev2 {...args} />;
-
-const ProductImagev2Default = Template.bind({});
-
-ProductImagev2Default.args = {
-  imageType: "main-image",
-  altText: "default image",
-};

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

@@ -1,16 +0,0 @@
-import { Container } from "./styles";
-import ReactImageFallback from "react-image-fallback";
-import defaultProductImage from "../../../assets/images/defaultImages/defaultProductImage.png";
-
-export const ProductImagev2 = ({ img, imageType, altText, onClick }) => {
-  return (
-    <Container className={imageType}>
-      <ReactImageFallback
-        src={img}
-        fallbackImage={defaultProductImage}
-        alt={altText}
-        onClick={onClick}
-      />
-    </Container>
-  );
-};

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

@@ -1,62 +0,0 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-  width: fit-content;
-
-  img {
-    object-fit: contain;
-  }
-
-  &.carousel-image {
-    img {
-      width: 85px;
-      height: 55px;
-      cursor: pointer;
-    }
-
-    & + * {
-      margin-left: 1px;
-    }
-  }
-
-  &.main-image {
-    img {
-      width: 182px;
-      height: 182px;
-    }
-  }
-
-  &.catalogue-image-big-size {
-    img {
-      width: 179px;
-      height: 179px;
-    }
-  }
-
-  &.catalogue-image-small-size {
-    img {
-      width: 60px;
-      height: 60px;
-    }
-  }
-
-  &.catalogue-modal-image {
-    cursor: pointer;
-
-    img {
-      width: 68px;
-      height: 68px;
-    }
-  }
-
-  &.expanded-modal-image {
-    width: 500px;
-    height: 500px;
-
-    img {
-      width: 500px;
-      height: 500px;
-      border-radius:10px;
-    }
-  }
-`;

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

@@ -1,25 +0,0 @@
-import { Progress } from "./index.js";
-import { GlobalColors } from "../../../global-files/variables.js";
-
-export default {
-  title: "Components/atoms/Progress",
-  component: Progress,
-  argTypes: {
-    percent: {
-      control: { type: "range", min: 0, max: 100, step: 1 },
-    },
-    backgroundColor: {
-      options: Object.keys(GlobalColors),
-      control: { type: "select" },
-    },
-  },
-};
-
-const Template = (args) => <Progress {...args} />;
-
-export const ProgressDefault = Template.bind({});
-
-ProgressDefault.args = {
-  percent: 0,
-  backgroundColor: "s2",
-};

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

@@ -1,74 +0,0 @@
-import { Container, ContainerIcon } from "./styles";
-import { Tooltip } from "../Tooltip";
-import { Button } from "../GeneralButton";
-
-export const Progress = ({
-  percent,
-  progressBarType,
-  percentRequired,
-  version,
-  setShowVersionSelector,
-  showShield,
-}) => {
-  return (
-    <>
-      <Tooltip
-        componentTooltip={
-          <>
-            <p>
-              <b>Porcentaje de requeridos</b>
-            </p>
-            <p>
-              Este porcentaje indica la completitud de los atributos requeridos
-              para todos los servicios.
-            </p>
-          </>
-        }
-        children={
-          <Container className={`status-${progressBarType}`}>
-            <p>{percent}%</p>
-          </Container>
-        }
-        classNameTooltip={"container-tooltip"}
-      />
-      <>
-        {version && (
-          <Button
-            buttonType={"general-button-rec version-button"}
-            onClick={(e) => {
-              e.stopPropagation();
-              e.preventDefault();
-              setShowVersionSelector(true);
-            }}
-            label={`V${version}`}
-          />
-        )}
-        {showShield && (
-          <Tooltip
-            componentTooltip={
-              <>
-                <p>
-                  <b>Campos requeridos</b>
-                </p>
-                <p>
-                  Este nuevo icono te indicará cuando <br></br> completes todos
-                  los campos requeridos
-                </p>
-              </>
-            }
-            children={
-              <ContainerIcon
-                className="fondo"
-                percentageRequired={percentRequired}
-              >
-                {/* <span class="hola">local_police</span> */}
-                <span class="material-icons icono-police">&#xef56;</span>
-              </ContainerIcon>
-            }
-            classNameTooltip={"container-tooltip"}
-          />
-        )}
-      </>
-    </>
-  );
-};

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

@@ -1,98 +0,0 @@
-import styled from "styled-components";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  background-color: ${GlobalColors.s3};
-  width: fit-content;
-  height: 20px;
-  padding: 4px;
-  border-radius: 3px;
-  font-family: ${FontFamily.AvenirNext};
-  font-weight: 600;
-  font-size: 10px;
-  line-height: 12px;
-  color: ${(backgroundColor) =>
-    backgroundColor === "s2" || backgroundColor === "s1"
-      ? GlobalColors.s4
-      : GlobalColors.white};
-
-  &.status-CA,
-  &.status-IE {
-    background-color: ${GlobalColors.in_progress};
-  }
-
-  &.status-R,
-  &.status-AS,
-  &.status-PA {
-    background-color: ${GlobalColors.reception};
-  }
-
-  &.status-AA,
-  &.status-AP,
-  &.status-ACA,
-  &.status-AC {
-    background-color: ${GlobalColors.finished};
-  }
-
-  &.status-RA,
-  &.status-RC,
-  &.status-RP,
-  &.status-RCA {
-    background-color: ${GlobalColors.rejected_status};
-  }
-
-  &.status-Dat,
-  &.status-Dsc,
-  &.status-Imgs {
-    background-color: ${GlobalColors.s4};
-  }
-
-  &.status-Ex {
-    background-color: ${GlobalColors.exported};
-  }
-
-  &.status-DDI {
-    background-color: ${GlobalColors.original_purpura};
-  }
-
-  &.status-GLD {
-    background-color: ${GlobalColors.in_progress};
-  }
-
-  &.status-TAB {
-    background-color: ${GlobalColors.deep_gray};
-  }
-
-  &.status-Pt {
-    background-color: ${GlobalColors.s2};
-    color: ${GlobalColors.s4};
-  }
-`;
-export const ContainerIcon = styled.div`
-  cursor: pointer;
-  @font-face {
-    font-family: "Material Symbols Outlined";
-    font-style: normal;
-    font-weight: 100 700;
-    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v68/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2)
-      format("woff2");
-  }
-
-  .hola {
-    font-family: "Material Symbols Outlined";
-    font-size: 30px;
-    //line-height: 1;
-    margin-top: 10px;
-  }
-  .hola {
-    font-variation-settings: "FILL"
-        ${(props) => (props.percentageRequired < 100 ? 0 : 1)},
-      "wght" 400, "GRAD" 0, "opsz" 48;
-    
-  }
-  .icono-police{
-    font-size:20px;
-    color: ${(props) =>
-      props.percentageRequired < 100 ? "#d4d1d7" : "#ECDD1D"};
-  }
-`;

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

@@ -1,10 +0,0 @@
-import { RatingStars } from ".";
-
-export default {
-  title: "Components/atoms/RatingStars",
-  component: RatingStars,
-};
-
-const Template = (args) => <RatingStars {...args} />;
-export const RatingStarsDefault = Template.bind({});
-RatingStarsDefault.args = { percent: 80 };

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

@@ -1,31 +0,0 @@
-import { Container } from "./styles";
-import { faStar as starIcon } from "@fortawesome/free-regular-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useEffect } from "react";
-import { useState } from "react";
-
-export const RatingStars = ({ ratingValue = 0 }) => {
-  const [rating, setRating] = useState(0);
-
-  const handleRating = (value) => {
-    setRating(value);
-  };
-
-  useEffect(() => {
-    setRating(ratingValue);
-  }, []);
-
-  return (
-    <Container>
-      {[...Array(5)].map((_, index) => (
-        <span
-          key={index}
-          className={`star ${index < rating ? "active" : ""}`}
-          onClick={() => handleRating(index + 1)}
-        >
-          ★
-        </span>
-      ))}
-    </Container>
-  );
-};

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

@@ -1,28 +0,0 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-  font-size: 10px;
-  display: flex;
-  align-items: center;
-
-  .star {
-    cursor: pointer;
-    font-size: 12px;
-    color: #d9d9d9;
-    transition: color 0.3s;
-    line-height: 10px;
-
-    &:hover {
-      color: gold;
-    }
-
-    &.active {
-      transform: scale(1.2);
-      color: #8a6caa;
-    }
-
-    &:not(:first-child) {
-      margin-left: 5px;
-    }
-  }
-`;

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

@@ -1,36 +0,0 @@
-import { RetailerCatalog } from ".";
-
-export default {
-  title: "Components/atoms/RetailerCatalog",
-  component: RetailerCatalog,
-};
-
-const Template = (args) => <RetailerCatalog {...args} />;
-export const RetailerCatalogDefault = Template.bind({});
-RetailerCatalogDefault.args = {
-  limit: 3,
-  articleId: 39474,
-  orderId: 15270,
-  retailers: [
-    {
-      id: 58,
-      name: "The Home Depot Golden",
-    },
-    {
-      id: 59,
-      name: "The Home Depot Platinum",
-    },
-    {
-      id: 60,
-      name: "The Home Depot Resizing",
-    },
-    {
-      id: 61,
-      name: "Home Depot TAB",
-    },
-    {
-      id: 68,
-      name: "The Home Depot Dropship",
-    },
-  ],
-};