contentoh-components-library 21.1.26 → 21.1.27

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

@@ -6,6 +6,7 @@ import { FontFamily, GlobalColors } from "../../../global-files/variables";
 export const Container = styled.div`
   input {
     display: none;
+
     &:checked + label {
       &:before {
         background-color: ${GlobalColors.white};

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

@@ -1,89 +1,23 @@
 import { SliderToolTip } from "./index";
 import InfoIcon from "../../../assets/images/sliderToolTip/infoIcon.svg";
-import Slide1 from "../../../assets/images/sliderToolTip/slide21.svg";
-import Slide2 from "../../../assets/images/sliderToolTip/slide22.svg";
-import Slide3 from "../../../assets/images/sliderToolTip/slide23.svg";
-import Slide1_1 from "../../../assets/images/sliderToolTip/slide1.svg";
-import Slide1_2 from "../../../assets/images/sliderToolTip/slide2.svg";
-import Slide1_3 from "../../../assets/images/sliderToolTip/slide3.svg";
-import Slide1_4 from "../../../assets/images/sliderToolTip/slide4.svg";
-import Slide1_5 from "../../../assets/images/sliderToolTip/slide5.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,
-  argTypes: {
-    iconSize: {
-      options: ["big-image", "medium-image", "small-image"],
-      control: { type: "select" },
-    },
-    slidePosition: {
-      options: ["top-slide", "bottom-slide"],
-      control: { type: "select" },
-    },
-  },
 };
 
 const Template = (args) => <SliderToolTip {...args} />;
 
 export const SliderToolTipDefault = Template.bind({});
-SliderToolTipDefault.args = {
-  infoIcon: InfoIcon,
-  slidefront: [
-    {
-      slide: Slide1,
-      title: "Valida tu producto en cada activo digital",
-      description:
-        "Al solicitar a Content-oh! podrás validar la información, imágenes y documentación de tu producto, esto hará más sencillo que puedas aprobar o rechazar el contenido.",
-    },
-    {
-      slide: Slide2,
-      title: "Aprueba o rechaza con un clic",
-      description:
-        "Cuando termines de revisar tu información, elige si aproebas o rechazas, esto enviara una notificiación a nuestro equipo, para continuar o corregir el producto.",
-    },
-    {
-      slide: Slide3,
-      title: "Estatus de tu producto en el proceso",
-      description:
-        "La mayor parte del proceso podrás identificar que estatus tiene tu producto, esto dara visibilidad a todo tu equipo para saber la etapa se encuentra.",
-    },
-  ],
-  slidePosition: "bottom-slide",
-  iconSize: "medium-image",
-};
 
-export const SliderToolTipSendContentoh = Template.bind({});
-SliderToolTipSendContentoh.args = {
-  infoIcon: InfoIcon,
-  slidefront: [
-    {
-      slide: Slide1_1,
-      description:
-        "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.",
-    },
-    {
-      slide: Slide1_2,
-      description:
-      "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.",
-    },
-    {
-      slide: Slide1_3,
-      description:
-        "Revisa el contenido que deseas solicilitar, valida y tambien puedes agregar contenido extra, traducciones, o simplemente completar el checkout.",
-    },
-    {
-      slide: Slide1_4,
-      description:
-        "Elige el tipo de entrega de tu producto, puedes ser recolección en el lugar o por el contrario puedes dejarlo en nuestras oficinas.",
-    },
-    {
-      slide: Slide1_5,
-      title: "Bienvenido al modo Content-oh!",
-      description:
-        "Finalmente elige la forma de pago que más te guste, procede con el pago y listo.",
-    },
-  ],
-  slidePosition: "top-slide",
-  iconSize: "big-image",
-};
+SliderToolTipDefault.args = {InfoIcon:InfoIcon,
+  Slide1:Slide1,
+  Slide2:Slide2,
+  Slide3:Slide3,
+  Slide4:Slide4,
+  Slide5:Slide5,};

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

@@ -2,10 +2,12 @@ import { Container, Slider } from "./styles";
 import { useEffect, useState } from "react";
 
 export const SliderToolTip = ({
-  infoIcon,
-  slidefront,
-  iconSize,
-  slidePosition,
+  InfoIcon,
+  Slide1,
+  Slide2,
+  Slide3,
+  Slide4,
+  Slide5,
 }) => {
   const [showMenu, setShowMenu] = useState(false);
   const closeMenu = (e) => {
@@ -20,100 +22,161 @@ export const SliderToolTip = ({
     }
   }, [showMenu]);
   const color = (id) => {
-    for (let i = 1; i <= slidefront.length; i++) {
-      if (id === `slidea${i}`) {
-        document.getElementById(`slidea${i}`).style.backgroundColor = "#E33AA9";
-        if (id === `slidea${slidefront.length}`) {
-          document.getElementById("button-slide").style.display = "flex";
-        }
-      } else if (id > `slidea${i}`) {
-        document.getElementById(`slidea${i}`).style.backgroundColor = "#FAFAFA";
-      } else if (id < `slidea${i}`) {
-        document.getElementById(`slidea${i}`).style.backgroundColor = "#C4C4C4";
-      }
+    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"
-          className={iconSize}
-          onClick={(e) => {
-            setShowMenu(!showMenu);
-            if (showMenu) {
-              document.removeEventListener("click", closeMenu, false);
-            }
-          }}
-        />
+      <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"
-            className={slidePosition}
-            length={slidefront.length}
-          >
-            <ul className="slider">
-              {slidefront.map((item, index) => (
-                <li
-                  id={`slide${index + 1}`}
-                  className={
-                    `slide${index + 1}` === `slide${slidefront.length}`
-                      ? "end-div"
-                      : ""
-                  }
-                >
-                  <div>
-                    <img src={slidefront[index].slide} />
-                  </div>
-                  {`slide${index + 1}` === `slide${slidefront.length}` ? (
-                    <>
-                      <div className="lema-end">
-                        <span>{slidefront[index].title}</span>
-                        <p>{slidefront[index].description}</p>
-                      </div>
-                      <button
-                        id="button-slide"
-                        onClick={(e) => {
-                          document.removeEventListener(
-                            "click",
-                            closeMenu,
-                            false
-                          );
-                          setShowMenu(false);
-                        }}
-                      >
-                        Cerrar
-                      </button>
-                    </>
-                  ) : (
-                    <>
-                      {slidefront[index].title !== undefined ? (
-                        <span>{slidefront[index].title}</span>
-                      ) : null}
-                      <p>{slidefront[index].description}</p>
-                    </>
-                  )}
-                </li>
-              ))}
-            </ul>
-            <ul className="menu">
-              {slidefront.map((item, index) => (
-                <li>
-                  <a
-                    href={`#slide${index + 1}`}
-                    id={`slidea${index + 1}`}
-                    onClick={(e) => {
-                      color(`slidea${index + 1}`);
-                    }}
-                  ></a>
-                </li>
-              ))}
-            </ul>
-          </Slider>
-        )}
+        <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

