contentoh-components-library 18.0.0 → 20.0.17

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

@@ -12,9 +12,6 @@ export const Container = styled.div`
   position: fixed;
   background-color: rgba(59, 59, 59, 0.53);
   backdrop-filter: blur(4px);
-  top: 0;
-  left: 0;
-  z-index: 100;
 
   .global-styles {
     background-color: ${GlobalColors.deep_gray};

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

@@ -10,7 +10,13 @@ export const Container = styled.div`
   height: 100%;
   justify-content: center;
   align-items: center;
-
+  label {
+    color: red;
+    margin-top: 3px;
+    margin-left: 15px;
+    font-family: ${FontFamily.Raleway_700};
+    font-size: 11px;
+  }
   &.home-panel {
     text-align: center;
     h2 {

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

@@ -6,7 +6,7 @@ import low from "../../../assets/images/flags/lowPriority.svg";
 
 export const PriorityFlag = ({ priority }) => {
   const PriorityFlags = {
-    ["none"]: without,
+    ["no priority"]: without,
     ["low"]: low,
     ["medium"]: medium,
     ["high"]: high,

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

@@ -4,7 +4,7 @@ export const Container = styled.div`
   width: fit-content;
 
   img {
-    object-fit: contain;
+    object-fit: cover;
   }
 
   &.carousel-image {

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

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

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

@@ -2,7 +2,7 @@ import styled from "styled-components";
 import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.div`
-  background-color: ${GlobalColors.s3};
+  background-color: ${(props) => GlobalColors[props.backgroundColor]};
   width: fit-content;
   height: 27px;
   padding: 4px;
@@ -11,58 +11,8 @@ export const Container = styled.div`
   font-weight: 600;
   font-size: 14px;
   line-height: 19px;
-  color: ${(backgroundColor) =>
-    backgroundColor === "s2" || backgroundColor === "s1"
+  color: ${(props) =>
+    props.backgroundColor === "s2" || props.backgroundColor === "s1"
       ? GlobalColors.s4
       : GlobalColors.white};
-
-  &.status-As,
-  &.status-P {
-    background-color: ${GlobalColors.in_progress};
-  }
-
-  &.status-Pr,
-  &.status-Rr {
-    background-color: ${GlobalColors.reception};
-  }
-
-  &.status-AA,
-  &.status-AP,
-  &.status-AC {
-    background-color: ${GlobalColors.finished};
-  }
-
-  &.status-RA,
-  &.status-RF,
-  &.status-RP,
-  &.status-RC {
-    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/StatusTag/styles.js

@@ -26,18 +26,10 @@ export const Container = styled.div`
   }
 
   &.status-AA,
-  &.status-AP,
-  &.status-AC {
+  &.status-AP {
     background-color: ${GlobalColors.finished};
   }
 
-  &.status-RA,
-  &.status-RF,
-  &.status-RP,
-  &.status-RC {
-    background-color: ${GlobalColors.rejected_status};
-  }
-
   &.status-Dat,
   &.status-Dsc,
   &.status-Imgs {

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

@@ -7,8 +7,8 @@ export const ValidationPanel = ({
   id,
   setOptionClicked,
   setShowValidationPanel,
-  sendToFacilitator,
 }) => {
+
   const optionSelected = (option) => {
     setOptionClicked(`${option}-button`);
     setShowValidationPanel(false);
@@ -18,7 +18,7 @@ export const ValidationPanel = ({
     <Container id={id}>
       <button
         onClick={() => {
-          sendToFacilitator("A");
+          optionSelected("accept");
         }}
         className="validation-option"
       >
@@ -27,7 +27,7 @@ export const ValidationPanel = ({
       </button>
       <button
         onClick={() => {
-          sendToFacilitator("R");
+          optionSelected("reject");
         }}
         className="validation-option"
       >

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

@@ -7,18 +7,8 @@ import { DropDownButton } from "../../atoms/DropDownButton";
 import { Button } from "../../atoms/GeneralButton";
 import { ValidationPanel } from "../../atoms/ValidationPanel";
 import { useEffect } from "react";
-import { RetailerSelector } from "../RetailerSelector";
 
-export const AvatarAndValidation = ({
-  retailers,
-  validation,
-  activeRetailer,
-  setActiveRetailer,
-  approveRejectButtons,
-  sendToFacilitator,
-  auditorAssigned,
-  userAssigned,
-}) => {
+export const AvatarAndValidation = ({ avatarData, validation }) => {
   const [showValidationPanel, setShowValidationPanel] = useState(false);
   const [buttonType, setButtonType] = useState(
     validation ? validation : "null-button"
@@ -43,26 +33,18 @@ export const AvatarAndValidation = ({
   return (
     <Container>
       <div className="buttons-container">
-        <RetailerSelector
-          retailers={retailers}
-          activeRetailer={activeRetailer}
-          setActiveRetailer={setActiveRetailer}
-        />
+        <Avatar image={avatarData?.image} altText={avatarData?.altText} />
         <DropDownButton />
-        {approveRejectButtons() &&
-          (auditorAssigned() || (userAssigned && userAssigned())) && (
-            <Button
-              buttonType={`circular-button ${buttonType}`}
-              onClick={() => setShowValidationPanel(true)}
-            />
-          )}
+        <Button
+          buttonType={`circular-button ${buttonType}`}
+          onClick={() => setShowValidationPanel(true)}
+        />
       </div>
       {showValidationPanel && (
         <ValidationPanel
           id="validation-panel"
           setOptionClicked={setButtonType}
           setShowValidationPanel={setShowValidationPanel}
-          sendToFacilitator={sendToFacilitator}
         />
       )}
     </Container>

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

@@ -8,7 +8,7 @@ export const Container = styled.div`
     display: flex;
     align-items: center;
 
-    > * + * {
+    * + * {
       margin-left: 3px;
     }
   }

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

@@ -0,0 +1,17 @@
+import { CarouselImagesLogin } from "./index";
+import LoginImage from "../../../assets/images/carouselImagesLogin/loginImage.svg";
+import Login2 from "../../../assets/images/carouselImagesLogin/login2.svg";
+import Login3 from "../../../assets/images/carouselImagesLogin/login3.svg";
+
+export default {
+  title: "Components/molecules/CarouselImagesLogin",
+  component: CarouselImagesLogin,
+};
+
+const Template = (args) => <CarouselImagesLogin {...args} />;
+
+export const CarouselImagesLoginDefault = Template.bind({});
+CarouselImagesLoginDefault.args = {
+  panelImg:[LoginImage, Login2, Login3],
+  panelText:"Elige la plataforma que conecta proovedores y retailers",
+};

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

@@ -0,0 +1,68 @@
+import { Container } from "./styles";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+import { useEffect } from "react";
+
+export const CarouselImagesLogin = ({
+  panelImg = [],
+  panelText,
+  panelColor,
+}) => {
+  const carouselStart = () => {
+    addEventListener("DOMContentLoaded", () => {
+      const images = panelImg;
+      let i = 1;
+      const img1 = document.querySelector("#img1");
+      const img2 = document.querySelector("#img2");
+      const divIndicadores = document.querySelector("#indicadores");
+      for (let index = 0; index < images.length; index++) {
+        const div = document.createElement("div");
+        div.classList.add("circles");
+        div.id = index;
+        divIndicadores.appendChild(div);
+      }
+      img1.src = images[0];
+      const circulos = document.querySelectorAll(".circles");
+      circulos[0].classList.add("resaltado");
+      const slideshow = () => {
+        img2.src = images[i];
+        const circulo_actual = Array.from(circulos).find((el) => el.id == i);
+        Array.from(circulos).forEach((cir) =>
+          cir.classList.remove("resaltado")
+        );
+        circulo_actual.classList.add("resaltado");
+        img1.classList.add("right");
+        img2.classList.add("active");
+        i++;
+        if (i == images.length) {
+          i = 0;
+        }
+        setTimeout(() => {
+          img1.src = img2.src;
+          img2.classList.remove("active");
+          img1.classList.remove("right");
+        }, 1000);
+      };
+      setInterval(slideshow, 4000);
+    });
+  };
+  useEffect(()=>{
+    carouselStart();
+  },[]) 
+
+  return (
+    <Container panelColor={panelColor}>
+      <div id="slideshow">
+        <img id="img1" />
+        <img id="img2" />
+      </div>
+      <ScreenHeader
+        fontFamily={FontFamily.Raleway}
+        color={GlobalColors.white}
+        headerType={"product-name-header"}
+        text={panelText}
+      />
+      <div id="indicadores"></div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,60 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  background: ${({ panelColor }) =>
+    panelColor
+      ? panelColor
+      : "linear-gradient(180deg,#ffffff 0%,rgba(255, 255, 255, 0.887706) 49.27%,rgba(255, 255, 255, 0) 100%),#d43594"};
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  #slideshow {
+    position: relative;
+    height: 65%;
+    img {
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      top: 8%;
+      left: 0;
+    }
+    #img2 {
+      left: 100%;
+    }
+    .right {
+      transform: translate(-100%, 0);
+      transition: all 1s;
+    }
+    .active {
+      left: 0 !important;
+      transition: all 1s;
+    }
+  }
+  .product-name-header {
+    position: absolute;
+    bottom: 16%;
+    right: 50%;
+    transform: translateX(50%);
+  }
+  #indicadores {
+    width: 100%;
+    text-align: center;
+    position: absolute;
+    bottom: 7%;
+    .circles {
+      background-color: white;
+      border: white 2px solid;
+      width: 20px;
+      height: 20px;
+      display: inline-block;
+      margin: 0 5px;
+      border-radius: 50%;
+      &.resaltado {
+      background-color: rgba(255, 255, 255, 0);
+      transition: background-color 0.8s;
+    }
+    }
+  }
+`;

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

@@ -15,16 +15,13 @@ export const FeaturesBar = ({ features }) => {
   return (
     <Container className={isIE ? "IEClass" : "gapClass"}>
       {features !== undefined &&
-        features.map(
-          (feature, index) =>
-            feature.value && (
-              <FeatureTag
-                key={index}
-                feature={feature.feature}
-                value={feature.value}
-              />
-            )
-        )}
+        features.map((feature, index) => (
+          <FeatureTag
+            key={index}
+            feature={feature.feature}
+            value={feature.value}
+          />
+        ))}
     </Container>
   );
 };

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

@@ -4,7 +4,6 @@ import { CheckBox } from "../../atoms/CheckBox";
 import { Button } from "../../atoms/GeneralButton";
 import { ValidationPanel } from "../../atoms/ValidationPanel";
 import { useState, useEffect } from "react";
-import Select from "../../atoms/Select";
 
 export const GalleryElement = ({
   validation = "null-button",
@@ -12,14 +11,6 @@ export const GalleryElement = ({
   gridLayout = false,
   id = "chk-default",
   label,
-  index,
-  imageInputs,
-  imageType,
-  imagePackagingType,
-  changeImage,
-  selectedImages,
-  setSelectedImages,
-  setCheckAll,
 }) => {
   const [statusValidation, setStatusValidation] = useState(validation);
   const [showValidationPanel, setShowValidationPanel] = useState(false);
@@ -34,20 +25,6 @@ export const GalleryElement = ({
     }
   };
 
-  const checkOnChange = (e) => {
-    const chkGlobal = document.getElementById("check-all-images");
-    const checkboxList = document.querySelectorAll("[id^='gallery-element-']");
-    let temp = selectedImages.slice();
-    e.target.checked
-      ? temp.push(image)
-      : (temp = temp.filter((img) => image.id !== img.id));
-    let counter = 0;
-    checkboxList?.forEach((chk) => chk.checked && counter++);
-    chkGlobal.checked = checkboxList.length === counter;
-    setCheckAll(checkboxList.length === counter);
-    setSelectedImages(temp);
-  };
-
   useEffect(() => {
     if (showValidationPanel) {
       document.addEventListener("click", closeValidationPanel, false);
@@ -57,66 +34,50 @@ export const GalleryElement = ({
   return (
     <Container className={gridLayout ? "grid-gallery" : "row-gallery"}>
       <div className="buttons-container">
-        <CheckBox id={id} label={label} onChange={(e) => checkOnChange(e)} />
+        <CheckBox id={id} label={id} label={label} />
+        <Button
+          buttonType={`circular-button ${statusValidation}`}
+          onClick={() => setShowValidationPanel(true)}
+        />
+        {showValidationPanel && (
+          <ValidationPanel
+            id={"validation-panel"}
+            setOptionClicked={setStatusValidation}
+            setShowValidationPanel={setShowValidationPanel}
+          />
+        )}
       </div>
       <div className="image-container">
         <ProductImage
           img={image?.src}
           altText={image?.altText}
-          imageType={`catalogue-image-${gridLayout ? "big" : "small"}-size`}
+          imageType={
+            gridLayout
+              ? "catalogue-image-big-size"
+              : "catalogue-image-small-size"
+          }
         />
         <div className="information-container">
+          {/* name */}
           <p>{image?.name}</p>
-          {!gridLayout && (
-            <>
-              <p>
-                {image.width}x{image.height}
-              </p>
-              <p>{image.ext}</p>
-              <Select
-                width="100%"
-                placeholder="Tipo de toma"
-                options={imageInputs}
-                valueSelected={image.image_id}
-                onChange={(e) => {
-                  changeImage({
-                    action: "changeImageInfo",
-                    attribute: "image_id",
-                    value: +e.target.value,
-                    index: index,
-                  });
-                }}
-              />
-              <Select
-                width="100%"
-                placeholder="Tipo de imagen"
-                options={imageType}
-                valueSelected={image.image_type}
-                onChange={(e) => {
-                  changeImage({
-                    action: "changeImageInfo",
-                    attribute: "image_type",
-                    value: +e.target.value,
-                    index: index,
-                  });
-                }}
-              />
-              <Select
-                width="100%"
-                placeholder="Tipo de empaque"
-                options={imagePackagingType}
-                valueSelected={image.packing_type}
-                onChange={(e) => {
-                  changeImage({
-                    action: "changeImageInfo",
-                    attribute: "packing_type",
-                    value: +e.target.value,
-                    index: index,
-                  });
-                }}
-              />
-            </>
-          )}
+          {/* <p>{image?.data[0]?.value}</p> */}
+          {/* size */}
+          {!gridLayout &&
+            image?.data.map(
+              (element, index) =>
+                index > 0 && <p key={index}>{element.value}</p>
+            )}
+          {/* <p>{image?.size}</p>
+
+        {!gridLayout && (
+          <>
+            <p>{image?.format}</p>
+            <p>{image?.resolution}</p>
+            <p className="highlighted-data">{image?.imageType}</p>
+            <p className="highlighted-image">{data?.identificator}</p>
+          </>
+        )}{" "}
+        */}
         </div>
       </div>
     </Container>

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

@@ -10,12 +10,12 @@ export const Container = styled.div`
 
     .buttons-container {
       position: absolute;
-      top: 5px;
-      left: 5px;
+      top: 0;
       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,17 +52,18 @@ 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;
-          text-align: center;
+
+          & + p {
+            margin-left: 18px;
+          }
 
           &.highlighted-data {
             font-family: ${FontFamily.AvenirNext};
@@ -74,40 +75,12 @@ 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;
-          } */
-        }
-
-        & > * {
-          flex: 1;
-          padding: 5px;
         }
       }
     }
+
+    & > * + * {
+      margin-left: 18px;
+    }
   }
 `;

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

@@ -1,25 +1,19 @@
 import { Container } from "./styles";
 import { CheckBox } from "../../atoms/CheckBox";
 
-export const GalleryHeader = ({ setCheckAll, setSelectedImages }) => {
-  const checkAll = (e) => {
-    const checkboxList = document.querySelectorAll("[id^='gallery-element-']");
-    checkboxList.forEach((chk) => (chk.checked = e.target.checked));
-    setCheckAll(e.target.checked);
-    if (!e.target.checked) setSelectedImages([]);
-  };
+export const GalleryHeader = () => {
   return (
     <Container>
       <div>
-        <CheckBox id="check-all-images" onChange={(e) => checkAll(e)} />
+        <CheckBox />
       </div>
+      <p className="value-header">Val.</p>
       <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>
+      <p>Nombre</p>
+      <p>Tamaño</p>
+      <p>Formato</p>
+      <p>Tipo de imagen</p>
+      <p>Identificador</p>
     </Container>
   );
 };