contentoh-components-library 8.0.0 → 10.0.1

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

@@ -9,6 +9,7 @@ export const Container = styled.h2`
   line-height: 42px;
   font-feature-settings: "pnum" on, "lnum" on;
   color: ${(props) => props.color};
+  position: relative;
 
   &.with-bold-text {
     span {
@@ -34,8 +35,12 @@ export const Container = styled.h2`
   &.input-name-header {
     font-size: 14px;
     line-height: 19px;
+    height: 19px;
+    max-width: 100%;
     font-weight: 400;
     color: ${({ color }) => (color ? color : GlobalColors.s5)};
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &.date-header {
@@ -52,6 +57,11 @@ export const Container = styled.h2`
     font-weight: 400;
     font-size: 11px;
     line-height: 18px;
+
+    &:last-child {
+      min-width: 50px;
+      text-align: center;
+    }
   }
 
   &.gray-table-row {
@@ -63,12 +73,14 @@ export const Container = styled.h2`
     background-color: ${GlobalColors.s2};
     padding: 1px 3px;
     border-radius: 3px;
+    min-width: 50px;
+    text-align: center;
   }
-  &.header-and-paragraph{
+  &.header-and-paragraph {
     font-family: ${FontFamily.Raleway};
     font-size: 36px;
     color: ${GlobalColors.s5};
-    p{
+    p {
       font-family: ${FontFamily.AvenirNext};
       font-size: 14px;
       color: ${GlobalColors.s4};

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

@@ -15,6 +15,8 @@ export default function Select(props) {
         {props.options &&
           props.options.map((item, i) => (
             <option
+              className={item.required ? "option-required" : ""}
+              //className={ ? "option-required" : ""}
               key={"select-" + item.value ? item.value : item + "-" + i}
               value={item.value ? item.value : item}
               // selected={
@@ -23,7 +25,7 @@ export default function Select(props) {
               //     : item === props.valueSelected && "selected"
               // }
             >
-              {item.name ? item.name : item}
+              {item.name ? item.name : item} {item?.required ? "*" : ""}
             </option>
           ))}
       </SelectCustom>

package/src/components/atoms/Select/style.js

@@ -65,8 +65,7 @@ export const SelectCustom = styled.select`
   &::-ms-expand {
     display: none;
   }
-  &:option {
-    background-color: blue;
+  option {
     &:disabled {
       color: #d4d1d7;
     }

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

@@ -0,0 +1,23 @@
+import { SliderToolTip } from "./index";
+import InfoIcon from "../../../assets/images/sliderToolTip/infoIcon.svg";
+import Slide1 from "../../../assets/images/sliderToolTip/slide1.svg";
+import Slide2 from "../../../assets/images/sliderToolTip/slide2.svg";
+import Slide3 from "../../../assets/images/sliderToolTip/slide3.svg";
+import Slide4 from "../../../assets/images/sliderToolTip/slide4.svg";
+import Slide5 from "../../../assets/images/sliderToolTip/slide5.svg";
+
+export default {
+  title: "Components/atoms/SliderToolTip",
+  component: SliderToolTip,
+};
+
+const Template = (args) => <SliderToolTip {...args} />;
+
+export const SliderToolTipDefault = Template.bind({});
+
+SliderToolTipDefault.args = {InfoIcon:InfoIcon,
+  Slide1:Slide1,
+  Slide2:Slide2,
+  Slide3:Slide3,
+  Slide4:Slide4,
+  Slide5:Slide5,};

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

@@ -0,0 +1,182 @@
+import { Container, Slider } from "./styles";
+import { useEffect, useState } from "react";
+
+export const SliderToolTip = ({
+  InfoIcon,
+  Slide1,
+  Slide2,
+  Slide3,
+  Slide4,
+  Slide5,
+}) => {
+  const [showMenu, setShowMenu] = useState(false);
+  const closeMenu = (e) => {
+    if (!e.target.closest("#div-slider") && showMenu) {
+      document.removeEventListener("click", closeMenu, false);
+      setShowMenu(false);
+    }
+  };
+  useEffect(() => {
+    if (showMenu) {
+      document.addEventListener("click", closeMenu, false);
+    }
+  }, [showMenu]);
+  const color = (id) => {
+    if (id === "slidea1") {
+      document.getElementById("slidea1").style.backgroundColor = "#E33AA9";
+      document.getElementById("slidea2").style.backgroundColor = "#C4C4C4";
+      document.getElementById("slidea3").style.backgroundColor = "#C4C4C4";
+      document.getElementById("slidea4").style.backgroundColor = "#C4C4C4";
+      document.getElementById("slidea5").style.backgroundColor = "#C4C4C4";
+    }
+    if (id === "slidea2") {
+      document.getElementById("slidea1").style.backgroundColor = "#FAFAFA";
+      document.getElementById("slidea2").style.backgroundColor = "#E33AA9";
+      document.getElementById("slidea3").style.backgroundColor = "#C4C4C4";
+      document.getElementById("slidea4").style.backgroundColor = "#C4C4C4";
+      document.getElementById("slidea5").style.backgroundColor = "#C4C4C4";
+    }
+    if (id === "slidea3") {
+      document.getElementById("slidea1").style.backgroundColor = "#FAFAFA";
+      document.getElementById("slidea2").style.backgroundColor = "#FAFAFA";
+      document.getElementById("slidea3").style.backgroundColor = "#E33AA9";
+      document.getElementById("slidea4").style.backgroundColor = "#C4C4C4";
+      document.getElementById("slidea5").style.backgroundColor = "#C4C4C4";
+    }
+    if (id === "slidea4") {
+      document.getElementById("slidea1").style.backgroundColor = "#FAFAFA";
+      document.getElementById("slidea2").style.backgroundColor = "#FAFAFA";
+      document.getElementById("slidea3").style.backgroundColor = "#FAFAFA";
+      document.getElementById("slidea4").style.backgroundColor = "#E33AA9";
+      document.getElementById("slidea5").style.backgroundColor = "#C4C4C4";
+    }
+    if (id === "slidea5") {
+      document.getElementById("button-slide").style.display = "flex";
+    }
+  };
+
+  return (
+    <>
+      <Container
+        className="container-slider"
+        
+      >
+        <img src={InfoIcon} alt="info icon" onClick={(e) => {
+          setShowMenu(!showMenu);
+          if (showMenu) {
+            document.removeEventListener("click", closeMenu, false);
+          }
+        }}/>
+        {showMenu && (
+        <Slider id="div-slider" >
+          <ul className="slider">
+            <li id="slide1">
+              <div>
+                <img src={Slide1} />
+              </div>
+              <p>
+                Creamos tu contenido, y todo lo que haga falta para tu producto,
+                cada sección puedes socilitar contenido enriquecido, y nosotros
+                lo haremos por ti.
+              </p>
+            </li>
+            <li id="slide2">
+              <img src={Slide2} />
+              <p>
+                Puedes agregar solicitudes de contenido enriquecido a tu carrito
+                de compra las veces que sean necesarias. Una vez completada tu
+                lista con los servicios necesitados sigue el proceso de compra
+                en checkout.
+              </p>
+            </li>
+            <li id="slide3">
+              <img src={Slide3} />
+              <p>
+                Revisa el contenido que deseas solicilitar, valida y tambien
+                puedes agregar contenido extra, traducciones, o simplemente
+                completar el checkout.
+              </p>
+            </li>
+            <li id="slide4">
+              <img src={Slide4} />
+              <p>
+                Elige el tipo de entrega de tu producto, puedes ser recolección
+                en el lugar o por el contrario puedes dejarlo en nuestras
+                oficinas.
+              </p>
+            </li>
+            <li id="slide5">
+              <div>
+                <img src={Slide5} />
+              </div>
+              <div className="lema-end">
+                <p>
+                  Finalmente elige la forma de pago que más te guste, procede
+                  con el pago y listo.
+                </p>
+                <span>Bienvenido al modo Content-oh!</span>
+              </div>
+              <button id="button-slide"
+                onClick={(e) => {
+                  document.removeEventListener("click", closeMenu, false);
+                  setShowMenu(false);
+                }}
+              >
+                Cerrar
+              </button>
+            </li>
+          </ul>
+          <ul className="menu">
+            <li>
+              <a
+                href="#slide1"
+                id="slidea1"
+                onClick={(e) => {
+                  color("slidea1");
+                }}
+              ></a>
+            </li>
+            <li>
+              <a
+                href="#slide2"
+                id="slidea2"
+                onClick={(e) => {
+                  color("slidea2");
+                }}
+              ></a>
+            </li>
+            <li>
+              <a
+                href="#slide3"
+                id="slidea3"
+                onClick={(e) => {
+                  color("slidea3");
+                }}
+              ></a>
+            </li>
+            <li>
+              <a
+                href="#slide4"
+                id="slidea4"
+                onClick={(e) => {
+                  color("slidea4");
+                }}
+              ></a>
+            </li>
+            <li>
+              <a
+                href="#slide5"
+                id="slidea5"
+                onClick={(e) => {
+                  color("slidea5");
+                }}
+              ></a>
+            </li>
+          </ul>
+        </Slider>
+      )}
+      </Container>
+      
+    </>
+  );
+};

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

@@ -0,0 +1,168 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  background: transparent;
+  cursor: pointer;
+  width: 40px !important;
+  margin: 9px;
+  position: relative;
+`;
+export const Slider = styled.div`
+  font-family: sans-serif;
+  margin: auto;
+  background: #281f33;
+  border-radius: 6px;
+  
+  padding: 16px;
+  padding-top: 20px;
+  box-sizing: border-box;
+  position: absolute;
+  top: calc(100% + 25px);
+  left: calc(50% - 223px / 2);
+  #div-slider {
+    width: 310px;
+  }
+  ul,
+  li {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+  .slider {
+    position: relative;
+    max-width: 300px;
+    width: 100%;
+    height: 270px;
+    margin: 0;
+    li {
+      position: absolute;
+      left: 0px;
+      top: 0px;
+      opacity: 0;
+      width: inherit;
+      height: inherit;
+      transition: opacity 0.5s;
+      background: transparent;
+      img {
+        width: 100%;
+        height: 180px;
+        border-radius: 4px;
+        background-color: #fafafa;
+        & + * {
+          margin-top: 10px;
+        }
+      }
+      p {
+        font-family: "Avenir Next";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 10px;
+        line-height: 12px;
+        text-align: center;
+        letter-spacing: -0.015em;
+        color: #fafafa;
+        background-color: #281f33;
+      }
+      div {
+        background-color: #fafafa;
+        height: 180px;
+        border-radius: 4px;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        img {
+          height: 40px;
+        }
+        & + * {
+          margin-top: 13px;
+        }
+      }
+    }
+    #slide5 {
+      div {
+        height: 130px;
+        width: 100%;
+        background-color: #fafafa;
+        display: flex;
+        align-items: center;
+        border-radius: 4px;
+        img {
+          width: 100%;
+          height: 115px;
+          object-fit: contain;
+        }
+      }
+      .lema-end {
+        justify-content: center;
+        justify-content: space-evenly;
+        height: 100px;
+        background-color: #281f33;
+        flex-direction: column;
+        justify-content: space-evenly;
+        border-radius: inherit;
+        span {
+          font-family: "Avenir Next";
+          font-style: normal;
+          font-weight: 700;
+          font-size: 17px;
+          line-height: 15px;
+          text-align: center;
+          letter-spacing: -0.015em;
+          color: #fafafa;
+        }
+      }
+      button {
+        display: none;
+        justify-content: center;
+        align-items: center;
+        padding: 10px;
+        width: 160px;
+        height: 30px;
+        border: 1px solid #d4d1d7;
+        border-radius: 15px;
+        color: #fafafa;
+        background-color: #281f33;
+        font-family: "Avenir Next";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 25px;
+        letter-spacing: -0.015em;
+        position: absolute;
+        left: 22%;
+        top: 88%;
+        cursor: pointer;
+      }
+    }
+  }
+
+  li:first-child {
+    opacity: 1; /*Mostramos el primer <li>*/
+  }
+  li:target {
+    opacity: 1; /*Mostramos el primer <li>*/
+  }
+  .menu {
+    margin: 0;
+    text-align: center;
+    li {
+      display: inline-block;
+      text-align: center;
+      & + * {
+        margin-left: 15px;
+      }
+      a {
+        display: inline-block;
+        text-decoration: none;
+        background-color: #c4c4c4;
+        width: 10px;
+        height: 10px;
+        border-radius: 100%;
+      }
+      #slidea1 {
+        background-color: #e33aa9;
+      }
+    }
+  }
+`;

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

@@ -1,9 +1,37 @@
 import { Container } from "./styles";
 
 export const StatusTag = ({ statusType, ovalForm }) => {
+  const getShortStatus = (status) => {
+    switch (status) {
+      case "COMPLETED":
+        return "C";
+      case "RECEPTION":
+        return "Pr";
+      case "NULL":
+        return "-";
+      case "RECEIVED":
+        return "Rc";
+      case "IN_PROGRESS":
+        return "P";
+      case "ASSIGNED":
+        return "As";
+      case "APPROVED":
+        return "Ap";
+      case "VALIDATING":
+        return "V";
+      case "PAID_OUT":
+        return "Po";
+      default:
+        return status;
+    }
+  };
   return (
-    <Container className={`status-${statusType} ${ovalForm && "oval-form"}`}>
-      <p>{statusType}</p>
+    <Container
+      className={`status-${getShortStatus(statusType)} ${
+        ovalForm && "oval-form"
+      }`}
+    >
+      <p>{getShortStatus(statusType)}</p>
     </Container>
   );
 };

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

@@ -2,7 +2,8 @@ import styled from "styled-components";
 import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.div`
-  width: 30px;
+  width: fit-content;
+  padding: 0 10px;
   height: 20px;
   background-color: ${GlobalColors.s3};
   border-radius: 3px;
@@ -16,18 +17,22 @@ export const Container = styled.div`
   }
 
   &.status-As,
-  &.status-P {
+  &.status-P,
+  &.status-IN_PROGRESS,
+  &.status-QF {
     background-color: ${GlobalColors.in_progress};
   }
 
   &.status-Pr,
-  &.status-Rr {
+  &.status-Rr,
+  &.status-Rc {
     background-color: ${GlobalColors.reception};
   }
 
   &.status-AA,
   &.status-AP,
-  &.status-AC {
+  &.status-AC,
+  &.status-AF {
     background-color: ${GlobalColors.finished};
   }
 

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

@@ -7,18 +7,17 @@ export const ValidationPanel = ({
   id,
   setOptionClicked,
   setShowValidationPanel,
-  sendToFacilitator,
+  approve,
+  reject,
+  approveAll,
+  rejectAll,
+  showApproveRejectAll,
 }) => {
-  const optionSelected = (option) => {
-    setOptionClicked(`${option}-button`);
-    setShowValidationPanel(false);
-  };
-
   return (
     <Container id={id}>
       <button
         onClick={() => {
-          sendToFacilitator("A");
+          approve && approve();
         }}
         className="validation-option"
       >
@@ -27,22 +26,35 @@ export const ValidationPanel = ({
       </button>
       <button
         onClick={() => {
-          sendToFacilitator("R");
+          reject && reject();
         }}
         className="validation-option"
       >
         <img src={rejectIcon} alt="reject button" />
         <p>Rechazado</p>
       </button>
-      <button
-        onClick={() => {
-          optionSelected("null");
-        }}
-        className="validation-option"
-      >
-        <img src={nullIcon} alt="null button" />
-        <p>Null</p>
-      </button>
+      {showApproveRejectAll && (
+        <>
+          <button
+            onClick={() => {
+              approveAll && approveAll();
+            }}
+            className="validation-option"
+          >
+            <img src={acceptIcon} alt="accept button" />
+            <p>Validar todo y enviar a evaluación</p>
+          </button>
+          <button
+            onClick={() => {
+              rejectAll && rejectAll();
+            }}
+            className="validation-option"
+          >
+            <img src={rejectIcon} alt="reject button" />
+            <p>Rechazar todo y enviar a evaluación</p>
+          </button>
+        </>
+      )}
     </Container>
   );
 };

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

@@ -3,8 +3,7 @@ import { GlobalColors, FontFamily } from "../../../global-files/variables";
 
 export const Container = styled.div`
   background-color: ${GlobalColors.s2};
-  width: 110px;
-  height: 92px;
+  width: max-content;
   padding: 8px;
   border: 1px solid ${GlobalColors.s3};
   box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
@@ -33,6 +32,11 @@ export const Container = styled.div`
       }
     }
 
+    &:hover {
+      background-color: ${GlobalColors.s3};
+      border-radius: 10px;
+    }
+
     & + * {
       margin-top: 8px;
     }

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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,54 @@
+import { Container } from "./styles";
+import iconLogoContentoh from "../../../assets/images/verticalSideMenuMainPage/iconLogoContentoh.svg";
+import iconProduct from "../../../assets/images/verticalSideMenuMainPage/iconProduct.svg";
+import iconGroup from "../../../assets/images/verticalSideMenuMainPage/iconGroup.svg";
+import iconLogo from "../../../assets/images/verticalSideMenuMainPage/iconLogo.svg";
+import iconSpeedometer from "../../../assets/images/verticalSideMenuMainPage/iconSpeedometer.svg";
+import iconTask from "../../../assets/images/verticalSideMenuMainPage/iconTask.svg";
+import openMenu from "../../../assets/images/verticalSideMenuMainPage/openMenu.svg";
+import React, { useState, useEffect, useCallback } from "react";
+
+export const VerticalSideMenuMainPage = () => {
+  const [trueBar, setTrueBar] = useState(false);
+  const active = () => {
+    //document.getElementById("slidea1").style.border= "1px solid rgb(227, 58, 169)";
+  };
+  return (
+    <Container bar={trueBar}>
+      <div className="navbar-top">
+        <img
+          src={trueBar ? iconLogoContentoh : iconLogo}
+          alt="Logo"
+          className="logo"
+        ></img>
+        <div className="option">
+          <div>
+            <img src={iconSpeedometer} alt="Speed Meter" width={"25px"}></img>
+          </div>
+          <div>
+            <img src={iconProduct} alt="Focus Product" width={"25px"}></img>
+          </div>
+          <div>
+            <img src={iconGroup} alt="Group" width={"25px"}></img>
+          </div>
+          <div>
+            <img src={iconLogo} alt="Logo" width={"25px"}></img>
+          </div>
+          <div>
+            <img src={iconTask} alt="Task" width={"25px"}></img>
+          </div>
+        </div>
+      </div>
+      <div>
+        <img
+          src={openMenu}
+          alt="Open Menu"
+          onClick={() => {
+            setTrueBar(true);
+            active();
+          }}
+        ></img>
+      </div>
+    </Container>
+  );
+};