@@ -4,45 +4,22 @@ import { GlobalColors, FontFamily } from "../../../global-files/variables";
 export const Container = styled.div`
   background: transparent;
   cursor: pointer;
+  width: 40px !important;
+  margin: 9px;
   position: relative;
-  & + * {
-    margin-left: 10px;
-  }
-  img {
-    &.small-image {
-      width: 20px;
-      height: 20px;
-    }
-    &.medium-image {
-      width: 30px;
-      height: 30px;
-    }
-    &.big-image {
-      width: 40px;
-      height: 40px;
-    }
-  }
 `;
 export const Slider = styled.div`
   font-family: sans-serif;
   margin: auto;
   background: #281f33;
   border-radius: 6px;
-  width: 310px !important;
+  
   padding: 16px;
   padding-top: 20px;
   box-sizing: border-box;
   position: absolute;
-  cursor: default;
-  z-index: 2;
-  &.top-slide {
-    top: calc(100% - 370px);
-    left: calc(100% - 1168px);
-  }
-  &.bottom-slide {
-    top: calc(100%);
-    left: calc(-280px / 2);
-  }
+  top: calc(100% + 25px);
+  left: calc(50% - 223px / 2);
   #div-slider {
     width: 310px;
   }
@@ -58,22 +35,6 @@ export const Slider = styled.div`
     width: 100%;
     height: 270px;
     margin: 0;
