contentoh-components-library 21.1.22 → 21.1.23

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

@@ -2,12 +2,10 @@ 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) => {
@@ -22,161 +20,100 @@ 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 className="container-slider">
+        <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}
+            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>
+        )}
       </Container>
-      
     </>
   );
 };

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

@@ -4,22 +4,42 @@ import { GlobalColors, FontFamily } from "../../../global-files/variables";
 export const Container = styled.div`
   background: transparent;
   cursor: pointer;
-  width: 40px !important;
-  margin: 9px;
   position: relative;
+  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;
-  top: calc(100% + 25px);
-  left: calc(50% - 223px / 2);
+  cursor: default;
+  z-index: 2;
+  &.top-slide {
+    top: calc(300% - 100px);
+    left: calc(580px / 2);
+  }
+  &.bottom-slide {
+    top: calc(100%);
+    left: calc(-280px / 2);
+  }
   #div-slider {
     width: 310px;
   }
@@ -35,6 +55,22 @@ export const Slider = styled.div`
     width: 100%;
     height: 270px;
     margin: 0;
+    span {
+      font-family: "Avenir Next";
+      font-style: normal;
+      font-weight: 700;
+      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;
@@ -71,15 +107,16 @@ export const Slider = styled.div`
         display: flex;
         justify-content: center;
         flex-direction: column;
+        align-items: center;
         img {
-          height: 40px;
+          width: 90%;
         }
         & + * {
           margin-top: 13px;
         }
       }
     }
-    #slide5 {
+    .end-div {
       div {
         height: 130px;
         width: 100%;
@@ -96,21 +133,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 +158,16 @@ 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>*/
+    opacity: 1;
   }
   li:target {
-    opacity: 1; /*Mostramos el primer <li>*/
+    opacity: 1;
   }
   .menu {
     margin: 0;

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 Lista" },
+  ],
+};

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

@@ -1,20 +1,14 @@
 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";
+import closeMenu from "../../../assets/images/verticalSideMenuMainPage/closeMenu.svg";
+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("");
   return (
-    <Container bar={trueBar}>
+    <Container className={trueBar} bar={trueBar}>
       <div className="navbar-top">
         <img
           src={trueBar ? iconLogoContentoh : iconLogo}
@@ -22,30 +16,47 @@ export const VerticalSideMenuMainPage = () => {
           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>
+          {menuoption.map((item, index) => (
+            <>
+              <div
+                className="option-link"
+                exact
+                activeClassName="active"
+                to={menuoption[index].path}
+              >
+                <img
+                  src={menuoption[index].icon}
+                  alt={menuoption[index].title}
+                  width={"25px"}
+                ></img>
+                {trueBar && <p>{menuoption[index].title}</p>}
+              </div>
+              <div className="sub-option">
+                {menuoption[index].title !== "Productos" ? (
+                  ""
+                ) : (
+                  <>
+                    <div exact activeClassName="active" to="/Dashboard">
+                      {trueBar && <p>General</p>}
+                    </div>
+                    <div exact activeClassName="active" to="/AddProducts">
+                      {trueBar && <p>Agregar Producto</p>}
+                    </div>
+                  </>
+                )}
+              </div>
+            </>
+          ))}
         </div>
       </div>
-      <div>
+      <div className="menu-bottom">
         <img
-          src={openMenu}
+          src={trueBar ? closeMenu : openMenu}
           alt="Open Menu"
           onClick={() => {
-            setTrueBar(true);
-            active();
+            {
+              trueBar ? setTrueBar("") : setTrueBar("active");
+            }
           }}
         ></img>
       </div>

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

@@ -2,44 +2,96 @@ import styled from "styled-components";
 
 export const Container = styled.div`
   height: 100%;
-  width: ${({ bar }) => (bar ? 200 : 58)}px;
+  width: 58px;
   box-sizing: border-box;
   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;
-  img {
-    cursor: pointer;
-    width:"25px" !important;
+  &.active {
+    width: 200px;
+    padding: 23px 10px 15px 10px;
+    border-radius: 20px;
   }
   .navbar-top {
-    & + * {
-      margin-top: 15px;
+    .logo {
+      & + * {
+        margin-top: ${({ bar }) => (bar === "" ? 345 : 50)}%;
+      }
     }
     .option {
-      div {
+      a {
+        cursor: pointer;
         height: 38px;
         display: flex;
         justify-content: center;
-        border-radius: 100%;
-        & + * {
+        border-radius: ${({ bar }) => (bar ? 18 : 100)}px;
+        align-items: center;
+        font-family: "Raleway";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: -0.015em;
+        color: #fafafa;
+        text-decoration: none;
+        &.option-link {
           margin-top: 12px;
         }
+        img {
+          & + * {
+            margin-left: 12px;
+          }
+        }
+        &:hover {
+          background: #e33aa9;
+        }
       }
-      div:hover {
-        background: #e33aa9;
-      }
-    }
-    .logo {
-      cursor: default;
-      & + * {
-        margin-top: 225%;
+      .sub-option {
+        display: flex;
+        flex-direction: column;
+        padding-left: ${({ bar }) => (bar ? 40 : 18)}px;
+        a {
+          display: flex;
+          justify-content: flex-start;
+          text-decoration: none;
+          position: relative;
+          font-size: 13px;
+          border-left: 1px solid #f0eef2;
+          border-radius: 0;
+          color: #f0eef2;
+          padding-top: 20px;
+          padding-left: 12px;
+          height: 25px;
+          &::before {
+            border-left: 1px solid #e33aa9;
+            width: 10px;
+            content: "";
+            border-radius: 50%;
+            height: 10px;
+            background-color: white;
+            position: absolute;
+            left: ${({ bar }) => (bar ? -4 : -35)}%;
+            bottom: 1%;
+          }
+          &:hover {
+            background-color: transparent;
+          }
+        }
+        & + * {
+          margin-top: 12px;
+        }
       }
     }
   }
+  .menu-bottom {
+    display: flex;
+    justify-content: ${({ bar }) => (bar ? "flex-end" : "center")};
+    cursor: pointer;
+  }
 `;