fix(modal): bind Footer to Modal with property

src/components/Modal/Modal.mdx

@@ -5,7 +5,7 @@ route: /modal
 ---
 
 import { Playground, Props } from 'docz';
-import { Button, Modal, Input } from '../../index.ts';
+import { Button, Modal, Input } from '../..';
 
 # Modal
 
@@ -25,13 +25,13 @@ A modal is a dialog that appears on top of the main content to require user inte
     return (
       <>
         <Button onClick={() => setIsOpen(true)}>Open basic modal</Button>
-        <Modal.Dialog title="This is the title" isOpen={isOpen}>
+        <Modal title="This is the title" isOpen={isOpen}>
           <span>Insert your text or form elements here</span>
           <Modal.Footer>
             <Button type='secondary' onClick={() => setIsOpen(false)}>Cancel</Button>
             <Button onClick={() => 'do some logic here'}>Create</Button>
           </Modal.Footer>
-        </Modal.Dialog>
+        </Modal>
       </>
     );
 }}
@@ -52,13 +52,13 @@ A modal is a dialog that appears on top of the main content to require user inte
     return (
       <>
         <Button onClick={() => setIsOpen(true)}>Create Todo</Button>
-        <Modal.Dialog title="Create a Todo" isOpen={isOpen}>
+        <Modal title="Create a Todo" isOpen={isOpen}>
           <Input />
           <Modal.Footer>
             <Button type='secondary' onClick={() => setIsOpen(false)}>Cancel</Button>
             <Button onClick={createHandler} isLoading={isLoading}>Create</Button>
           </Modal.Footer>
-        </Modal.Dialog>
+        </Modal>
       </>
     );
 }}
@@ -67,9 +67,9 @@ A modal is a dialog that appears on top of the main content to require user inte
 
 ## API
 
-### Modal.Dialog
+### Modal
 
-<Props of={Modal.Dialog} />
+<Props of={Modal} />
 
 ### Modal.Footer
 

src/components/Modal/Modal.test.tsx

@@ -8,18 +8,18 @@ describe('Modal', () => {
 
   test('snapshot when shown', () => {
     const { asFragment, container } = render(
-      <Modal.Dialog title="This is the title" isOpen>
+      <Modal title="This is the title" isOpen>
         <span>Insert your text or form elements here</span>
         <Modal.Footer>Buttons are placed here</Modal.Footer>
-      </Modal.Dialog>,
+      </Modal>,
       { container: document.body },
     );
     expect(asFragment()).toMatchSnapshot();
     expect(isModalVisible(container)).toBe(true);
   });
 
   test('snapshot when hidden', () => {
-    const { asFragment, container } = render(<Modal.Dialog>Invisible</Modal.Dialog>, {
+    const { asFragment, container } = render(<Modal>Invisible</Modal>, {
       container: document.body,
     });
     expect(asFragment()).toMatchSnapshot();
@@ -29,9 +29,9 @@ describe('Modal', () => {
   test('className prop', () => {
     const className = 'center';
     const { getByText } = render(
-      <Modal.Dialog isOpen className={className}>
+      <Modal isOpen className={className}>
         Content
-      </Modal.Dialog>,
+      </Modal>,
       { container: document.body },
     );
     const overlayElement = getByText(/Content/).parentElement!;
@@ -45,9 +45,9 @@ describe('Modal', () => {
   test('modal should close on pressing ESC', () => {
     const mockOnEscKeyDown = jest.fn();
     const { getByText } = render(
-      <Modal.Dialog isOpen onEscKeyDown={mockOnEscKeyDown}>
+      <Modal isOpen onEscKeyDown={mockOnEscKeyDown}>
         Content
-      </Modal.Dialog>,
+      </Modal>,
       { container: document.body },
     );
     const modalElement = getByText(/Content/)!;
@@ -56,7 +56,7 @@ describe('Modal', () => {
   });
 
   test('the modal should receive focus on open', () => {
-    const { getByText } = render(<Modal.Dialog isOpen>Content</Modal.Dialog>, {
+    const { getByText } = render(<Modal isOpen>Content</Modal>, {
       container: document.body,
     });
     const modalElement = getByText(/Content/)!;

src/components/Modal/ModalDialog/ModalDialog.tsx → src/components/Modal/Modal.tsx

@@ -2,8 +2,10 @@ import React, { ReactNode, useEffect } from 'react';
 import { Portal } from 'react-portal';
 import classNames from 'classnames';
 
-import cssReset from '../../../css-reset.module.css';
-import styles from './ModalDialog.module.css';
+import Footer from './ModalFooter/ModalFooter';
+
+import cssReset from '../../css-reset.module.css';
+import styles from './Modal.module.css';
 
 type Props = {
   title?: string;
@@ -21,7 +23,7 @@ const disableBodyScroll = (isDisabled: boolean) => {
   }
 };
 
-const ModalDialog: React.FC<Props> = ({
+const Modal: React.FC<Props> & { Footer: typeof Footer } = ({
   title,
   isOpen = false,
   onEscKeyDown,
@@ -63,4 +65,6 @@ const ModalDialog: React.FC<Props> = ({
   ) : null;
 };
 
-export default ModalDialog;
+Modal.Footer = Footer;
+
+export default Modal;

src/components/Modal/ModalFooter/ModalFooter.tsx

@@ -8,7 +8,7 @@ type Props = {
   children?: ReactNode;
 };
 
-const ModalFooter: React.FC = ({ className, children }: Props) => {
+const ModalFooter: React.FC<Props> = ({ className, children }: Props) => {
   const mergedClassNames = classNames(styles.container, className);
   return <div className={mergedClassNames}>{children}</div>;
 };