contentoh-components-library 21.5.35 → 21.5.37

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

@@ -1,110 +1,110 @@
-import { Container, Slider } from "./styles";
-import { useEffect, useState } from "react";
-import { useCloseModal } from "../../../global-files/customHooks";
-
-export const SliderToolTip = ({
-  infoIcon,
-  slidefront,
-  iconSize,
-  slidePosition,
-}) => {
-  const [showMenu, setShowMenu] = useCloseModal("div-slider");
-
-  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";
-      }
-    }
-  };
-
-  return (
-    <>
-      <Container>
-        <img
-          src={infoIcon}
-          alt="info icon"
-          className={iconSize}
-          onClick={(e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            setShowMenu(true);
-          }}
-        />
-        {showMenu && (
-          <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) => {
-                          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>
-    </>
-  );
-};
+import { Container, Slider } from "./styles";
+import { useEffect, useState } from "react";
+import { useCloseModal } from "../../../global-files/customHooks";
+
+export const SliderToolTip = ({
+  infoIcon,
+  slidefront,
+  iconSize,
+  slidePosition,
+}) => {
+  const [showMenu, setShowMenu] = useCloseModal("div-slider");
+
+  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";
+      }
+    }
+  };
+
+  return (
+    <>
+      <Container>
+        <img
+          src={infoIcon}
+          alt="info icon"
+          className={iconSize}
+          onClick={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            setShowMenu(true);
+          }}
+        />
+        {showMenu && (
+          <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) => {
+                          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

@@ -1,197 +1,198 @@
-import styled from "styled-components";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  background: transparent;
-  cursor: pointer;
-  position: relative;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  & + * {
-    margin-left: 10px;
-  }
-  img {
-    margin: auto 0;
-    &.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;
-  cursor: default;
-  z-index: 2;
-  width: 310px;
-  &.top-slide {
-    top: calc(100% - 370px);
-    left: calc(100% - 175px);
-  }
-  &.bottom-slide {
-    top: 100%;
-    right: calc(100% + -100px);
-  }
-  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;
-        align-items: center;
-        img {
-          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;
-        }
-      }
-    }
-    .end-div {
-      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: 110px;
-        background-color: #281f33;
-        flex-direction: column;
-        justify-content: space-evenly;
-        border-radius: inherit;
-      }
-      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: 90%;
-        cursor: pointer;
-      }
-    }
-  }
-  li:first-child {
-    opacity: 1;
-  }
-  .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%;
-        cursor: pointer;
-      }
-      #slidea1 {
-        background-color: #e33aa9;
-      }
-    }
-  }
-`;
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  background: transparent;
+  cursor: pointer;
+  position: relative;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  & + * {
+    margin-left: 10px;
+  }
+  img {
+    margin: auto 0;
+    &.small-image {
+      width: 20px;
+      height: 20px;
+    }
+    &.medium-image {
+      width: 30px;
+      height: 30px;
+      filter: brightness(.35);
+    }
+    &.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;
+  cursor: default;
+  z-index: 2;
+  width: 310px;
+  &.top-slide {
+    top: calc(100% - 370px);
+    left: calc(100% - 175px);
+  }
+  &.bottom-slide {
+    top: 100%;
+    right: calc(100% + -100px);
+  }
+  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;
+        align-items: center;
+        img {
+          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;
+        }
+      }
+    }
+    .end-div {
+      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: 110px;
+        background-color: #281f33;
+        flex-direction: column;
+        justify-content: space-evenly;
+        border-radius: inherit;
+      }
+      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: 90%;
+        cursor: pointer;
+      }
+    }
+  }
+  li:first-child {
+    opacity: 1;
+  }
+  .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%;
+        cursor: pointer;
+      }
+      #slidea1 {
+        background-color: #e33aa9;
+      }
+    }
+  }
+`;

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

@@ -1,14 +1,14 @@
-import { Status } from "./index";
-
-export default {
-  title: "Components/atoms/Status",
-  component: Status,
-};
-
-const Template = (args) => <Status {...args} />;
-
-export const StatusDefault = Template.bind({});
-StatusDefault.args = {
-  statusType: "IE",
-  ovalForm: false,
-};
+import { Status } from "./index";
+
+export default {
+  title: "Components/atoms/Status",
+  component: Status,
+};
+
+const Template = (args) => <Status {...args} />;
+
+export const StatusDefault = Template.bind({});
+StatusDefault.args = {
+  statusType: "IE",
+  ovalForm: false,
+};