contentoh-components-library 21.1.51 → 21.1.52

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

@@ -2,14 +2,13 @@ import { Container, Slider } from "./styles";
 import { useEffect, useState } from "react";
 
 export const SliderToolTip = ({
-  InfoIcon,
-  Slide1,
-  Slide2,
-  Slide3,
-  Slide4,
-  Slide5,
+  infoIcon,
+  slidefront,
+  iconSize,
+  slidePosition,
 }) => {
   const [showMenu, setShowMenu] = useState(false);
+ 
   const closeMenu = (e) => {
     if (!e.target.closest("#div-slider") && showMenu) {
       document.removeEventListener("click", closeMenu, false);
@@ -22,161 +21,106 @@ export const SliderToolTip = ({
     }
   }, [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";
+    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";
+      }
     }
   };
 
   return (
     <>
-      <Container
-        className="container-slider"
-        
-      >
-        <img src={InfoIcon} alt="info icon" onClick={(e) => {
-          setShowMenu(!showMenu);
-          if (showMenu) {
-            document.removeEventListener("click", closeMenu, false);
-          }
-        }}/>
+      <Container>
+        <img
+          src={infoIcon}
+          alt="info icon"
+          className={iconSize}
+          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>
-      )}
+          <Slider id="div-slider" className={slidePosition}>
+            <ul className="slider">
+              {slidefront.map((item, index) => (
+                <li
+                  id={`slide${index + 1}`}
+                  className={
+                    `slide${index + 1}` === `slide${slidefront.length}`
+                      ? "end-div"
+                      : ""
+                  }
+                >
+                  <div>
+                    <img src={item.slide} />
+                  </div>
+                  {`slide${index + 1}` === `slide${slidefront.length}` ? (
+                    <>
+                      <div className="lema-end">
+                        <span>{item.title}</span>
+                        <p>{item.description}</p>
+                      </div>
+                      <button
+                        id="button-slide"
+                        onClick={(e) => {
+                          document.removeEventListener(
+                            "click",
+                            closeMenu,
+                            false
+                          );
+                          setShowMenu(false);
+                        }}
+                      >
+                        Cerrar
+                      </button>
+                    </>
+                  ) : (
+                    <>
+                      {item.title !== undefined ? (
+                        <span>{item.title}</span>
+                      ) : null}
+                      <p>{item.description}</p>
+                    </>
+                  )}
+                </li>
+              ))}
+            </ul>
+            <ul className="menu">
+              {slidefront.map((item, index) => (
+                <li>
+                  <a
+                    id={`slidea${index + 1}`}
+                    onClick={(e) => {
+                      color(`slidea${index + 1}`);
+                      for (let i = 1; i <= slidefront.length; i++) {
+                        if (index + 1 === i) {
+                          document.getElementById(
+                            `slide${index + 1}`
+                          ).style.opacity = 1;
+                        } else if (index + 1 > i || index + 1 < i) {
+                          document.getElementById(
+                            `slide${i}`
+                          ).style.opacity = 0;
+                        }
+                      }
+                    }}
+                  ></a>
+                </li>
+              ))}
+            </ul>
+          </Slider>
+        )}
       </Container>
-      
     </>
   );
 };

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

@@ -4,24 +4,45 @@ 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;
   padding: 16px;
   padding-top: 20px;
   box-sizing: border-box;
   position: absolute;
-  top: calc(100% + 25px);
-  left: calc(50% - 223px / 2);
-  #div-slider {
-    width: 310px;
+  cursor: default;
+  z-index: 2;
+  width: 310px;
+  &.top-slide {
+    top: calc(100% - 370px);
+    left: calc(100% - 175px);
+  }
+  &.bottom-slide {
+    top: 100%;
+    right: calc(100% + -70px);
   }
   ul,
   li {
@@ -71,15 +92,32 @@ export const Slider = styled.div`
         display: flex;
         justify-content: center;
         flex-direction: column;
+        align-items: center;
         img {
-          height: 40px;
+          width: 90%;
         }
         & + * {
           margin-top: 13px;
         }
       }
+      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;
+      }
     }
-    #slide5 {
+    }
+    .end-div {
       div {
         height: 130px;
         width: 100%;
@@ -96,21 +134,11 @@ export const Slider = styled.div`
       .lema-end {
         justify-content: center;
         justify-content: space-evenly;
-        height: 100px;
+        height: 110px;
         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;
@@ -131,17 +159,13 @@ export const Slider = styled.div`
         letter-spacing: -0.015em;
         position: absolute;
         left: 22%;
-        top: 88%;
+        top: 90%;
         cursor: pointer;
       }
     }
   }
-
   li:first-child {
-    opacity: 1; /*Mostramos el primer <li>*/
-  }
-  li:target {
-    opacity: 1; /*Mostramos el primer <li>*/
+    opacity: 1;
   }
   .menu {
     margin: 0;
@@ -159,6 +183,7 @@ export const Slider = styled.div`
         width: 10px;
         height: 10px;
         border-radius: 100%;
+        cursor: pointer;
       }
       #slidea1 {
         background-color: #e33aa9;

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

@@ -1,4 +1,9 @@
 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",
@@ -9,4 +14,22 @@ const Template = (args) => <VerticalSideMenuMainPage {...args} />;
 
 export const VerticalSideMenuMainPageDefault = Template.bind({});
 
-VerticalSideMenuMainPageDefault.args = {};
+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" },
+  ],
+};

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

@@ -1,21 +1,15 @@
 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, useEffect, useCallback } from "react";
