contentoh-components-library 21.5.35 → 21.5.36

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

@@ -1,38 +1,38 @@
-import styled from "styled-components";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  #atr-alto {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  .caja-borde {
-    font-family: ${FontFamily.RobotoMedium}, sans-serif;
-    font-size: 12px;
-    line-height: 1.2;
-    border-radius: ${({ borderType }) => {
-      return borderType?.toLowerCase() === "rectangle"
-        ? "5px"
-        : borderType?.toLowerCase() === "circle"
-        ? "50%"
-        : "none";
-    }};
-  }
-  span {
-    font-family: ${FontFamily.RobotoMedium}, sans-serif;
-    font-size: 12px;
-    line-height: 1.2;
-    font-weight: 600;
-  }
-  .icon {
-    width: 8px;
-    height: 8px;
-  }
-  .required-text {
-    color: red;
-  }
-`;
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  #atr-alto {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .caja-borde {
+    font-family: ${FontFamily.RobotoMedium}, sans-serif;
+    font-size: 12px;
+    line-height: 1.2;
+    border-radius: ${({ borderType }) => {
+      return borderType?.toLowerCase() === "rectangle"
+        ? "5px"
+        : borderType?.toLowerCase() === "circle"
+        ? "50%"
+        : "none";
+    }};
+  }
+  span {
+    font-family: ${FontFamily.RobotoMedium}, sans-serif;
+    font-size: 12px;
+    line-height: 1.2;
+    font-weight: 600;
+  }
+  .icon {
+    width: 8px;
+    height: 8px;
+  }
+  .required-text {
+    color: red;
+  }
+`;

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

