contentoh-components-library 21.5.32 → 21.5.34

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

@@ -1,36 +1,36 @@
-import styled from "styled-components";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-
-export const Container = styled.div`
-display:flex;
-padding:7px 15px;
-justify-content: space-between;
-background:${GlobalColors.blue_light};
-width: auto;
-height:34px;
-align-items: center;
-max-width:300px;
-border-radius:5px;
-
-
-  * + * {
-    margin-left: 10px;
-  }
-
-  .btn-gral{
-    min-width: 34px;
-    min-height:34px;
-  }
-  .images-buttons{
-    display:flex;
-  }
-  .service-text{
-    font-family:${FontFamily.RobotoMedium}, sans-serif;
-    font-size:12px;
-    font-weight: 500;
-    color:${GlobalColors.gray};
-  }
-  .service-complete{
-    color:${GlobalColors.black};
-  }
-`;
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+display:flex;
+padding:7px 15px;
+justify-content: space-between;
+background:${GlobalColors.blue_light};
+width: auto;
+height:34px;
+align-items: center;
+max-width:300px;
+border-radius:5px;
+
+
+  * + * {
+    margin-left: 10px;
+  }
+
+  .btn-gral{
+    min-width: 34px;
+    min-height:34px;
+  }
+  .images-buttons{
+    display:flex;
+  }
+  .service-text{
+    font-family:${FontFamily.RobotoMedium}, sans-serif;
+    font-size:12px;
+    font-weight: 500;
+    color:${GlobalColors.gray};
+  }
+  .service-complete{
+    color:${GlobalColors.black};
+  }
+`;

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

@@ -1,101 +1,101 @@
-import { SidebarNotification } from "./index";
-import profileImg from "../../../assets/images/defaultImages/defaultProfileImage.svg";
-
-export default {
-  title: "Components/molecules/SidebarNotification",
-  component: SidebarNotification,
-  argTypes: {
-    showSidebar: {
-      options: [true, false],
-      control: { type: "boolean" },
-    },
-  },
-};
-let showSidebar=false;
-const setShowSidebar = (value) => {
-  showSidebar=value
-}  
-const Template = (args) => <SidebarNotification {...args} />;
-export const SidebarNotificationDefault = Template.bind({});
-
-SidebarNotificationDefault.args = {
-  array: [
-    {
-      dates: "2/18/2022",
-      notifications: [
-        {
-          profilePicture: profileImg,
-          notification: "ODT 23441244",
-          newNotification: true,
-        },
-        {
-          profilePicture: profileImg,
-          notification: "ODT 23441244",
-          newNotification: true,
-        },
-      ],
-    },
-    {
-      dates: "2/17/2022",
-      notifications: [
-        {
-          profilePicture: profileImg,
-          notification: "ODT 23441244",
-          newNotification: true,
-        },
-        {
-          profilePicture: profileImg,
-          notification: "ODT 23441244",
-          newNotification: true,
-        },
-      ],
-    },
-    {
-      dates: "2/16/2022",
-      notifications: [
-        {
-          profilePicture: profileImg,
-          notification: "ODT 23441244",
-          newNotification: true,
-        },
-        {
-          profilePicture: profileImg,
-          notification: "ODT 23441244",
-          newNotification: true,
-        },
-      ],
-    },
-    {
-      dates: "2/14/2022",
-      notifications: [
-        {
-          profilePicture: profileImg,
-          notification: "ODT 23441244",
-          newNotification: true,
-        },
-        {
-          profilePicture: profileImg,
-          notification: "ODT 23441244",
-          newNotification: true,
-        },
-      ],
-    },
-    {
-      dates: "2/17/2022",
-      notifications: [
-        {
-          profilePicture: profileImg,
-          notification: "ODT 23441244",
-          newNotification: true,
-        },
-        {
-          profilePicture: profileImg,
-          notification: "ODT 23441244",
-          newNotification: true,
-        },
-      ],
-    },
-  ],
-  setShowSidebar:setShowSidebar,
-  showSidebar:showSidebar,
-};
+import { SidebarNotification } from "./index";
+import profileImg from "../../../assets/images/defaultImages/defaultProfileImage.svg";
+
+export default {
+  title: "Components/molecules/SidebarNotification",
+  component: SidebarNotification,
+  argTypes: {
+    showSidebar: {
+      options: [true, false],
+      control: { type: "boolean" },
+    },
+  },
+};
+let showSidebar=false;
+const setShowSidebar = (value) => {
+  showSidebar=value
+}  
+const Template = (args) => <SidebarNotification {...args} />;
+export const SidebarNotificationDefault = Template.bind({});
+
+SidebarNotificationDefault.args = {
+  array: [
+    {
+      dates: "2/18/2022",
+      notifications: [
+        {
+          profilePicture: profileImg,
+          notification: "ODT 23441244",
+          newNotification: true,
+        },
+        {
+          profilePicture: profileImg,
+          notification: "ODT 23441244",
+          newNotification: true,
+        },
+      ],
+    },
+    {
+      dates: "2/17/2022",
+      notifications: [
+        {
+          profilePicture: profileImg,
+          notification: "ODT 23441244",
+          newNotification: true,
+        },
+        {
+          profilePicture: profileImg,
+          notification: "ODT 23441244",
+          newNotification: true,
+        },
+      ],
+    },
+    {
+      dates: "2/16/2022",
+      notifications: [
+        {
+          profilePicture: profileImg,
+          notification: "ODT 23441244",
+          newNotification: true,
+        },
+        {
+          profilePicture: profileImg,
+          notification: "ODT 23441244",
+          newNotification: true,
+        },
+      ],
+    },
+    {
+      dates: "2/14/2022",
+      notifications: [
+        {
+          profilePicture: profileImg,
+          notification: "ODT 23441244",
+          newNotification: true,
+        },
+        {
+          profilePicture: profileImg,
+          notification: "ODT 23441244",
+          newNotification: true,
+        },
+      ],
+    },
+    {
+      dates: "2/17/2022",
+      notifications: [
+        {
+          profilePicture: profileImg,
+          notification: "ODT 23441244",
+          newNotification: true,
+        },
+        {
+          profilePicture: profileImg,
+          notification: "ODT 23441244",
+          newNotification: true,
+        },
+      ],
+    },
+  ],
+  setShowSidebar:setShowSidebar,
+  showSidebar:showSidebar,
+};

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

@@ -1,95 +1,95 @@
-import { Container } from "./styles";
-import { ScreenHeader } from "../../atoms/ScreenHeader/index";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-import { Avatar } from "../../atoms/Avatar/index";
-import notificationImg from "../../../assets/images/productNotification/productNotification.svg";
-import { Button } from "../../atoms/GeneralButton";
-import { Notification } from "../../atoms/Notification";
-import { useEffect, useRef } from "react";
-
-export const SidebarNotification = ({
-  array = [],
-  showSidebar,
-  setShowSidebar,
-}) => {
-  const sidebar = useRef(null);
-
-  const closeSidebar = (e) => {
-    if (!e.target.closest("#side-bar") && showSidebar) {
-      document.removeEventListener("click", closeSidebar, false);
-      sidebar.current.classList.remove("active");
-      setTimeout(() => {
-        setShowSidebar(false);
-      }, 500);
-    }
-  };
-
-  useEffect(() => {
-    if (showSidebar) {
-      document.addEventListener("click", closeSidebar, false);
-        sidebar.current.classList.add("active");
-    }
-  }, [showSidebar]);
-
-  const comparisonDate = (dates) => {
-    const dateActual = new Date();
-    const dateComparison = new Date(dates);
-    let date = "";
-    if (dateActual.toDateString() === dateComparison.toDateString()) {
-      date = "Hoy";
-    } else if (
-      dateActual.getFullYear() === dateComparison.getFullYear() &&
-      dateActual.getMonth() === dateComparison.getMonth() &&
-      dateActual.getDate() - 1 === dateComparison.getDate()
-    ) {
-      date = "Ayer";
-    } else {
-      date = dateComparison.toLocaleDateString();
-    }
-    return date;
-  };
-  return (
-    <>
-      {showSidebar && (
-        <Container id="side-bar" ref={sidebar}>
-          <div className="notification-header">
-            <Avatar
-              image={notificationImg}
-              imageType={"retailer-image"}
-              altText={"Notification Picture"}
-            />
-            <ScreenHeader
-              headerType={"product-name-header"}
-              text={"Notificaciones"}
-              color={"#867586"}
-            />
-            <Button buttonType="close-button" />
-          </div>
-          <div className="scroll">
-            {array?.map((element, index) => (
-              <div
-                className="date-notification"
-                key={index + "-" + element?.dates}
-              >
-                <ScreenHeader
-                  headerType={"input-name-header"}
-                  text={comparisonDate(element?.dates)}
-                  color={"#6A5880"}
-                  FontFamily={FontFamily.AvenirNext}
-                />
-                {element?.notifications?.map((notification, index) => (
-                  <Notification
-                    key={index}
-                    profilePicture={notification?.profilePicture}
-                    notification={notification?.notification}
-                    newNotification={notification?.newNotification}
-                  />
-                ))}
-              </div>
-            ))}
-          </div>
-        </Container>
-      )}{" "}
-    </>
-  );
-};
+import { Container } from "./styles";
+import { ScreenHeader } from "../../atoms/ScreenHeader/index";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+import { Avatar } from "../../atoms/Avatar/index";
+import notificationImg from "../../../assets/images/productNotification/productNotification.svg";
+import { Button } from "../../atoms/GeneralButton";
+import { Notification } from "../../atoms/Notification";
+import { useEffect, useRef } from "react";
+
+export const SidebarNotification = ({
+  array = [],
+  showSidebar,
+  setShowSidebar,
+}) => {
+  const sidebar = useRef(null);
+
+  const closeSidebar = (e) => {
+    if (!e.target.closest("#side-bar") && showSidebar) {
+      document.removeEventListener("click", closeSidebar, false);
+      sidebar.current.classList.remove("active");
+      setTimeout(() => {
+        setShowSidebar(false);
+      }, 500);
+    }
+  };
+
+  useEffect(() => {
+    if (showSidebar) {
+      document.addEventListener("click", closeSidebar, false);
+        sidebar.current.classList.add("active");
+    }
+  }, [showSidebar]);
+
+  const comparisonDate = (dates) => {
+    const dateActual = new Date();
+    const dateComparison = new Date(dates);
+    let date = "";
+    if (dateActual.toDateString() === dateComparison.toDateString()) {
+      date = "Hoy";
+    } else if (
+      dateActual.getFullYear() === dateComparison.getFullYear() &&
+      dateActual.getMonth() === dateComparison.getMonth() &&
+      dateActual.getDate() - 1 === dateComparison.getDate()
+    ) {
+      date = "Ayer";
+    } else {
+      date = dateComparison.toLocaleDateString();
+    }
+    return date;
+  };
+  return (
+    <>
+      {showSidebar && (
+        <Container id="side-bar" ref={sidebar}>
+          <div className="notification-header">
+            <Avatar
+              image={notificationImg}
+              imageType={"retailer-image"}
+              altText={"Notification Picture"}
+            />
+            <ScreenHeader
+              headerType={"product-name-header"}
+              text={"Notificaciones"}
+              color={"#867586"}
+            />
+            <Button buttonType="close-button" />
+          </div>
+          <div className="scroll">
+            {array?.map((element, index) => (
+              <div
+                className="date-notification"
+                key={index + "-" + element?.dates}
+              >
+                <ScreenHeader
+                  headerType={"input-name-header"}
+                  text={comparisonDate(element?.dates)}
+                  color={"#6A5880"}
+                  FontFamily={FontFamily.AvenirNext}
+                />
+                {element?.notifications?.map((notification, index) => (
+                  <Notification
+                    key={index}
+                    profilePicture={notification?.profilePicture}
+                    notification={notification?.notification}
+                    newNotification={notification?.newNotification}
+                  />
+                ))}
+              </div>
+            ))}
+          </div>
+        </Container>
+      )}{" "}
+    </>
+  );
+};

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

@@ -1,63 +1,63 @@
-import styled from "styled-components";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  position: absolute;
-  right: 0;
-  background-color: #f9f9fc;
-  overflow: hidden;
-  width: 380px;
-  height: 100vh;
-  padding: 10px;
-  border: none;
-  box-shadow: -3px 0px 4px rgba(0, 0, 0, 0.25);
-  right: -100%;
-  transition: right linear 1s;
-  &.active {
-    right: 0;
-  } 
-  /*
-  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
-  transition: clip-path linear 1s;
-  &.active {
-    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
-  } */
-  .notification-header {
-    display: flex;
-    justify-content: space-between;
-    .retailer-image {
-      margin-left: 10px;
-    }
-    .product-name-header {
-      text-align: left;
-      flex: 1;
-      line-height: 50px;
-      margin-left: 13px;
-    }
-    .close-button {
-      height: 23px;
-      width: 23px;
-      padding: 3px;
-      border: 1px solid #ededed;
-      border-radius: 3px;
-      background-size: 23px;
-    }
-  }
-  .scroll {
-    overflow: auto;
-    height: 85vh;
-    .date-notification {
-      margin-top: 10px;
-      .input-name-header {
-        font-weight: 600;
-        display: flex;
-        justify-content: flex-end;
-        margin-right: 25px;
-      }
-      .new-notification {
-        margin-top: 7px;
-        width: 100%;
-      }
-    }
-  }
-`;
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  position: absolute;
+  right: 0;
+  background-color: #f9f9fc;
+  overflow: hidden;
+  width: 380px;
+  height: 100vh;
+  padding: 10px;
+  border: none;
+  box-shadow: -3px 0px 4px rgba(0, 0, 0, 0.25);
+  right: -100%;
+  transition: right linear 1s;
+  &.active {
+    right: 0;
+  } 
+  /*
+  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
+  transition: clip-path linear 1s;
+  &.active {
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+  } */
+  .notification-header {
+    display: flex;
+    justify-content: space-between;
+    .retailer-image {
+      margin-left: 10px;
+    }
+    .product-name-header {
+      text-align: left;
+      flex: 1;
+      line-height: 50px;
+      margin-left: 13px;
+    }
+    .close-button {
+      height: 23px;
+      width: 23px;
+      padding: 3px;
+      border: 1px solid #ededed;
+      border-radius: 3px;
+      background-size: 23px;
+    }
+  }
+  .scroll {
+    overflow: auto;
+    height: 85vh;
+    .date-notification {
+      margin-top: 10px;
+      .input-name-header {
+        font-weight: 600;
+        display: flex;
+        justify-content: flex-end;
+        margin-right: 25px;
+      }
+      .new-notification {
+        margin-top: 7px;
+        width: 100%;
+      }
+    }
+  }
+`;

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

@@ -1,11 +1,11 @@
-import { SignInLogin } from "./index";
-
-export default {
-  title: "Components/molecules/SignInLogin",
-  component: SignInLogin,
-};
-
-const Template = (args) => <SignInLogin {...args} />;
-
-export const SignInLoginDefault = Template.bind({});
-SignInLoginDefault.args = {};
+import { SignInLogin } from "./index";
+
+export default {
+  title: "Components/molecules/SignInLogin",
+  component: SignInLogin,
+};
+
+const Template = (args) => <SignInLogin {...args} />;
+
+export const SignInLoginDefault = Template.bind({});
+SignInLoginDefault.args = {};