contentoh-components-library 21.5.35 → 21.5.36

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

@@ -1,66 +1,66 @@
-import styled from "styled-components";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  width: fit-content;
-  height: fit-content;
-  min-width: min-content;
-  min-height: min-content;
-  overflow: hidden;
-  display: grid;
-  place-items: center;
-  border-radius: ${({ borderType }) => {
-    return borderType?.toLowerCase() === "rectangle"
-      ? "10%"
-      : borderType?.toLowerCase() === "circle"
-      ? "50%"
-      : "none";
-  }};
-
-  .buttonDownload {
-    width: 100%;
-    height: 100%;
-    .button {
-      // tipos de botones fill
-      &.fill {
-        &.white:hover {
-          background-color: white;
-        }
-        &.whiteS2:hover {
-          background-color: white;
-        }
-        &.pink:hover {
-          background-color: #e33aa9;
-        }
-        &.gray:hover {
-          background-color: #e8e5e5;
-        }
-        &.purple:hover {
-          background-color: #f7f7fc;
-        }
-      }
-
-      // tipos de botones transparent
-      &.transparent {
-        &.white:hover {
-          color: white;
-        }
-        &.pink:hover {
-          color: #e33aa9;
-        }
-        &.gray:hover {
-          .icon,
-          .iconLoading {
-            color: #7b7979;
-          }
-        }
-        &.purple:hover {
-          color: #8a6caa;
-        }
-        &.black:hover {
-          color: #262626;
-        }
-      }
-    }
-  }
-`;
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  width: fit-content;
+  height: fit-content;
+  min-width: min-content;
+  min-height: min-content;
+  overflow: hidden;
+  display: grid;
+  place-items: center;
+  border-radius: ${({ borderType }) => {
+    return borderType?.toLowerCase() === "rectangle"
+      ? "10%"
+      : borderType?.toLowerCase() === "circle"
+      ? "50%"
+      : "none";
+  }};
+
+  .buttonDownload {
+    width: 100%;
+    height: 100%;
+    .button {
+      // tipos de botones fill
+      &.fill {
+        &.white:hover {
+          background-color: white;
+        }
+        &.whiteS2:hover {
+          background-color: white;
+        }
+        &.pink:hover {
+          background-color: #e33aa9;
+        }
+        &.gray:hover {
+          background-color: #e8e5e5;
+        }
+        &.purple:hover {
+          background-color: #f7f7fc;
+        }
+      }
+
+      // tipos de botones transparent
+      &.transparent {
+        &.white:hover {
+          color: white;
+        }
+        &.pink:hover {
+          color: #e33aa9;
+        }
+        &.gray:hover {
+          .icon,
+          .iconLoading {
+            color: #7b7979;
+          }
+        }
+        &.purple:hover {
+          color: #8a6caa;
+        }
+        &.black:hover {
+          color: #262626;
+        }
+      }
+    }
+  }
+`;

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

@@ -1,17 +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",
-};
+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

@@ -1,65 +1,65 @@
-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 = () => {
-    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>
-  );
-};
+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 = () => {
+    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

@@ -1,60 +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;
-    }
-    }
-  }
-`;
+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/CustomSelect/CustomSelect.stories.js

@@ -1,35 +1,35 @@
-import { CustomSelect } from "./index";
-import iconStar from "../../../assets/images/customSelect/starIcon.svg";
-
-export default {
-  title: "Components/molecules/CustomSelect",
-  component: CustomSelect,
-};
-
-const Template = (args) => <CustomSelect {...args} />;
-export const CustomSelectDefault = Template.bind({});
-CustomSelectDefault.args = {
-  // selectLabel: "Todos los departamentos",
-  defaultOption: "Todos los departamentos",
-  options: [
-    {
-      id: 47,
-      name: "Enero 2023",
-      isSelected: true,
-    },
-    {
-      id: 49,
-      name: "Mis Favoritos",
-    },
-  ],
-  onClickItem: (v, id) => {
-    if (v) {
-      console.log("Agregar a la lista", id);
-    } else {
-      console.log("Eliminar a la lista", id);
-    }
-  },
-  icon: iconStar,
-  showSearchBar: true,
-  customOptions: <p>Esto es un customOptions</p>
-};
+import { CustomSelect } from "./index";
+import iconStar from "../../../assets/images/customSelect/starIcon.svg";
+
+export default {
+  title: "Components/molecules/CustomSelect",
+  component: CustomSelect,
+};
+
+const Template = (args) => <CustomSelect {...args} />;
+export const CustomSelectDefault = Template.bind({});
+CustomSelectDefault.args = {
+  // selectLabel: "Todos los departamentos",
+  defaultOption: "Todos los departamentos",
+  options: [
+    {
+      id: 47,
+      name: "Enero 2023",
+      isSelected: true,
+    },
+    {
+      id: 49,
+      name: "Mis Favoritos",
+    },
+  ],
+  onClickItem: (v, id) => {
+    if (v) {
+      console.log("Agregar a la lista", id);
+    } else {
+      console.log("Eliminar a la lista", id);
+    }
+  },
+  icon: iconStar,
+  showSearchBar: true,
+  customOptions: <p>Esto es un customOptions</p>
+};