chore: improved stories for modal component

deriv-com · Mar 4, 2024 · deb87d5 · deb87d5
1 parent 6b31b94
commit deb87d5
Showing 1 changed file with 177 additions and 1 deletion.
diff --git a/src/stories/Modal.stories.tsx b/src/stories/Modal.stories.tsx
@@ -83,7 +83,47 @@ export const Default: Story = {
     }
 };
 
-export const HeaderCloseIcon: Story = {
+export const ModalWithoutOverlay: Story = {
+    name: "Disable Overlay",
+    args: {
+        isOpen: false,
+        onRequestClose: () => { },
+        ariaHideApp: false,
+        shouldCloseOnOverlayClick: false,
+    },
+    render : (args)=>{
+        const [isOpen, setIsOpen] = useState(args.isOpen);
+
+        useEffect(() => {
+            setIsOpen(args.isOpen);
+        }, [args.isOpen]);
+        return (
+            <>
+            <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
+            <Modal
+                {...args}
+                isOpen={isOpen}
+                shouldCloseOnOverlayClick={args.shouldCloseOnOverlayClick}
+                onRequestClose={() => setIsOpen(false)}
+                style={{
+                    overlay:{
+                        backgroundColor:'none'
+                    }
+                }}
+                >
+                <Modal.Header onRequestClose={() => setIsOpen(false)} >title</Modal.Header>
+                <Modal.Body>body</Modal.Body>
+                <Modal.Footer>
+                    <Button color="black">cancel</Button>
+                    <Button>ok</Button>
+                </Modal.Footer>
+            </Modal>
+            </>
+        )
+    }
+};
+
+export const HideHeaderCloseIcon: Story = {
     name: "Hide Close Icon",
     args: {
         isOpen: false,
@@ -118,6 +158,40 @@ export const HeaderCloseIcon: Story = {
     }
 };
 
+export const NoHeader: Story = {
+    name: "Hide Header",
+    args: {
+        isOpen: false,
+        onRequestClose: () => { },
+        ariaHideApp: false,
+        shouldCloseOnOverlayClick: true,
+    },
+    render : (args)=>{
+        const [isOpen, setIsOpen] = useState(args.isOpen);
+
+        useEffect(() => {
+            setIsOpen(args.isOpen);
+        }, [args.isOpen]);
+        return (
+            <>
+            <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
+            <Modal
+                {...args}
+                isOpen={isOpen}
+                shouldCloseOnOverlayClick={args.shouldCloseOnOverlayClick}
+                onRequestClose={() => setIsOpen(false)}
+                >
+                <Modal.Body>body</Modal.Body>
+                <Modal.Footer>
+                    <Button color="black">cancel</Button>
+                    <Button>ok</Button>
+                </Modal.Footer>
+            </Modal>
+            </>
+        )
+    }
+};
+
 export const NoHeaderBorder: Story = {
     name: "Hide Header Border",
     args: {
@@ -153,6 +227,37 @@ export const NoHeaderBorder: Story = {
     }
 };
 
+export const NoFooter: Story = {
+    name: "Hide Footer",
+    args: {
+        isOpen: false,
+        onRequestClose: () => { },
+        ariaHideApp: false,
+        shouldCloseOnOverlayClick: true,
+    },
+    render : (args)=>{
+        const [isOpen, setIsOpen] = useState(args.isOpen);
+
+        useEffect(() => {
+            setIsOpen(args.isOpen);
+        }, [args.isOpen]);
+        return (
+            <>
+            <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
+            <Modal
+                {...args}
+                isOpen={isOpen}
+                shouldCloseOnOverlayClick={args.shouldCloseOnOverlayClick}
+                onRequestClose={() => setIsOpen(false)}
+                >
+                <Modal.Header>title</Modal.Header>
+                <Modal.Body>body</Modal.Body>
+            </Modal>
+            </>
+        )
+    }
+};
+
 export const NoFooterBorder: Story = {
     name: "Hide Footer Border",
     args: {
@@ -187,3 +292,74 @@ export const NoFooterBorder: Story = {
         )
     }
 };
+
+export const HeaderCloseIconHandler: Story = {
+    name: "Close Modal when Click on Close Icon",
+    args: {
+        isOpen: false,
+        onRequestClose: () => { },
+        ariaHideApp: false,
+        shouldCloseOnOverlayClick: true,
+    },
+    render : (args)=>{
+        const [isOpen, setIsOpen] = useState(args.isOpen);
+
+        useEffect(() => {
+            setIsOpen(args.isOpen);
+        }, [args.isOpen]);
+        return (
+            <>
+            <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
+            <Modal
+                {...args}
+                isOpen={isOpen}
+                shouldCloseOnOverlayClick={args.shouldCloseOnOverlayClick}
+                onRequestClose={() => setIsOpen(false)}
+                >
+                <Modal.Header onRequestClose={()=>setIsOpen(false)}>title</Modal.Header>
+                <Modal.Body>body</Modal.Body>
+                <Modal.Footer hideBorder>
+                    <Button color="black">cancel</Button>
+                    <Button>ok</Button>
+                </Modal.Footer>
+            </Modal>
+            </>
+        )
+    }
+};
+
+export const DisableEscButton: Story = {
+    name: "Disable ESC Button",
+    args: {
+        isOpen: false,
+        onRequestClose: () => { },
+        ariaHideApp: false,
+        shouldCloseOnOverlayClick: true,
+    },
+    render : (args)=>{
+        const [isOpen, setIsOpen] = useState(args.isOpen);
+
+        useEffect(() => {
+            setIsOpen(args.isOpen);
+        }, [args.isOpen]);
+        return (
+            <>
+            <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
+            <Modal
+                {...args}
+                isOpen={isOpen}
+                shouldCloseOnOverlayClick={args.shouldCloseOnOverlayClick}
+                onRequestClose={() => setIsOpen(false)}
+                shouldCloseOnEsc={false}
+                >
+                <Modal.Header>title</Modal.Header>
+                <Modal.Body>body</Modal.Body>
+                <Modal.Footer hideBorder>
+                    <Button color="black">cancel</Button>
+                    <Button>ok</Button>
+                </Modal.Footer>
+            </Modal>
+            </>
+        )
+    }
+};