-    span {
-      font-family: "Avenir Next";
-      font-style: normal;
-      font-weight: 500;
-      font-size: 15px;
-      line-height: 15px;
-      text-align: center;
-      letter-spacing: -0.015em;
-      color: #fafafa;
-      display: flex;
-      justify-content: center;
-      background-color: #281f33;
-      & + * {
-        margin-top: 10px;
-      }
-    }
     li {
       position: absolute;
       left: 0px;
@@ -110,16 +71,15 @@ export const Slider = styled.div`
         display: flex;
         justify-content: center;
         flex-direction: column;
-        align-items: center;
         img {
-          width: 90%;
+          height: 40px;
         }
         & + * {
           margin-top: 13px;
         }
       }
     }
-    .end-div {
+    #slide5 {
       div {
         height: 130px;
         width: 100%;
@@ -136,11 +96,21 @@ export const Slider = styled.div`
       .lema-end {
         justify-content: center;
         justify-content: space-evenly;
-        height: 110px;
+        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;
@@ -161,16 +131,17 @@ export const Slider = styled.div`
         letter-spacing: -0.015em;
         position: absolute;
         left: 22%;
-        top: 90%;
+        top: 88%;
         cursor: pointer;
       }
     }
   }
+
   li:first-child {
-    opacity: 1;
+    opacity: 1; /*Mostramos el primer <li>*/
   }
   li:target {
-    opacity: 1;
+    opacity: 1; /*Mostramos el primer <li>*/
   }
   .menu {
     margin: 0;

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

@@ -9,9 +9,10 @@ export const ValidationPanel = ({
   setShowValidationPanel,
   approve,
   reject,
+  approveAll,
+  rejectAll,
   showApproveRejectAll,
 }) => {
-  console.log(showApproveRejectAll);
   return (
     <Container id={id}>
       <button
@@ -36,7 +37,7 @@ export const ValidationPanel = ({
         <>
           <button
             onClick={() => {
-              approve && approve();
+              approveAll && approveAll();
             }}
             className="validation-option"
           >
@@ -45,7 +46,7 @@ export const ValidationPanel = ({
           </button>
           <button
             onClick={() => {
-              reject && reject();
+              rejectAll && rejectAll();
             }}
             className="validation-option"
           >

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

@@ -1,9 +1,4 @@
 import { VerticalSideMenuMainPage } from "./index";
-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";
 
 export default {
   title: "Components/atoms/VerticalSideMenuMainPage",
@@ -14,22 +9,4 @@ const Template = (args) => <VerticalSideMenuMainPage {...args} />;
 
 export const VerticalSideMenuMainPageDefault = Template.bind({});
 
-VerticalSideMenuMainPageDefault.args = {
-  menuoption: [
-    { icon: iconSpeedometer, path: "/Dashboard", title: "Dashborad" },
-    {
-      icon: iconProduct,
-      path: "/products",
-      title: "Productos",
-      suboption: [{ path: "/Dashboard", title: "General" },{ path: "/AddProducts", title: "Agregar Producto" }],
-    },
-    { icon: iconGroup, path: "/providers", title: "Proovedores" },
-    {  
-      icon: iconLogo,
-      path: "/ContentohProducts",
-      title: "Content Oh!",
-      suboption: { path: "/ContentohProducts", title: "Productos" },
-    },
-    { icon: iconTask, path: "/tasks/7", title: "Tareas" },
-  ],
-};
+VerticalSideMenuMainPageDefault.args = {};

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

@@ -1,16 +1,20 @@
 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 closeMenu from "../../../assets/images/verticalSideMenuMainPage/closeMenu.svg";
-import React, { useState } from "react";
-import { ItemPasswordStrength } from "../../molecules/LoginPasswordStrength/styles";
+import React, { useState, useEffect, useCallback } from "react";
 
-export const VerticalSideMenuMainPage = ({ menuoption }) => {
-  const [trueBar, setTrueBar] = useState("");
-  let sub;
+export const VerticalSideMenuMainPage = () => {
+  const [trueBar, setTrueBar] = useState(false);
+  const active = () => {
+    //document.getElementById("slidea1").style.border= "1px solid rgb(227, 58, 169)";
+  };
   return (
-    <Container className={trueBar} bar={trueBar}>
+    <Container bar={trueBar}>
       <div className="navbar-top">
         <img
           src={trueBar ? iconLogoContentoh : iconLogo}
@@ -18,42 +22,30 @@ export const VerticalSideMenuMainPage = ({ menuoption }) => {
           className="logo"
         ></img>
         <div className="option">
-          {menuoption.map((item) => (
-            <>
-              <div
-                className="option-link"
-                exact
-                activeClassName="active"
-                to={item.path}
-              >
-                <img src={item.icon} alt={item.title} width={"25px"}></img>
-                {trueBar && <p>{item.title}</p>}
-              </div>
-              {item.suboption === undefined ? (
-                ""
-              ) : (
-                <>
-                  {menuoption[1].suboption.map((subitem) => (
-                    <div className="sub-option">
-                      <div exact activeClassName="active" to={subitem.path}>
-                        {trueBar && <p>{subitem.title}</p>}
-                      </div>
-                    </div>
-                  ))}
-                </>
-              )}
-            </>
-          ))}
+          <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 className="menu-bottom">
+      <div>
         <img
-          src={trueBar ? closeMenu : openMenu}
+          src={openMenu}
           alt="Open Menu"
           onClick={() => {
-            {
-              trueBar ? setTrueBar("") : setTrueBar("actived");
-            }
+            setTrueBar(true);
+            active();
           }}
         ></img>
       </div>