@@ -1,15 +1,15 @@
-import { BoxButtons } from "./index";
-
-export default {
-  title: "Components/molecules/BoxButtons",
-  component: BoxButtons,
-};
-
-const Template = (args) => <BoxButtons {...args} />;
-
-export const BoxButtonsDefault = Template.bind({});
-
-BoxButtonsDefault.args = {
-    text:"texto prueba",
-    showAdd:true,
+import { BoxButtons } from "./index";
+
+export default {
+  title: "Components/molecules/BoxButtons",
+  component: BoxButtons,
+};
+
+const Template = (args) => <BoxButtons {...args} />;
+
+export const BoxButtonsDefault = Template.bind({});
+
+BoxButtonsDefault.args = {
+    text:"texto prueba",
+    showAdd:true,
 };

package/src/components/molecules/BoxButtons/index.js

@@ -1,29 +1,29 @@
-import { Container, ContainerIcon } from "./styles";
-import { Button } from "@mui/material";
-
-export const BoxButtons = ({
-  showAdd,
-  onAdd,
-  onDelete,
-  isTheFirstBox,
-  index,
-}) => {
-  return (
-    <Container index={index}>
-      {!isTheFirstBox && (
-        <Button variant="outlined" className="button-circle" onClick={onDelete}>
-          <ContainerIcon>
-            <span className="iconos-out">delete_forever</span>
-          </ContainerIcon>
-        </Button>
-      )}
-      {showAdd && (
-        <Button onClick={onAdd} variant="outlined" className="button-circle">
-          <ContainerIcon>
-            <span className="iconos-out iconos-grises">add</span>
-          </ContainerIcon>
-        </Button>
-      )}
-    </Container>
-  );
-};
+import { Container, ContainerIcon } from "./styles";
+import { Button } from "@mui/material";
+
+export const BoxButtons = ({
+  showAdd,
+  onAdd,
+  onDelete,
+  isTheFirstBox,
+  index,
+}) => {
+  return (
+    <Container index={index}>
+      {!isTheFirstBox && (
+        <Button variant="outlined" className="button-circle" onClick={onDelete}>
+          <ContainerIcon>
+            <span className="iconos-out">delete_forever</span>
+          </ContainerIcon>
+        </Button>
+      )}
+      {showAdd && (
+        <Button onClick={onAdd} variant="outlined" className="button-circle">
+          <ContainerIcon>
+            <span className="iconos-out iconos-grises">add</span>
+          </ContainerIcon>
+        </Button>
+      )}
+    </Container>
+  );
+};

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

@@ -1,43 +1,43 @@
-import styled from "styled-components";
-import { GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-    display:flex;
-    flex-direction:row;
-    gap:8px;
-  .button-circle{
-    width:30px;
-    height:30px;
-    padding:2px;
-    border-radius:100%;
-    min-width:30px;
-    border: 1px solid #F0F0F0;
-  }
-  .button-circle:hover {
-    border: 1px solid #F0F0F0;
-  }
-
-`;
-export const ContainerIcon = styled.div`
-cursor: pointer;
-@font-face {
-  font-family: "Material Symbols Outlined";
-  font-style: normal;
-  font-weight: 100 700;
-  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v68/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2)
-    format("woff2");
-}
-.iconos-out {
-  font-family: "Material Symbols Outlined";
-  font-size: 20px;
-  //line-height: 1;
-  margin-top: 10px;
-}
-.iconos-out {
-  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
-  color:  #B64545;
-}
-.iconos-grises {
-  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
-  color:  ${GlobalColors.gray};
-}`;
+import styled from "styled-components";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+    display:flex;
+    flex-direction:row;
+    gap:8px;
+  .button-circle{
+    width:30px;
+    height:30px;
+    padding:2px;
+    border-radius:100%;
+    min-width:30px;
+    border: 1px solid #F0F0F0;
+  }
+  .button-circle:hover {
+    border: 1px solid #F0F0F0;
+  }
+
+`;
+export const ContainerIcon = styled.div`
+cursor: pointer;
+@font-face {
+  font-family: "Material Symbols Outlined";
+  font-style: normal;
+  font-weight: 100 700;
+  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v68/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2)
+    format("woff2");
+}
+.iconos-out {
+  font-family: "Material Symbols Outlined";
+  font-size: 20px;
+  //line-height: 1;
+  margin-top: 10px;
+}
+.iconos-out {
+  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
+  color:  #B64545;
+}
+.iconos-grises {
+  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
+  color:  ${GlobalColors.gray};
+}`;

package/src/components/molecules/ButtonDownloadFile/DownloadFile.stories.js

@@ -1,54 +1,54 @@
-import { ButtonDownloadFile } from "./index";
-export default {
-  title: "Components/molecules/ButtonDownloadFile",
-  component: ButtonDownloadFile,
-  argTypes: {
-    type: {
-      options: [
-        undefined,
-        "white",
-        "whiteS2",
-        "pink",
-        "gray",
-        "purple",
-        "black",
-      ],
-      control: { type: "select" },
-    },
-    borderType: {
-      options: [undefined, "rectangle", "circle"],
-      control: { type: "select" },
-    },
-  },
-};
-
-const Template = (args) => <ButtonDownloadFile {...args} />;
-
-export const DownloadFileOk = Template.bind({});
-DownloadFileOk.args = {
-  type: undefined,
-  transparent: false,
-  borderType: undefined,
-  size: "70",
-  onDownload: (error) => {
-    error &&
-      alert("mensaje: " + error.message + "\nDetalles: " + error.details);
-  },
-  url: `https://content-management-images.s3.amazonaws.com/84300/1/chat/acuse RFC-8b2eb177-5bfc-4266-9b26-4e7297880594-9e2e5853-4697-442a-8ff7-3b7a1ede0856.pdf`,
-};
-
-export const DownloadFileError = Template.bind({});
-DownloadFileError.args = {
-  id: "",
-  key: "",
-  color: undefined,
-  background: undefined,
-  borderType: "circle",
-  size: "70",
-  width: "100px",
-  onDownload: (error) => {
-    error &&
-      alert("mensaje: " + error.message + "\nDetalles: " + error.details);
-  },
-  url: `https://content-management-images.s3.amazonaws.com/84300/1/chat/noExiste.pdf`,
-};
+import { ButtonDownloadFile } from "./index";
+export default {
+  title: "Components/molecules/ButtonDownloadFile",
+  component: ButtonDownloadFile,
+  argTypes: {
+    type: {
+      options: [
+        undefined,
+        "white",
+        "whiteS2",
+        "pink",
+        "gray",
+        "purple",
+        "black",
+      ],
+      control: { type: "select" },
+    },
+    borderType: {
+      options: [undefined, "rectangle", "circle"],
+      control: { type: "select" },
+    },
+  },
+};
+
+const Template = (args) => <ButtonDownloadFile {...args} />;
+
+export const DownloadFileOk = Template.bind({});
+DownloadFileOk.args = {
+  type: undefined,
+  transparent: false,
+  borderType: undefined,
+  size: "70",
+  onDownload: (error) => {
+    error &&
+      alert("mensaje: " + error.message + "\nDetalles: " + error.details);
+  },
+  url: `https://content-management-images.s3.amazonaws.com/84300/1/chat/acuse RFC-8b2eb177-5bfc-4266-9b26-4e7297880594-9e2e5853-4697-442a-8ff7-3b7a1ede0856.pdf`,
+};
+
+export const DownloadFileError = Template.bind({});
+DownloadFileError.args = {
+  id: "",
+  key: "",
+  color: undefined,
+  background: undefined,
+  borderType: "circle",
+  size: "70",
+  width: "100px",
+  onDownload: (error) => {
+    error &&
+      alert("mensaje: " + error.message + "\nDetalles: " + error.details);
+  },
+  url: `https://content-management-images.s3.amazonaws.com/84300/1/chat/noExiste.pdf`,
+};

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

@@ -1,109 +1,109 @@
-import { Container } from "./styles";
-import { faArrowDown as IconDownload } from "@fortawesome/free-solid-svg-icons";
-import { useState } from "react";
-import { ButtonV2 } from "../../atoms/ButtonV2";
-import { IconFile } from "../../atoms/IconFile";
-import axios from "axios";
-import { getFileExtension } from "../../../global-files/utils";
-
-export const ButtonDownloadFile = (props) => {
-  const {
-    id,
-    key,
-    className,
-    type, // white | pink | gray | purple (white -> predeterminado)
-    transparent, // boolean
-    size, // number ... default (13)
-    borderType, // rectangle || circle || (cualquier otro valor -> no borde)
-    url, // src del file
-    onDownload, // ( {message , details} ) => {}
-  } = props;
-  const [showDownload, setShowDownload] = useState(false);
-  const [loading, setLoading] = useState(false);
-
-  const getSrc = () => {
-    const temp = url.split("/");
-    return temp[temp.length - 1];
-  };
-
-  const getFile = async () => {
-    try {
-      setLoading(true);
-      const responseFile = await axios({
-        url: url,
-        method: "GET",
-        responseType: "blob",
-      });
-      if (responseFile.status !== 200) {
-        setLoading(false);
-        onDownload &&
-          onDownload({
-            message: "No se pudo descargar el archivo",
-            details: responseFile.statusText,
-          });
-        return;
-      }
-      const newUrl = window.URL.createObjectURL(new Blob([responseFile.data]));
-      const link = document.createElement("a");
-      link.href = newUrl;
-      link.setAttribute("download", getSrc());
-      link.style.display = "none";
-      document.body.appendChild(link);
-      setLoading(false);
-      link.click();
-      document.body.removeChild(link);
-    } catch (err) {
-      setLoading(false);
-      onDownload &&
-        onDownload({
-          message: "No se pudo descargar el archivo",
-          details: err.message,
-        });
-    }
-  };
-
-  return (
-    <>
-      <Container
-        id={id}
-        key={key}
-        className={className}
-        borderType={borderType}
-        onMouseEnter={(event) => {
-          if (!showDownload) {
-            setShowDownload(true);
-          }
-        }}
-        onMouseLeave={(event) => {
-          if (!loading) {
-            setShowDownload(false);
-          }
-        }}
-      >
-        {showDownload ? (
-          <ButtonV2
-            className={"buttonDownload"}
-            type={type}
-            transparent={transparent}
-            size={size}
-            borderType={borderType}
-            icon={IconDownload}
-            isLoading={loading}
-            onClick={async (event) => {
-              getFile();
-            }}
-          />
-        ) : (
-          <IconFile
-            className="iconFile"
-            type={type}
-            transparent={transparent}
-            size={size}
-            borderType={borderType}
-            ext={getFileExtension(getSrc())}
-          />
-        )}
-      </Container>
-    </>
-  );
-};
+import { Container } from "./styles";
+import { faArrowDown as IconDownload } from "@fortawesome/free-solid-svg-icons";
+import { useState } from "react";
+import { ButtonV2 } from "../../atoms/ButtonV2";
+import { IconFile } from "../../atoms/IconFile";
+import axios from "axios";
+import { getFileExtension } from "../../../global-files/utils";
+
+export const ButtonDownloadFile = (props) => {
+  const {
+    id,
+    key,
+    className,
+    type, // white | pink | gray | purple (white -> predeterminado)
+    transparent, // boolean
+    size, // number ... default (13)
+    borderType, // rectangle || circle || (cualquier otro valor -> no borde)
+    url, // src del file
+    onDownload, // ( {message , details} ) => {}
+  } = props;
+  const [showDownload, setShowDownload] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const getSrc = () => {
+    const temp = url.split("/");
+    return temp[temp.length - 1];
+  };
+
+  const getFile = async () => {
+    try {
+      setLoading(true);
+      const responseFile = await axios({
+        url: url,
+        method: "GET",
+        responseType: "blob",
+      });
+      if (responseFile.status !== 200) {
+        setLoading(false);
+        onDownload &&
+          onDownload({
+            message: "No se pudo descargar el archivo",
+            details: responseFile.statusText,
+          });
+        return;
+      }
+      const newUrl = window.URL.createObjectURL(new Blob([responseFile.data]));
+      const link = document.createElement("a");
+      link.href = newUrl;
+      link.setAttribute("download", getSrc());
+      link.style.display = "none";
+      document.body.appendChild(link);
+      setLoading(false);
+      link.click();
+      document.body.removeChild(link);
+    } catch (err) {
+      setLoading(false);
+      onDownload &&
+        onDownload({
+          message: "No se pudo descargar el archivo",
+          details: err.message,
+        });
+    }
+  };
+
+  return (
+    <>
+      <Container
+        id={id}
+        key={key}
+        className={className}
+        borderType={borderType}
+        onMouseEnter={(event) => {
+          if (!showDownload) {
+            setShowDownload(true);
+          }
+        }}
+        onMouseLeave={(event) => {
+          if (!loading) {
+            setShowDownload(false);
+          }
+        }}
+      >
+        {showDownload ? (
+          <ButtonV2
+            className={"buttonDownload"}
+            type={type}
+            transparent={transparent}
+            size={size}
+            borderType={borderType}
+            icon={IconDownload}
+            isLoading={loading}
+            onClick={async (event) => {
+              getFile();
+            }}
+          />
+        ) : (
+          <IconFile
+            className="iconFile"
+            type={type}
+            transparent={transparent}
+            size={size}
+            borderType={borderType}
+            ext={getFileExtension(getSrc())}
+          />
+        )}
+      </Container>
+    </>
+  );
+};