feat: added modal props

Author: yaswanth-deriv

src/components/Dialog/Dialog.scss

@@ -1,4 +1,5 @@
 .deriv-dialog{
   min-width:440px;
   height:auto;
+  padding: 10px;
 }

src/components/Dialog/DialogBody.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { Modal } from "../Modal"
 
-export const DialogBody = ({ children, className,...rest }: React.ComponentProps<"div">) => {
+export const DialogBody = ({ children, className,...rest }: React.ComponentProps<typeof Modal.Body>) => {
   return (
     <Modal.Body className={className} {...rest}>
       {children}

src/components/Dialog/DialogFooter.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { Modal } from "../Modal"
 
-export const DialogFooter = ({ className, children,...rest }: React.ComponentProps<"div">) => {
+export const DialogFooter = ({ className, children,...rest }: React.ComponentProps<typeof Modal.Footer>) => {
     return (
         <Modal.Footer hideBorder className={className} {...rest}>
             {children}

src/components/Dialog/DialogHeader.tsx

@@ -2,7 +2,11 @@ import React,{ ReactNode } from "react"
 import { Modal } from "../Modal"
 import { Text } from "../Text"
 
-type TDialogHeaderProps = React.ComponentProps<"div"> & {
+type ExcludedProps ={
+    hideBorder:boolean
+}
+
+type TDialogHeaderProps = Exclude<React.ComponentProps<typeof Modal.Header>,ExcludedProps> & {
     hideCloseIcon?: boolean;
     title?: ReactNode;
     textClassName?: string

src/components/Dialog/__test__/Dialog.spec.tsx

@@ -7,7 +7,7 @@ import { DialogHeader } from "../DialogHeader";
 describe("Dialog component", () => {
   it("should render the basic dialog without header, footer and body", () => {
     render(
-      <Dialog>
+      <Dialog isOpen={true}>
         <p>This is some dialog content</p>
       </Dialog>,
     );
@@ -19,7 +19,7 @@ describe("Dialog component", () => {
 
   it("should render dialog header", () => {
     render(
-      <Dialog>
+      <Dialog isOpen={true}>
         <Dialog.Header hideCloseIcon={false} title={"Dialog Title"} />
       </Dialog>,
     );
@@ -33,7 +33,7 @@ describe("Dialog component", () => {
 
   it("should render the dialog header without close icon ", () => {
     render(
-      <Dialog>
+      <Dialog isOpen={true}>
         <Dialog.Header hideCloseIcon={true} title={"Dialog Title"} />
       </Dialog>,
     );
@@ -48,7 +48,7 @@ describe("Dialog component", () => {
 
 it("should render dialog Footer", () => {
     render(
-      <Dialog>
+      <Dialog isOpen={true}>
         <Dialog.Footer>Dialog Footer</Dialog.Footer>
       </Dialog>,
     );
@@ -60,7 +60,7 @@ it("should render dialog Footer", () => {
 
 it("should close the modal when the close button in header is clicked", async () => {
     render(
-      <Dialog>
+      <Dialog isOpen={true}>
         <DialogHeader title={" Modal Title"} hideCloseIcon={false}></DialogHeader>
         <Dialog.Body>
         <p>This is some dialog content</p>

src/components/Dialog/index.tsx

@@ -5,13 +5,13 @@ import { DialogBody } from "./DialogBody"
 import { DialogFooter } from "./DialogFooter"
 import "./Dialog.scss"
 
-type TDialogProps = {
+type TDialogProps = React.ComponentProps<typeof Modal> &{
   children: ReactNode
 }
 
-export const Dialog = ({ children }: TDialogProps) => {
+export const Dialog = ({ children,...rest }: TDialogProps) => {
   return (
-    <Modal className={"deriv-dialog"} isOpen={true} ariaHideApp={false} >
+    <Modal className={"deriv-dialog"} {...rest}>
       {children}
     </Modal>
   )

stories/Dialog.stories.tsx

@@ -12,6 +12,7 @@ const meta = {
     tags: ["autodocs"],
     args: {
         children: <p>This is basic dialog</p>,
+        isOpen:true
     },
     argTypes: {
         children: {
@@ -29,7 +30,7 @@ export const Default: Story = {
     render : ()=>{
         return (
             <>
-            <Dialog>
+            <Dialog isOpen={true}>
                 <Dialog.Header>title</Dialog.Header>
                 <Dialog.Body>body</Dialog.Body>
                 <Dialog.Footer>
@@ -47,7 +48,7 @@ export const HideHeaderCloseIcon: Story = {
     render : ()=>{
         return (
             <>
-            <Dialog>
+            <Dialog isOpen={true}>
                 <Dialog.Header hideCloseIcon >title</Dialog.Header>
                 <Dialog.Body>body</Dialog.Body>
                 <Dialog.Footer>
@@ -65,7 +66,7 @@ export const NoHeader: Story = {
     render : ()=>{
         return (
             <>
-            <Dialog>
+            <Dialog isOpen={true}>
                 <Dialog.Body>body</Dialog.Body>
                 <Dialog.Footer>
                     <Button color="black">cancel</Button>
@@ -82,7 +83,7 @@ export const NoFooter: Story = {
     render : ()=>{
         return (
             <>
-            <Dialog>
+            <Dialog isOpen={true}>
                 <Dialog.Header>title</Dialog.Header>
                 <Dialog.Body>body</Dialog.Body>
             </Dialog>