contentoh-components-library 21.4.58 → 21.4.59

package/dist/index.js

@@ -1018,6 +1018,19 @@ Object.keys(_TableResizable).forEach(function (key) {
   });
 });
 
+var _index76 = require("./components/organisms/SideModal/index");
+
+Object.keys(_index76).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _index76[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index76[key];
+    }
+  });
+});
+
 var _PanelLayout = require("./components/organisms/PanelLayout");
 
 Object.keys(_PanelLayout).forEach(function (key) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.4.58",
+  "version": "21.4.59",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

package/src/components/organisms/SideModal/SideModal.stories.js

@@ -0,0 +1,23 @@
+import { SideModal } from ".";
+import { ButtonV2 } from "../../atoms/ButtonV2";
+
+export default {
+  title: "Components/organisms/SideModal",
+  component: SideModal,
+};
+
+const Template = (args) => <SideModal {...args} />;
+
+export const DefaultSideModal = Template.bind({});
+DefaultSideModal.args = {
+  show: false,
+  header: [
+    <div className="title-container">
+      <h2></h2>
+    </div>,
+    <ButtonV2 label="Ir al Checkout" />,
+    <ButtonV2 label="X" />,
+  ],
+  body: <></>,
+  footer: <></>,
+};

package/src/components/organisms/SideModal/index.js

@@ -0,0 +1,50 @@
+import { useRef } from "react";
+import { Container } from "./styles";
+import { useEffect } from "react";
+import { PropaneSharp } from "@mui/icons-material";
+
+export const SideModal = ({
+  header,
+  body,
+  footer,
+  show,
+  setShow,
+  id = "side-modal",
+}) => {
+  const modal = useRef();
+
+  const closeModal = (e) => {
+    if (!e.target.closest(`#${id}`) && show) {
+      document.removeEventListener("click", closeModal, false);
+      modal?.current?.classList?.remove("shown");
+      setShow && setShow(false);
+    }
+  };
+
+  useEffect(() => {
+    if (show && modal.current) {
+      document.addEventListener("click", closeModal, false);
+      modal?.current?.classList?.add("shown");
+    }
+  }, [show]);
+
+  useEffect(() => {
+    return () => {
+      document.removeEventListener("click", closeModal, false);
+      modal?.current?.classList?.remove("shown");
+      setShow && setShow(false);
+    };
+  }, []);
+
+  return (
+    show && (
+      <Container>
+        <div id={id} ref={modal} className="modal-container">
+          <div className="modal-header">{header}</div>
+          <div className="modal-body">{body}</div>
+          <div className="modal-footer">{footer}</div>
+        </div>
+      </Container>
+    )
+  );
+};

package/src/components/organisms/SideModal/styles.js

@@ -0,0 +1,30 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: 9999999;
+  background-color: transparent;
+  top: 0;
+  left: 0;
+
+  .modal-container {
+    width: 600px;
+    height: 100%;
+    position: absolute;
+    right: -600px;
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    box-shadow: -0.5px 0px 5px #f0f0f0;
+    border: 1px solid #f0f0f0;
+    .modal-body {
+      flex: 1;
+    }
+
+    &.shown {
+      right: 0;
+    }
+  }
+`;

package/src/index.js

@@ -81,6 +81,7 @@ export * from "./components/organisms/Modal/index";
 export * from "./components/organisms/OrderDetail/index";
 export * from "./components/organisms/RangeCalendar";
 export * from "./components/organisms/TableResizable";
+export * from "./components/organisms/SideModal/index";
 export * from "./components/organisms/PanelLayout";
 
 //pages

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

@@ -1,23 +0,0 @@
-import styled from "styled-components";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  font-family: ${FontFamily.Raleway_500};
-  color: ${GlobalColors.s5};
-  font-size: 14px;
-  line-height: 21px;
-  border-bottom: 2px solid ${GlobalColors.s3};
-  width: 149px;
-  padding-bottom: 5px;
-  transition: 0.1s all;
-  cursor: pointer;
-
-  &.active {
-    font-size: 18px;
-    border-bottom: 2px solid ${GlobalColors.magenta_s2};
-  }
-
-  & + * {
-    margin-left: 10px;
-  }
-`;