refactor: seperated dialog components into three components

Author: yaswanth-deriv

lib/components/Dialog/DIalogFooter.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from "react"
+import { Modal } from "../Modal"
+
+type TDialogFooterProps = {
+    className?: string;
+    children: ReactNode
+}
+
+export const DialogFooter = ({ className, children }: TDialogFooterProps) => {
+    return (
+        <Modal.Footer hideBorder className={className}>
+            {children}
+        </Modal.Footer>
+    )
+}

lib/components/Dialog/DialogBody.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from "react"
+import { Modal } from "../Modal"
+
+type TDialogBodyProps = {
+  children: ReactNode;
+  className?: string;
+}
+
+export const DialogBody = ({ children, className }: TDialogBodyProps) => {
+  return (
+    <Modal.Body className={className}>
+      {children}
+    </Modal.Body>
+  )
+}

lib/components/Dialog/DialogHeader.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from "react"
+import { Modal } from "../Modal"
+import { Text } from "../Text"
+
+type TDialogHeaderProps = {
+    className?: string;
+    hideCloseIcon?: boolean;
+    title?: ReactNode;
+    textClassName?: string
+}
+
+export const DialogHeader = ({ className, hideCloseIcon = true, title, textClassName }: TDialogHeaderProps) => {
+    return (
+        <Modal.Header hideBorder hideCloseIcon={hideCloseIcon} className={className}>
+            <Text as='div' weight='bold' className={textClassName}>
+                {title}
+            </Text>
+        </Modal.Header>
+    )
+}

lib/components/Dialog/index.tsx

@@ -1,30 +1,23 @@
-import React, { ComponentProps, ReactNode } from "react"
+import React, { ReactNode } from "react"
 import { Modal } from "../Modal"
-import { Text } from "../Text"
+import { DialogHeader } from "./DialogHeader"
+import { DialogBody } from "./DialogBody"
+import { DialogFooter } from "./DIalogFooter"
 import "./Dialog.scss"
 
-type TDialogProps = ComponentProps<typeof Modal> & {
-  body: ReactNode;
+type TDialogProps = {
+  bodyChildren:ReactNode
   header?: string;
-  primaryButton: ReactNode;
-  secondaryButton?: ReactNode;
+  footerChildren:ReactNode;
+  title?: ReactNode;
 }
 
-export const Dialog = ({ body, header, primaryButton, secondaryButton,...rest }: TDialogProps) => {
+export const Dialog = ({ bodyChildren,footerChildren,header,title,...rest }: TDialogProps) => {
   return (
-    <Modal className={"deriv-dialog"}  ariaHideApp={false}  {...rest}>
-      <Modal.Header hideBorder={true} >
-        <Text as='div' weight='bold' className='deriv-modal__header-title'>
-          {header}
-        </Text>
-      </Modal.Header>
-      <Modal.Body>
-        {body}
-      </Modal.Body>
-      <Modal.Footer hideBorder={true}>
-        {primaryButton}
-        {secondaryButton}
-      </Modal.Footer>
+    <Modal className={"deriv-dialog"}  ariaHideApp={false} isOpen  {...rest}>
+      <DialogHeader title={title} />
+      <DialogBody children={bodyChildren}/>
+      <DialogFooter children={footerChildren}/>
     </Modal>
   )
 }