contentoh-components-library 21.5.2 → 21.5.3

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

@@ -1,33 +0,0 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-    min-width:200px;
-    max-height:34px;
-    .search-bar-filter {
-        display: flex;
-        align-items: center;
-        border: 1px solid #f0f0f0;
-        padding-left: 10px;
-  
-        img {
-          width: 15px;
-          height: 15px;
-        }
-  
-        input {
-          background-color: transparent;
-          padding: 10px 10px;
-          outline: none;
-          border: none;
-        }
-      }
-
-      img.icon{
-        width: 15px;
-          height: 15px;
-      }
-
-      .modal-save .contentModal {
-        max-width:200px;
-      }
-`;

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

@@ -1,19 +0,0 @@
-import { NumberMandatory } from ".";
-
-export default {
-  title: "Components/atoms/NumberMandatory",
-  component: NumberMandatory,
-  argTypes: {
-  },
-};
-
-export const Template = (args) => <NumberMandatory {...args} />;
-
-const NumberMandatoryDefault = Template.bind({});
-
-NumberMandatoryDefault.args = {
-  description_small:"Descripción del campo",
-  required:true, 
-  number:4, 
-  typeImage:"Obligatorio"
-};

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

@@ -1,16 +0,0 @@
-import React from 'react';
-import { TooltipLight } from "../TooltipLight";
-import { Container } from "./styles";
-
-export const NumberMandatory = ({ required, number, typeImage, typeSingle }) => {
-  return (
-    <Container>
-      <TooltipLight
-        description_small={`Este producto necesita ${number} ${number === 1 ? 'imagen' : 'imágenes'} ${number === 1 ? typeSingle : typeImage} para esta cadena.`}
-        required={required}
-      ></TooltipLight>
-      <span>{number}</span>
-      <span> {number === 1 ? 'imagen' : 'imágenes'} {number === 1 ? typeSingle : typeImage}</span>
-    </Container>
-  );
-};

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

@@ -1,11 +0,0 @@
-import styled from "styled-components";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  display:flex;
-  gap:5px;
-  span {
-    font-family:${FontFamily.RobotoMedium}, sans-serif;
-    font-size:12px;
-  }
-`;

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

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

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

@@ -1,167 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-import axios from "axios";
-import { Container, Observation, Content, ServTab, SaveButton } from "./styles";
-import { Tooltip } from "../Tooltip";
-import without from "../../../assets/images/flags/noPriority.svg";
-import high from "../../../assets/images/flags/highPriority.svg";
-import medium from "../../../assets/images/flags/mediumPriority.svg";
-import low from "../../../assets/images/flags/lowPriority.svg";
-import saveIconpink from "../../../assets/images/generalButton/saveIconpink.svg";
-import { Modal } from "../../organisms/Modal";
-
-export const ObservationFlag = ({
-  observation,
-  contentObservation,
-  dataProduct,
-  isObservationVisible, toggleObservation,
-  // handleClickOutside,
-  hideObservation
-}) => {
-  const PriorityFlags = {
-    ["none"]: without,
-    ["low"]: low,
-    ["medium"]: medium,
-    ["high"]: high,
-  };
-
-  //const [isObservationVisible, setObservationVisible] = useState(false);
-  const [material, setMaterial] = useState(contentObservation || "");
-  const [currentObservation, setCurrentObservation] = useState(observation);
-
-  const [showModal, setShowModal] = useState(false);
-  const [modalData, setModalData] = useState({});
-
-  const textareaRef = useRef(null);
-  // const toggleObservation = () => {
-  //   setObservationVisible(!isObservationVisible);
-  // };
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (
-        isObservationVisible &&
-        !event.target.closest(".Observation") &&
-        !event.target.closest(".Container")
-      ) {
-        setObservationVisible(false);
-      }
-    };
-    document.addEventListener("click", handleClickOutside);
-    return () => {
-      document.removeEventListener("click", handleClickOutside);
-    };
-  }, [isObservationVisible]);
-  // useEffect(() => {
-  //   document.addEventListener("click", handleClickOutside);
-  //   return () => {
-  //     document.removeEventListener("click", handleClickOutside);
-  //   };
-  // }, [isObservationVisible, handleClickOutside]);
-  
-  useEffect(() => {
-    setMaterial(contentObservation || "");
-  }, [contentObservation]); 
-
-  useEffect(() => {
-    setCurrentObservation(observation);
-  }, [observation]);
-
-  const saveRequest = async () => {
-    let dataToSend = {
-      orderId: parseInt(dataProduct.orderId),
-      articleId: dataProduct.article.id_article,
-      observation: textareaRef.current.value,
-    };
-
-    try {
-      const response = await axios.put(
-        process.env.REACT_APP_UPDATE_OBSERVATION,
-        dataToSend
-      );
-
-      const succesResponse = {
-        status: true,
-        message: "Información guardada correctamente",
-        detail: "",
-        img: true,
-      };
-      const errorResponse = {
-        status: false,
-        message: "Error al guardar la información",
-        detail: "",
-        img: false,
-      };
-
-      setShowModal(true);
-      setModalData(
-        response.data.statusCode === 200 ? succesResponse : errorResponse
-      );
-      setCurrentObservation(material !== "" ? "high" : "low");
-      hideObservation(); 
-      return response;
-    } catch (err) {
-      console.log(err);
-    }
-  };
-  return (
-    <>
-      <Container>
-        <img
-          src={PriorityFlags[currentObservation]}
-          alt={observation}
-          style={{ cursor: "pointer" }}
-          onClick={toggleObservation}
-        />
-        {isObservationVisible && (
-          <Observation
-            onClick={(evt) => {
-              evt.stopPropagation();
-            }}
-            className="Observation"
-          >
-            <ServTab
-              onClick={(evt) => {
-                evt.stopPropagation();
-              }}
-              className="close-Container"
-            >
-              <div>
-                <span>Material completo</span>
-              </div>
-
-              <div className="flex">
-                <textarea
-                  ref={textareaRef}
-                  name="textarea"
-                  rows="10"
-                  cols="50"
-                  style={{ color: "black", padding: "5px" }}
-                  value={material}
-                  onChange={(e) => setMaterial(e.target.value)}
-                  onClick={(e) => e.stopPropagation()}
-                />
-              </div>
-
-              <SaveButton
-                onClick={(evt) => {
-                  evt.stopPropagation();
-                  saveRequest();
-                }}
-              >
-                <img src={saveIconpink} alt="Guardar" />
-              </SaveButton>
-            </ServTab>
-          </Observation>
-        )}
-      </Container>
-
-      {showModal && (
-        <Modal
-          show={showModal}
-          title={modalData.title}
-          message={modalData.message}
-          onClickBtnDefault={(event) => setShowModal(false)}
-        />
-      )}
-    </>
-  );
-};

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/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"}
-          />
-        )}
-      </>
-    </>
-  );
-};