Merge pull request #5 from akashahmad/develop

Add Overlay option in the modal component
akashahmad · Nov 29, 2023 · 9383fe8 · 9383fe8
2 parents e33e49b + edebaee
commit 9383fe8
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 30 deletions.
diff --git a/.stylelintignore b/.stylelintignore
@@ -1 +1,6 @@
-coverage/
+coverage/
+lib/
+storybook-static/
+.storybook/
+.husky/
+.vscode/
diff --git a/src/components/Modal/ConfirmationModal.stories.tsx b/src/components/Modal/ConfirmationModal.stories.tsx
@@ -85,6 +85,7 @@ export const WithIcon: Story = {
         desc: "Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum been.",
         actionButtonText: "Deactivate",
         icon: () => <WarningIcon />,
+        showOverlay: false,
     },
     argTypes: {},
     render: props => (

diff --git a/src/components/Modal/ConfirmationModal.tsx b/src/components/Modal/ConfirmationModal.tsx
@@ -20,6 +20,7 @@ export function ConfirmationModal({
     icon: Icon,
     iconBgColor = colors.redLight5,
     actionButtonBgColor,
+    showOverlay = true,
 }: ConfirmationModalProps) {
     const [_open, set_Open] = React.useState(open || false);
 
@@ -35,17 +36,20 @@ export function ConfirmationModal({
     return (
         <Modal
             open={_open}
-            onClose={onClose}
+            onClose={handleCloseClick}
             showCloseIcon={false}
             position={position}
             className={cx("flex flex-col justify-center items-center")}
+            showOverlay={showOverlay}
         >
             {Icon && (
                 <div style={{ background: iconBgColor }} className={cx("p-[18px] rounded-full mb-[22px]")}>
                     {<Icon />}
                 </div>
             )}
-            <Typography variant="h3">{title}</Typography>
+            <div className="text-center">
+                <Typography variant="h3">{title}</Typography>
+            </div>
             {!Icon && <span className={cx("inline-block w-[90px] h-[3px] bg-primary rounded-xl mt-[18px]")} />}
             {desc && (
                 <div className="mt-6 text-center text-primary-text">
@@ -91,4 +95,5 @@ interface ConfirmationModalProps {
     actionButtonBgColor?: string;
     iconBgColor?: string;
     onActionButtonClick?: () => void;
+    showOverlay?: boolean;
 }
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
@@ -15,32 +15,42 @@ export function Modal({
     children,
     onClose,
     showCloseIcon = true,
+    showOverlay = false,
 }: ModalProps) {
     return (
-        <div
-            style={{ width, ...style }}
-            className={cx(
-                "absolute translate-x-[-50%]",
-                "rounded-[20px] p-[50px] shadow-2 bg-white z-50",
-                {
-                    ["left-1/2 top-[30px]"]: position === "top",
-                    ["left-1/2 translate-y-[-50%] top-1/2"]: position === "center",
-                    ["left-1/2 bottom-[30px]"]: position === "bottom",
-                    ["block"]: open,
-                    ["hidden"]: !open,
-                },
-                className,
-            )}
-        >
-            {showCloseIcon && (
-                <div onClick={onClose} className="relative w-full cursor-pointer select-none">
-                    <span className={cx("absolute right-[-20px] top-[-20px]")}>
-                        <CloseIcon />
-                    </span>
-                </div>
+        <>
+            <div
+                style={{ width, ...style }}
+                className={cx(
+                    "absolute translate-x-[-50%]",
+                    "rounded-[20px] p-[50px] shadow-2 bg-white z-50",
+                    {
+                        ["left-1/2 top-[30px]"]: position === "top",
+                        ["left-1/2 translate-y-[-50%] top-1/2"]: position === "center",
+                        ["left-1/2 bottom-[30px]"]: position === "bottom",
+                        ["block"]: open,
+                        ["hidden"]: !open,
+                    },
+                    className,
+                )}
+            >
+                {showCloseIcon && (
+                    <div onClick={onClose} className="relative w-full cursor-pointer select-none">
+                        <span className={cx("absolute right-[-20px] top-[-20px]")}>
+                            <CloseIcon />
+                        </span>
+                    </div>
+                )}
+                {children}
+            </div>
+
+            {showOverlay && open && (
+                <div
+                    onClick={onClose}
+                    className="bg-dark absolute left-0 right-0 bottom-0 top-0 w-full h-full opacity-40 z-40"
+                />
             )}
-            {children}
-        </div>
+        </>
     );
 }
 
@@ -53,6 +63,7 @@ interface ModalProps {
     children: React.ReactNode;
     style?: React.CSSProperties;
     className?: string;
+    showOverlay?: boolean;
 }
 
 export { ConfirmationModal };
diff --git a/src/components/Modal/__snapshots__/ConfirmationModal.spec.tsx.snap b/src/components/Modal/__snapshots__/ConfirmationModal.spec.tsx.snap
@@ -6,11 +6,15 @@ exports[`ConfirmationModal component is rendering properly 1`] = `
     class="absolute translate-x-[-50%] rounded-[20px] p-[50px] shadow-2 bg-white z-50 left-1/2 top-[30px] hidden flex flex-col justify-center items-center"
     style="width: 530px;"
   >
-    <h3
-      class="text-[24px] font-semibold leading-[30px]"
+    <div
+      class="text-center"
     >
-      TEXT
-    </h3>
+      <h3
+        class="text-[24px] font-semibold leading-[30px]"
+      >
+        TEXT
+      </h3>
+    </div>
     <span
       class="inline-block w-[90px] h-[3px] bg-primary rounded-xl mt-[18px]"
     />