+import React, { useState } from "react";
 
-export const VerticalSideMenuMainPage = () => {
-  const [trueBar, setTrueBar] = useState(false);
-  const active = () => {
-    //document.getElementById("slidea1").style.border= "1px solid rgb(227, 58, 169)";
-  };
+export const VerticalSideMenuMainPage = ({ menuoption }) => {
+  const [trueBar, setTrueBar] = useState("");
+  let sub;
   return (
-    <Container bar={trueBar}>
+    <Container className={trueBar} bar={trueBar}>
       <div className="navbar-top">
         <img
           src={trueBar ? iconLogoContentoh : iconLogo}
@@ -23,32 +17,32 @@ export const VerticalSideMenuMainPage = () => {
           className="logo"
         ></img>
         <div className="option">
-          <a href="/Dashboard">
-            <img src={iconSpeedometer} alt="Speed Meter" width={"25px"}></img>
-            {trueBar && <p>Dashborad</p>}
-          </a>
-          <a href="/products">
-            <img src={iconProduct} alt="Focus Product" width={"25px"}></img>
-            {trueBar && <p>Productos</p>}
-          </a>
-          {trueBar && (
-            <div className="sub-option">
-              <a href="/Dashboard">
-                {trueBar && <p>General</p>}
-              </a>
-              <a href="/AddProducts">
-                {trueBar && <p>Agregar Producto</p>}
-              </a>
-            </div>
-          )}
-          <a href="/providers">
-            <img src={iconGroup} alt="Group" width={"25px"}></img>
-            {trueBar && <p>Proovedores</p>}
-          </a>
-          <a href="/ContentohProducts">
-            <img src={iconLogo} alt="Logo" width={"25px"}></img>
-            {trueBar && <p>Content Oh!</p>}
-          </a>
+          {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>
       </div>
       <div className="menu-bottom">
@@ -57,7 +51,7 @@ export const VerticalSideMenuMainPage = () => {
           alt="Open Menu"
           onClick={() => {
             {
-              trueBar ? setTrueBar(false) : setTrueBar(true);
+              trueBar ? setTrueBar("") : setTrueBar("actived");
             }
           }}
         ></img>

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

@@ -1,30 +1,40 @@
 import styled from "styled-components";
-
+import { NavLink } from "react-router-dom"; 
+//styled(NavLink)
 export const Container = styled.div`
   height: 100%;
-  width: ${({ bar }) => (bar ? 200 : 58)}px;
+  width: 58px;
   box-sizing: border-box;
-  padding: 23px 10px ${({ bar }) => (bar ? 15 : 70)}px 10px;
+  padding: 23px 10px 70px 10px;
   flex-direction: column;
   justify-content: space-between;
   overflow: auto;
-  border-radius: ${({ bar }) => (bar ? 20 : 50)}px;
+  border-radius: 50px;
   background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);
   scrollbar-width: none;
   display: flex;
   text-align: center;
+  &.actived {
+    width: 200px;
+    padding: 23px 10px 15px 10px;
+    border-radius: 20px;
+  }
   .navbar-top {
     .logo {
       & + * {
-        margin-top: ${({ bar }) => (bar ? 45 : 225)}%;
+        margin-top: ${({ bar }) => (bar === "" ? 145 : 50)}%;
       }
     }
     .option {
-      a {
-        cursor: pointer;
-        height: 38px;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      padding-left: ${({ bar }) => (bar ? 5 : 0)}px;
+      div {
+        height: ${({ bar }) => (bar ? 32 : 38)}px;
+        width: ${({ bar }) => (bar ? 165 : 38)}px;
         display: flex;
-        justify-content: center;
+        justify-content: ${({ bar }) => (bar ? "flex-start" : "center")};
         border-radius: ${({ bar }) => (bar ? 18 : 100)}px;
         align-items: center;
         font-family: "Raleway";
@@ -35,35 +45,37 @@ export const Container = styled.div`
         letter-spacing: -0.015em;
         color: #fafafa;
         text-decoration: none;
+        &.option-link {
+          cursor: pointer;
+          margin-top: 12px;
+          padding-left: ${({ bar }) => (bar ? 15 : 0)}px;
+        }
+        p {
+          cursor: pointer;
+        }
         img {
           & + * {
             margin-left: 12px;
           }
         }
-        &:hover {
-          background: #e33aa9;
-        }
-        /* & + * {
-          margin-top: 12px;
-        } */
+      }
+      .option-link:hover {
+        background: #e33aa9;
       }
       .sub-option {
         display: flex;
         flex-direction: column;
-        padding-left: 40px;
-        a {
+        padding-left: ${({ bar }) => (bar ? 28 : 20)}px;
+        height: auto;
+        width: auto;
+        div {
           display: flex;
           justify-content: flex-start;
           text-decoration: none;
           position: relative;
-          font-family: Raleway;
-          font-style: normal;
-          font-weight: normal;
           font-size: 13px;
           border-left: 1px solid #f0eef2;
           border-radius: 0;
-          line-height: 16px;
-          letter-spacing: -0.015em;
           color: #f0eef2;
           padding-top: 20px;
           padding-left: 12px;
@@ -76,15 +88,9 @@ export const Container = styled.div`
             height: 10px;
             background-color: white;
             position: absolute;
-            left: -4%;
+            left: ${({ bar }) => (bar ? -4 : -16)}%;
             bottom: 1%;
           }
-          &:hover {
-            background-color: transparent;
-          }
-        }
-        & + * {
-          margin-top: 12px;
         }
       }
     }