migrated Modal component files to .tsx and updated snapshot

components/Modal/Modal.js → components/Modal/Modal.tsx

@@ -1,42 +1,59 @@
-import { node, string, bool, func } from 'prop-types';
 import classNames from 'classnames';
 import * as Dialog from '@radix-ui/react-dialog';
 import { gtag } from 'common/utils/thirdParty/gtag';
 import CloseButton from 'components/Buttons/CloseButton/CloseButton';
 import { MODAL_CONTENT, MODAL_OVERLAY } from 'common/constants/testIDs';
 
-Modal.propTypes = {
-  children: node.isRequired,
-  className: string,
-  isOpen: bool,
-  onRequestClose: func.isRequired,
-  screenReaderLabel: string.isRequired, // basically a summarizing title
-  canClose: bool,
-  childrenClassName: string,
-};
-
-Modal.defaultProps = {
-  className: undefined,
-  isOpen: false,
-  canClose: true,
-  childrenClassName: undefined,
+export type ModalPropsType = {
+  /**
+   * Content to be rendered in the modal.
+   */
+  children: React.ReactNode;
+  /**
+   * Function that is called when the user clicks the close button.
+   */
+  onRequestClose: (arg1: any) => void;
+  /**
+   * Applies a label for the screen reader.
+   */
+  screenReaderLabel: string;
+  /**
+   * Applies style classes to the wrapping div.
+   */
+  className?: string;
+  /**
+   * Sets if the modal is open an visible (or not)
+   * @default false
+   */
+  isOpen?: boolean;
+  /**
+   * Sets if the modal can be closed by the user
+   * @default true
+   */
+  canClose?: boolean;
+  /**
+   * Applies style classes to the child content.
+   */
+  childrenClassName?: string;
 };
 
 function Modal({
   children,
   className,
-  isOpen,
+  isOpen = false,
   onRequestClose,
   screenReaderLabel,
-  canClose,
+  canClose = true,
   childrenClassName,
-}) {
+}: ModalPropsType) {
   if (isOpen) {
     gtag.modalView(screenReaderLabel);
   }
 
   const portalContainer =
-    typeof window !== 'undefined' ? document.querySelector('#__next') ?? undefined : undefined;
+    typeof window !== 'undefined'
+      ? (document.querySelector('#__next') as HTMLElement) ?? undefined
+      : undefined;
 
   return (
     <Dialog.Root defaultOpen={false} open={isOpen}>

components/Modal/__stories__/Modal.stories.js → components/Modal/__stories__/Modal.stories.tsx

@@ -1,17 +1,36 @@
+import { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 import isChromatic from 'chromatic/isChromatic';
-
 import { descriptions } from 'common/constants/descriptions';
 import Button from 'components/Buttons/Button/Button';
 import Modal from '../Modal';
 
-export const Default = {
+type ModalStoryType = StoryObj<typeof Modal>;
+
+const meta: Meta<typeof Modal> = {
+  title: 'Modal',
+  component: Modal,
+  parameters: {
+    previewTabs: {
+      'storybook/docs/panel': { hidden: true },
+    },
+    docs: {
+      autodocs: false,
+      disable: true,
+      page: null,
+    },
+  },
+};
+
+export default meta;
+
+export const Default: ModalStoryType = {
   render: args => {
     const [isDemoModalOpen, setIsDemoModalOpen] = useState(args.isOpen);
 
     return (
       <>
-        <Button onClick={() => setIsDemoModalOpen(true)}>Open Modal</Button>
+        <Button onClick={() => setIsDemoModalOpen(true)}>Open modal</Button>
 
         <Modal
           {...args}
@@ -28,22 +47,8 @@ export const Default = {
   },
 };
 
-export const NonDismissableModal = {
-  render: args => {
-    const [isDemoModalOpen, setIsDemoModalOpen] = useState(args.isOpen);
-
-    return (
-      <>
-        <Button onClick={() => setIsDemoModalOpen(true)}>Open Modal</Button>
-
-        <Modal
-          {...args}
-          isOpen={isDemoModalOpen}
-          onRequestClose={prevValue => setIsDemoModalOpen(!prevValue)}
-        />
-      </>
-    );
-  },
+export const NonDismissableModal: ModalStoryType = {
+  ...Default,
   args: {
     canClose: false,
     isOpen: false,
@@ -59,20 +64,3 @@ export const NonDismissableModal = {
     screenReaderLabel: 'You have completed the form.',
   },
 };
-
-const meta = {
-  title: 'Modal',
-  component: Modal,
-  parameters: {
-    previewTabs: {
-      'storybook/docs/panel': { hidden: true },
-    },
-    docs: {
-      autodocs: false,
-      disable: true,
-      page: null,
-    },
-  },
-};
-
-export default meta;

components/Modal/__tests__/Modal.test.js → components/Modal/__tests__/Modal.test.tsx

@@ -24,7 +24,7 @@ describe('Modal', () => {
 
   it('should render with many props assigned', () => {
     const { container } = render(
-      <Modal {...requiredProps} className="test-class" isOpen shouldCloseOnOverlayClick={false}>
+      <Modal {...requiredProps} className="test-class" isOpen>
         Test
       </Modal>,
     );