From 92e25d056ebb3fd50b1467749d1e69e946aabce1 Mon Sep 17 00:00:00 2001
From: Arianna Kellogg <ari@truss.works>
Date: Wed, 12 May 2021 17:56:12 -0700
Subject: [PATCH 01/38] Modal base component, minimum Storybook examples
 identified, plus test suite

---
 src/components/Modal/Modal.stories.tsx | 31 +++++++++++++++++++++
 src/components/Modal/Modal.test.tsx    | 38 ++++++++++++++++++++++++++
 src/components/Modal/Modal.tsx         | 33 ++++++++++++++++++++++
 3 files changed, 102 insertions(+)
 create mode 100644 src/components/Modal/Modal.stories.tsx
 create mode 100644 src/components/Modal/Modal.test.tsx
 create mode 100644 src/components/Modal/Modal.tsx

diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
new file mode 100644
index 0000000000..02fe66a586
--- /dev/null
+++ b/src/components/Modal/Modal.stories.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+
+import { Modal } from './Modal'
+
+export default {
+  title: 'Components/Modal',
+  component: Modal,
+  parameters: {
+    docs: {
+      description: {
+        component: `
+### USWDS 2.0 SiteAlert component
+
+Source: http://designsystem.digital.gov/components/modal
+`,
+      },
+    },
+  },
+}
+
+export const defaultModal = (): React.ReactElement => (
+  <Modal>some children</Modal>
+)
+
+export const largeModal = (): React.ReactElement => (
+  <Modal isLarge>large modal</Modal>
+)
+
+export const modalWithForcedAction = (): React.ReactElement => (
+  <Modal>forced action</Modal>
+)
diff --git a/src/components/Modal/Modal.test.tsx b/src/components/Modal/Modal.test.tsx
new file mode 100644
index 0000000000..1123cbc08b
--- /dev/null
+++ b/src/components/Modal/Modal.test.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+
+import { Modal } from './Modal'
+
+import { render } from '@testing-library/react'
+
+describe('Modal component', () => {
+  it('renders without errors', () => {
+    const { getByTestId } = render(<Modal>some children</Modal>)
+
+    expect(getByTestId('modal')).toBeInTheDocument()
+  })
+
+  it('renders large model when passed isLarge', () => {
+    const { getByTestId } = render(<Modal isLarge>some children</Modal>)
+
+    expect(getByTestId('modal')).toHaveClass('usa-modal--lg')
+  })
+
+  it('accepts attributes passed in through props', () => {
+    const { getByTestId } = render(
+      <Modal aria-label="aria-label-model">some children</Modal>
+    )
+
+    expect(getByTestId('modal')).toHaveAttribute(
+      'aria-label',
+      'aria-label-model'
+    )
+  })
+
+  it('accepts a custom className', () => {
+    const { getByTestId } = render(
+      <Modal className="custom-class">some children</Modal>
+    )
+
+    expect(getByTestId('modal')).toHaveClass('usa-modal custom-class')
+  })
+})
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
new file mode 100644
index 0000000000..f484af6b6e
--- /dev/null
+++ b/src/components/Modal/Modal.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+
+import classnames from 'classnames'
+
+interface ModalProps {
+  children: React.ReactNode
+  className?: string
+  isLarge?: boolean
+}
+
+export const Modal = ({
+  className,
+  children,
+  isLarge = false,
+  ...divProps
+}: ModalProps & JSX.IntrinsicElements['div']): React.ReactElement => {
+  const classes = classnames(
+    'usa-modal',
+    {
+      'usa-modal--lg': isLarge,
+    },
+    className
+  )
+  return (
+    <>
+      <div data-testid="modal" className={classes} {...divProps}>
+        {children}
+      </div>
+    </>
+  )
+}
+
+export default Modal

From 358510210f60a01388e6243fd00a3ecfb923473e Mon Sep 17 00:00:00 2001
From: Arianna Kellogg <ari@truss.works>
Date: Thu, 13 May 2021 12:24:20 -0700
Subject: [PATCH 02/38] Add example content to use in Storybook examples

---
 src/components/Modal/Modal.stories.tsx | 59 +++++++++++++++++++++++++-
 1 file changed, 58 insertions(+), 1 deletion(-)

diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
index 02fe66a586..d4de01701d 100644
--- a/src/components/Modal/Modal.stories.tsx
+++ b/src/components/Modal/Modal.stories.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 
 import { Modal } from './Modal'
+import close from 'uswds/src/img/close.svg'
 
 export default {
   title: 'Components/Modal',
@@ -18,8 +19,64 @@ Source: http://designsystem.digital.gov/components/modal
   },
 }
 
+// const testContent = (
+//   <div className="usa-modal__content">
+//     <div className="usa-modal__main">
+//       <h2 className="usa-modal__heading" id="modal-1-heading">
+//         Are you sure you want to continue?
+//       </h2>
+//       <div className="usa-prose">
+//         <p id="modal-1-description">
+//           You have unsaved changes that will be lost.
+//         </p>
+//       </div>
+//       <div className="usa-modal__footer">
+//         <ul className="usa-button-group">
+//           <li className="usa-button-group__item">
+//             <button type="button" className="usa-button" data-close-modal>
+//               Continue without saving
+//             </button>
+//           </li>
+//           <li className="usa-button-group__item">
+//             <button
+//               type="button"
+//               className="usa-button usa-button--unstyled padding-105 text-center"
+//               data-close-modal>
+//               Go back
+//             </button>
+//           </li>
+//         </ul>
+//       </div>
+//     </div>
+//     <button
+//       className="usa-button usa-modal__close"
+//       aria-label="Close this window"
+//       data-close-modal>
+//       <img className="usa-icon" src={close} alt="close" />
+//     </button>
+//   </div>
+// )
+
+// export const modalWithTestContent = (): React.ReactElement => (
+//   <div className="margin-y-3">
+//     <a
+//       href="#example-modal-1"
+//       className="usa-button"
+//       aria-controls="example-modal-1"
+//       data-open-modal>
+//       Open default modal
+//     </a>
+//     <Modal
+//       id="example-modal-1"
+//       aria-labelledby="modal-1-heading"
+//       aria-describedby="modal-1-description">
+//       {testContent}
+//     </Modal>
+//   </div>
+// )
+
 export const defaultModal = (): React.ReactElement => (
-  <Modal>some children</Modal>
+  <Modal>default modal</Modal>
 )
 
 export const largeModal = (): React.ReactElement => (

From c30913f61768ba2eabb069b3772824ba1ab3057a Mon Sep 17 00:00:00 2001
From: Arianna Kellogg <ari@truss.works>
Date: Mon, 17 May 2021 13:02:37 -0700
Subject: [PATCH 03/38] Add ModalDescription folder and files, passing one test

---
 src/components/Modal/{ => Modal}/Modal.stories.tsx   |  0
 src/components/Modal/{ => Modal}/Modal.test.tsx      |  0
 src/components/Modal/{ => Modal}/Modal.tsx           |  0
 .../Modal/ModalDescription/ModalDescription.test.tsx | 12 ++++++++++++
 .../Modal/ModalDescription/ModalDescription.tsx      |  7 +++++++
 5 files changed, 19 insertions(+)
 rename src/components/Modal/{ => Modal}/Modal.stories.tsx (100%)
 rename src/components/Modal/{ => Modal}/Modal.test.tsx (100%)
 rename src/components/Modal/{ => Modal}/Modal.tsx (100%)
 create mode 100644 src/components/Modal/ModalDescription/ModalDescription.test.tsx
 create mode 100644 src/components/Modal/ModalDescription/ModalDescription.tsx

diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal/Modal.stories.tsx
similarity index 100%
rename from src/components/Modal/Modal.stories.tsx
rename to src/components/Modal/Modal/Modal.stories.tsx
diff --git a/src/components/Modal/Modal.test.tsx b/src/components/Modal/Modal/Modal.test.tsx
similarity index 100%
rename from src/components/Modal/Modal.test.tsx
rename to src/components/Modal/Modal/Modal.test.tsx
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal/Modal.tsx
similarity index 100%
rename from src/components/Modal/Modal.tsx
rename to src/components/Modal/Modal/Modal.tsx
diff --git a/src/components/Modal/ModalDescription/ModalDescription.test.tsx b/src/components/Modal/ModalDescription/ModalDescription.test.tsx
new file mode 100644
index 0000000000..ec5f92356b
--- /dev/null
+++ b/src/components/Modal/ModalDescription/ModalDescription.test.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { ModalDescription } from './ModalDescription'
+
+describe('ModalDescription component', () => {
+  it('renders without errors', () => {
+    const { queryByTestId } = render(<ModalDescription />)
+
+    expect(queryByTestId('modalDescription')).toBeInTheDocument()
+  })
+})
diff --git a/src/components/Modal/ModalDescription/ModalDescription.tsx b/src/components/Modal/ModalDescription/ModalDescription.tsx
new file mode 100644
index 0000000000..c69011c60b
--- /dev/null
+++ b/src/components/Modal/ModalDescription/ModalDescription.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export const ModalDescription = (): React.ReactElement => {
+  return <div data-testid="modalDescription">modal description</div>
+}
+
+export default ModalDescription

From a474a51147688346dad31d013381a1b571a6fc59 Mon Sep 17 00:00:00 2001
From: Arianna Kellogg <ari@truss.works>
Date: Mon, 17 May 2021 13:08:26 -0700
Subject: [PATCH 04/38] Update ModalDeescription to include USWDS class, update
 tests

---
 .../ModalDescription.test.tsx                 | 16 +++++++++++++-
 .../ModalDescription/ModalDescription.tsx     | 21 +++++++++++++++++--
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/components/Modal/ModalDescription/ModalDescription.test.tsx b/src/components/Modal/ModalDescription/ModalDescription.test.tsx
index ec5f92356b..451b0439cb 100644
--- a/src/components/Modal/ModalDescription/ModalDescription.test.tsx
+++ b/src/components/Modal/ModalDescription/ModalDescription.test.tsx
@@ -5,8 +5,22 @@ import { ModalDescription } from './ModalDescription'
 
 describe('ModalDescription component', () => {
   it('renders without errors', () => {
-    const { queryByTestId } = render(<ModalDescription />)
+    const { queryByTestId } = render(
+      <ModalDescription>
+        You have unsaved changes that will be lost.
+      </ModalDescription>
+    )
 
     expect(queryByTestId('modalDescription')).toBeInTheDocument()
   })
+
+  it('accepts a custom className', () => {
+    const { queryByTestId } = render(
+      <ModalDescription className="custom-class">
+        You have unsaved changes that will be lost.
+      </ModalDescription>
+    )
+
+    expect(queryByTestId('modalDescription')).toHaveClass('custom-class')
+  })
 })
diff --git a/src/components/Modal/ModalDescription/ModalDescription.tsx b/src/components/Modal/ModalDescription/ModalDescription.tsx
index c69011c60b..a621287154 100644
--- a/src/components/Modal/ModalDescription/ModalDescription.tsx
+++ b/src/components/Modal/ModalDescription/ModalDescription.tsx
@@ -1,7 +1,24 @@
 import React from 'react'
+import classnames from 'classnames'
 
-export const ModalDescription = (): React.ReactElement => {
-  return <div data-testid="modalDescription">modal description</div>
+interface ModalDescriptionProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export const ModalDescription = ({
+  children,
+  className,
+  ...divProps
+}: ModalDescriptionProps &
+  JSX.IntrinsicElements['div']): React.ReactElement => {
+  const classes = classnames('usa-modal__main', className)
+
+  return (
+    <div className={classes} data-testid="modalDescription" {...divProps}>
+      {children}
+    </div>
+  )
 }
 
 export default ModalDescription

From fdd3078309cf9fcba74d84c7d65999b835edd7e5 Mon Sep 17 00:00:00 2001
From: Arianna Kellogg <ari@truss.works>
Date: Mon, 17 May 2021 13:24:02 -0700
Subject: [PATCH 05/38] Add folder and files for ModalHeading

---
 src/components/Modal/Modal/Modal.stories.tsx            | 3 ++-
 src/components/Modal/Modal/Modal.tsx                    | 2 +-
 src/components/Modal/ModalHeading/ModalHeading.test.tsx | 1 +
 src/components/Modal/ModalHeading/ModalHeading.tsx      | 1 +
 4 files changed, 5 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Modal/ModalHeading/ModalHeading.test.tsx
 create mode 100644 src/components/Modal/ModalHeading/ModalHeading.tsx

diff --git a/src/components/Modal/Modal/Modal.stories.tsx b/src/components/Modal/Modal/Modal.stories.tsx
index d4de01701d..c51f012ef0 100644
--- a/src/components/Modal/Modal/Modal.stories.tsx
+++ b/src/components/Modal/Modal/Modal.stories.tsx
@@ -1,7 +1,8 @@
 import React from 'react'
 
 import { Modal } from './Modal'
-import close from 'uswds/src/img/close.svg'
+import { ModalDescription } from '../ModalDescription/ModalDescription'
+// import close from 'uswds/src/img/close.svg'
 
 export default {
   title: 'Components/Modal',
diff --git a/src/components/Modal/Modal/Modal.tsx b/src/components/Modal/Modal/Modal.tsx
index f484af6b6e..f0809d2766 100644
--- a/src/components/Modal/Modal/Modal.tsx
+++ b/src/components/Modal/Modal/Modal.tsx
@@ -24,7 +24,7 @@ export const Modal = ({
   return (
     <>
       <div data-testid="modal" className={classes} {...divProps}>
-        {children}
+        <div className="usa-modal__content">{children}</div>
       </div>
     </>
   )
diff --git a/src/components/Modal/ModalHeading/ModalHeading.test.tsx b/src/components/Modal/ModalHeading/ModalHeading.test.tsx
new file mode 100644
index 0000000000..b45dfaa8f0
--- /dev/null
+++ b/src/components/Modal/ModalHeading/ModalHeading.test.tsx
@@ -0,0 +1 @@
+import React from 'react'
diff --git a/src/components/Modal/ModalHeading/ModalHeading.tsx b/src/components/Modal/ModalHeading/ModalHeading.tsx
new file mode 100644
index 0000000000..b45dfaa8f0
--- /dev/null
+++ b/src/components/Modal/ModalHeading/ModalHeading.tsx
@@ -0,0 +1 @@
+import React from 'react'

From b289aa4b049afa5fcd9355304e191ece603f67ce Mon Sep 17 00:00:00 2001
From: Arianna Kellogg <ari@truss.works>
Date: Mon, 17 May 2021 13:28:36 -0700
Subject: [PATCH 06/38] Skeleton for ModalHeading, passing one test

---
 .../Modal/ModalHeading/ModalHeading.test.tsx          | 11 +++++++++++
 src/components/Modal/ModalHeading/ModalHeading.tsx    |  6 ++++++
 2 files changed, 17 insertions(+)

diff --git a/src/components/Modal/ModalHeading/ModalHeading.test.tsx b/src/components/Modal/ModalHeading/ModalHeading.test.tsx
index b45dfaa8f0..9ca41e1bf8 100644
--- a/src/components/Modal/ModalHeading/ModalHeading.test.tsx
+++ b/src/components/Modal/ModalHeading/ModalHeading.test.tsx
@@ -1 +1,12 @@
 import React from 'react'
+import { render } from '@testing-library/react'
+
+import { ModalHeading } from './ModalHeading'
+
+describe('ModalHeading component', () => {
+  it('renders without errors', () => {
+    const { queryByTestId } = render(<ModalHeading />)
+
+    expect(queryByTestId('modalHeading')).toBeInTheDocument()
+  })
+})
diff --git a/src/components/Modal/ModalHeading/ModalHeading.tsx b/src/components/Modal/ModalHeading/ModalHeading.tsx
index b45dfaa8f0..ec81c5b4ef 100644
--- a/src/components/Modal/ModalHeading/ModalHeading.tsx
+++ b/src/components/Modal/ModalHeading/ModalHeading.tsx
@@ -1 +1,7 @@
 import React from 'react'
+
+export const ModalHeading = (): React.ReactElement => {
+  return <div data-testid="modalHeading">modal heading</div>
+}
+
+export default ModalHeading

From 948ba7431fb7ecfe892a49e0d3d1e4e9e3e91585 Mon Sep 17 00:00:00 2001
From: Arianna Kellogg <ari@truss.works>
Date: Mon, 17 May 2021 14:35:35 -0700
Subject: [PATCH 07/38] Flesh out default Modal Storybook example

---
 src/components/Modal/Modal/Modal.stories.tsx  | 86 ++++++-------------
 src/components/Modal/Modal/Modal.test.tsx     |  6 +-
 src/components/Modal/Modal/Modal.tsx          |  8 +-
 .../Modal/ModalContent/ModalContent.test.tsx  | 24 ++++++
 .../Modal/ModalContent/ModalContent.tsx       | 23 +++++
 .../ModalDescription.test.tsx                 |  6 +-
 .../ModalDescription/ModalDescription.tsx     |  2 +-
 .../Modal/ModalFooter/ModalFooter.test.tsx    | 40 +++++++++
 .../Modal/ModalFooter/ModalFooter.tsx         | 23 +++++
 .../Modal/ModalHeading/ModalHeading.test.tsx  |  7 +-
 .../Modal/ModalHeading/ModalHeading.tsx       | 30 ++++++-
 .../Modal/ModalMain/ModalMain.test.tsx        | 32 +++++++
 src/components/Modal/ModalMain/ModalMain.tsx  | 25 ++++++
 src/index.ts                                  |  6 ++
 14 files changed, 244 insertions(+), 74 deletions(-)
 create mode 100644 src/components/Modal/ModalContent/ModalContent.test.tsx
 create mode 100644 src/components/Modal/ModalContent/ModalContent.tsx
 create mode 100644 src/components/Modal/ModalFooter/ModalFooter.test.tsx
 create mode 100644 src/components/Modal/ModalFooter/ModalFooter.tsx
 create mode 100644 src/components/Modal/ModalMain/ModalMain.test.tsx
 create mode 100644 src/components/Modal/ModalMain/ModalMain.tsx

diff --git a/src/components/Modal/Modal/Modal.stories.tsx b/src/components/Modal/Modal/Modal.stories.tsx
index c51f012ef0..4890f06d5b 100644
--- a/src/components/Modal/Modal/Modal.stories.tsx
+++ b/src/components/Modal/Modal/Modal.stories.tsx
@@ -1,8 +1,16 @@
 import React from 'react'
 
 import { Modal } from './Modal'
+import { ModalContent } from '../ModalContent/ModalContent'
 import { ModalDescription } from '../ModalDescription/ModalDescription'
-// import close from 'uswds/src/img/close.svg'
+import { ModalFooter } from '../ModalFooter/ModalFooter'
+import { ModalHeading } from '../ModalHeading/ModalHeading'
+import { ModalMain } from '../ModalMain/ModalMain'
+
+import { Button } from '../../Button/Button'
+import { ButtonGroup } from '../../ButtonGroup/ButtonGroup'
+
+import close from 'uswds/src/img/close.svg'
 
 export default {
   title: 'Components/Modal',
@@ -20,66 +28,28 @@ Source: http://designsystem.digital.gov/components/modal
   },
 }
 
-// const testContent = (
-//   <div className="usa-modal__content">
-//     <div className="usa-modal__main">
-//       <h2 className="usa-modal__heading" id="modal-1-heading">
-//         Are you sure you want to continue?
-//       </h2>
-//       <div className="usa-prose">
-//         <p id="modal-1-description">
-//           You have unsaved changes that will be lost.
-//         </p>
-//       </div>
-//       <div className="usa-modal__footer">
-//         <ul className="usa-button-group">
-//           <li className="usa-button-group__item">
-//             <button type="button" className="usa-button" data-close-modal>
-//               Continue without saving
-//             </button>
-//           </li>
-//           <li className="usa-button-group__item">
-//             <button
-//               type="button"
-//               className="usa-button usa-button--unstyled padding-105 text-center"
-//               data-close-modal>
-//               Go back
-//             </button>
-//           </li>
-//         </ul>
-//       </div>
-//     </div>
-//     <button
-//       className="usa-button usa-modal__close"
-//       aria-label="Close this window"
-//       data-close-modal>
-//       <img className="usa-icon" src={close} alt="close" />
-//     </button>
-//   </div>
-// )
-
-// export const modalWithTestContent = (): React.ReactElement => (
-//   <div className="margin-y-3">
-//     <a
-//       href="#example-modal-1"
-//       className="usa-button"
-//       aria-controls="example-modal-1"
-//       data-open-modal>
-//       Open default modal
-//     </a>
-//     <Modal
-//       id="example-modal-1"
-//       aria-labelledby="modal-1-heading"
-//       aria-describedby="modal-1-description">
-//       {testContent}
-//     </Modal>
-//   </div>
-// )
-
 export const defaultModal = (): React.ReactElement => (
-  <Modal>default modal</Modal>
+  <Modal>
+    <ModalContent>
+      <ModalMain>
+        <ModalHeading type="h1">
+          Are you sure you want to continue?
+        </ModalHeading>
+        <ModalDescription>
+          <p>You have unsaved changes that will be lost.</p>
+        </ModalDescription>
+        <ModalFooter>
+          <ButtonGroup>
+            <Button type="button">Continue without saving</Button>
+            <Button type="button">Go back</Button>
+          </ButtonGroup>
+        </ModalFooter>
+      </ModalMain>
+    </ModalContent>
+  </Modal>
 )
 
+// <p id="modal-1-description">You have unsaved changes that will be lost.</p>
 export const largeModal = (): React.ReactElement => (
   <Modal isLarge>large modal</Modal>
 )
diff --git a/src/components/Modal/Modal/Modal.test.tsx b/src/components/Modal/Modal/Modal.test.tsx
index 1123cbc08b..96501fda98 100644
--- a/src/components/Modal/Modal/Modal.test.tsx
+++ b/src/components/Modal/Modal/Modal.test.tsx
@@ -11,7 +11,7 @@ describe('Modal component', () => {
     expect(getByTestId('modal')).toBeInTheDocument()
   })
 
-  it('renders large model when passed isLarge', () => {
+  it('renders large modal when passed isLarge', () => {
     const { getByTestId } = render(<Modal isLarge>some children</Modal>)
 
     expect(getByTestId('modal')).toHaveClass('usa-modal--lg')
@@ -19,12 +19,12 @@ describe('Modal component', () => {
 
   it('accepts attributes passed in through props', () => {
     const { getByTestId } = render(
-      <Modal aria-label="aria-label-model">some children</Modal>
+      <Modal aria-label="aria-label-modal">some children</Modal>
     )
 
     expect(getByTestId('modal')).toHaveAttribute(
       'aria-label',
-      'aria-label-model'
+      'aria-label-modal'
     )
   })
 
diff --git a/src/components/Modal/Modal/Modal.tsx b/src/components/Modal/Modal/Modal.tsx
index f0809d2766..fbcda3a22b 100644
--- a/src/components/Modal/Modal/Modal.tsx
+++ b/src/components/Modal/Modal/Modal.tsx
@@ -22,11 +22,9 @@ export const Modal = ({
     className
   )
   return (
-    <>
-      <div data-testid="modal" className={classes} {...divProps}>
-        <div className="usa-modal__content">{children}</div>
-      </div>
-    </>
+    <div data-testid="modal" className={classes} {...divProps}>
+      {children}
+    </div>
   )
 }
 
diff --git a/src/components/Modal/ModalContent/ModalContent.test.tsx b/src/components/Modal/ModalContent/ModalContent.test.tsx
new file mode 100644
index 0000000000..695f6fd2ef
--- /dev/null
+++ b/src/components/Modal/ModalContent/ModalContent.test.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { ModalContent } from './ModalContent'
+
+describe('ModalContent component', () => {
+  it('renders without errors', () => {
+    const { queryByTestId } = render(
+      <ModalContent>You have unsaved changes that will be lost.</ModalContent>
+    )
+
+    expect(queryByTestId('modalContent')).toBeInTheDocument()
+  })
+
+  it('accepts a custom className', () => {
+    const { queryByTestId } = render(
+      <ModalContent className="custom-class">
+        You have unsaved changes that will be lost.
+      </ModalContent>
+    )
+
+    expect(queryByTestId('modalContent')).toHaveClass('custom-class')
+  })
+})
diff --git a/src/components/Modal/ModalContent/ModalContent.tsx b/src/components/Modal/ModalContent/ModalContent.tsx
new file mode 100644
index 0000000000..59713ce09b
--- /dev/null
+++ b/src/components/Modal/ModalContent/ModalContent.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import classnames from 'classnames'
+
+interface ModalContentProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export const ModalContent = ({
+  children,
+  className,
+  ...divProps
+}: ModalContentProps & JSX.IntrinsicElements['div']): React.ReactElement => {
+  const classes = classnames('usa-modal__content', className)
+
+  return (
+    <div className={classes} data-testid="modalContent" {...divProps}>
+      {children}
+    </div>
+  )
+}
+
+export default ModalContent
diff --git a/src/components/Modal/ModalDescription/ModalDescription.test.tsx b/src/components/Modal/ModalDescription/ModalDescription.test.tsx
index 451b0439cb..44bf4097fb 100644
--- a/src/components/Modal/ModalDescription/ModalDescription.test.tsx
+++ b/src/components/Modal/ModalDescription/ModalDescription.test.tsx
@@ -7,7 +7,7 @@ describe('ModalDescription component', () => {
   it('renders without errors', () => {
     const { queryByTestId } = render(
       <ModalDescription>
-        You have unsaved changes that will be lost.
+        <p>You have unsaved changes that will be lost.</p>
       </ModalDescription>
     )
 
@@ -17,10 +17,10 @@ describe('ModalDescription component', () => {
   it('accepts a custom className', () => {
     const { queryByTestId } = render(
       <ModalDescription className="custom-class">
-        You have unsaved changes that will be lost.
+        <p>You have unsaved changes that will be lost.</p>
       </ModalDescription>
     )
 
-    expect(queryByTestId('modalDescription')).toHaveClass('custom-class')
+    expect(queryByTestId('modalDescription')).toBeInTheDocument()
   })
 })
diff --git a/src/components/Modal/ModalDescription/ModalDescription.tsx b/src/components/Modal/ModalDescription/ModalDescription.tsx
index a621287154..7806a08d89 100644
--- a/src/components/Modal/ModalDescription/ModalDescription.tsx
+++ b/src/components/Modal/ModalDescription/ModalDescription.tsx
@@ -12,7 +12,7 @@ export const ModalDescription = ({
   ...divProps
 }: ModalDescriptionProps &
   JSX.IntrinsicElements['div']): React.ReactElement => {
-  const classes = classnames('usa-modal__main', className)
+  const classes = classnames('usa-prose', className)
 
   return (
     <div className={classes} data-testid="modalDescription" {...divProps}>
diff --git a/src/components/Modal/ModalFooter/ModalFooter.test.tsx b/src/components/Modal/ModalFooter/ModalFooter.test.tsx
new file mode 100644
index 0000000000..8715773052
--- /dev/null
+++ b/src/components/Modal/ModalFooter/ModalFooter.test.tsx
@@ -0,0 +1,40 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { ModalFooter } from './ModalFooter'
+
+describe('ModalFooter component', () => {
+  it('renders without errors', () => {
+    const { queryByTestId } = render(
+      <ModalFooter>
+        <ul>
+          <li>
+            <button type="button">Continue without saving</button>
+          </li>
+          <li>
+            <button type="button">Go back</button>
+          </li>
+        </ul>
+      </ModalFooter>
+    )
+
+    expect(queryByTestId('modalFooter')).toBeInTheDocument()
+  })
+
+  it('accepts a custom className', () => {
+    const { queryByTestId } = render(
+      <ModalFooter className="custom-class">
+        <ul>
+          <li>
+            <button type="button">Continue without saving</button>
+          </li>
+          <li>
+            <button type="button">Go back</button>
+          </li>
+        </ul>
+      </ModalFooter>
+    )
+
+    expect(queryByTestId('modalFooter')).toBeInTheDocument()
+  })
+})
diff --git a/src/components/Modal/ModalFooter/ModalFooter.tsx b/src/components/Modal/ModalFooter/ModalFooter.tsx
new file mode 100644
index 0000000000..6b382ab786
--- /dev/null
+++ b/src/components/Modal/ModalFooter/ModalFooter.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import classnames from 'classnames'
+
+interface ModalFooterProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export const ModalFooter = ({
+  children,
+  className,
+  ...divProps
+}: ModalFooterProps & JSX.IntrinsicElements['div']): React.ReactElement => {
+  const classes = classnames('usa-modal__footer', className)
+
+  return (
+    <div className={classes} data-testid="modalFooter" {...divProps}>
+      {children}
+    </div>
+  )
+}
+
+export default ModalFooter
diff --git a/src/components/Modal/ModalHeading/ModalHeading.test.tsx b/src/components/Modal/ModalHeading/ModalHeading.test.tsx
index 9ca41e1bf8..b62e1822ab 100644
--- a/src/components/Modal/ModalHeading/ModalHeading.test.tsx
+++ b/src/components/Modal/ModalHeading/ModalHeading.test.tsx
@@ -5,8 +5,13 @@ import { ModalHeading } from './ModalHeading'
 
 describe('ModalHeading component', () => {
   it('renders without errors', () => {
-    const { queryByTestId } = render(<ModalHeading />)
+    const { queryByTestId, queryByRole } = render(
+      <ModalHeading type="h1">Are you sure you want to continue?</ModalHeading>
+    )
 
     expect(queryByTestId('modalHeading')).toBeInTheDocument()
+    expect(queryByRole('heading')).toBeInTheDocument()
   })
+
+  // it('accepts a custom className')
 })
diff --git a/src/components/Modal/ModalHeading/ModalHeading.tsx b/src/components/Modal/ModalHeading/ModalHeading.tsx
index ec81c5b4ef..6169a3e8ae 100644
--- a/src/components/Modal/ModalHeading/ModalHeading.tsx
+++ b/src/components/Modal/ModalHeading/ModalHeading.tsx
@@ -1,7 +1,31 @@
-import React from 'react'
+import React, { DetailedHTMLProps } from 'react'
+import classnames from 'classnames'
 
-export const ModalHeading = (): React.ReactElement => {
-  return <div data-testid="modalHeading">modal heading</div>
+interface ModalHeadingProps {
+  type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  className?: string
+  children?: React.ReactNode
+}
+
+type HeadingModalHeadingProps = ModalHeadingProps &
+  React.DetailedHTMLProps<
+    React.HTMLAttributes<HTMLHeadElement>,
+    HTMLHeadingElement
+  >
+
+export const ModalHeading = ({
+  type,
+  className,
+  children,
+  ...headingProps
+}: HeadingModalHeadingProps): React.ReactElement => {
+  const classes = classnames('usa-modal__heading', className)
+  const Tag = type
+  return (
+    <Tag className={classes} data-testid="modalHeading">
+      modal heading
+    </Tag>
+  )
 }
 
 export default ModalHeading
diff --git a/src/components/Modal/ModalMain/ModalMain.test.tsx b/src/components/Modal/ModalMain/ModalMain.test.tsx
new file mode 100644
index 0000000000..67b0fdc3cb
--- /dev/null
+++ b/src/components/Modal/ModalMain/ModalMain.test.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+
+import { ModalMain } from './ModalMain'
+
+import { render } from '@testing-library/react'
+
+describe('ModalMain component', () => {
+  it('renders without errors', () => {
+    const { getByTestId } = render(<ModalMain>some children</ModalMain>)
+
+    expect(getByTestId('modalMain')).toBeInTheDocument()
+  })
+
+  it('accepts attributes passed in through props', () => {
+    const { getByTestId } = render(
+      <ModalMain aria-label="aria-label-model">some children</ModalMain>
+    )
+
+    expect(getByTestId('modalMain')).toHaveAttribute(
+      'aria-label',
+      'aria-label-model'
+    )
+  })
+
+  it('accepts a custom className', () => {
+    const { getByTestId } = render(
+      <ModalMain className="custom-class">some children</ModalMain>
+    )
+
+    expect(getByTestId('modalMain')).toHaveClass('usa-modal__main custom-class')
+  })
+})
diff --git a/src/components/Modal/ModalMain/ModalMain.tsx b/src/components/Modal/ModalMain/ModalMain.tsx
new file mode 100644
index 0000000000..5ee2aee68f
--- /dev/null
+++ b/src/components/Modal/ModalMain/ModalMain.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+
+import classnames from 'classnames'
+
+interface ModalMainProps {
+  children: React.ReactNode
+  className?: string
+  isLarge?: boolean
+}
+
+export const ModalMain = ({
+  className,
+  children,
+  isLarge = false,
+  ...divProps
+}: ModalMainProps & JSX.IntrinsicElements['div']): React.ReactElement => {
+  const classes = classnames('usa-modal__main', className)
+  return (
+    <div data-testid="modalMain" className={classes} {...divProps}>
+      {children}
+    </div>
+  )
+}
+
+export default ModalMain
diff --git a/src/index.ts b/src/index.ts
index 7a79e04d6d..cdb7d79559 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -82,6 +82,12 @@ export { FooterNav } from './components/Footer/FooterNav/FooterNav'
 export { Logo } from './components/Footer/Logo/Logo'
 export { SocialLinks } from './components/Footer/SocialLinks/SocialLinks'
 
+/** Modal components */
+export { Modal } from './components/Modal/Modal/Modal'
+export { ModalContent } from './components/Modal/ModalContent/ModalContent'
+export { ModalHeading } from './components/Modal/ModalHeading/ModalHeading'
+export { ModalMain } from './components/Modal/ModalMain/ModalMain'
+
 /** Card components */
 export { CardGroup } from './components/card/CardGroup/CardGroup'
 export { Card } from './components/card/Card/Card'

From e77c3351dcd06202d4a176e3bd723e92f2b60d0f Mon Sep 17 00:00:00 2001
From: Arianna Kellogg <ari@truss.works>
Date: Mon, 17 May 2021 14:37:37 -0700
Subject: [PATCH 08/38] Export ModalFooter, ModalDescription from index.ts

---
 src/index.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/index.ts b/src/index.ts
index cdb7d79559..d8924701c5 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -85,6 +85,8 @@ export { SocialLinks } from './components/Footer/SocialLinks/SocialLinks'
 /** Modal components */
 export { Modal } from './components/Modal/Modal/Modal'
 export { ModalContent } from './components/Modal/ModalContent/ModalContent'
+export { ModalDescription } from './components/Modal/ModalDescription/ModalDescription'
+export { ModalFooter } from './components/Modal/ModalFooter/ModalFooter'
 export { ModalHeading } from './components/Modal/ModalHeading/ModalHeading'
 export { ModalMain } from './components/Modal/ModalMain/ModalMain'
 

From 49a916b57966202b178a40ed80c29e04310c188c Mon Sep 17 00:00:00 2001
From: Arianna Kellogg <ari@truss.works>
Date: Mon, 17 May 2021 17:39:20 -0700
Subject: [PATCH 09/38] Add ModalFooter component

---
 src/components/Modal/Modal/Modal.stories.tsx  | 51 +++++++++++++++++--
 .../ModalCloseButton.test.tsx                 | 24 +++++++++
 .../ModalCloseButton/ModalCloseButton.tsx     | 25 +++++++++
 .../Modal/ModalHeading/ModalHeading.tsx       |  2 +-
 src/index.ts                                  |  1 +
 5 files changed, 99 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Modal/ModalCloseButton/ModalCloseButton.test.tsx
 create mode 100644 src/components/Modal/ModalCloseButton/ModalCloseButton.tsx

diff --git a/src/components/Modal/Modal/Modal.stories.tsx b/src/components/Modal/Modal/Modal.stories.tsx
index 4890f06d5b..a94bd4b011 100644
--- a/src/components/Modal/Modal/Modal.stories.tsx
+++ b/src/components/Modal/Modal/Modal.stories.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 
 import { Modal } from './Modal'
+import { ModalCloseButton } from '../ModalCloseButton/ModalCloseButton'
 import { ModalContent } from '../ModalContent/ModalContent'
 import { ModalDescription } from '../ModalDescription/ModalDescription'
 import { ModalFooter } from '../ModalFooter/ModalFooter'
@@ -32,7 +33,7 @@ export const defaultModal = (): React.ReactElement => (
   <Modal>
     <ModalContent>
       <ModalMain>
-        <ModalHeading type="h1">
+        <ModalHeading type="h2">
           Are you sure you want to continue?
         </ModalHeading>
         <ModalDescription>
@@ -45,15 +46,59 @@ export const defaultModal = (): React.ReactElement => (
           </ButtonGroup>
         </ModalFooter>
       </ModalMain>
+      <ModalCloseButton>
+        <img src={close} alt="Close this window" />
+      </ModalCloseButton>
     </ModalContent>
   </Modal>
 )
 
 // <p id="modal-1-description">You have unsaved changes that will be lost.</p>
 export const largeModal = (): React.ReactElement => (
-  <Modal isLarge>large modal</Modal>
+  <Modal isLarge>
+    large modal
+    <ModalContent>
+      <ModalMain>
+        <ModalHeading type="h2">
+          Are you sure you want to continue?
+        </ModalHeading>
+        <ModalDescription>
+          <p>You have unsaved changes that will be lost.</p>
+        </ModalDescription>
+        <ModalFooter>
+          <ButtonGroup>
+            <Button type="button">Continue without saving</Button>
+            <Button type="button">Go back</Button>
+          </ButtonGroup>
+        </ModalFooter>
+      </ModalMain>
+      <ModalCloseButton>
+        <img src={close} alt="Close this window" />
+      </ModalCloseButton>
+    </ModalContent>
+  </Modal>
 )
 
 export const modalWithForcedAction = (): React.ReactElement => (
-  <Modal>forced action</Modal>
+  <Modal>
+    <ModalContent>
+      <ModalMain>
+        <ModalHeading type="h2">
+          Are you sure you want to continue?
+        </ModalHeading>
+        <ModalDescription>
+          <p>You have unsaved changes that will be lost.</p>
+        </ModalDescription>
+        <ModalFooter>
+          <ButtonGroup>
+            <Button type="button">Continue without saving</Button>
+            <Button type="button">Go back</Button>
+          </ButtonGroup>
+        </ModalFooter>
+      </ModalMain>
+      <ModalCloseButton>
+        <img src={close} alt="Close this window" />
+      </ModalCloseButton>
+    </ModalContent>
+  </Modal>
 )
diff --git a/src/components/Modal/ModalCloseButton/ModalCloseButton.test.tsx b/src/components/Modal/ModalCloseButton/ModalCloseButton.test.tsx
new file mode 100644
index 0000000000..9f54baaf41
--- /dev/null
+++ b/src/components/Modal/ModalCloseButton/ModalCloseButton.test.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { ModalCloseButton } from './ModalCloseButton'
+
+describe('ModalCloseButton component', () => {
+  it('renders without errors', () => {
+    const { queryByRole } = render(
+      <ModalCloseButton>close button</ModalCloseButton>
+    )
+
+    expect(queryByRole('button')).toBeInTheDocument()
+  })
+
+  it('accepts a custom className', () => {
+    const { queryByRole } = render(
+      <ModalCloseButton className="custom-class">close button</ModalCloseButton>
+    )
+
+    expect(queryByRole('button')).toHaveClass(
+      'usa-button usa-modal__close custom-class'
+    )
+  })
+})
diff --git a/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx b/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx
new file mode 100644
index 0000000000..6ded4de577
--- /dev/null
+++ b/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+
+import classnames from 'classnames'
+import { Button } from '../../Button/Button'
+
+interface ModalCloseButtonProps {
+  children: React.ReactNode
+  className?: string
+}
+export const ModalCloseButton = ({
+  children,
+  className,
+  ...buttonProps
+}: ModalCloseButtonProps &
+  JSX.IntrinsicElements['button']): React.ReactElement => {
+  const classes = classnames('usa-modal__close', className)
+
+  return (
+    <Button className={classes} type="button" {...buttonProps}>
+      {children}
+    </Button>
+  )
+}
+
+export default ModalCloseButton
diff --git a/src/components/Modal/ModalHeading/ModalHeading.tsx b/src/components/Modal/ModalHeading/ModalHeading.tsx
index 6169a3e8ae..288bc944ed 100644
--- a/src/components/Modal/ModalHeading/ModalHeading.tsx
+++ b/src/components/Modal/ModalHeading/ModalHeading.tsx
@@ -23,7 +23,7 @@ export const ModalHeading = ({
   const Tag = type
   return (
     <Tag className={classes} data-testid="modalHeading">
-      modal heading
+      {children}
     </Tag>
   )
 }
diff --git a/src/index.ts b/src/index.ts
index d8924701c5..a14b0d4fa8 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -84,6 +84,7 @@ export { SocialLinks } from './components/Footer/SocialLinks/SocialLinks'
 
 /** Modal components */
 export { Modal } from './components/Modal/Modal/Modal'
+export { ModalCloseButton } from './components/Modal/ModalCloseButton/ModalCloseButton'
 export { ModalContent } from './components/Modal/ModalContent/ModalContent'
 export { ModalDescription } from './components/Modal/ModalDescription/ModalDescription'
 export { ModalFooter } from './components/Modal/ModalFooter/ModalFooter'

From 7ac0c35ded62ef9c864b19abc013144f49563576 Mon Sep 17 00:00:00 2001
From: Arianna Kellogg <ari@truss.works>
Date: Mon, 17 May 2021 17:40:01 -0700
Subject: [PATCH 10/38] Remove ModalCloseButton from Storybook example with a
 forced action

---
 src/components/Modal/Modal/Modal.stories.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/Modal/Modal/Modal.stories.tsx b/src/components/Modal/Modal/Modal.stories.tsx
index a94bd4b011..da24e6d648 100644
--- a/src/components/Modal/Modal/Modal.stories.tsx
+++ b/src/components/Modal/Modal/Modal.stories.tsx
@@ -96,9 +96,6 @@ export const modalWithForcedAction = (): React.ReactElement => (
           </ButtonGroup>
         </ModalFooter>
       </ModalMain>
-      <ModalCloseButton>
-        <img src={close} alt="Close this window" />
-      </ModalCloseButton>
     </ModalContent>
   </Modal>
 )

From 7f4c414f24d99a75ec3b2c24fbe0947e4772f62a Mon Sep 17 00:00:00 2001
From: Arianna Kellogg <ari@truss.works>
Date: Tue, 15 Jun 2021 15:30:34 -0700
Subject: [PATCH 11/38] Add data-close-modal attribute to close button, comment
 for unique ID in parent Modal component

---
 src/components/Modal/Modal/Modal.tsx                       | 2 ++
 src/components/Modal/ModalCloseButton/ModalCloseButton.tsx | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Modal/Modal/Modal.tsx b/src/components/Modal/Modal/Modal.tsx
index fbcda3a22b..4f42e24e84 100644
--- a/src/components/Modal/Modal/Modal.tsx
+++ b/src/components/Modal/Modal/Modal.tsx
@@ -21,6 +21,8 @@ export const Modal = ({
     },
     className
   )
+
+  // needs a unique ID
   return (
     <div data-testid="modal" className={classes} {...divProps}>
       {children}
diff --git a/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx b/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx
index 6ded4de577..1e4897f958 100644
--- a/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx
+++ b/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx
@@ -16,7 +16,7 @@ export const ModalCloseButton = ({
   const classes = classnames('usa-modal__close', className)
 
   return (
-    <Button className={classes} type="button" {...buttonProps}>
+    <Button className={classes} type="button" data-close-modal {...buttonProps}>
       {children}
     </Button>
   )

From 344ecfd31ee76e99e26974892cd82bd76704ef7b Mon Sep 17 00:00:00 2001
From: Arianna Kellogg <ari@truss.works>
Date: Tue, 15 Jun 2021 15:38:29 -0700
Subject: [PATCH 12/38] Add skeleton for ModalWrapper component, passing one
 test

---
 .../Modal/ModalWrapper/ModalWrapper.test.tsx  | 12 ++++++++++
 .../Modal/ModalWrapper/ModalWrapper.tsx       | 23 +++++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 src/components/Modal/ModalWrapper/ModalWrapper.test.tsx
 create mode 100644 src/components/Modal/ModalWrapper/ModalWrapper.tsx

diff --git a/src/components/Modal/ModalWrapper/ModalWrapper.test.tsx b/src/components/Modal/ModalWrapper/ModalWrapper.test.tsx
new file mode 100644
index 0000000000..78a6f118c1
--- /dev/null
+++ b/src/components/Modal/ModalWrapper/ModalWrapper.test.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { ModalWrapper } from './ModalWrapper'
+
+describe('ModalWrapper component', () => {
+  it('renders without errors', () => {
+    const { getByTestId } = render(<ModalWrapper>children</ModalWrapper>)
+
+    expect(getByTestId('modalWrapper')).toBeInTheDocument()
+  })
+})
diff --git a/src/components/Modal/ModalWrapper/ModalWrapper.tsx b/src/components/Modal/ModalWrapper/ModalWrapper.tsx
new file mode 100644
index 0000000000..b0b50dad53
--- /dev/null
+++ b/src/components/Modal/ModalWrapper/ModalWrapper.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import classnames from 'classnames'
+
+interface ModalWrapperProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export const ModalWrapper = ({
+  children,
+  className,
+  ...divProps
+}: ModalWrapperProps & JSX.IntrinsicElements['div']): React.ReactElement => {
+  const classes = classnames('usa-modal-wrapper', className)
+
+  return (
+    <div className={classes} data-testid="modalWrapper" {...divProps}>
+      {children}
+    </div>
+  )
+}
+
+export default ModalWrapper

From 08ebb2fdf65722ed765f14677b9874fabffe4e29 Mon Sep 17 00:00:00 2001
From: Arianna Kellogg <ari@truss.works>
Date: Wed, 16 Jun 2021 05:58:09 -0700
Subject: [PATCH 13/38] Rendering placeholder Storybook example for
 ModalWrapper

---
 src/components/Modal/Modal/Modal.stories.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/Modal/Modal/Modal.stories.tsx b/src/components/Modal/Modal/Modal.stories.tsx
index da24e6d648..1f169346ea 100644
--- a/src/components/Modal/Modal/Modal.stories.tsx
+++ b/src/components/Modal/Modal/Modal.stories.tsx
@@ -7,6 +7,7 @@ import { ModalDescription } from '../ModalDescription/ModalDescription'
 import { ModalFooter } from '../ModalFooter/ModalFooter'
 import { ModalHeading } from '../ModalHeading/ModalHeading'
 import { ModalMain } from '../ModalMain/ModalMain'
+import { ModalWrapper } from '../ModalWrapper/ModalWrapper'
 
 import { Button } from '../../Button/Button'
 import { ButtonGroup } from '../../ButtonGroup/ButtonGroup'
@@ -29,6 +30,10 @@ Source: http://designsystem.digital.gov/components/modal
   },
 }
 
+export const modalWrapper = (): React.ReactElement => (
+  <ModalWrapper>some children</ModalWrapper>
+)
+
 export const defaultModal = (): React.ReactElement => (
   <Modal>
     <ModalContent>

From 11aa30e2631be0555ef38c9f251d2863c41f945a Mon Sep 17 00:00:00 2001
From: Arianna Kellogg <ari@truss.works>
Date: Tue, 22 Jun 2021 08:40:17 -0700
Subject: [PATCH 14/38] Add isVisible prop to ModalWrapper

---
 src/components/Modal/Modal/Modal.stories.tsx          |  2 +-
 .../Modal/ModalWrapper/ModalWrapper.test.tsx          |  4 +++-
 src/components/Modal/ModalWrapper/ModalWrapper.tsx    | 11 ++++++++++-
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/Modal/Modal/Modal.stories.tsx b/src/components/Modal/Modal/Modal.stories.tsx
index 1f169346ea..06a47ba0d5 100644
--- a/src/components/Modal/Modal/Modal.stories.tsx
+++ b/src/components/Modal/Modal/Modal.stories.tsx
@@ -31,7 +31,7 @@ Source: http://designsystem.digital.gov/components/modal
 }
 
 export const modalWrapper = (): React.ReactElement => (
-  <ModalWrapper>some children</ModalWrapper>
+  <ModalWrapper isVisible>some children</ModalWrapper>
 )
 
 export const defaultModal = (): React.ReactElement => (
diff --git a/src/components/Modal/ModalWrapper/ModalWrapper.test.tsx b/src/components/Modal/ModalWrapper/ModalWrapper.test.tsx
index 78a6f118c1..5afe523757 100644
--- a/src/components/Modal/ModalWrapper/ModalWrapper.test.tsx
+++ b/src/components/Modal/ModalWrapper/ModalWrapper.test.tsx
@@ -5,7 +5,9 @@ import { ModalWrapper } from './ModalWrapper'
 
 describe('ModalWrapper component', () => {
   it('renders without errors', () => {
-    const { getByTestId } = render(<ModalWrapper>children</ModalWrapper>)
+    const { getByTestId } = render(
+      <ModalWrapper isVisible>children</ModalWrapper>
+    )
 
     expect(getByTestId('modalWrapper')).toBeInTheDocument()
   })
diff --git a/src/components/Modal/ModalWrapper/ModalWrapper.tsx b/src/components/Modal/ModalWrapper/ModalWrapper.tsx
index b0b50dad53..4df43c321a 100644
--- a/src/components/Modal/ModalWrapper/ModalWrapper.tsx
+++ b/src/components/Modal/ModalWrapper/ModalWrapper.tsx
@@ -3,15 +3,24 @@ import classnames from 'classnames'
 
 interface ModalWrapperProps {
   children: React.ReactNode
+  isVisible: boolean
   className?: string
 }
 
 export const ModalWrapper = ({
   children,
+  isVisible,
   className,
   ...divProps
 }: ModalWrapperProps & JSX.IntrinsicElements['div']): React.ReactElement => {
-  const classes = classnames('usa-modal-wrapper', className)
+  const classes = classnames(
+    'usa-modal-wrapper',
+    {
+      'is-visible': isVisible,
+      'is-hidden': !isVisible,
+    },
+    className
+  )
 
   return (
     <div className={classes} data-testid="modalWrapper" {...divProps}>

From e633f9bcf59c0e09dd8de17f7d63416161b4a500 Mon Sep 17 00:00:00 2001
From: Arianna Kellogg <ari@truss.works>
Date: Mon, 28 Jun 2021 14:24:33 -0700
Subject: [PATCH 15/38] Modal storybook update

---
 src/components/Modal/Modal/Modal.stories.tsx | 132 ++++++++++---------
 1 file changed, 67 insertions(+), 65 deletions(-)

diff --git a/src/components/Modal/Modal/Modal.stories.tsx b/src/components/Modal/Modal/Modal.stories.tsx
index 06a47ba0d5..bce339b2ff 100644
--- a/src/components/Modal/Modal/Modal.stories.tsx
+++ b/src/components/Modal/Modal/Modal.stories.tsx
@@ -30,77 +30,79 @@ Source: http://designsystem.digital.gov/components/modal
   },
 }
 
-export const modalWrapper = (): React.ReactElement => (
-  <ModalWrapper isVisible>some children</ModalWrapper>
-)
-
 export const defaultModal = (): React.ReactElement => (
-  <Modal>
-    <ModalContent>
-      <ModalMain>
-        <ModalHeading type="h2">
-          Are you sure you want to continue?
-        </ModalHeading>
-        <ModalDescription>
-          <p>You have unsaved changes that will be lost.</p>
-        </ModalDescription>
-        <ModalFooter>
-          <ButtonGroup>
-            <Button type="button">Continue without saving</Button>
-            <Button type="button">Go back</Button>
-          </ButtonGroup>
-        </ModalFooter>
-      </ModalMain>
-      <ModalCloseButton>
-        <img src={close} alt="Close this window" />
-      </ModalCloseButton>
-    </ModalContent>
-  </Modal>
+  <ModalWrapper isVisible>
+    <Modal>
+      <ModalContent>
+        <ModalMain>
+          <ModalHeading type="h2">
+            Are you sure you want to continue?
+          </ModalHeading>
+          <ModalDescription>
+            <p>You have unsaved changes that will be lost.</p>
+          </ModalDescription>
+          <ModalFooter>
+            <ButtonGroup>
+              <Button type="button">Continue without saving</Button>
+              <Button type="button">Go back</Button>
+            </ButtonGroup>
+          </ModalFooter>
+        </ModalMain>
+        <ModalCloseButton>
+          <img src={close} alt="Close this window" />
+        </ModalCloseButton>
+      </ModalContent>
+    </Modal>
+  </ModalWrapper>
 )
 
 // <p id="modal-1-description">You have unsaved changes that will be lost.</p>
 export const largeModal = (): React.ReactElement => (
-  <Modal isLarge>
-    large modal
-    <ModalContent>
-      <ModalMain>
-        <ModalHeading type="h2">
-          Are you sure you want to continue?
-        </ModalHeading>
-        <ModalDescription>
-          <p>You have unsaved changes that will be lost.</p>
-        </ModalDescription>
-        <ModalFooter>
-          <ButtonGroup>
-            <Button type="button">Continue without saving</Button>
-            <Button type="button">Go back</Button>
-          </ButtonGroup>
-        </ModalFooter>
-      </ModalMain>
-      <ModalCloseButton>
-        <img src={close} alt="Close this window" />
-      </ModalCloseButton>
-    </ModalContent>
-  </Modal>
+  <ModalWrapper isVisible>
+    <Modal isLarge>
+      large modal
+      <ModalContent>
+        <ModalMain>
+          <ModalHeading type="h2">
+            Are you sure you want to continue?
+          </ModalHeading>
+          <ModalDescription>
+            <p>You have unsaved changes that will be lost.</p>
+          </ModalDescription>
+          <ModalFooter>
+            <ButtonGroup>
+              <Button type="button">Continue without saving</Button>
+              <Button type="button">Go back</Button>
+            </ButtonGroup>
+          </ModalFooter>
+        </ModalMain>
+        <ModalCloseButton>
+          <img src={close} alt="Close this window" />
+        </ModalCloseButton>
+      </ModalContent>
+    </Modal>
+  </ModalWrapper>
 )
 
 export const modalWithForcedAction = (): React.ReactElement => (
-  <Modal>
-    <ModalContent>
-      <ModalMain>
-        <ModalHeading type="h2">
-          Are you sure you want to continue?
-        </ModalHeading>
-        <ModalDescription>
-          <p>You have unsaved changes that will be lost.</p>
-        </ModalDescription>
-        <ModalFooter>
-          <ButtonGroup>
-            <Button type="button">Continue without saving</Button>
-            <Button type="button">Go back</Button>
-          </ButtonGroup>
-        </ModalFooter>
-      </ModalMain>
-    </ModalContent>
-  </Modal>
+  <ModalWrapper isVisible>
+    <Modal>
+      <ModalContent>
+        <ModalMain>
+          <ModalHeading type="h2">
+            Are you sure you want to continue?
+          </ModalHeading>
+          <ModalDescription>
+            <p>You have unsaved changes that will be lost.</p>
+          </ModalDescription>
+          <ModalFooter>
+            <ButtonGroup>
+              <Button type="button">Continue without saving</Button>
+              <Button type="button">Go back</Button>
+            </ButtonGroup>
+          </ModalFooter>
+        </ModalMain>
+      </ModalContent>
+    </Modal>
+  </ModalWrapper>
 )

From cefff0dd326ba4b4a7d6e9f509a14e8d34e4c194 Mon Sep 17 00:00:00 2001
From: Suzanne Rozier <suz@truss.works>
Date: Wed, 29 Sep 2021 11:45:11 -0500
Subject: [PATCH 16/38] 2.11 update

---
 package.json                                          |  4 ++--
 src/components/Accordion/Accordion.tsx                |  4 ++--
 src/components/Alert/Alert.tsx                        |  2 +-
 .../forms/Validation/Validation.stories.tsx           |  2 +-
 .../stepindicator/StepIndicator/StepIndicator.tsx     |  4 ++--
 yarn.lock                                             | 11 +++++------
 6 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index 23c465d90e..23aa197605 100644
--- a/package.json
+++ b/package.json
@@ -63,7 +63,7 @@
   "peerDependencies": {
     "react": "^16.x || ^17.x",
     "react-dom": "^16.x || ^17.x",
-    "uswds": "2.10.3"
+    "uswds": "2.11.2"
   },
   "devDependencies": {
     "@babel/core": "^7.10.5",
@@ -129,7 +129,7 @@
     "stylelint-scss": "^3.17.1",
     "ts-jest": "^26.1.2",
     "typescript": "^4.2.4",
-    "uswds": "2.10.3",
+    "uswds": "2.11.2",
     "webpack": "^5.52.1",
     "webpack-cli": "^4.0.0"
   },
diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index b4ccce04e2..7d535623f6 100644
--- a/src/components/Accordion/Accordion.tsx
+++ b/src/components/Accordion/Accordion.tsx
@@ -34,7 +34,7 @@ export const AccordionItem = ({
 
   return (
     <>
-      <h2 className={headingClasses}>
+      <h4 className={headingClasses}>
         <button
           type="button"
           className="usa-accordion__button"
@@ -44,7 +44,7 @@ export const AccordionItem = ({
           onClick={handleToggle}>
           {title}
         </button>
-      </h2>
+      </h4>
       <div
         id={id}
         data-testid={`accordionItem_${id}`}
diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
index c26ddb6287..7d432f642a 100644
--- a/src/components/Alert/Alert.tsx
+++ b/src/components/Alert/Alert.tsx
@@ -42,7 +42,7 @@ export const Alert = ({
   return (
     <div className={classes} data-testid="alert" {...props}>
       <div className="usa-alert__body">
-        {heading && <h3 className="usa-alert__heading">{heading}</h3>}
+        {heading && <h4 className="usa-alert__heading">{heading}</h4>}
         {children &&
           (validation ? (
             children
diff --git a/src/components/forms/Validation/Validation.stories.tsx b/src/components/forms/Validation/Validation.stories.tsx
index b3cc7200c1..718aaf528a 100644
--- a/src/components/forms/Validation/Validation.stories.tsx
+++ b/src/components/forms/Validation/Validation.stories.tsx
@@ -62,7 +62,7 @@ export const Default = (): React.ReactElement => {
       onSubmit={(): void => {
         console.log('submit')
       }}>
-      <Fieldset legend="Enter a code">
+      <Fieldset legend="Enter a code" legendStyle="large">
         <Alert type="info" validation heading="Code Requirements">
           <ValidationChecklist id="validate-code">
             <ValidationItem id="uppercase" isValid={validations.uppercase}>
diff --git a/src/components/stepindicator/StepIndicator/StepIndicator.tsx b/src/components/stepindicator/StepIndicator/StepIndicator.tsx
index d783cfcf38..db27870684 100644
--- a/src/components/stepindicator/StepIndicator/StepIndicator.tsx
+++ b/src/components/stepindicator/StepIndicator/StepIndicator.tsx
@@ -54,7 +54,7 @@ export const StepIndicator = (
         {children}
       </ol>
       <div className="usa-step-indicator__header">
-        <h2 className="usa-step-indicator__heading">
+        <h4 className="usa-step-indicator__heading">
           <span className="usa-step-indicator__heading-counter">
             <span className="usa-sr-only">Step</span>
             <span className="usa-step-indicator__current-step">
@@ -67,7 +67,7 @@ export const StepIndicator = (
           <span className="usa-step-indicator__heading-text">
             {currentStepLabel}
           </span>
-        </h2>
+        </h4>
       </div>
     </div>
   )
diff --git a/yarn.lock b/yarn.lock
index b211b3bc4e..d2e9451f5e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10989,7 +10989,7 @@ lodash.clonedeep@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
   integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
 
-lodash.debounce@^4.0.7, lodash.debounce@^4.0.8:
+lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
@@ -15861,16 +15861,15 @@ use@^3.1.0:
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
   integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
 
-uswds@2.10.3:
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/uswds/-/uswds-2.10.3.tgz#16d34cee81897762d6d69d3ac83aa55129826fa6"
-  integrity sha512-krNRzx1jRzOJpuH/qtmQhd5zxnXTaDVqrPNYT99sJbxzWUqjb1zZHh3jFNo+xKDpNuiO0XMPwZwlaSp2YdZ3Ag==
+uswds@2.11.2:
+  version "2.11.2"
+  resolved "https://registry.yarnpkg.com/uswds/-/uswds-2.11.2.tgz#bf5ff132f6324c0939d01b7eefebde340c22dcec"
+  integrity sha512-JISTXCjPIlrufbObIifjrMDn5jF9bbLu7UYhGWmEs9iqB6Z2KDCXHVoBUyzMmIrIjW/UWWYHZzPqOOHO6/IMCQ==
   dependencies:
     classlist-polyfill "^1.0.3"
     del "^6.0.0"
     domready "^1.0.8"
     elem-dataset "^2.0.0"
-    lodash.debounce "^4.0.7"
     object-assign "^4.1.1"
     receptor "^1.0.0"
     resolve-id-refs "^0.1.0"

From 99449118c7b1707dd793ab98aa7afb81cd866fb6 Mon Sep 17 00:00:00 2001
From: Suzanne Rozier <suz@truss.works>
Date: Wed, 29 Sep 2021 13:49:55 -0500
Subject: [PATCH 17/38] Update thumbs down icon

---
 src/components/Icon/Icons.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Icon/Icons.ts b/src/components/Icon/Icons.ts
index ab23653fa7..94272e418e 100644
--- a/src/components/Icon/Icons.ts
+++ b/src/components/Icon/Icons.ts
@@ -208,7 +208,7 @@ import StoreSvg from 'uswds/dist/img/usa-icons/store.svg?svgr'
 import SupportSvg from 'uswds/dist/img/usa-icons/support.svg?svgr'
 import SupportAgentSvg from 'uswds/dist/img/usa-icons/support_agent.svg?svgr'
 import TextFieldsSvg from 'uswds/dist/img/usa-icons/text_fields.svg?svgr'
-import ThumbDownAltSvg from 'uswds/dist/img/usa-icons/thumb_down_off_alt.svg?svgr'
+import ThumbDownAltSvg from 'uswds/dist/img/usa-icons/thumb_down_alt.svg?svgr'
 import ThumbUpAltSvg from 'uswds/dist/img/usa-icons/thumb_up_alt.svg?svgr'
 import TimerSvg from 'uswds/dist/img/usa-icons/timer.svg?svgr'
 import ToggleOffSvg from 'uswds/dist/img/usa-icons/toggle_off.svg?svgr'

From 519bf2c0bf3fed452f1065ccd9ffc9809659ce4d Mon Sep 17 00:00:00 2001
From: Suzanne Rozier <suz@truss.works>
Date: Thu, 30 Sep 2021 09:40:06 -0500
Subject: [PATCH 18/38] Simplify modal components

---
 src/components/Modal/Modal/Modal.stories.tsx  | 148 ++++++++++--------
 src/components/Modal/Modal/Modal.tsx          |  20 ++-
 .../ModalCloseButton.test.tsx                 |  22 ++-
 .../ModalCloseButton/ModalCloseButton.tsx     |  22 +--
 .../Modal/ModalHeading/ModalHeading.test.tsx  |  14 +-
 .../Modal/ModalHeading/ModalHeading.tsx       |  25 +--
 src/index.ts                                  |   4 -
 7 files changed, 132 insertions(+), 123 deletions(-)

diff --git a/src/components/Modal/Modal/Modal.stories.tsx b/src/components/Modal/Modal/Modal.stories.tsx
index bce339b2ff..5e8a8f794c 100644
--- a/src/components/Modal/Modal/Modal.stories.tsx
+++ b/src/components/Modal/Modal/Modal.stories.tsx
@@ -1,19 +1,13 @@
 import React from 'react'
 
 import { Modal } from './Modal'
-import { ModalCloseButton } from '../ModalCloseButton/ModalCloseButton'
-import { ModalContent } from '../ModalContent/ModalContent'
-import { ModalDescription } from '../ModalDescription/ModalDescription'
 import { ModalFooter } from '../ModalFooter/ModalFooter'
 import { ModalHeading } from '../ModalHeading/ModalHeading'
-import { ModalMain } from '../ModalMain/ModalMain'
 import { ModalWrapper } from '../ModalWrapper/ModalWrapper'
 
 import { Button } from '../../Button/Button'
 import { ButtonGroup } from '../../ButtonGroup/ButtonGroup'
 
-import close from 'uswds/src/img/close.svg'
-
 export default {
   title: 'Components/Modal',
   component: Modal,
@@ -21,7 +15,7 @@ export default {
     docs: {
       description: {
         component: `
-### USWDS 2.0 SiteAlert component
+### USWDS 2.0 Modal component
 
 Source: http://designsystem.digital.gov/components/modal
 `,
@@ -32,77 +26,99 @@ Source: http://designsystem.digital.gov/components/modal
 
 export const defaultModal = (): React.ReactElement => (
   <ModalWrapper isVisible>
-    <Modal>
-      <ModalContent>
-        <ModalMain>
-          <ModalHeading type="h2">
-            Are you sure you want to continue?
-          </ModalHeading>
-          <ModalDescription>
-            <p>You have unsaved changes that will be lost.</p>
-          </ModalDescription>
-          <ModalFooter>
-            <ButtonGroup>
-              <Button type="button">Continue without saving</Button>
-              <Button type="button">Go back</Button>
-            </ButtonGroup>
-          </ModalFooter>
-        </ModalMain>
-        <ModalCloseButton>
-          <img src={close} alt="Close this window" />
-        </ModalCloseButton>
-      </ModalContent>
+    <Modal
+      id="example-modal-1"
+      aria-labelledby="modal-1-heading"
+      aria-describedby="modal-1-description">
+      <ModalHeading id="modal-1-heading">
+        Are you sure you want to continue?
+      </ModalHeading>
+      <div className="usa-prose">
+        <p id="modal-1-description">
+          You have unsaved changes that will be lost.
+        </p>
+      </div>
+      <ModalFooter>
+        <ButtonGroup>
+          <Button type="button" data-close-modal>
+            Continue without saving
+          </Button>
+          <Button
+            type="button"
+            data-close-modal
+            unstyled
+            className="padding-105 text-center">
+            Go back
+          </Button>
+        </ButtonGroup>
+      </ModalFooter>
     </Modal>
   </ModalWrapper>
 )
 
-// <p id="modal-1-description">You have unsaved changes that will be lost.</p>
 export const largeModal = (): React.ReactElement => (
   <ModalWrapper isVisible>
-    <Modal isLarge>
-      large modal
-      <ModalContent>
-        <ModalMain>
-          <ModalHeading type="h2">
-            Are you sure you want to continue?
-          </ModalHeading>
-          <ModalDescription>
-            <p>You have unsaved changes that will be lost.</p>
-          </ModalDescription>
-          <ModalFooter>
-            <ButtonGroup>
-              <Button type="button">Continue without saving</Button>
-              <Button type="button">Go back</Button>
-            </ButtonGroup>
-          </ModalFooter>
-        </ModalMain>
-        <ModalCloseButton>
-          <img src={close} alt="Close this window" />
-        </ModalCloseButton>
-      </ModalContent>
+    <Modal
+      isLarge
+      aria-labelledby="modal-2-heading"
+      aria-describedby="modal-2-description"
+      id="example-modal-2">
+      <ModalHeading id="modal-2-heading">
+        Are you sure you want to continue?
+      </ModalHeading>
+      <div className="usa-prose">
+        <p id="modal-2-description">
+          You have unsaved changes that will be lost.
+        </p>
+      </div>
+      <ModalFooter>
+        <ButtonGroup>
+          <Button type="button" data-close-modal>
+            Continue without saving
+          </Button>
+          <Button
+            type="button"
+            unstyled
+            data-close-modal
+            className="padding-105 text-center">
+            Go back
+          </Button>
+        </ButtonGroup>
+      </ModalFooter>
     </Modal>
   </ModalWrapper>
 )
 
 export const modalWithForcedAction = (): React.ReactElement => (
   <ModalWrapper isVisible>
-    <Modal>
-      <ModalContent>
-        <ModalMain>
-          <ModalHeading type="h2">
-            Are you sure you want to continue?
-          </ModalHeading>
-          <ModalDescription>
-            <p>You have unsaved changes that will be lost.</p>
-          </ModalDescription>
-          <ModalFooter>
-            <ButtonGroup>
-              <Button type="button">Continue without saving</Button>
-              <Button type="button">Go back</Button>
-            </ButtonGroup>
-          </ModalFooter>
-        </ModalMain>
-      </ModalContent>
+    <Modal
+      id="example-modal-3"
+      aria-labelledby="modal-3-heading"
+      aria-describedby="modal-3-description"
+      forceAction>
+      <ModalHeading id="modal-3-heading">
+        Your session will end soon.
+      </ModalHeading>
+      <div className="usa-prose">
+        <p id="modal-3-description">
+          You’ve been inactive for too long. Please choose to stay signed in or
+          sign out. Otherwise, you’ll be signed out automatically in 5 minutes.
+        </p>
+      </div>
+      <ModalFooter>
+        <ButtonGroup>
+          <Button type="button" data-close-modal>
+            Yes, stay signed in
+          </Button>
+          <Button
+            type="button"
+            unstyled
+            className="padding-105 text-center"
+            data-close-modal>
+            Sign out
+          </Button>
+        </ButtonGroup>
+      </ModalFooter>
     </Modal>
   </ModalWrapper>
 )
diff --git a/src/components/Modal/Modal/Modal.tsx b/src/components/Modal/Modal/Modal.tsx
index 4f42e24e84..12b5b759fd 100644
--- a/src/components/Modal/Modal/Modal.tsx
+++ b/src/components/Modal/Modal/Modal.tsx
@@ -1,17 +1,20 @@
 import React from 'react'
-
 import classnames from 'classnames'
 
+import { ModalCloseButton } from '../ModalCloseButton/ModalCloseButton'
+
 interface ModalProps {
   children: React.ReactNode
   className?: string
   isLarge?: boolean
+  forceAction?: boolean
 }
 
 export const Modal = ({
   className,
   children,
   isLarge = false,
+  forceAction = false,
   ...divProps
 }: ModalProps & JSX.IntrinsicElements['div']): React.ReactElement => {
   const classes = classnames(
@@ -22,10 +25,21 @@ export const Modal = ({
     className
   )
 
+  const handleClose = () => {
+    /* */
+  }
+
   // needs a unique ID
   return (
-    <div data-testid="modal" className={classes} {...divProps}>
-      {children}
+    <div
+      data-testid="modal"
+      className={classes}
+      {...divProps}
+      data-force-action={forceAction}>
+      <div className="usa-modal__content">
+        <div className="usa-modal__main">{children}</div>
+        {!forceAction && <ModalCloseButton handleClose={handleClose} />}
+      </div>
     </div>
   )
 }
diff --git a/src/components/Modal/ModalCloseButton/ModalCloseButton.test.tsx b/src/components/Modal/ModalCloseButton/ModalCloseButton.test.tsx
index 9f54baaf41..1b94b4c474 100644
--- a/src/components/Modal/ModalCloseButton/ModalCloseButton.test.tsx
+++ b/src/components/Modal/ModalCloseButton/ModalCloseButton.test.tsx
@@ -1,24 +1,22 @@
 import React from 'react'
-import { render } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 
 import { ModalCloseButton } from './ModalCloseButton'
 
 describe('ModalCloseButton component', () => {
   it('renders without errors', () => {
-    const { queryByRole } = render(
-      <ModalCloseButton>close button</ModalCloseButton>
-    )
+    render(<ModalCloseButton handleClose={jest.fn()} />)
 
-    expect(queryByRole('button')).toBeInTheDocument()
+    expect(screen.queryByRole('button')).toBeInTheDocument()
   })
 
-  it('accepts a custom className', () => {
-    const { queryByRole } = render(
-      <ModalCloseButton className="custom-class">close button</ModalCloseButton>
-    )
+  it('implements the close handler', () => {
+    const mockHandleClose = jest.fn()
 
-    expect(queryByRole('button')).toHaveClass(
-      'usa-button usa-modal__close custom-class'
-    )
+    render(<ModalCloseButton handleClose={mockHandleClose} />)
+
+    userEvent.click(screen.getByRole('button'))
+    expect(mockHandleClose).toHaveBeenCalled()
   })
 })
diff --git a/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx b/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx
index 1e4897f958..45d2bf1194 100644
--- a/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx
+++ b/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx
@@ -1,23 +1,25 @@
 import React from 'react'
-
-import classnames from 'classnames'
+import { IconClose } from '../../Icon/Icons'
 import { Button } from '../../Button/Button'
 
 interface ModalCloseButtonProps {
-  children: React.ReactNode
-  className?: string
+  handleClose: () => void
 }
+
 export const ModalCloseButton = ({
-  children,
-  className,
+  handleClose,
   ...buttonProps
 }: ModalCloseButtonProps &
   JSX.IntrinsicElements['button']): React.ReactElement => {
-  const classes = classnames('usa-modal__close', className)
-
   return (
-    <Button className={classes} type="button" data-close-modal {...buttonProps}>
-      {children}
+    <Button
+      className="usa-modal__close"
+      aria-label="Close this window"
+      onClick={handleClose}
+      data-close-modal
+      type="button"
+      {...buttonProps}>
+      <IconClose aria-hidden="true" />
     </Button>
   )
 }
diff --git a/src/components/Modal/ModalHeading/ModalHeading.test.tsx b/src/components/Modal/ModalHeading/ModalHeading.test.tsx
index b62e1822ab..7b8feff183 100644
--- a/src/components/Modal/ModalHeading/ModalHeading.test.tsx
+++ b/src/components/Modal/ModalHeading/ModalHeading.test.tsx
@@ -1,17 +1,15 @@
 import React from 'react'
-import { render } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 
 import { ModalHeading } from './ModalHeading'
 
 describe('ModalHeading component', () => {
   it('renders without errors', () => {
-    const { queryByTestId, queryByRole } = render(
-      <ModalHeading type="h1">Are you sure you want to continue?</ModalHeading>
-    )
+    render(<ModalHeading>Are you sure you want to continue?</ModalHeading>)
 
-    expect(queryByTestId('modalHeading')).toBeInTheDocument()
-    expect(queryByRole('heading')).toBeInTheDocument()
+    expect(screen.queryByRole('heading', { level: 2 })).toBeInTheDocument()
+    expect(screen.queryByRole('heading', { level: 2 })).toHaveTextContent(
+      'Are you sure you want to continue?'
+    )
   })
-
-  // it('accepts a custom className')
 })
diff --git a/src/components/Modal/ModalHeading/ModalHeading.tsx b/src/components/Modal/ModalHeading/ModalHeading.tsx
index 288bc944ed..349cf5398e 100644
--- a/src/components/Modal/ModalHeading/ModalHeading.tsx
+++ b/src/components/Modal/ModalHeading/ModalHeading.tsx
@@ -1,31 +1,16 @@
-import React, { DetailedHTMLProps } from 'react'
+import React from 'react'
 import classnames from 'classnames'
 
-interface ModalHeadingProps {
-  type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
-  className?: string
-  children?: React.ReactNode
-}
-
-type HeadingModalHeadingProps = ModalHeadingProps &
-  React.DetailedHTMLProps<
-    React.HTMLAttributes<HTMLHeadElement>,
-    HTMLHeadingElement
-  >
-
 export const ModalHeading = ({
-  type,
   className,
   children,
   ...headingProps
-}: HeadingModalHeadingProps): React.ReactElement => {
+}: React.HTMLProps<HTMLHeadingElement>): React.ReactElement => {
   const classes = classnames('usa-modal__heading', className)
-  const Tag = type
+
   return (
-    <Tag className={classes} data-testid="modalHeading">
+    <h2 className={classes} {...headingProps}>
       {children}
-    </Tag>
+    </h2>
   )
 }
-
-export default ModalHeading
diff --git a/src/index.ts b/src/index.ts
index ba324def20..f51ca89474 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -87,12 +87,8 @@ export { SocialLinks } from './components/Footer/SocialLinks/SocialLinks'
 
 /** Modal components */
 export { Modal } from './components/Modal/Modal/Modal'
-export { ModalCloseButton } from './components/Modal/ModalCloseButton/ModalCloseButton'
-export { ModalContent } from './components/Modal/ModalContent/ModalContent'
-export { ModalDescription } from './components/Modal/ModalDescription/ModalDescription'
 export { ModalFooter } from './components/Modal/ModalFooter/ModalFooter'
 export { ModalHeading } from './components/Modal/ModalHeading/ModalHeading'
-export { ModalMain } from './components/Modal/ModalMain/ModalMain'
 
 /** Card components */
 export { CardGroup } from './components/card/CardGroup/CardGroup'

From 89528eabee692b3921ea2d7eb3918c36fddc8100 Mon Sep 17 00:00:00 2001
From: Suzanne Rozier <suz@truss.works>
Date: Thu, 30 Sep 2021 09:49:40 -0500
Subject: [PATCH 19/38] Update tests, remove unused files

---
 .../Modal/{Modal => }/Modal.stories.tsx       | 10 ++---
 src/components/Modal/Modal.test.tsx           | 43 +++++++++++++++++++
 src/components/Modal/{Modal => }/Modal.tsx    |  2 +-
 src/components/Modal/Modal/Modal.test.tsx     | 38 ----------------
 .../ModalCloseButton/ModalCloseButton.tsx     |  2 +
 .../Modal/ModalContent/ModalContent.test.tsx  | 24 -----------
 .../Modal/ModalContent/ModalContent.tsx       | 23 ----------
 .../ModalDescription.test.tsx                 | 26 -----------
 .../ModalDescription/ModalDescription.tsx     | 24 -----------
 .../Modal/ModalMain/ModalMain.test.tsx        | 32 --------------
 src/components/Modal/ModalMain/ModalMain.tsx  | 25 -----------
 src/index.ts                                  |  4 +-
 12 files changed, 53 insertions(+), 200 deletions(-)
 rename src/components/Modal/{Modal => }/Modal.stories.tsx (91%)
 create mode 100644 src/components/Modal/Modal.test.tsx
 rename src/components/Modal/{Modal => }/Modal.tsx (92%)
 delete mode 100644 src/components/Modal/Modal/Modal.test.tsx
 delete mode 100644 src/components/Modal/ModalContent/ModalContent.test.tsx
 delete mode 100644 src/components/Modal/ModalContent/ModalContent.tsx
 delete mode 100644 src/components/Modal/ModalDescription/ModalDescription.test.tsx
 delete mode 100644 src/components/Modal/ModalDescription/ModalDescription.tsx
 delete mode 100644 src/components/Modal/ModalMain/ModalMain.test.tsx
 delete mode 100644 src/components/Modal/ModalMain/ModalMain.tsx

diff --git a/src/components/Modal/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
similarity index 91%
rename from src/components/Modal/Modal/Modal.stories.tsx
rename to src/components/Modal/Modal.stories.tsx
index 5e8a8f794c..c1f1107971 100644
--- a/src/components/Modal/Modal/Modal.stories.tsx
+++ b/src/components/Modal/Modal.stories.tsx
@@ -1,12 +1,12 @@
 import React from 'react'
 
 import { Modal } from './Modal'
-import { ModalFooter } from '../ModalFooter/ModalFooter'
-import { ModalHeading } from '../ModalHeading/ModalHeading'
-import { ModalWrapper } from '../ModalWrapper/ModalWrapper'
+import { ModalFooter } from './ModalFooter/ModalFooter'
+import { ModalHeading } from './ModalHeading/ModalHeading'
+import { ModalWrapper } from './ModalWrapper/ModalWrapper'
 
-import { Button } from '../../Button/Button'
-import { ButtonGroup } from '../../ButtonGroup/ButtonGroup'
+import { Button } from '../Button/Button'
+import { ButtonGroup } from '../ButtonGroup/ButtonGroup'
 
 export default {
   title: 'Components/Modal',
diff --git a/src/components/Modal/Modal.test.tsx b/src/components/Modal/Modal.test.tsx
new file mode 100644
index 0000000000..6363bbeb82
--- /dev/null
+++ b/src/components/Modal/Modal.test.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+
+import { Modal } from './Modal'
+
+import { render, screen } from '@testing-library/react'
+
+describe('Modal component', () => {
+  it('renders without errors', () => {
+    render(<Modal>some children</Modal>)
+    expect(screen.queryByTestId('modal')).toBeInTheDocument()
+    expect(screen.queryByText('some children')).toBeInTheDocument()
+    expect(
+      screen.queryByRole('button', { name: 'Close this window' })
+    ).toBeInTheDocument()
+  })
+
+  it('renders large modal when passed isLarge', () => {
+    render(<Modal isLarge>some children</Modal>)
+    expect(screen.getByTestId('modal')).toHaveClass('usa-modal--lg')
+  })
+
+  it('accepts attributes passed in through props', () => {
+    render(<Modal aria-label="aria-label-modal">some children</Modal>)
+
+    expect(screen.getByTestId('modal')).toHaveAttribute(
+      'aria-label',
+      'aria-label-modal'
+    )
+  })
+
+  it('accepts a custom className', () => {
+    render(<Modal className="custom-class">some children</Modal>)
+
+    expect(screen.getByTestId('modal')).toHaveClass('usa-modal custom-class')
+  })
+
+  it('does not render a close button if forceAction is true', () => {
+    render(<Modal forceAction>some children</Modal>)
+    expect(
+      screen.queryByRole('button', { name: 'Close this window' })
+    ).not.toBeInTheDocument()
+  })
+})
diff --git a/src/components/Modal/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
similarity index 92%
rename from src/components/Modal/Modal/Modal.tsx
rename to src/components/Modal/Modal.tsx
index 12b5b759fd..49aa3784b4 100644
--- a/src/components/Modal/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { ModalCloseButton } from '../ModalCloseButton/ModalCloseButton'
+import { ModalCloseButton } from './ModalCloseButton/ModalCloseButton'
 
 interface ModalProps {
   children: React.ReactNode
diff --git a/src/components/Modal/Modal/Modal.test.tsx b/src/components/Modal/Modal/Modal.test.tsx
deleted file mode 100644
index 96501fda98..0000000000
--- a/src/components/Modal/Modal/Modal.test.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react'
-
-import { Modal } from './Modal'
-
-import { render } from '@testing-library/react'
-
-describe('Modal component', () => {
-  it('renders without errors', () => {
-    const { getByTestId } = render(<Modal>some children</Modal>)
-
-    expect(getByTestId('modal')).toBeInTheDocument()
-  })
-
-  it('renders large modal when passed isLarge', () => {
-    const { getByTestId } = render(<Modal isLarge>some children</Modal>)
-
-    expect(getByTestId('modal')).toHaveClass('usa-modal--lg')
-  })
-
-  it('accepts attributes passed in through props', () => {
-    const { getByTestId } = render(
-      <Modal aria-label="aria-label-modal">some children</Modal>
-    )
-
-    expect(getByTestId('modal')).toHaveAttribute(
-      'aria-label',
-      'aria-label-modal'
-    )
-  })
-
-  it('accepts a custom className', () => {
-    const { getByTestId } = render(
-      <Modal className="custom-class">some children</Modal>
-    )
-
-    expect(getByTestId('modal')).toHaveClass('usa-modal custom-class')
-  })
-})
diff --git a/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx b/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx
index 45d2bf1194..c71bea520c 100644
--- a/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx
+++ b/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx
@@ -6,6 +6,8 @@ interface ModalCloseButtonProps {
   handleClose: () => void
 }
 
+// TODO - accept custom aria-label
+
 export const ModalCloseButton = ({
   handleClose,
   ...buttonProps
diff --git a/src/components/Modal/ModalContent/ModalContent.test.tsx b/src/components/Modal/ModalContent/ModalContent.test.tsx
deleted file mode 100644
index 695f6fd2ef..0000000000
--- a/src/components/Modal/ModalContent/ModalContent.test.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-
-import { ModalContent } from './ModalContent'
-
-describe('ModalContent component', () => {
-  it('renders without errors', () => {
-    const { queryByTestId } = render(
-      <ModalContent>You have unsaved changes that will be lost.</ModalContent>
-    )
-
-    expect(queryByTestId('modalContent')).toBeInTheDocument()
-  })
-
-  it('accepts a custom className', () => {
-    const { queryByTestId } = render(
-      <ModalContent className="custom-class">
-        You have unsaved changes that will be lost.
-      </ModalContent>
-    )
-
-    expect(queryByTestId('modalContent')).toHaveClass('custom-class')
-  })
-})
diff --git a/src/components/Modal/ModalContent/ModalContent.tsx b/src/components/Modal/ModalContent/ModalContent.tsx
deleted file mode 100644
index 59713ce09b..0000000000
--- a/src/components/Modal/ModalContent/ModalContent.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react'
-import classnames from 'classnames'
-
-interface ModalContentProps {
-  children: React.ReactNode
-  className?: string
-}
-
-export const ModalContent = ({
-  children,
-  className,
-  ...divProps
-}: ModalContentProps & JSX.IntrinsicElements['div']): React.ReactElement => {
-  const classes = classnames('usa-modal__content', className)
-
-  return (
-    <div className={classes} data-testid="modalContent" {...divProps}>
-      {children}
-    </div>
-  )
-}
-
-export default ModalContent
diff --git a/src/components/Modal/ModalDescription/ModalDescription.test.tsx b/src/components/Modal/ModalDescription/ModalDescription.test.tsx
deleted file mode 100644
index 44bf4097fb..0000000000
--- a/src/components/Modal/ModalDescription/ModalDescription.test.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-
-import { ModalDescription } from './ModalDescription'
-
-describe('ModalDescription component', () => {
-  it('renders without errors', () => {
-    const { queryByTestId } = render(
-      <ModalDescription>
-        <p>You have unsaved changes that will be lost.</p>
-      </ModalDescription>
-    )
-
-    expect(queryByTestId('modalDescription')).toBeInTheDocument()
-  })
-
-  it('accepts a custom className', () => {
-    const { queryByTestId } = render(
-      <ModalDescription className="custom-class">
-        <p>You have unsaved changes that will be lost.</p>
-      </ModalDescription>
-    )
-
-    expect(queryByTestId('modalDescription')).toBeInTheDocument()
-  })
-})
diff --git a/src/components/Modal/ModalDescription/ModalDescription.tsx b/src/components/Modal/ModalDescription/ModalDescription.tsx
deleted file mode 100644
index 7806a08d89..0000000000
--- a/src/components/Modal/ModalDescription/ModalDescription.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react'
-import classnames from 'classnames'
-
-interface ModalDescriptionProps {
-  children: React.ReactNode
-  className?: string
-}
-
-export const ModalDescription = ({
-  children,
-  className,
-  ...divProps
-}: ModalDescriptionProps &
-  JSX.IntrinsicElements['div']): React.ReactElement => {
-  const classes = classnames('usa-prose', className)
-
-  return (
-    <div className={classes} data-testid="modalDescription" {...divProps}>
-      {children}
-    </div>
-  )
-}
-
-export default ModalDescription
diff --git a/src/components/Modal/ModalMain/ModalMain.test.tsx b/src/components/Modal/ModalMain/ModalMain.test.tsx
deleted file mode 100644
index 67b0fdc3cb..0000000000
--- a/src/components/Modal/ModalMain/ModalMain.test.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react'
-
-import { ModalMain } from './ModalMain'
-
-import { render } from '@testing-library/react'
-
-describe('ModalMain component', () => {
-  it('renders without errors', () => {
-    const { getByTestId } = render(<ModalMain>some children</ModalMain>)
-
-    expect(getByTestId('modalMain')).toBeInTheDocument()
-  })
-
-  it('accepts attributes passed in through props', () => {
-    const { getByTestId } = render(
-      <ModalMain aria-label="aria-label-model">some children</ModalMain>
-    )
-
-    expect(getByTestId('modalMain')).toHaveAttribute(
-      'aria-label',
-      'aria-label-model'
-    )
-  })
-
-  it('accepts a custom className', () => {
-    const { getByTestId } = render(
-      <ModalMain className="custom-class">some children</ModalMain>
-    )
-
-    expect(getByTestId('modalMain')).toHaveClass('usa-modal__main custom-class')
-  })
-})
diff --git a/src/components/Modal/ModalMain/ModalMain.tsx b/src/components/Modal/ModalMain/ModalMain.tsx
deleted file mode 100644
index 5ee2aee68f..0000000000
--- a/src/components/Modal/ModalMain/ModalMain.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react'
-
-import classnames from 'classnames'
-
-interface ModalMainProps {
-  children: React.ReactNode
-  className?: string
-  isLarge?: boolean
-}
-
-export const ModalMain = ({
-  className,
-  children,
-  isLarge = false,
-  ...divProps
-}: ModalMainProps & JSX.IntrinsicElements['div']): React.ReactElement => {
-  const classes = classnames('usa-modal__main', className)
-  return (
-    <div data-testid="modalMain" className={classes} {...divProps}>
-      {children}
-    </div>
-  )
-}
-
-export default ModalMain
diff --git a/src/index.ts b/src/index.ts
index f51ca89474..b38e7537dc 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -86,9 +86,9 @@ export { Logo } from './components/Footer/Logo/Logo'
 export { SocialLinks } from './components/Footer/SocialLinks/SocialLinks'
 
 /** Modal components */
-export { Modal } from './components/Modal/Modal/Modal'
-export { ModalFooter } from './components/Modal/ModalFooter/ModalFooter'
+export { Modal } from './components/Modal/Modal'
 export { ModalHeading } from './components/Modal/ModalHeading/ModalHeading'
+export { ModalFooter } from './components/Modal/ModalFooter/ModalFooter'
 
 /** Card components */
 export { CardGroup } from './components/card/CardGroup/CardGroup'

From ac72177fe9233b7f53ec5ffebd9ea549057f9683 Mon Sep 17 00:00:00 2001
From: Suzanne Rozier <suz@truss.works>
Date: Thu, 30 Sep 2021 10:24:02 -0500
Subject: [PATCH 20/38] Move Modal to ModalWindow component

---
 src/components/Modal/Modal.stories.tsx        | 124 ------------------
 .../ModalCloseButton/ModalCloseButton.tsx     |   2 -
 .../Modal/ModalFooter/ModalFooter.tsx         |   2 -
 .../Modal/ModalWindow/ModalWindow.stories.tsx | 117 +++++++++++++++++
 .../ModalWindow.test.tsx}                     |  14 +-
 .../ModalWindow.tsx}                          |  10 +-
 src/index.ts                                  |   2 +-
 7 files changed, 130 insertions(+), 141 deletions(-)
 delete mode 100644 src/components/Modal/Modal.stories.tsx
 create mode 100644 src/components/Modal/ModalWindow/ModalWindow.stories.tsx
 rename src/components/Modal/{Modal.test.tsx => ModalWindow/ModalWindow.test.tsx} (72%)
 rename src/components/Modal/{Modal.tsx => ModalWindow/ModalWindow.tsx} (78%)

diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
deleted file mode 100644
index c1f1107971..0000000000
--- a/src/components/Modal/Modal.stories.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import React from 'react'
-
-import { Modal } from './Modal'
-import { ModalFooter } from './ModalFooter/ModalFooter'
-import { ModalHeading } from './ModalHeading/ModalHeading'
-import { ModalWrapper } from './ModalWrapper/ModalWrapper'
-
-import { Button } from '../Button/Button'
-import { ButtonGroup } from '../ButtonGroup/ButtonGroup'
-
-export default {
-  title: 'Components/Modal',
-  component: Modal,
-  parameters: {
-    docs: {
-      description: {
-        component: `
-### USWDS 2.0 Modal component
-
-Source: http://designsystem.digital.gov/components/modal
-`,
-      },
-    },
-  },
-}
-
-export const defaultModal = (): React.ReactElement => (
-  <ModalWrapper isVisible>
-    <Modal
-      id="example-modal-1"
-      aria-labelledby="modal-1-heading"
-      aria-describedby="modal-1-description">
-      <ModalHeading id="modal-1-heading">
-        Are you sure you want to continue?
-      </ModalHeading>
-      <div className="usa-prose">
-        <p id="modal-1-description">
-          You have unsaved changes that will be lost.
-        </p>
-      </div>
-      <ModalFooter>
-        <ButtonGroup>
-          <Button type="button" data-close-modal>
-            Continue without saving
-          </Button>
-          <Button
-            type="button"
-            data-close-modal
-            unstyled
-            className="padding-105 text-center">
-            Go back
-          </Button>
-        </ButtonGroup>
-      </ModalFooter>
-    </Modal>
-  </ModalWrapper>
-)
-
-export const largeModal = (): React.ReactElement => (
-  <ModalWrapper isVisible>
-    <Modal
-      isLarge
-      aria-labelledby="modal-2-heading"
-      aria-describedby="modal-2-description"
-      id="example-modal-2">
-      <ModalHeading id="modal-2-heading">
-        Are you sure you want to continue?
-      </ModalHeading>
-      <div className="usa-prose">
-        <p id="modal-2-description">
-          You have unsaved changes that will be lost.
-        </p>
-      </div>
-      <ModalFooter>
-        <ButtonGroup>
-          <Button type="button" data-close-modal>
-            Continue without saving
-          </Button>
-          <Button
-            type="button"
-            unstyled
-            data-close-modal
-            className="padding-105 text-center">
-            Go back
-          </Button>
-        </ButtonGroup>
-      </ModalFooter>
-    </Modal>
-  </ModalWrapper>
-)
-
-export const modalWithForcedAction = (): React.ReactElement => (
-  <ModalWrapper isVisible>
-    <Modal
-      id="example-modal-3"
-      aria-labelledby="modal-3-heading"
-      aria-describedby="modal-3-description"
-      forceAction>
-      <ModalHeading id="modal-3-heading">
-        Your session will end soon.
-      </ModalHeading>
-      <div className="usa-prose">
-        <p id="modal-3-description">
-          You’ve been inactive for too long. Please choose to stay signed in or
-          sign out. Otherwise, you’ll be signed out automatically in 5 minutes.
-        </p>
-      </div>
-      <ModalFooter>
-        <ButtonGroup>
-          <Button type="button" data-close-modal>
-            Yes, stay signed in
-          </Button>
-          <Button
-            type="button"
-            unstyled
-            className="padding-105 text-center"
-            data-close-modal>
-            Sign out
-          </Button>
-        </ButtonGroup>
-      </ModalFooter>
-    </Modal>
-  </ModalWrapper>
-)
diff --git a/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx b/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx
index c71bea520c..3997671e38 100644
--- a/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx
+++ b/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx
@@ -25,5 +25,3 @@ export const ModalCloseButton = ({
     </Button>
   )
 }
-
-export default ModalCloseButton
diff --git a/src/components/Modal/ModalFooter/ModalFooter.tsx b/src/components/Modal/ModalFooter/ModalFooter.tsx
index 6b382ab786..ed1f676949 100644
--- a/src/components/Modal/ModalFooter/ModalFooter.tsx
+++ b/src/components/Modal/ModalFooter/ModalFooter.tsx
@@ -19,5 +19,3 @@ export const ModalFooter = ({
     </div>
   )
 }
-
-export default ModalFooter
diff --git a/src/components/Modal/ModalWindow/ModalWindow.stories.tsx b/src/components/Modal/ModalWindow/ModalWindow.stories.tsx
new file mode 100644
index 0000000000..4df8de6832
--- /dev/null
+++ b/src/components/Modal/ModalWindow/ModalWindow.stories.tsx
@@ -0,0 +1,117 @@
+import React from 'react'
+
+import { ModalWindow } from './ModalWindow'
+import { ModalFooter } from '../ModalFooter/ModalFooter'
+import { ModalHeading } from '../ModalHeading/ModalHeading'
+
+import { Button } from '../../Button/Button'
+import { ButtonGroup } from '../../ButtonGroup/ButtonGroup'
+
+export default {
+  title: 'Components/Modal/ModalWindow',
+  component: ModalWindow,
+  parameters: {
+    docs: {
+      description: {
+        component: `
+### USWDS 2.0 Modal component
+
+Source: http://designsystem.digital.gov/components/modal
+`,
+      },
+    },
+  },
+}
+
+export const defaultModal = (): React.ReactElement => (
+  <ModalWindow
+    id="example-modal-1"
+    aria-labelledby="modal-1-heading"
+    aria-describedby="modal-1-description">
+    <ModalHeading id="modal-1-heading">
+      Are you sure you want to continue?
+    </ModalHeading>
+    <div className="usa-prose">
+      <p id="modal-1-description">
+        You have unsaved changes that will be lost.
+      </p>
+    </div>
+    <ModalFooter>
+      <ButtonGroup>
+        <Button type="button" data-close-modal>
+          Continue without saving
+        </Button>
+        <Button
+          type="button"
+          data-close-modal
+          unstyled
+          className="padding-105 text-center">
+          Go back
+        </Button>
+      </ButtonGroup>
+    </ModalFooter>
+  </ModalWindow>
+)
+
+export const largeModal = (): React.ReactElement => (
+  <ModalWindow
+    isLarge
+    aria-labelledby="modal-2-heading"
+    aria-describedby="modal-2-description"
+    id="example-modal-2">
+    <ModalHeading id="modal-2-heading">
+      Are you sure you want to continue?
+    </ModalHeading>
+    <div className="usa-prose">
+      <p id="modal-2-description">
+        You have unsaved changes that will be lost.
+      </p>
+    </div>
+    <ModalFooter>
+      <ButtonGroup>
+        <Button type="button" data-close-modal>
+          Continue without saving
+        </Button>
+        <Button
+          type="button"
+          unstyled
+          data-close-modal
+          className="padding-105 text-center">
+          Go back
+        </Button>
+      </ButtonGroup>
+    </ModalFooter>
+  </ModalWindow>
+)
+
+export const modalWithForcedAction = (): React.ReactElement => (
+  <ModalWindow
+    id="example-modal-3"
+    aria-labelledby="modal-3-heading"
+    aria-describedby="modal-3-description"
+    forceAction>
+    <ModalHeading id="modal-3-heading">
+      Your session will end soon.
+    </ModalHeading>
+    <div className="usa-prose">
+      <p id="modal-3-description">
+        You’ve been inactive for too long. Please choose to stay signed in or
+        sign out. Otherwise, you’ll be signed out automatically in 5 minutes.
+      </p>
+    </div>
+    <ModalFooter>
+      <ButtonGroup>
+        <Button type="button" data-close-modal>
+          Yes, stay signed in
+        </Button>
+        <Button
+          type="button"
+          unstyled
+          className="padding-105 text-center"
+          data-close-modal>
+          Sign out
+        </Button>
+      </ButtonGroup>
+    </ModalFooter>
+  </ModalWindow>
+)
diff --git a/src/components/Modal/Modal.test.tsx b/src/components/Modal/ModalWindow/ModalWindow.test.tsx
similarity index 72%
rename from src/components/Modal/Modal.test.tsx
rename to src/components/Modal/ModalWindow/ModalWindow.test.tsx
index 6363bbeb82..d310de8ad8 100644
--- a/src/components/Modal/Modal.test.tsx
+++ b/src/components/Modal/ModalWindow/ModalWindow.test.tsx
@@ -1,12 +1,12 @@
 import React from 'react'
 
-import { Modal } from './Modal'
+import { ModalWindow } from './ModalWindow'
 
 import { render, screen } from '@testing-library/react'
 
 describe('Modal component', () => {
   it('renders without errors', () => {
-    render(<Modal>some children</Modal>)
+    render(<ModalWindow>some children</ModalWindow>)
     expect(screen.queryByTestId('modal')).toBeInTheDocument()
     expect(screen.queryByText('some children')).toBeInTheDocument()
     expect(
@@ -15,12 +15,14 @@ describe('Modal component', () => {
   })
 
   it('renders large modal when passed isLarge', () => {
-    render(<Modal isLarge>some children</Modal>)
+    render(<ModalWindow isLarge>some children</ModalWindow>)
     expect(screen.getByTestId('modal')).toHaveClass('usa-modal--lg')
   })
 
   it('accepts attributes passed in through props', () => {
-    render(<Modal aria-label="aria-label-modal">some children</Modal>)
+    render(
+      <ModalWindow aria-label="aria-label-modal">some children</ModalWindow>
+    )
 
     expect(screen.getByTestId('modal')).toHaveAttribute(
       'aria-label',
@@ -29,13 +31,13 @@ describe('Modal component', () => {
   })
 
   it('accepts a custom className', () => {
-    render(<Modal className="custom-class">some children</Modal>)
+    render(<ModalWindow className="custom-class">some children</ModalWindow>)
 
     expect(screen.getByTestId('modal')).toHaveClass('usa-modal custom-class')
   })
 
   it('does not render a close button if forceAction is true', () => {
-    render(<Modal forceAction>some children</Modal>)
+    render(<ModalWindow forceAction>some children</ModalWindow>)
     expect(
       screen.queryByRole('button', { name: 'Close this window' })
     ).not.toBeInTheDocument()
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/ModalWindow/ModalWindow.tsx
similarity index 78%
rename from src/components/Modal/Modal.tsx
rename to src/components/Modal/ModalWindow/ModalWindow.tsx
index 49aa3784b4..2deb9a69a1 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/ModalWindow/ModalWindow.tsx
@@ -1,22 +1,22 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { ModalCloseButton } from './ModalCloseButton/ModalCloseButton'
+import { ModalCloseButton } from '../ModalCloseButton/ModalCloseButton'
 
-interface ModalProps {
+interface ModalWindowProps {
   children: React.ReactNode
   className?: string
   isLarge?: boolean
   forceAction?: boolean
 }
 
-export const Modal = ({
+export const ModalWindow = ({
   className,
   children,
   isLarge = false,
   forceAction = false,
   ...divProps
-}: ModalProps & JSX.IntrinsicElements['div']): React.ReactElement => {
+}: ModalWindowProps & JSX.IntrinsicElements['div']): React.ReactElement => {
   const classes = classnames(
     'usa-modal',
     {
@@ -43,5 +43,3 @@ export const Modal = ({
     </div>
   )
 }
-
-export default Modal
diff --git a/src/index.ts b/src/index.ts
index b38e7537dc..3d6f1b23cb 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -86,7 +86,7 @@ export { Logo } from './components/Footer/Logo/Logo'
 export { SocialLinks } from './components/Footer/SocialLinks/SocialLinks'
 
 /** Modal components */
-export { Modal } from './components/Modal/Modal'
+export { ModalWindow } from './components/Modal/ModalWindow/ModalWindow'
 export { ModalHeading } from './components/Modal/ModalHeading/ModalHeading'
 export { ModalFooter } from './components/Modal/ModalFooter/ModalFooter'
 

From 3ae7aeb668e9b41ca18a0c1704004826bdfa911a Mon Sep 17 00:00:00 2001
From: Suzanne Rozier <suz@truss.works>
Date: Thu, 30 Sep 2021 15:10:08 -0500
Subject: [PATCH 21/38] Setting up modal functionality

---
 src/components/Modal/Modal.tsx                | 57 +++++++++++++++++++
 src/components/Modal/ModalOpenButton.tsx      | 33 +++++++++++
 .../Modal/ModalWindow/ModalWindow.tsx         | 12 ++--
 .../Modal/ModalWrapper/ModalWrapper.tsx       |  8 ++-
 src/components/Modal/utils.ts                 | 18 ++++++
 src/index.ts                                  |  4 +-
 6 files changed, 124 insertions(+), 8 deletions(-)
 create mode 100644 src/components/Modal/Modal.tsx
 create mode 100644 src/components/Modal/ModalOpenButton.tsx
 create mode 100644 src/components/Modal/utils.ts

diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
new file mode 100644
index 0000000000..c990ec6cf1
--- /dev/null
+++ b/src/components/Modal/Modal.tsx
@@ -0,0 +1,57 @@
+import React from 'react'
+
+import { ModalHook } from './utils'
+import { ModalWindow } from './ModalWindow/ModalWindow'
+import { ModalWrapper } from './ModalWrapper/ModalWrapper'
+
+interface ModalProps {
+  id: string
+  children: React.ReactNode
+  className?: string
+  isLarge?: boolean
+  forceAction?: boolean
+}
+
+// isopen effect
+// return open/close functions
+// close button controls
+
+export const Modal = ({
+  id,
+  children,
+  isOpen,
+  closeModal,
+  isLarge = false,
+  forceAction = false,
+  ...divProps
+}: ModalProps &
+  ModalHook &
+  JSX.IntrinsicElements['div']): React.ReactElement => {
+  const ariaLabelledBy = divProps['aria-labelledby']
+  const ariaDescribedBy = divProps['aria-describedby']
+
+  delete divProps['aria-labelledby']
+  delete divProps['aria-describedby']
+
+  return (
+    <ModalWrapper
+      role="dialog"
+      id={id}
+      aria-labelledby={ariaLabelledBy}
+      aria-describedby={ariaDescribedBy}
+      data-force-action={forceAction}
+      isVisible={isOpen}>
+      <ModalWindow
+        modalId={id}
+        {...divProps}
+        isLarge={isLarge}
+        forceAction={forceAction}
+        tabIndex={-1}
+        handleClose={closeModal}>
+        {children}
+      </ModalWindow>
+    </ModalWrapper>
+  )
+}
+
+export default Modal
diff --git a/src/components/Modal/ModalOpenButton.tsx b/src/components/Modal/ModalOpenButton.tsx
new file mode 100644
index 0000000000..c1221f7aef
--- /dev/null
+++ b/src/components/Modal/ModalOpenButton.tsx
@@ -0,0 +1,33 @@
+/* eslint-disable jsx-a11y/interactive-supports-focus */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React from 'react'
+import classnames from 'classnames'
+
+type ModalOpenButtonProps = {
+  handleOpen: () => void
+}
+
+// TODO - support <a> or <button> element
+// if A: set role="button"
+// pass click handler, prevent default
+
+export const ModalOpenButton = ({
+  children,
+  className,
+  handleOpen,
+  ...props
+}: ModalOpenButtonProps &
+  JSX.IntrinsicElements['a']): React.ReactElement<HTMLAnchorElement> => {
+  const classes = classnames('usa-button', className)
+
+  return (
+    <a
+      {...props}
+      className={classes}
+      role="button"
+      data-open-modal
+      onClick={handleOpen}>
+      {children}
+    </a>
+  )
+}
diff --git a/src/components/Modal/ModalWindow/ModalWindow.tsx b/src/components/Modal/ModalWindow/ModalWindow.tsx
index 2deb9a69a1..d720ac2726 100644
--- a/src/components/Modal/ModalWindow/ModalWindow.tsx
+++ b/src/components/Modal/ModalWindow/ModalWindow.tsx
@@ -4,15 +4,19 @@ import classnames from 'classnames'
 import { ModalCloseButton } from '../ModalCloseButton/ModalCloseButton'
 
 interface ModalWindowProps {
+  modalId: string
   children: React.ReactNode
+  handleClose: () => void
   className?: string
   isLarge?: boolean
   forceAction?: boolean
 }
 
 export const ModalWindow = ({
+  modalId,
   className,
   children,
+  handleClose,
   isLarge = false,
   forceAction = false,
   ...divProps
@@ -25,10 +29,6 @@ export const ModalWindow = ({
     className
   )
 
-  const handleClose = () => {
-    /* */
-  }
-
   // needs a unique ID
   return (
     <div
@@ -38,7 +38,9 @@ export const ModalWindow = ({
       data-force-action={forceAction}>
       <div className="usa-modal__content">
         <div className="usa-modal__main">{children}</div>
-        {!forceAction && <ModalCloseButton handleClose={handleClose} />}
+        {!forceAction && (
+          <ModalCloseButton aria-controls={modalId} handleClose={handleClose} />
+        )}
       </div>
     </div>
   )
diff --git a/src/components/Modal/ModalWrapper/ModalWrapper.tsx b/src/components/Modal/ModalWrapper/ModalWrapper.tsx
index 4df43c321a..7bbf70dd76 100644
--- a/src/components/Modal/ModalWrapper/ModalWrapper.tsx
+++ b/src/components/Modal/ModalWrapper/ModalWrapper.tsx
@@ -7,6 +7,10 @@ interface ModalWrapperProps {
   className?: string
 }
 
+// Copy attributes from Modal
+// Render into a portal
+// Toggle body classes
+
 export const ModalWrapper = ({
   children,
   isVisible,
@@ -23,8 +27,8 @@ export const ModalWrapper = ({
   )
 
   return (
-    <div className={classes} data-testid="modalWrapper" {...divProps}>
-      {children}
+    <div {...divProps} className={classes} role="dialog">
+      <div className="usa-modal-overlay">{children}</div>
     </div>
   )
 }
diff --git a/src/components/Modal/utils.ts b/src/components/Modal/utils.ts
new file mode 100644
index 0000000000..832d4f8d7f
--- /dev/null
+++ b/src/components/Modal/utils.ts
@@ -0,0 +1,18 @@
+import { useState } from 'react'
+
+export type ModalHook = {
+  isOpen: boolean
+  openModal: () => void
+  closeModal: () => void
+}
+
+export const useModal = (): ModalHook => {
+  const [isOpen, setIsOpen] = useState(false)
+
+  // TODO - useEffect on body element
+
+  const openModal = (): void => setIsOpen(true)
+  const closeModal = (): void => setIsOpen(false)
+
+  return { isOpen, openModal, closeModal }
+}
diff --git a/src/index.ts b/src/index.ts
index 3d6f1b23cb..9aa8f3db22 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -86,7 +86,9 @@ export { Logo } from './components/Footer/Logo/Logo'
 export { SocialLinks } from './components/Footer/SocialLinks/SocialLinks'
 
 /** Modal components */
-export { ModalWindow } from './components/Modal/ModalWindow/ModalWindow'
+export { Modal } from './components/Modal/Modal'
+export { ModalOpenButton } from './components/Modal/ModalOpenButton'
+export { useModal } from './components/Modal/utils'
 export { ModalHeading } from './components/Modal/ModalHeading/ModalHeading'
 export { ModalFooter } from './components/Modal/ModalFooter/ModalFooter'
 

From 5604686fa150c988bbfe0bad63528ff835d2d72c Mon Sep 17 00:00:00 2001
From: Suzanne Rozier <suz@truss.works>
Date: Thu, 30 Sep 2021 16:11:20 -0500
Subject: [PATCH 22/38] Modal tests

---
 src/components/Modal/Modal.test.tsx           | 136 ++++++++++++++++++
 src/components/Modal/Modal.tsx                |   2 +-
 .../Modal/ModalWindow/ModalWindow.tsx         |   2 +-
 .../Modal/ModalWrapper/ModalWrapper.tsx       |   4 +-
 4 files changed, 141 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Modal/Modal.test.tsx

diff --git a/src/components/Modal/Modal.test.tsx b/src/components/Modal/Modal.test.tsx
new file mode 100644
index 0000000000..fc0dce4e16
--- /dev/null
+++ b/src/components/Modal/Modal.test.tsx
@@ -0,0 +1,136 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { Modal } from './Modal'
+
+describe('Modal component', () => {
+  it('renders its children inside a modal wrapper', () => {
+    const modalState = {
+      isOpen: false,
+      closeModal: jest.fn(),
+    }
+
+    const testModalId = 'testModal'
+
+    render(
+      <Modal id={testModalId} {...modalState}>
+        Test modal
+      </Modal>
+    )
+
+    // Modal wrapper
+    const modalWrapper = screen.getByRole('dialog')
+    expect(modalWrapper).toHaveAttribute('id', testModalId)
+    expect(modalWrapper).toHaveClass('usa-modal-wrapper')
+    expect(modalWrapper).toHaveClass('is-hidden')
+    expect(modalWrapper).not.toHaveClass('is-visible')
+
+    expect(screen.queryByTestId('modalOverlay')).toBeInTheDocument()
+
+    const modalWindow = screen.getByTestId('modalWindow')
+    expect(modalWindow).toHaveClass('usa-modal')
+    expect(modalWindow).not.toHaveAttribute('id')
+    expect(modalWindow).toHaveAttribute('tabindex', '-1')
+    expect(modalWindow).toHaveTextContent('Test modal')
+
+    const closeButton = screen.getByRole('button', {
+      name: 'Close this window',
+    })
+    expect(closeButton).toBeInTheDocument()
+    userEvent.click(closeButton)
+    expect(modalState.closeModal).toHaveBeenCalled()
+  })
+
+  it('passes aria props to the modal wrapper', () => {
+    const modalState = {
+      isOpen: false,
+      closeModal: jest.fn(),
+    }
+
+    const testModalId = 'testModal'
+
+    render(
+      <Modal
+        id={testModalId}
+        {...modalState}
+        aria-labelledby="modal-label"
+        aria-describedby="modal-description">
+        Test modal
+      </Modal>
+    )
+
+    const modalWrapper = screen.getByRole('dialog')
+    expect(modalWrapper).toHaveAttribute('aria-labelledby', 'modal-label')
+    expect(modalWrapper).toHaveAttribute(
+      'aria-describedby',
+      'modal-description'
+    )
+
+    const modalWindow = screen.getByTestId('modalWindow')
+    expect(modalWindow).not.toHaveAttribute('aria-labelledby')
+    expect(modalWindow).not.toHaveAttribute('aria-describedby')
+  })
+
+  it('renders the visible state when open', () => {
+    const modalState = {
+      isOpen: true,
+      closeModal: jest.fn(),
+    }
+
+    const testModalId = 'testModal'
+
+    render(
+      <Modal id={testModalId} {...modalState}>
+        Test modal
+      </Modal>
+    )
+
+    const modalWrapper = screen.getByRole('dialog')
+    expect(modalWrapper).not.toHaveClass('is-hidden')
+    expect(modalWrapper).toHaveClass('is-visible')
+  })
+
+  it('renders a large modalWindow isLarge is true', () => {
+    const modalState = {
+      isOpen: false,
+      closeModal: jest.fn(),
+    }
+
+    const testModalId = 'testModal'
+
+    render(
+      <Modal id={testModalId} {...modalState} isLarge>
+        Test modal
+      </Modal>
+    )
+
+    expect(screen.getByTestId('modalWindow')).toHaveClass('usa-modal--lg')
+  })
+
+  it('does not render a close button when forceAction is true', () => {
+    const modalState = {
+      isOpen: false,
+      closeModal: jest.fn(),
+    }
+
+    const testModalId = 'testModal'
+
+    render(
+      <Modal id={testModalId} {...modalState} forceAction>
+        Test modal
+      </Modal>
+    )
+
+    expect(screen.getByRole('dialog')).toHaveAttribute(
+      'data-force-action',
+      'true'
+    )
+
+    expect(
+      screen.queryByRole('button', {
+        name: 'Close this window',
+      })
+    ).not.toBeInTheDocument()
+  })
+})
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index c990ec6cf1..65ce5070e3 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -25,7 +25,7 @@ export const Modal = ({
   forceAction = false,
   ...divProps
 }: ModalProps &
-  ModalHook &
+  Pick<ModalHook, 'isOpen' | 'closeModal'> &
   JSX.IntrinsicElements['div']): React.ReactElement => {
   const ariaLabelledBy = divProps['aria-labelledby']
   const ariaDescribedBy = divProps['aria-describedby']
diff --git a/src/components/Modal/ModalWindow/ModalWindow.tsx b/src/components/Modal/ModalWindow/ModalWindow.tsx
index d720ac2726..ec69b1a26f 100644
--- a/src/components/Modal/ModalWindow/ModalWindow.tsx
+++ b/src/components/Modal/ModalWindow/ModalWindow.tsx
@@ -32,7 +32,7 @@ export const ModalWindow = ({
   // needs a unique ID
   return (
     <div
-      data-testid="modal"
+      data-testid="modalWindow"
       className={classes}
       {...divProps}
       data-force-action={forceAction}>
diff --git a/src/components/Modal/ModalWrapper/ModalWrapper.tsx b/src/components/Modal/ModalWrapper/ModalWrapper.tsx
index 7bbf70dd76..66533f185f 100644
--- a/src/components/Modal/ModalWrapper/ModalWrapper.tsx
+++ b/src/components/Modal/ModalWrapper/ModalWrapper.tsx
@@ -28,7 +28,9 @@ export const ModalWrapper = ({
 
   return (
     <div {...divProps} className={classes} role="dialog">
-      <div className="usa-modal-overlay">{children}</div>
+      <div data-testid="modalOverlay" className="usa-modal-overlay">
+        {children}
+      </div>
     </div>
   )
 }

From 4c35f5d2df91aef8271e36e5db49b898162d517d Mon Sep 17 00:00:00 2001
From: Suzanne Rozier <suz@truss.works>
Date: Fri, 1 Oct 2021 09:51:10 -0500
Subject: [PATCH 23/38] Working on modal effects and tests

---
 src/components/Modal/Modal.test.tsx | 112 ++++++++++++++++++++++++++++
 src/components/Modal/Modal.tsx      |  62 ++++++++++++++-
 src/components/Modal/utils.test.ts  |  34 +++++++++
 src/components/Modal/utils.ts       |   1 +
 4 files changed, 205 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Modal/utils.test.ts

diff --git a/src/components/Modal/Modal.test.tsx b/src/components/Modal/Modal.test.tsx
index fc0dce4e16..7af97f9f0e 100644
--- a/src/components/Modal/Modal.test.tsx
+++ b/src/components/Modal/Modal.test.tsx
@@ -133,4 +133,116 @@ describe('Modal component', () => {
       })
     ).not.toBeInTheDocument()
   })
+
+  describe('toggling', () => {
+    it('styles the body element', () => {
+      // TODO - body padding
+      const closeModal = jest.fn()
+      const { rerender, baseElement } = render(
+        <Modal id="testModal" isOpen={false} closeModal={closeModal}>
+          Test modal
+        </Modal>
+      )
+
+      expect(baseElement).not.toHaveClass('usa-js-modal--active')
+
+      rerender(
+        <Modal id="testModal" isOpen={true} closeModal={closeModal}>
+          Test modal
+        </Modal>
+      )
+
+      expect(baseElement).toHaveClass('usa-js-modal--active')
+
+      rerender(
+        <Modal id="testModal" isOpen={false} closeModal={closeModal}>
+          Test modal
+        </Modal>
+      )
+
+      expect(baseElement).not.toHaveClass('usa-js-modal--active')
+    })
+
+    // TODO
+    it.skip('hides other elements from screen readers', () => {
+      const closeModal = jest.fn()
+      const { rerender } = render(
+        <>
+          <p data-testid="nonhidden">Some other element</p>
+          <div data-testid="hidden" aria-hidden="true">
+            Element that is normally hidden
+          </div>
+          <Modal id="testModal" isOpen={false} closeModal={closeModal}>
+            Test modal
+          </Modal>
+        </>
+      )
+
+      expect(screen.getByTestId('nonhidden')).not.toHaveAttribute('aria-hidden')
+      expect(screen.getByTestId('nonhidden')).not.toHaveAttribute(
+        'data-modal-hidden'
+      )
+
+      expect(screen.getByTestId('hidden')).toHaveAttribute('aria-hidden')
+
+      rerender(
+        <>
+          <p data-testid="nonhidden">Some other element</p>
+          <div data-testid="hidden" aria-hidden="true">
+            Element that is normally hidden
+          </div>
+          <Modal id="testModal" isOpen={true} closeModal={closeModal}>
+            Test modal
+          </Modal>
+        </>
+      )
+
+      expect(screen.getByTestId('nonhidden')).toHaveAttribute('aria-hidden')
+      expect(screen.getByTestId('nonhidden')).toHaveAttribute(
+        'data-modal-hidden'
+      )
+      expect(screen.getByTestId('hidden')).toHaveAttribute('aria-hidden')
+    })
+
+    describe('if forceAction is true', () => {
+      it('styles the body element', () => {
+        const closeModal = jest.fn()
+        const { rerender, baseElement } = render(
+          <Modal
+            id="testModal"
+            isOpen={false}
+            closeModal={closeModal}
+            forceAction>
+            Test modal
+          </Modal>
+        )
+
+        expect(baseElement).not.toHaveClass('usa-js-no-click')
+
+        rerender(
+          <Modal
+            id="testModal"
+            isOpen={true}
+            closeModal={closeModal}
+            forceAction>
+            Test modal
+          </Modal>
+        )
+
+        expect(baseElement).toHaveClass('usa-js-no-click')
+
+        rerender(
+          <Modal
+            id="testModal"
+            isOpen={false}
+            closeModal={closeModal}
+            forceAction>
+            Test modal
+          </Modal>
+        )
+
+        expect(baseElement).not.toHaveClass('usa-js-no-click')
+      })
+    })
+  })
 })
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 65ce5070e3..d3a31e3111 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 
 import { ModalHook } from './utils'
 import { ModalWindow } from './ModalWindow/ModalWindow'
@@ -12,9 +12,15 @@ interface ModalProps {
   forceAction?: boolean
 }
 
-// isopen effect
-// return open/close functions
-// close button controls
+// isOpen effect
+// modal toggle button (A, button)
+//  - aria-controls=modal ID
+// focus trap
+// createPortal / default to document.body.appendChild?
+// handle body padding
+
+const NON_MODALS = `body > *:not(.usa-modal-wrapper):not([aria-hidden])`
+const NON_MODALS_HIDDEN = `[data-modal-hidden]`
 
 export const Modal = ({
   id,
@@ -27,6 +33,54 @@ export const Modal = ({
 }: ModalProps &
   Pick<ModalHook, 'isOpen' | 'closeModal'> &
   JSX.IntrinsicElements['div']): React.ReactElement => {
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  useEffect(() => {
+    if (mounted) {
+      const { body } = document
+
+      if (isOpen === true) {
+        console.log('OPEN MODAL')
+        body.classList.add('usa-js-modal--active')
+        document.querySelectorAll(NON_MODALS).forEach((el) => {
+          console.log('el', el.getAttribute('data-testid'))
+          el.setAttribute('aria-hidden', 'true')
+          el.setAttribute('data-modal-hidden', '')
+        })
+
+        if (forceAction) {
+          body.classList.add('usa-js-no-click')
+        }
+      } else if (isOpen === false) {
+        console.log('CLOSE MODAL')
+        body.classList.remove('usa-js-modal--active')
+        body.classList.remove('usa-js-no-click')
+
+        document.querySelectorAll(NON_MODALS_HIDDEN).forEach((el) => {
+          el.removeAttribute('aria-hidden')
+          el.removeAttribute('data-modal-hidden')
+        })
+      }
+    }
+
+    return () => {
+      console.log('UNMOUNT MODAL')
+      const { body } = document
+
+      body.classList.remove('usa-js-modal--active')
+      body.classList.remove('usa-js-no-click')
+
+      document.querySelectorAll(NON_MODALS_HIDDEN).forEach((el) => {
+        el.removeAttribute('aria-hidden')
+        el.removeAttribute('data-modal-hidden')
+      })
+    }
+  }, [isOpen])
+
   const ariaLabelledBy = divProps['aria-labelledby']
   const ariaDescribedBy = divProps['aria-describedby']
 
diff --git a/src/components/Modal/utils.test.ts b/src/components/Modal/utils.test.ts
new file mode 100644
index 0000000000..91ff943ace
--- /dev/null
+++ b/src/components/Modal/utils.test.ts
@@ -0,0 +1,34 @@
+import { renderHook, act } from '@testing-library/react-hooks'
+
+import { useModal } from './utils'
+
+describe('the useModal hook', () => {
+  it('isOpen defaults to false', () => {
+    const { result } = renderHook(() => useModal())
+
+    expect(result.current.isOpen).toEqual(false)
+  })
+
+  it('openModal sets isOpen to true', () => {
+    const { result } = renderHook(() => useModal())
+
+    act(() => {
+      result.current.openModal()
+    })
+    expect(result.current.isOpen).toEqual(true)
+  })
+
+  it('closeModal sets isOpen to false', () => {
+    const { result } = renderHook(() => useModal())
+
+    act(() => {
+      result.current.openModal()
+    })
+    expect(result.current.isOpen).toEqual(true)
+
+    act(() => {
+      result.current.closeModal()
+    })
+    expect(result.current.isOpen).toEqual(false)
+  })
+})
diff --git a/src/components/Modal/utils.ts b/src/components/Modal/utils.ts
index 832d4f8d7f..b6b29d9eea 100644
--- a/src/components/Modal/utils.ts
+++ b/src/components/Modal/utils.ts
@@ -9,6 +9,7 @@ export type ModalHook = {
 export const useModal = (): ModalHook => {
   const [isOpen, setIsOpen] = useState(false)
 
+  // TODO - set opener element to return focus to
   // TODO - useEffect on body element
 
   const openModal = (): void => setIsOpen(true)

From dac357e8db1979941886e5e0ea9d9323f8ed4c8f Mon Sep 17 00:00:00 2001
From: Suzanne Rozier <suz@truss.works>
Date: Fri, 1 Oct 2021 11:45:05 -0500
Subject: [PATCH 24/38] Hide other elements test, add modalRoot prop

---
 src/components/Modal/Modal.test.tsx           | 109 +++++++++++++++++-
 src/components/Modal/Modal.tsx                |  24 ++--
 .../Modal/ModalWindow/ModalWindow.test.tsx    |  39 +++++--
 src/index.ts                                  |   2 +-
 4 files changed, 147 insertions(+), 27 deletions(-)

diff --git a/src/components/Modal/Modal.test.tsx b/src/components/Modal/Modal.test.tsx
index 7af97f9f0e..ca9ae51b30 100644
--- a/src/components/Modal/Modal.test.tsx
+++ b/src/components/Modal/Modal.test.tsx
@@ -163,19 +163,24 @@ describe('Modal component', () => {
       expect(baseElement).not.toHaveClass('usa-js-modal--active')
     })
 
-    // TODO
-    it.skip('hides other elements from screen readers', () => {
-      const closeModal = jest.fn()
+    it('hides other elements from screen readers', () => {
+      const modalProps = {
+        id: 'testModal',
+        closeModal: jest.fn(),
+      }
       const { rerender } = render(
         <>
           <p data-testid="nonhidden">Some other element</p>
           <div data-testid="hidden" aria-hidden="true">
             Element that is normally hidden
           </div>
-          <Modal id="testModal" isOpen={false} closeModal={closeModal}>
+          <Modal {...modalProps} isOpen={false}>
             Test modal
           </Modal>
-        </>
+        </>,
+        {
+          container: document.body,
+        }
       )
 
       expect(screen.getByTestId('nonhidden')).not.toHaveAttribute('aria-hidden')
@@ -191,7 +196,7 @@ describe('Modal component', () => {
           <div data-testid="hidden" aria-hidden="true">
             Element that is normally hidden
           </div>
-          <Modal id="testModal" isOpen={true} closeModal={closeModal}>
+          <Modal {...modalProps} isOpen={true}>
             Test modal
           </Modal>
         </>
@@ -202,6 +207,98 @@ describe('Modal component', () => {
         'data-modal-hidden'
       )
       expect(screen.getByTestId('hidden')).toHaveAttribute('aria-hidden')
+
+      rerender(
+        <>
+          <p data-testid="nonhidden">Some other element</p>
+          <div data-testid="hidden" aria-hidden="true">
+            Element that is normally hidden
+          </div>
+          <Modal {...modalProps} isOpen={false}>
+            Test modal
+          </Modal>
+        </>
+      )
+
+      expect(screen.getByTestId('nonhidden')).not.toHaveAttribute('aria-hidden')
+      expect(screen.getByTestId('nonhidden')).not.toHaveAttribute(
+        'data-modal-hidden'
+      )
+
+      expect(screen.getByTestId('hidden')).toHaveAttribute('aria-hidden')
+    })
+
+    it('hides other elements from screen readers with a custom modal root', () => {
+      const modalProps = {
+        id: 'testModal',
+        closeModal: jest.fn(),
+        modalRoot: '#modal-root',
+      }
+
+      const { rerender } = render(
+        <>
+          <p data-testid="nonhidden">Some other element</p>
+          <div data-testid="hidden" aria-hidden="true">
+            Element that is normally hidden
+          </div>
+          <div id="#modal-root">
+            <Modal {...modalProps} isOpen={false}>
+              Test modal
+            </Modal>
+          </div>
+        </>,
+        {
+          container: document.body,
+        }
+      )
+
+      expect(screen.getByTestId('nonhidden')).not.toHaveAttribute('aria-hidden')
+      expect(screen.getByTestId('nonhidden')).not.toHaveAttribute(
+        'data-modal-hidden'
+      )
+
+      expect(screen.getByTestId('hidden')).toHaveAttribute('aria-hidden')
+
+      rerender(
+        <>
+          <p data-testid="nonhidden">Some other element</p>
+          <div data-testid="hidden" aria-hidden="true">
+            Element that is normally hidden
+          </div>
+          <div id="#modal-root">
+            <Modal {...modalProps} isOpen={true}>
+              Test modal
+            </Modal>
+          </div>
+        </>
+      )
+
+      expect(screen.getByTestId('nonhidden')).toHaveAttribute('aria-hidden')
+      expect(screen.getByTestId('nonhidden')).toHaveAttribute(
+        'data-modal-hidden'
+      )
+      expect(screen.getByTestId('hidden')).toHaveAttribute('aria-hidden')
+
+      rerender(
+        <>
+          <p data-testid="nonhidden">Some other element</p>
+          <div data-testid="hidden" aria-hidden="true">
+            Element that is normally hidden
+          </div>
+          <div id="#modal-root">
+            <Modal {...modalProps} isOpen={false}>
+              Test modal
+            </Modal>
+          </div>
+        </>
+      )
+
+      expect(screen.getByTestId('nonhidden')).not.toHaveAttribute('aria-hidden')
+      expect(screen.getByTestId('nonhidden')).not.toHaveAttribute(
+        'data-modal-hidden'
+      )
+
+      expect(screen.getByTestId('hidden')).toHaveAttribute('aria-hidden')
     })
 
     describe('if forceAction is true', () => {
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index d3a31e3111..c1c4987306 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -4,14 +4,19 @@ import { ModalHook } from './utils'
 import { ModalWindow } from './ModalWindow/ModalWindow'
 import { ModalWrapper } from './ModalWrapper/ModalWrapper'
 
-interface ModalProps {
+interface ModalComponentProps {
   id: string
   children: React.ReactNode
   className?: string
   isLarge?: boolean
   forceAction?: boolean
+  modalRoot?: string
 }
 
+export type ModalProps = ModalComponentProps &
+  Pick<ModalHook, 'isOpen' | 'closeModal'> &
+  JSX.IntrinsicElements['div']
+
 // isOpen effect
 // modal toggle button (A, button)
 //  - aria-controls=modal ID
@@ -19,9 +24,6 @@ interface ModalProps {
 // createPortal / default to document.body.appendChild?
 // handle body padding
 
-const NON_MODALS = `body > *:not(.usa-modal-wrapper):not([aria-hidden])`
-const NON_MODALS_HIDDEN = `[data-modal-hidden]`
-
 export const Modal = ({
   id,
   children,
@@ -29,12 +31,16 @@ export const Modal = ({
   closeModal,
   isLarge = false,
   forceAction = false,
+  modalRoot = '.usa-modal-wrapper',
   ...divProps
-}: ModalProps &
-  Pick<ModalHook, 'isOpen' | 'closeModal'> &
-  JSX.IntrinsicElements['div']): React.ReactElement => {
+}: ModalProps): React.ReactElement => {
   const [mounted, setMounted] = useState(false)
 
+  const modalRootSelector = modalRoot || '.usa-modal-wrapper'
+
+  const NON_MODALS = `body > *:not(${modalRootSelector}):not([aria-hidden])`
+  const NON_MODALS_HIDDEN = `[data-modal-hidden]`
+
   useEffect(() => {
     setMounted(true)
   }, [])
@@ -44,10 +50,8 @@ export const Modal = ({
       const { body } = document
 
       if (isOpen === true) {
-        console.log('OPEN MODAL')
         body.classList.add('usa-js-modal--active')
         document.querySelectorAll(NON_MODALS).forEach((el) => {
-          console.log('el', el.getAttribute('data-testid'))
           el.setAttribute('aria-hidden', 'true')
           el.setAttribute('data-modal-hidden', '')
         })
@@ -56,7 +60,6 @@ export const Modal = ({
           body.classList.add('usa-js-no-click')
         }
       } else if (isOpen === false) {
-        console.log('CLOSE MODAL')
         body.classList.remove('usa-js-modal--active')
         body.classList.remove('usa-js-no-click')
 
@@ -68,7 +71,6 @@ export const Modal = ({
     }
 
     return () => {
-      console.log('UNMOUNT MODAL')
       const { body } = document
 
       body.classList.remove('usa-js-modal--active')
diff --git a/src/components/Modal/ModalWindow/ModalWindow.test.tsx b/src/components/Modal/ModalWindow/ModalWindow.test.tsx
index d310de8ad8..ed0b546407 100644
--- a/src/components/Modal/ModalWindow/ModalWindow.test.tsx
+++ b/src/components/Modal/ModalWindow/ModalWindow.test.tsx
@@ -5,9 +5,14 @@ import { ModalWindow } from './ModalWindow'
 import { render, screen } from '@testing-library/react'
 
 describe('Modal component', () => {
+  const testProps = {
+    modalId: 'testModalId',
+    handleClose: jest.fn(),
+  }
+
   it('renders without errors', () => {
-    render(<ModalWindow>some children</ModalWindow>)
-    expect(screen.queryByTestId('modal')).toBeInTheDocument()
+    render(<ModalWindow {...testProps}>some children</ModalWindow>)
+    expect(screen.queryByTestId('modalWindow')).toBeInTheDocument()
     expect(screen.queryByText('some children')).toBeInTheDocument()
     expect(
       screen.queryByRole('button', { name: 'Close this window' })
@@ -15,29 +20,45 @@ describe('Modal component', () => {
   })
 
   it('renders large modal when passed isLarge', () => {
-    render(<ModalWindow isLarge>some children</ModalWindow>)
-    expect(screen.getByTestId('modal')).toHaveClass('usa-modal--lg')
+    render(
+      <ModalWindow {...testProps} isLarge>
+        some children
+      </ModalWindow>
+    )
+    expect(screen.getByTestId('modalWindow')).toHaveClass('usa-modal--lg')
   })
 
   it('accepts attributes passed in through props', () => {
     render(
-      <ModalWindow aria-label="aria-label-modal">some children</ModalWindow>
+      <ModalWindow {...testProps} aria-label="aria-label-modal">
+        some children
+      </ModalWindow>
     )
 
-    expect(screen.getByTestId('modal')).toHaveAttribute(
+    expect(screen.getByTestId('modalWindow')).toHaveAttribute(
       'aria-label',
       'aria-label-modal'
     )
   })
 
   it('accepts a custom className', () => {
-    render(<ModalWindow className="custom-class">some children</ModalWindow>)
+    render(
+      <ModalWindow {...testProps} className="custom-class">
+        some children
+      </ModalWindow>
+    )
 
-    expect(screen.getByTestId('modal')).toHaveClass('usa-modal custom-class')
+    expect(screen.getByTestId('modalWindow')).toHaveClass(
+      'usa-modal custom-class'
+    )
   })
 
   it('does not render a close button if forceAction is true', () => {
-    render(<ModalWindow forceAction>some children</ModalWindow>)
+    render(
+      <ModalWindow {...testProps} forceAction>
+        some children
+      </ModalWindow>
+    )
     expect(
       screen.queryByRole('button', { name: 'Close this window' })
     ).not.toBeInTheDocument()
diff --git a/src/index.ts b/src/index.ts
index 9aa8f3db22..5b8a8e0802 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -86,7 +86,7 @@ export { Logo } from './components/Footer/Logo/Logo'
 export { SocialLinks } from './components/Footer/SocialLinks/SocialLinks'
 
 /** Modal components */
-export { Modal } from './components/Modal/Modal'
+export { Modal, ModalProps } from './components/Modal/Modal'
 export { ModalOpenButton } from './components/Modal/ModalOpenButton'
 export { useModal } from './components/Modal/utils'
 export { ModalHeading } from './components/Modal/ModalHeading/ModalHeading'

From 7a4aeff545ccfc3ed0e4b46ec596e3c311e1b533 Mon Sep 17 00:00:00 2001
From: Suzanne Rozier <suz@truss.works>
Date: Fri, 1 Oct 2021 12:58:19 -0500
Subject: [PATCH 25/38] Style body padding when modal opens

---
 src/components/Modal/Modal.test.tsx | 44 ++++++++++++++++++++++++++++-
 src/components/Modal/Modal.tsx      | 31 +++++++++++++++++---
 src/components/Modal/utils.ts       | 24 ++++++++++++++++
 3 files changed, 94 insertions(+), 5 deletions(-)

diff --git a/src/components/Modal/Modal.test.tsx b/src/components/Modal/Modal.test.tsx
index ca9ae51b30..362de69166 100644
--- a/src/components/Modal/Modal.test.tsx
+++ b/src/components/Modal/Modal.test.tsx
@@ -3,6 +3,14 @@ import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
 import { Modal } from './Modal'
+import { getScrollbarWidth } from './utils'
+
+jest.mock('./utils')
+
+const mockedGetScrollbarWidth = getScrollbarWidth as jest.MockedFunction<
+  typeof getScrollbarWidth
+>
+mockedGetScrollbarWidth.mockReturnValue('15px')
 
 describe('Modal component', () => {
   it('renders its children inside a modal wrapper', () => {
@@ -136,7 +144,6 @@ describe('Modal component', () => {
 
   describe('toggling', () => {
     it('styles the body element', () => {
-      // TODO - body padding
       const closeModal = jest.fn()
       const { rerender, baseElement } = render(
         <Modal id="testModal" isOpen={false} closeModal={closeModal}>
@@ -145,6 +152,39 @@ describe('Modal component', () => {
       )
 
       expect(baseElement).not.toHaveClass('usa-js-modal--active')
+      expect(baseElement).not.toHaveStyle('padding-right: 0px')
+
+      rerender(
+        <Modal id="testModal" isOpen={true} closeModal={closeModal}>
+          Test modal
+        </Modal>
+      )
+
+      expect(baseElement).toHaveClass('usa-js-modal--active')
+      expect(baseElement).toHaveStyle('padding-right: 15px')
+
+      rerender(
+        <Modal id="testModal" isOpen={false} closeModal={closeModal}>
+          Test modal
+        </Modal>
+      )
+
+      expect(baseElement).not.toHaveClass('usa-js-modal--active')
+      expect(baseElement).toHaveStyle('padding-right: 0px')
+    })
+
+    it('styles the body element when it already has padding right', () => {
+      const closeModal = jest.fn()
+      document.body.style.paddingRight = '20px'
+
+      const { rerender, baseElement } = render(
+        <Modal id="testModal" isOpen={false} closeModal={closeModal}>
+          Test modal
+        </Modal>
+      )
+
+      expect(baseElement).not.toHaveClass('usa-js-modal--active')
+      expect(baseElement).toHaveStyle('padding-right: 20px')
 
       rerender(
         <Modal id="testModal" isOpen={true} closeModal={closeModal}>
@@ -153,6 +193,7 @@ describe('Modal component', () => {
       )
 
       expect(baseElement).toHaveClass('usa-js-modal--active')
+      expect(baseElement).toHaveStyle('padding-right: 35px')
 
       rerender(
         <Modal id="testModal" isOpen={false} closeModal={closeModal}>
@@ -161,6 +202,7 @@ describe('Modal component', () => {
       )
 
       expect(baseElement).not.toHaveClass('usa-js-modal--active')
+      expect(baseElement).toHaveStyle('padding-right: 20px')
     })
 
     it('hides other elements from screen readers', () => {
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index c1c4987306..88ec90673c 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useRef } from 'react'
 
-import { ModalHook } from './utils'
+import { ModalHook, getScrollbarWidth } from './utils'
 import { ModalWindow } from './ModalWindow/ModalWindow'
 import { ModalWrapper } from './ModalWrapper/ModalWrapper'
 
@@ -21,8 +21,6 @@ export type ModalProps = ModalComponentProps &
 // modal toggle button (A, button)
 //  - aria-controls=modal ID
 // focus trap
-// createPortal / default to document.body.appendChild?
-// handle body padding
 
 export const Modal = ({
   id,
@@ -35,6 +33,8 @@ export const Modal = ({
   ...divProps
 }: ModalProps): React.ReactElement => {
   const [mounted, setMounted] = useState(false)
+  const initialPaddingRef = useRef<string>()
+  const tempPaddingRef = useRef<string>()
 
   const modalRootSelector = modalRoot || '.usa-modal-wrapper'
 
@@ -42,6 +42,20 @@ export const Modal = ({
   const NON_MODALS_HIDDEN = `[data-modal-hidden]`
 
   useEffect(() => {
+    const SCROLLBAR_WIDTH = getScrollbarWidth()
+    const INITIAL_PADDING =
+      window
+        .getComputedStyle(document.body)
+        .getPropertyValue('padding-right') || '0px'
+
+    const TEMPORARY_PADDING = `${
+      parseInt(INITIAL_PADDING.replace(/px/, ''), 10) +
+      parseInt(SCROLLBAR_WIDTH.replace(/px/, ''), 10)
+    }px`
+
+    initialPaddingRef.current = INITIAL_PADDING
+    tempPaddingRef.current = TEMPORARY_PADDING
+
     setMounted(true)
   }, [])
 
@@ -49,8 +63,17 @@ export const Modal = ({
     if (mounted) {
       const { body } = document
 
+      const INITIAL_PADDING = initialPaddingRef.current
+      const TEMPORARY_PADDING = tempPaddingRef.current
+
+      body.style.paddingRight =
+        (body.style.paddingRight === TEMPORARY_PADDING
+          ? INITIAL_PADDING
+          : TEMPORARY_PADDING) || ''
+
       if (isOpen === true) {
         body.classList.add('usa-js-modal--active')
+
         document.querySelectorAll(NON_MODALS).forEach((el) => {
           el.setAttribute('aria-hidden', 'true')
           el.setAttribute('data-modal-hidden', '')
diff --git a/src/components/Modal/utils.ts b/src/components/Modal/utils.ts
index b6b29d9eea..28890598fd 100644
--- a/src/components/Modal/utils.ts
+++ b/src/components/Modal/utils.ts
@@ -17,3 +17,27 @@ export const useModal = (): ModalHook => {
 
   return { isOpen, openModal, closeModal }
 }
+
+export const getScrollbarWidth = (): string => {
+  // Only run in browser
+  if (typeof document !== undefined) {
+    const outer = document.createElement('div')
+
+    outer.setAttribute(
+      'style',
+      'visibility: hidden; overflow: scroll; ms-overflow-style: scrollbar'
+    )
+
+    document.body.appendChild(outer)
+
+    const inner = document.createElement('div')
+    outer.appendChild(inner)
+
+    const scrollbarWidth = `${outer.offsetWidth - inner.offsetWidth}px`
+    outer.parentNode?.removeChild(outer)
+
+    return scrollbarWidth
+  }
+
+  return ''
+}

From 6d9758ef45cec60a288c39ddb6878cd8151694cc Mon Sep 17 00:00:00 2001
From: Suzanne Rozier <suz@truss.works>
Date: Fri, 1 Oct 2021 13:50:55 -0500
Subject: [PATCH 26/38] Add complete Modal stories

---
 src/components/Modal/Modal.stories.tsx        | 168 ++++++++++++++++++
 src/components/Modal/Modal.tsx                |   2 +-
 src/components/Modal/ModalOpenButton.tsx      |   7 +-
 .../Modal/ModalWindow/ModalWindow.stories.tsx | 117 ------------
 4 files changed, 175 insertions(+), 119 deletions(-)
 create mode 100644 src/components/Modal/Modal.stories.tsx
 delete mode 100644 src/components/Modal/ModalWindow/ModalWindow.stories.tsx

diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
new file mode 100644
index 0000000000..f19f76f88e
--- /dev/null
+++ b/src/components/Modal/Modal.stories.tsx
@@ -0,0 +1,168 @@
+import React from 'react'
+
+import { Modal } from './Modal'
+import { ModalHeading } from './ModalHeading/ModalHeading'
+import { ModalFooter } from './ModalFooter/ModalFooter'
+import { ModalOpenButton } from './ModalOpenButton'
+
+import { Button } from '../Button/Button'
+import { ButtonGroup } from '../ButtonGroup/ButtonGroup'
+import { useModal } from './utils'
+
+export default {
+  title: 'Components/Modal',
+  component: Modal,
+  parameters: {
+    docs: {
+      description: {
+        component: `
+### USWDS 2.0 Modal component
+
+Source: http://designsystem.digital.gov/components/modal
+`,
+      },
+    },
+  },
+}
+
+export const defaultModal = (): React.ReactElement => {
+  const { isOpen, openModal, closeModal } = useModal()
+
+  return (
+    <>
+      <ModalOpenButton
+        handleOpen={openModal}
+        href="#example-modal-1"
+        aria-controls="example-modal-1"
+        onClick={(e) => e.preventDefault()}>
+        Open default modal
+      </ModalOpenButton>
+      <Modal
+        isOpen={isOpen}
+        closeModal={closeModal}
+        id="example-modal-1"
+        aria-labelledby="modal-1-heading"
+        aria-describedby="modal-1-description">
+        <ModalHeading id="modal-1-heading">
+          Are you sure you want to continue?
+        </ModalHeading>
+        <div className="usa-prose">
+          <p id="modal-1-description">
+            You have unsaved changes that will be lost.
+          </p>
+        </div>
+        <ModalFooter>
+          <ButtonGroup>
+            <Button type="button" data-close-modal onClick={closeModal}>
+              Continue without saving
+            </Button>
+            <Button
+              type="button"
+              data-close-modal
+              unstyled
+              className="padding-105 text-center"
+              onClick={closeModal}>
+              Go back
+            </Button>
+          </ButtonGroup>
+        </ModalFooter>
+      </Modal>
+    </>
+  )
+}
+
+export const largeModal = (): React.ReactElement => {
+  const { isOpen, openModal, closeModal } = useModal()
+
+  return (
+    <>
+      <ModalOpenButton
+        handleOpen={openModal}
+        href="#example-modal-2"
+        aria-controls="example-modal-2"
+        onClick={(e) => e.preventDefault()}>
+        Open large modal
+      </ModalOpenButton>
+      <Modal
+        isOpen={isOpen}
+        closeModal={closeModal}
+        isLarge
+        aria-labelledby="modal-2-heading"
+        aria-describedby="modal-2-description"
+        id="example-modal-2">
+        <ModalHeading id="modal-2-heading">
+          Are you sure you want to continue?
+        </ModalHeading>
+        <div className="usa-prose">
+          <p id="modal-2-description">
+            You have unsaved changes that will be lost.
+          </p>
+        </div>
+        <ModalFooter>
+          <ButtonGroup>
+            <Button type="button" data-close-modal onClick={closeModal}>
+              Continue without saving
+            </Button>
+            <Button
+              type="button"
+              data-close-modal
+              unstyled
+              className="padding-105 text-center"
+              onClick={closeModal}>
+              Go back
+            </Button>
+          </ButtonGroup>
+        </ModalFooter>
+      </Modal>
+    </>
+  )
+}
+
+export const forceActionModal = (): React.ReactElement => {
+  const { isOpen, openModal, closeModal } = useModal()
+
+  return (
+    <>
+      <ModalOpenButton
+        handleOpen={openModal}
+        href="#example-modal-3"
+        aria-controls="example-modal-3"
+        onClick={(e) => e.preventDefault()}>
+        Open modal with forced action
+      </ModalOpenButton>
+      <Modal
+        isOpen={isOpen}
+        closeModal={closeModal}
+        forceAction
+        aria-labelledby="modal-3-heading"
+        aria-describedby="modal-3-description"
+        id="example-modal-3">
+        <ModalHeading id="modal-3-heading">
+          Your session will end soon.
+        </ModalHeading>
+        <div className="usa-prose">
+          <p id="modal-3-description">
+            You’ve been inactive for too long. Please choose to stay signed in
+            or sign out. Otherwise, you’ll be signed out automatically in 5
+            minutes.
+          </p>
+        </div>
+        <ModalFooter>
+          <ButtonGroup>
+            <Button type="button" data-close-modal onClick={closeModal}>
+              Yes, stay signed in
+            </Button>
+            <Button
+              type="button"
+              data-close-modal
+              unstyled
+              className="padding-105 text-center"
+              onClick={closeModal}>
+              Sign out
+            </Button>
+          </ButtonGroup>
+        </ModalFooter>
+      </Modal>
+    </>
+  )
+}
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 88ec90673c..dd0fc3b1cc 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -17,10 +17,10 @@ export type ModalProps = ModalComponentProps &
   Pick<ModalHook, 'isOpen' | 'closeModal'> &
   JSX.IntrinsicElements['div']
 
-// isOpen effect
 // modal toggle button (A, button)
 //  - aria-controls=modal ID
 // focus trap
+// click on overlay to close
 
 export const Modal = ({
   id,
diff --git a/src/components/Modal/ModalOpenButton.tsx b/src/components/Modal/ModalOpenButton.tsx
index c1221f7aef..c32b045e8d 100644
--- a/src/components/Modal/ModalOpenButton.tsx
+++ b/src/components/Modal/ModalOpenButton.tsx
@@ -20,13 +20,18 @@ export const ModalOpenButton = ({
   JSX.IntrinsicElements['a']): React.ReactElement<HTMLAnchorElement> => {
   const classes = classnames('usa-button', className)
 
+  const handleClick: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
+    e.preventDefault()
+    handleOpen()
+  }
+
   return (
     <a
       {...props}
       className={classes}
       role="button"
       data-open-modal
-      onClick={handleOpen}>
+      onClick={handleClick}>
       {children}
     </a>
   )
diff --git a/src/components/Modal/ModalWindow/ModalWindow.stories.tsx b/src/components/Modal/ModalWindow/ModalWindow.stories.tsx
deleted file mode 100644
index 4df8de6832..0000000000
--- a/src/components/Modal/ModalWindow/ModalWindow.stories.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import React from 'react'
-
-import { ModalWindow } from './ModalWindow'
-import { ModalFooter } from '../ModalFooter/ModalFooter'
-import { ModalHeading } from '../ModalHeading/ModalHeading'
-
-import { Button } from '../../Button/Button'
-import { ButtonGroup } from '../../ButtonGroup/ButtonGroup'
-
-export default {
-  title: 'Components/Modal/ModalWindow',
-  component: ModalWindow,
-  parameters: {
-    docs: {
-      description: {
-        component: `
-### USWDS 2.0 Modal component
-
-Source: http://designsystem.digital.gov/components/modal
-`,
-      },
-    },
-  },
-}
-
-export const defaultModal = (): React.ReactElement => (
-  <ModalWindow
-    id="example-modal-1"
-    aria-labelledby="modal-1-heading"
-    aria-describedby="modal-1-description">
-    <ModalHeading id="modal-1-heading">
-      Are you sure you want to continue?
-    </ModalHeading>
-    <div className="usa-prose">
-      <p id="modal-1-description">
-        You have unsaved changes that will be lost.
-      </p>
-    </div>
-    <ModalFooter>
-      <ButtonGroup>
-        <Button type="button" data-close-modal>
-          Continue without saving
-        </Button>
-        <Button
-          type="button"
-          data-close-modal
-          unstyled
-          className="padding-105 text-center">
-          Go back
-        </Button>
-      </ButtonGroup>
-    </ModalFooter>
-  </ModalWindow>
-)
-
-export const largeModal = (): React.ReactElement => (
-  <ModalWindow
-    isLarge
-    aria-labelledby="modal-2-heading"
-    aria-describedby="modal-2-description"
-    id="example-modal-2">
-    <ModalHeading id="modal-2-heading">
-      Are you sure you want to continue?
-    </ModalHeading>
-    <div className="usa-prose">
-      <p id="modal-2-description">
-        You have unsaved changes that will be lost.
-      </p>
-    </div>
-    <ModalFooter>
-      <ButtonGroup>
-        <Button type="button" data-close-modal>
-          Continue without saving
-        </Button>
-        <Button
-          type="button"
-          unstyled
-          data-close-modal
-          className="padding-105 text-center">
-          Go back
-        </Button>
-      </ButtonGroup>
-    </ModalFooter>
-  </ModalWindow>
-)
-
-export const modalWithForcedAction = (): React.ReactElement => (
-  <ModalWindow
-    id="example-modal-3"
-    aria-labelledby="modal-3-heading"
-    aria-describedby="modal-3-description"
-    forceAction>
-    <ModalHeading id="modal-3-heading">
-      Your session will end soon.
-    </ModalHeading>
-    <div className="usa-prose">
-      <p id="modal-3-description">
-        You’ve been inactive for too long. Please choose to stay signed in or
-        sign out. Otherwise, you’ll be signed out automatically in 5 minutes.
-      </p>
-    </div>
-    <ModalFooter>
-      <ButtonGroup>
-        <Button type="button" data-close-modal>
-          Yes, stay signed in
-        </Button>
-        <Button
-          type="button"
-          unstyled
-          className="padding-105 text-center"
-          data-close-modal>
-          Sign out
-        </Button>
-      </ButtonGroup>
-    </ModalFooter>
-  </ModalWindow>
-)

From 9c7cf347f311fe8839fbaa6687565a9d283746e0 Mon Sep 17 00:00:00 2001
From: Suzanne Rozier <suz@truss.works>
Date: Fri, 1 Oct 2021 14:54:30 -0500
Subject: [PATCH 27/38] Hook up click on overlay

---
 src/components/Modal/Modal.test.tsx           | 96 +++++++++++++++++--
 src/components/Modal/Modal.tsx                |  4 +-
 .../Modal/ModalWrapper/ModalWrapper.test.tsx  | 14 ++-
 .../Modal/ModalWrapper/ModalWrapper.tsx       | 20 ++--
 4 files changed, 117 insertions(+), 17 deletions(-)

diff --git a/src/components/Modal/Modal.test.tsx b/src/components/Modal/Modal.test.tsx
index 362de69166..40d359b443 100644
--- a/src/components/Modal/Modal.test.tsx
+++ b/src/components/Modal/Modal.test.tsx
@@ -42,12 +42,11 @@ describe('Modal component', () => {
     expect(modalWindow).toHaveAttribute('tabindex', '-1')
     expect(modalWindow).toHaveTextContent('Test modal')
 
-    const closeButton = screen.getByRole('button', {
-      name: 'Close this window',
-    })
-    expect(closeButton).toBeInTheDocument()
-    userEvent.click(closeButton)
-    expect(modalState.closeModal).toHaveBeenCalled()
+    expect(
+      screen.getByRole('button', {
+        name: 'Close this window',
+      })
+    ).toBeInTheDocument()
   })
 
   it('passes aria props to the modal wrapper', () => {
@@ -99,6 +98,47 @@ describe('Modal component', () => {
     expect(modalWrapper).toHaveClass('is-visible')
   })
 
+  it('can click on the close button to close', () => {
+    const modalState = {
+      isOpen: true,
+      closeModal: jest.fn(),
+    }
+
+    const testModalId = 'testModal'
+
+    render(
+      <Modal id={testModalId} {...modalState}>
+        Test modal
+      </Modal>
+    )
+
+    const closeButton = screen.getByRole('button', {
+      name: 'Close this window',
+    })
+    expect(closeButton).toBeInTheDocument()
+    userEvent.click(closeButton)
+    expect(modalState.closeModal).toHaveBeenCalled()
+  })
+
+  it('can click on the overlay to close', () => {
+    const modalState = {
+      isOpen: true,
+      closeModal: jest.fn(),
+    }
+
+    const testModalId = 'testModal'
+
+    render(
+      <Modal id={testModalId} {...modalState}>
+        Test modal
+      </Modal>
+    )
+
+    const overlay = screen.getByTestId('modalOverlay')
+    userEvent.click(overlay)
+    expect(modalState.closeModal).toHaveBeenCalled()
+  })
+
   it('renders a large modalWindow isLarge is true', () => {
     const modalState = {
       isOpen: false,
@@ -344,6 +384,31 @@ describe('Modal component', () => {
     })
 
     describe('if forceAction is true', () => {
+      it('renders with no close button', () => {
+        const modalState = {
+          isOpen: false,
+          closeModal: jest.fn(),
+        }
+
+        const testModalId = 'testModal'
+
+        render(
+          <Modal id={testModalId} {...modalState} forceAction>
+            Test modal
+          </Modal>
+        )
+
+        // Modal wrapper
+        const modalWrapper = screen.getByRole('dialog')
+        expect(modalWrapper).toHaveAttribute('data-force-action', 'true')
+
+        expect(
+          screen.queryByRole('button', {
+            name: 'Close this window',
+          })
+        ).not.toBeInTheDocument()
+      })
+
       it('styles the body element', () => {
         const closeModal = jest.fn()
         const { rerender, baseElement } = render(
@@ -382,6 +447,25 @@ describe('Modal component', () => {
 
         expect(baseElement).not.toHaveClass('usa-js-no-click')
       })
+
+      it('cannot click on the overlay to close', () => {
+        const modalState = {
+          isOpen: true,
+          closeModal: jest.fn(),
+        }
+
+        const testModalId = 'testModal'
+
+        render(
+          <Modal id={testModalId} {...modalState} forceAction>
+            Test modal
+          </Modal>
+        )
+
+        const overlay = screen.getByTestId('modalOverlay')
+        userEvent.click(overlay)
+        expect(modalState.closeModal).not.toHaveBeenCalled()
+      })
     })
   })
 })
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index dd0fc3b1cc..5f0e009819 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -119,7 +119,9 @@ export const Modal = ({
       aria-labelledby={ariaLabelledBy}
       aria-describedby={ariaDescribedBy}
       data-force-action={forceAction}
-      isVisible={isOpen}>
+      isVisible={isOpen}
+      handleClose={closeModal}
+      forceAction={forceAction}>
       <ModalWindow
         modalId={id}
         {...divProps}
diff --git a/src/components/Modal/ModalWrapper/ModalWrapper.test.tsx b/src/components/Modal/ModalWrapper/ModalWrapper.test.tsx
index 5afe523757..c9974ad5ef 100644
--- a/src/components/Modal/ModalWrapper/ModalWrapper.test.tsx
+++ b/src/components/Modal/ModalWrapper/ModalWrapper.test.tsx
@@ -1,14 +1,20 @@
 import React from 'react'
-import { render } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 
 import { ModalWrapper } from './ModalWrapper'
 
 describe('ModalWrapper component', () => {
   it('renders without errors', () => {
-    const { getByTestId } = render(
-      <ModalWrapper isVisible>children</ModalWrapper>
+    render(
+      <ModalWrapper
+        id="testModal"
+        isVisible={false}
+        forceAction={false}
+        handleClose={jest.fn()}>
+        children
+      </ModalWrapper>
     )
 
-    expect(getByTestId('modalWrapper')).toBeInTheDocument()
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
   })
 })
diff --git a/src/components/Modal/ModalWrapper/ModalWrapper.tsx b/src/components/Modal/ModalWrapper/ModalWrapper.tsx
index 66533f185f..36280425fc 100644
--- a/src/components/Modal/ModalWrapper/ModalWrapper.tsx
+++ b/src/components/Modal/ModalWrapper/ModalWrapper.tsx
@@ -2,19 +2,21 @@ import React from 'react'
 import classnames from 'classnames'
 
 interface ModalWrapperProps {
+  id: string
   children: React.ReactNode
   isVisible: boolean
+  forceAction: boolean
+  handleClose: () => void
   className?: string
 }
 
-// Copy attributes from Modal
-// Render into a portal
-// Toggle body classes
-
 export const ModalWrapper = ({
+  id,
   children,
   isVisible,
+  forceAction,
   className,
+  handleClose,
   ...divProps
 }: ModalWrapperProps & JSX.IntrinsicElements['div']): React.ReactElement => {
   const classes = classnames(
@@ -26,9 +28,15 @@ export const ModalWrapper = ({
     className
   )
 
+  /* eslint-disable jsx-a11y/click-events-have-key-events */
+  /* eslint-disable jsx-a11y/no-static-element-interactions */
   return (
-    <div {...divProps} className={classes} role="dialog">
-      <div data-testid="modalOverlay" className="usa-modal-overlay">
+    <div {...divProps} id={id} className={classes} role="dialog">
+      <div
+        data-testid="modalOverlay"
+        className="usa-modal-overlay"
+        onClick={forceAction ? undefined : handleClose}
+        aria-controls={id}>
         {children}
       </div>
     </div>

From 6cff7784b8362703d47678e7519cf12caf521470 Mon Sep 17 00:00:00 2001
From: Suzanne Rozier <suz@truss.works>
Date: Mon, 4 Oct 2021 12:12:32 -0500
Subject: [PATCH 28/38] Adding focus, event handlers, tests

---
 package.json                                  |   1 +
 src/components/Button/Button.tsx              | 132 ++++---
 src/components/Modal/Modal.stories.tsx        |  50 +++
 src/components/Modal/Modal.test.tsx           | 374 ++++++++++++++++--
 src/components/Modal/Modal.tsx                |  68 ++--
 .../ModalCloseButton/ModalCloseButton.tsx     |  43 +-
 src/components/Modal/ModalOpenButton.tsx      |   4 +-
 .../Modal/ModalWindow/ModalWindow.tsx         |  73 ++--
 .../Modal/ModalWrapper/ModalWrapper.tsx       |  65 +--
 src/components/Modal/utils.ts                 |  29 +-
 yarn.lock                                     |  33 +-
 11 files changed, 658 insertions(+), 214 deletions(-)

diff --git a/package.json b/package.json
index 23aa197605..b6b3c5ee2e 100644
--- a/package.json
+++ b/package.json
@@ -103,6 +103,7 @@
     "eslint-plugin-react": "^7.16.0",
     "eslint-plugin-react-hooks": "^4.0.0",
     "eslint-plugin-security": "^1.4.0",
+    "focus-trap-react": "^8.8.1",
     "happo-plugin-storybook": "^2.7.0",
     "happo.io": "^6.0.0",
     "husky": "^4.3.8",
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index ae0d66e687..a6f55f4456 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import classnames from 'classnames'
 import { deprecationWarning } from '../../deprecation'
 
@@ -30,72 +30,80 @@ interface ButtonProps {
   unstyled?: boolean
 }
 
-export const Button = ({
-  type,
-  children,
-  secondary,
-  base,
-  accent,
-  accentStyle,
-  outline,
-  inverse,
-  size,
-  big,
-  small,
-  icon,
-  unstyled,
-  onClick,
-  className,
-  ...defaultProps
-}: ButtonProps & JSX.IntrinsicElements['button']): React.ReactElement => {
-  if (big) {
-    deprecationWarning('Button property big is deprecated.  Use size.')
-  }
+export const Button = forwardRef(
+  (
+    {
+      type,
+      children,
+      secondary,
+      base,
+      accent,
+      accentStyle,
+      outline,
+      inverse,
+      size,
+      big,
+      small,
+      icon,
+      unstyled,
+      onClick,
+      className,
+      ...defaultProps
+    }: ButtonProps & JSX.IntrinsicElements['button'],
+    ref: React.ForwardedRef<HTMLButtonElement>
+  ): React.ReactElement => {
+    if (big) {
+      deprecationWarning('Button property big is deprecated.  Use size.')
+    }
 
-  if (icon) {
-    deprecationWarning('Button property icon is deprecated.')
-  }
+    if (icon) {
+      deprecationWarning('Button property icon is deprecated.')
+    }
 
-  if (accent) {
-    deprecationWarning('Button property accent is deprecated. Use accentStyle.')
-  }
+    if (accent) {
+      deprecationWarning(
+        'Button property accent is deprecated. Use accentStyle.'
+      )
+    }
 
-  const isBig = size ? size === 'big' : big
-  const isSmall = size ? size === 'small' : small
+    const isBig = size ? size === 'big' : big
+    const isSmall = size ? size === 'small' : small
 
-  if (isSmall) {
-    deprecationWarning(
-      'Small button is deprecated. Use the default, pass in a custom className, or use size big.'
-    )
-  }
+    if (isSmall) {
+      deprecationWarning(
+        'Small button is deprecated. Use the default, pass in a custom className, or use size big.'
+      )
+    }
 
-  const classes = classnames(
-    'usa-button',
-    {
-      'usa-button--secondary': secondary,
-      'usa-button--base': base,
-      'usa-button--accent-cool': accent || accentStyle === 'cool',
-      'usa-button--accent-warm': accentStyle === 'warm',
-      'usa-button--outline': outline,
-      'usa-button--inverse': inverse,
-      'usa-button--big': isBig,
-      'usa-button--small': isSmall,
-      'usa-button--icon': icon,
-      'usa-button--unstyled': unstyled,
-    },
-    className
-  )
+    const classes = classnames(
+      'usa-button',
+      {
+        'usa-button--secondary': secondary,
+        'usa-button--base': base,
+        'usa-button--accent-cool': accent || accentStyle === 'cool',
+        'usa-button--accent-warm': accentStyle === 'warm',
+        'usa-button--outline': outline,
+        'usa-button--inverse': inverse,
+        'usa-button--big': isBig,
+        'usa-button--small': isSmall,
+        'usa-button--icon': icon,
+        'usa-button--unstyled': unstyled,
+      },
+      className
+    )
 
-  return (
-    <button
-      type={type}
-      className={classes}
-      onClick={onClick}
-      data-testid="button"
-      {...defaultProps}>
-      {children}
-    </button>
-  )
-}
+    return (
+      <button
+        type={type}
+        className={classes}
+        onClick={onClick}
+        data-testid="button"
+        ref={ref}
+        {...defaultProps}>
+        {children}
+      </button>
+    )
+  }
+)
 
 export default Button
diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
index f19f76f88e..5c7b3cccd2 100644
--- a/src/components/Modal/Modal.stories.tsx
+++ b/src/components/Modal/Modal.stories.tsx
@@ -166,3 +166,53 @@ export const forceActionModal = (): React.ReactElement => {
     </>
   )
 }
+
+export const customFocusElementModal = (): React.ReactElement => {
+  const { isOpen, openModal, closeModal } = useModal()
+
+  return (
+    <>
+      <ModalOpenButton
+        handleOpen={openModal}
+        href="#example-modal-1"
+        aria-controls="example-modal-1"
+        onClick={(e) => e.preventDefault()}>
+        Open modal with custom initial focus element
+      </ModalOpenButton>
+      <Modal
+        isOpen={isOpen}
+        closeModal={closeModal}
+        id="example-modal-1"
+        aria-labelledby="modal-1-heading"
+        aria-describedby="modal-1-description">
+        <ModalHeading id="modal-1-heading">
+          Are you sure you want to continue?
+        </ModalHeading>
+        <div className="usa-prose">
+          <p id="modal-1-description">
+            You have unsaved changes that will be lost.
+          </p>
+          <button type="button">Decoy button</button>
+          <button type="button" data-focus="true">
+            Focus me first
+          </button>
+        </div>
+        <ModalFooter>
+          <ButtonGroup>
+            <Button type="button" data-close-modal onClick={closeModal}>
+              Continue without saving
+            </Button>
+            <Button
+              type="button"
+              data-close-modal
+              unstyled
+              className="padding-105 text-center"
+              onClick={closeModal}>
+              Go back
+            </Button>
+          </ButtonGroup>
+        </ModalFooter>
+      </Modal>
+    </>
+  )
+}
diff --git a/src/components/Modal/Modal.test.tsx b/src/components/Modal/Modal.test.tsx
index 40d359b443..006d5cd84e 100644
--- a/src/components/Modal/Modal.test.tsx
+++ b/src/components/Modal/Modal.test.tsx
@@ -1,16 +1,183 @@
 import React from 'react'
-import { render, screen } from '@testing-library/react'
+import { render, screen, waitFor, fireEvent } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
 import { Modal } from './Modal'
-import { getScrollbarWidth } from './utils'
-
-jest.mock('./utils')
+import { useModal } from './utils'
+import { ModalHeading } from './ModalHeading/ModalHeading'
+import { ModalFooter } from './ModalFooter/ModalFooter'
+import { ModalOpenButton } from './ModalOpenButton'
+import { Button } from '../Button/Button'
+import { ButtonGroup } from '../ButtonGroup/ButtonGroup'
+
+jest.mock('./utils', () => {
+  const utils = jest.requireActual('./utils')
+
+  return {
+    __esModule: true,
+    ...utils,
+    getScrollbarWidth: jest.fn().mockReturnValue('15px'),
+  }
+})
 
-const mockedGetScrollbarWidth = getScrollbarWidth as jest.MockedFunction<
-  typeof getScrollbarWidth
->
-mockedGetScrollbarWidth.mockReturnValue('15px')
+const ExampleModal = ({
+  forceAction = false,
+}: {
+  forceAction?: boolean
+}): React.ReactElement => {
+  const { isOpen, openModal, closeModal } = useModal()
+
+  return (
+    <>
+      <ModalOpenButton
+        handleOpen={openModal}
+        href="#example-modal-1"
+        aria-controls="example-modal-1"
+        onClick={(e) => e.preventDefault()}>
+        Open default modal
+      </ModalOpenButton>
+      <Modal
+        isOpen={isOpen}
+        closeModal={closeModal}
+        id="example-modal-1"
+        aria-labelledby="modal-1-heading"
+        aria-describedby="modal-1-description"
+        forceAction={forceAction}>
+        <ModalHeading id="modal-1-heading">
+          Are you sure you want to continue?
+        </ModalHeading>
+        <div className="usa-prose">
+          <p id="modal-1-description">
+            You have unsaved changes that will be lost.
+          </p>
+        </div>
+        <ModalFooter>
+          <ButtonGroup>
+            <Button type="button" data-close-modal onClick={closeModal}>
+              Continue without saving
+            </Button>
+            <Button
+              type="button"
+              data-close-modal
+              unstyled
+              className="padding-105 text-center"
+              onClick={closeModal}>
+              Go back
+            </Button>
+          </ButtonGroup>
+        </ModalFooter>
+      </Modal>
+    </>
+  )
+}
+
+const ExampleModalWithDoubleOpen = ({
+  openCallback,
+}: {
+  openCallback: () => void
+}): React.ReactElement => {
+  const { isOpen, openModal, closeModal } = useModal()
+
+  const handleDoubleOpen = (e: React.MouseEvent) => {
+    if (openModal(e)) {
+      openCallback()
+    }
+  }
+
+  return (
+    <>
+      <ModalOpenButton
+        handleOpen={openModal}
+        href="#example-modal-1"
+        aria-controls="example-modal-1"
+        onClick={(e) => e.preventDefault()}>
+        Open default modal
+      </ModalOpenButton>
+      <Modal
+        isOpen={isOpen}
+        closeModal={closeModal}
+        id="example-modal-1"
+        aria-labelledby="modal-1-heading"
+        aria-describedby="modal-1-description">
+        <ModalHeading id="modal-1-heading">
+          Are you sure you want to continue?
+        </ModalHeading>
+        <div className="usa-prose">
+          <p id="modal-1-description">
+            You have unsaved changes that will be lost.
+          </p>
+          <button type="button" onClick={handleDoubleOpen}>
+            This button should not do anything
+          </button>
+        </div>
+        <ModalFooter>
+          <ButtonGroup>
+            <Button type="button" data-close-modal onClick={closeModal}>
+              Continue without saving
+            </Button>
+            <Button
+              type="button"
+              data-close-modal
+              unstyled
+              className="padding-105 text-center"
+              onClick={closeModal}>
+              Go back
+            </Button>
+          </ButtonGroup>
+        </ModalFooter>
+      </Modal>
+    </>
+  )
+}
+
+const ExampleModalWithFocusElement = (): React.ReactElement => {
+  const { isOpen, openModal, closeModal } = useModal()
+
+  return (
+    <>
+      <ModalOpenButton
+        handleOpen={openModal}
+        href="#example-modal-1"
+        aria-controls="example-modal-1"
+        onClick={(e) => e.preventDefault()}>
+        Open default modal
+      </ModalOpenButton>
+      <Modal
+        isOpen={isOpen}
+        closeModal={closeModal}
+        id="example-modal-1"
+        aria-labelledby="modal-1-heading"
+        aria-describedby="modal-1-description">
+        <ModalHeading id="modal-1-heading">
+          Are you sure you want to continue?
+        </ModalHeading>
+        <div className="usa-prose">
+          <p id="modal-1-description">
+            You have unsaved changes that will be lost.
+          </p>
+          <button type="button" data-focus="true">
+            Focus me first
+          </button>
+        </div>
+        <ModalFooter>
+          <ButtonGroup>
+            <Button type="button" data-close-modal onClick={closeModal}>
+              Continue without saving
+            </Button>
+            <Button
+              type="button"
+              data-close-modal
+              unstyled
+              className="padding-105 text-center"
+              onClick={closeModal}>
+              Go back
+            </Button>
+          </ButtonGroup>
+        </ModalFooter>
+      </Modal>
+    </>
+  )
+}
 
 describe('Modal component', () => {
   it('renders its children inside a modal wrapper', () => {
@@ -383,32 +550,155 @@ describe('Modal component', () => {
       expect(screen.getByTestId('hidden')).toHaveAttribute('aria-hidden')
     })
 
-    describe('if forceAction is true', () => {
-      it('renders with no close button', () => {
-        const modalState = {
-          isOpen: false,
-          closeModal: jest.fn(),
-        }
+    it('stops event propagation if toggle modal is called from within a modal', () => {
+      const mockOpenCallback = jest.fn()
 
-        const testModalId = 'testModal'
+      render(<ExampleModalWithDoubleOpen openCallback={mockOpenCallback} />, {
+        container: document.body,
+      })
 
-        render(
-          <Modal id={testModalId} {...modalState} forceAction>
-            Test modal
-          </Modal>
-        )
+      const openButton = screen.getByRole('button', {
+        name: 'Open default modal',
+      })
+
+      userEvent.click(openButton)
+
+      userEvent.click(
+        screen.getByRole('button', {
+          name: 'This button should not do anything',
+        })
+      )
+
+      expect(mockOpenCallback).not.toHaveBeenCalled()
+    })
+
+    describe('focusing', () => {
+      it('activates a focus trap', async () => {
+        render(<ExampleModal />, {
+          container: document.body,
+        })
+
+        const openButton = screen.getByRole('button', {
+          name: 'Open default modal',
+        })
+
+        userEvent.click(openButton)
 
-        // Modal wrapper
-        const modalWrapper = screen.getByRole('dialog')
-        expect(modalWrapper).toHaveAttribute('data-force-action', 'true')
+        await waitFor(() => {
+          expect(screen.getByRole('dialog')).toHaveClass('is-visible')
+          expect(screen.getByTestId('modalWindow')).toHaveFocus()
+        })
 
+        userEvent.tab()
         expect(
-          screen.queryByRole('button', {
-            name: 'Close this window',
+          screen.getByRole('button', { name: 'Continue without saving' })
+        ).toHaveFocus()
+
+        userEvent.tab()
+        expect(screen.getByRole('button', { name: 'Go back' })).toHaveFocus()
+
+        userEvent.tab()
+        expect(
+          screen.getByRole('button', { name: 'Close this window' })
+        ).toHaveFocus()
+
+        userEvent.tab()
+        expect(
+          screen.getByRole('button', { name: 'Continue without saving' })
+        ).toHaveFocus()
+      })
+
+      it('returns focus to the opener element on close', async () => {
+        render(<ExampleModal />, {
+          container: document.body,
+        })
+
+        const openButton = screen.getByRole('button', {
+          name: 'Open default modal',
+        })
+
+        userEvent.click(openButton)
+
+        await waitFor(() => {
+          expect(screen.getByRole('dialog')).toHaveClass('is-visible')
+          expect(screen.getByTestId('modalWindow')).toHaveFocus()
+        })
+
+        userEvent.tab()
+        expect(
+          screen.getByRole('button', {
+            name: 'Continue without saving',
+          })
+        ).toHaveFocus()
+
+        userEvent.click(
+          screen.getByRole('button', { name: 'Close this window' })
+        )
+
+        expect(
+          screen.getByRole('button', {
+            name: 'Open default modal',
           })
-        ).not.toBeInTheDocument()
+        ).toHaveFocus()
+      })
+
+      it('the escape key closes the modal', async () => {
+        render(<ExampleModal />, {
+          container: document.body,
+        })
+
+        const openButton = screen.getByRole('button', {
+          name: 'Open default modal',
+        })
+
+        userEvent.click(openButton)
+
+        await waitFor(() => {
+          expect(screen.getByRole('dialog')).toHaveClass('is-visible')
+          expect(screen.getByTestId('modalWindow')).toHaveFocus()
+        })
+
+        fireEvent.keyDown(screen.getByTestId('modalWindow'), { key: 'Escape' })
+
+        await waitFor(() => {
+          expect(screen.getByRole('dialog')).not.toHaveClass('is-visible')
+
+          expect(
+            screen.getByRole('button', {
+              name: 'Open default modal',
+            })
+          ).toHaveFocus()
+        })
       })
 
+      it('can pass in a custom onFocus element', async () => {
+        render(<ExampleModalWithFocusElement />, {
+          container: document.body,
+        })
+
+        const openButton = screen.getByRole('button', {
+          name: 'Open default modal',
+        })
+
+        userEvent.click(openButton)
+
+        await waitFor(() => {
+          expect(screen.getByRole('dialog')).toHaveClass('is-visible')
+          expect(
+            screen.getByRole('button', { name: 'Focus me first' })
+          ).toHaveFocus()
+        })
+      })
+    })
+
+    describe('if forceAction is true', () => {
+      const testModalChildren = (
+        <div>
+          <p>Test modal</p>
+          <a href="#test">Focus target</a>
+        </div>
+      )
+
       it('styles the body element', () => {
         const closeModal = jest.fn()
         const { rerender, baseElement } = render(
@@ -417,7 +707,7 @@ describe('Modal component', () => {
             isOpen={false}
             closeModal={closeModal}
             forceAction>
-            Test modal
+            {testModalChildren}
           </Modal>
         )
 
@@ -429,7 +719,7 @@ describe('Modal component', () => {
             isOpen={true}
             closeModal={closeModal}
             forceAction>
-            Test modal
+            {testModalChildren}
           </Modal>
         )
 
@@ -441,7 +731,7 @@ describe('Modal component', () => {
             isOpen={false}
             closeModal={closeModal}
             forceAction>
-            Test modal
+            {testModalChildren}
           </Modal>
         )
 
@@ -458,7 +748,7 @@ describe('Modal component', () => {
 
         render(
           <Modal id={testModalId} {...modalState} forceAction>
-            Test modal
+            {testModalChildren}
           </Modal>
         )
 
@@ -466,6 +756,30 @@ describe('Modal component', () => {
         userEvent.click(overlay)
         expect(modalState.closeModal).not.toHaveBeenCalled()
       })
+
+      it('the escape key does not close the modal', async () => {
+        render(<ExampleModal forceAction />, {
+          container: document.body,
+        })
+
+        const openButton = screen.getByRole('button', {
+          name: 'Open default modal',
+        })
+
+        userEvent.click(openButton)
+
+        await waitFor(() => {
+          expect(screen.getByRole('dialog')).toHaveClass('is-visible')
+          expect(screen.getByTestId('modalWindow')).toHaveFocus()
+        })
+
+        fireEvent.keyDown(screen.getByTestId('modalWindow'), { key: 'Escape' })
+
+        await waitFor(() => {
+          expect(screen.getByRole('dialog')).toHaveClass('is-visible')
+          expect(screen.getByTestId('modalWindow')).toHaveFocus()
+        })
+      })
     })
   })
 })
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 5f0e009819..fb1d801145 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react'
+import FocusTrap from 'focus-trap-react'
 
 import { ModalHook, getScrollbarWidth } from './utils'
 import { ModalWindow } from './ModalWindow/ModalWindow'
@@ -17,10 +18,9 @@ export type ModalProps = ModalComponentProps &
   Pick<ModalHook, 'isOpen' | 'closeModal'> &
   JSX.IntrinsicElements['div']
 
-// modal toggle button (A, button)
+// TODO:
+// decide how to handle modal toggle button (anchor, button)
 //  - aria-controls=modal ID
-// focus trap
-// click on overlay to close
 
 export const Modal = ({
   id,
@@ -35,6 +35,8 @@ export const Modal = ({
   const [mounted, setMounted] = useState(false)
   const initialPaddingRef = useRef<string>()
   const tempPaddingRef = useRef<string>()
+  const modalEl = useRef<HTMLDivElement>(null)
+  const closeButtonEl = useRef<HTMLButtonElement>(null)
 
   const modalRootSelector = modalRoot || '.usa-modal-wrapper'
 
@@ -112,26 +114,48 @@ export const Modal = ({
   delete divProps['aria-labelledby']
   delete divProps['aria-describedby']
 
+  const initialFocus = () => {
+    const focusEl = modalEl.current?.querySelector('[data-focus]') as
+      | HTMLElement
+      | SVGElement
+
+    return focusEl ? focusEl : modalEl.current || false
+  }
+
+  const focusTrapOptions = {
+    initialFocus,
+    escapeDeactivates: (): boolean => {
+      if (forceAction) return false
+
+      closeModal()
+      return true
+    },
+  }
+
   return (
-    <ModalWrapper
-      role="dialog"
-      id={id}
-      aria-labelledby={ariaLabelledBy}
-      aria-describedby={ariaDescribedBy}
-      data-force-action={forceAction}
-      isVisible={isOpen}
-      handleClose={closeModal}
-      forceAction={forceAction}>
-      <ModalWindow
-        modalId={id}
-        {...divProps}
-        isLarge={isLarge}
-        forceAction={forceAction}
-        tabIndex={-1}
-        handleClose={closeModal}>
-        {children}
-      </ModalWindow>
-    </ModalWrapper>
+    <FocusTrap active={isOpen} focusTrapOptions={focusTrapOptions}>
+      <ModalWrapper
+        role="dialog"
+        id={id}
+        aria-labelledby={ariaLabelledBy}
+        aria-describedby={ariaDescribedBy}
+        data-force-action={forceAction}
+        isVisible={isOpen}
+        handleClose={closeModal}
+        forceAction={forceAction}>
+        <ModalWindow
+          modalId={id}
+          {...divProps}
+          ref={modalEl}
+          closeButtonRef={closeButtonEl}
+          isLarge={isLarge}
+          forceAction={forceAction}
+          tabIndex={-1}
+          handleClose={closeModal}>
+          {children}
+        </ModalWindow>
+      </ModalWrapper>
+    </FocusTrap>
   )
 }
 
diff --git a/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx b/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx
index 3997671e38..e282bab27f 100644
--- a/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx
+++ b/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { IconClose } from '../../Icon/Icons'
 import { Button } from '../../Button/Button'
 
@@ -8,20 +8,27 @@ interface ModalCloseButtonProps {
 
 // TODO - accept custom aria-label
 
-export const ModalCloseButton = ({
-  handleClose,
-  ...buttonProps
-}: ModalCloseButtonProps &
-  JSX.IntrinsicElements['button']): React.ReactElement => {
-  return (
-    <Button
-      className="usa-modal__close"
-      aria-label="Close this window"
-      onClick={handleClose}
-      data-close-modal
-      type="button"
-      {...buttonProps}>
-      <IconClose aria-hidden="true" />
-    </Button>
-  )
-}
+export const ModalCloseButton = forwardRef(
+  (
+    {
+      handleClose,
+      ...buttonProps
+    }: ModalCloseButtonProps & JSX.IntrinsicElements['button'],
+    ref: React.ForwardedRef<HTMLButtonElement>
+  ): React.ReactElement => {
+    return (
+      <Button
+        {...buttonProps}
+        className="usa-modal__close"
+        aria-label="Close this window"
+        onClick={handleClose}
+        data-close-modal
+        type="button"
+        ref={ref}>
+        <IconClose aria-hidden="true" />
+      </Button>
+    )
+  }
+)
+
+ModalCloseButton.displayName = 'ModalCloseButton'
diff --git a/src/components/Modal/ModalOpenButton.tsx b/src/components/Modal/ModalOpenButton.tsx
index c32b045e8d..4ed63dcaa1 100644
--- a/src/components/Modal/ModalOpenButton.tsx
+++ b/src/components/Modal/ModalOpenButton.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 type ModalOpenButtonProps = {
-  handleOpen: () => void
+  handleOpen: (e: React.MouseEvent) => void
 }
 
 // TODO - support <a> or <button> element
@@ -22,7 +22,7 @@ export const ModalOpenButton = ({
 
   const handleClick: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
     e.preventDefault()
-    handleOpen()
+    handleOpen(e)
   }
 
   return (
diff --git a/src/components/Modal/ModalWindow/ModalWindow.tsx b/src/components/Modal/ModalWindow/ModalWindow.tsx
index ec69b1a26f..16bc14972e 100644
--- a/src/components/Modal/ModalWindow/ModalWindow.tsx
+++ b/src/components/Modal/ModalWindow/ModalWindow.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import classnames from 'classnames'
 
 import { ModalCloseButton } from '../ModalCloseButton/ModalCloseButton'
@@ -10,38 +10,49 @@ interface ModalWindowProps {
   className?: string
   isLarge?: boolean
   forceAction?: boolean
+  closeButtonRef: React.ForwardedRef<HTMLButtonElement>
 }
 
-export const ModalWindow = ({
-  modalId,
-  className,
-  children,
-  handleClose,
-  isLarge = false,
-  forceAction = false,
-  ...divProps
-}: ModalWindowProps & JSX.IntrinsicElements['div']): React.ReactElement => {
-  const classes = classnames(
-    'usa-modal',
+export const ModalWindow = forwardRef(
+  (
     {
-      'usa-modal--lg': isLarge,
-    },
-    className
-  )
+      modalId,
+      className,
+      children,
+      handleClose,
+      isLarge = false,
+      forceAction = false,
+      closeButtonRef,
+      ...divProps
+    }: ModalWindowProps & JSX.IntrinsicElements['div'],
+    ref: React.ForwardedRef<HTMLDivElement>
+  ): React.ReactElement => {
+    const classes = classnames(
+      'usa-modal',
+      {
+        'usa-modal--lg': isLarge,
+      },
+      className
+    )
 
-  // needs a unique ID
-  return (
-    <div
-      data-testid="modalWindow"
-      className={classes}
-      {...divProps}
-      data-force-action={forceAction}>
-      <div className="usa-modal__content">
-        <div className="usa-modal__main">{children}</div>
-        {!forceAction && (
-          <ModalCloseButton aria-controls={modalId} handleClose={handleClose} />
-        )}
+    return (
+      <div
+        {...divProps}
+        data-testid="modalWindow"
+        className={classes}
+        ref={ref}
+        data-force-action={forceAction}>
+        <div className="usa-modal__content">
+          <div className="usa-modal__main">{children}</div>
+          {!forceAction && (
+            <ModalCloseButton
+              aria-controls={modalId}
+              handleClose={handleClose}
+              ref={closeButtonRef}
+            />
+          )}
+        </div>
       </div>
-    </div>
-  )
-}
+    )
+  }
+)
diff --git a/src/components/Modal/ModalWrapper/ModalWrapper.tsx b/src/components/Modal/ModalWrapper/ModalWrapper.tsx
index 36280425fc..33b8174a8c 100644
--- a/src/components/Modal/ModalWrapper/ModalWrapper.tsx
+++ b/src/components/Modal/ModalWrapper/ModalWrapper.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import classnames from 'classnames'
 
 interface ModalWrapperProps {
@@ -10,37 +10,42 @@ interface ModalWrapperProps {
   className?: string
 }
 
-export const ModalWrapper = ({
-  id,
-  children,
-  isVisible,
-  forceAction,
-  className,
-  handleClose,
-  ...divProps
-}: ModalWrapperProps & JSX.IntrinsicElements['div']): React.ReactElement => {
-  const classes = classnames(
-    'usa-modal-wrapper',
+export const ModalWrapper = forwardRef(
+  (
     {
-      'is-visible': isVisible,
-      'is-hidden': !isVisible,
-    },
-    className
-  )
+      id,
+      children,
+      isVisible,
+      forceAction,
+      className,
+      handleClose,
+      ...divProps
+    }: ModalWrapperProps & JSX.IntrinsicElements['div'],
+    ref: React.ForwardedRef<HTMLDivElement>
+  ): React.ReactElement => {
+    const classes = classnames(
+      'usa-modal-wrapper',
+      {
+        'is-visible': isVisible,
+        'is-hidden': !isVisible,
+      },
+      className
+    )
 
-  /* eslint-disable jsx-a11y/click-events-have-key-events */
-  /* eslint-disable jsx-a11y/no-static-element-interactions */
-  return (
-    <div {...divProps} id={id} className={classes} role="dialog">
-      <div
-        data-testid="modalOverlay"
-        className="usa-modal-overlay"
-        onClick={forceAction ? undefined : handleClose}
-        aria-controls={id}>
-        {children}
+    /* eslint-disable jsx-a11y/click-events-have-key-events */
+    /* eslint-disable jsx-a11y/no-static-element-interactions */
+    return (
+      <div {...divProps} ref={ref} id={id} className={classes} role="dialog">
+        <div
+          data-testid="modalOverlay"
+          className="usa-modal-overlay"
+          onClick={forceAction ? undefined : handleClose}
+          aria-controls={id}>
+          {children}
+        </div>
       </div>
-    </div>
-  )
-}
+    )
+  }
+)
 
 export default ModalWrapper
diff --git a/src/components/Modal/utils.ts b/src/components/Modal/utils.ts
index 28890598fd..2b9b0aba16 100644
--- a/src/components/Modal/utils.ts
+++ b/src/components/Modal/utils.ts
@@ -1,18 +1,37 @@
-import { useState } from 'react'
+import React, { useState } from 'react'
 
 export type ModalHook = {
   isOpen: boolean
-  openModal: () => void
+  openModal: (e?: React.MouseEvent) => boolean
   closeModal: () => void
 }
 
 export const useModal = (): ModalHook => {
   const [isOpen, setIsOpen] = useState(false)
 
-  // TODO - set opener element to return focus to
-  // TODO - useEffect on body element
+  const openModal = (e?: React.MouseEvent): boolean => {
+    const clickedElement = e?.target as Element
+
+    if (e && clickedElement) {
+      if (clickedElement.closest('.usa-modal')) {
+        // Element is inside a modal
+        if (
+          clickedElement.hasAttribute('[data-close-modal]') ||
+          clickedElement.closest('[data-close-modal]')
+        ) {
+          // Element is a close button - proceed
+        } else {
+          // Don't allow opening a modal from within a modal
+          e.stopPropagation()
+          return false
+        }
+      }
+    }
+
+    setIsOpen(true)
+    return true
+  }
 
-  const openModal = (): void => setIsOpen(true)
   const closeModal = (): void => setIsOpen(false)
 
   return { isOpen, openModal, closeModal }
diff --git a/yarn.lock b/yarn.lock
index d2e9451f5e..54db9c94c3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1460,20 +1460,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-transform-shorthand-properties@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.14.5.tgz#97f13855f1409338d8cadcbaca670ad79e091a58"
-  integrity sha512-xLucks6T1VmGsTB+GWK5Pl9Jl5+nRXD1uoFdA5TSO6xtiNjtXTjKkmPdFXVLGlK5A2/or/wQMKfmQ2Y0XJfn5g==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.14.5"
-
-"@babel/plugin-transform-shorthand-properties@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.14.5.tgz#97f13855f1409338d8cadcbaca670ad79e091a58"
-  integrity sha512-xLucks6T1VmGsTB+GWK5Pl9Jl5+nRXD1uoFdA5TSO6xtiNjtXTjKkmPdFXVLGlK5A2/or/wQMKfmQ2Y0XJfn5g==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.14.5"
-
 "@babel/plugin-transform-spread@^7.12.1", "@babel/plugin-transform-spread@^7.13.0":
   version "7.13.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.13.0.tgz#84887710e273c1815ace7ae459f6f42a5d31d5fd"
@@ -8288,6 +8274,20 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+focus-trap-react@^8.8.1:
+  version "8.8.1"
+  resolved "https://registry.yarnpkg.com/focus-trap-react/-/focus-trap-react-8.8.1.tgz#2c7043e748460a191a1c7e2552e7c964f3f9fd46"
+  integrity sha512-Uy7U/l3fozlwLYBSQHP91QjuRUUcAQ9FJ3glAGmwF/fXSiPa/4negTy02zWElLZdZDPIfebC8V14aI1Gzc5V3w==
+  dependencies:
+    focus-trap "^6.7.1"
+
+focus-trap@^6.7.1:
+  version "6.7.1"
+  resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-6.7.1.tgz#d474f86dbaf3c7fbf0d53cf0b12295f4f4068d10"
+  integrity sha512-a6czHbT9twVpy2RpkWQA9vIgwQgB9Nx1PIxNNUxQT4nugG/3QibwxO+tWTh9i+zSY2SFiX4pnYhTaFaQF/6ZAg==
+  dependencies:
+    tabbable "^5.2.1"
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -15105,6 +15105,11 @@ symbol.prototype.description@^1.0.0:
     has-symbols "^1.0.1"
     object.getownpropertydescriptors "^2.1.2"
 
+tabbable@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.2.1.tgz#e3fda7367ddbb172dcda9f871c0fdb36d1c4cd9c"
+  integrity sha512-40pEZ2mhjaZzK0BnI+QGNjJO8UYx9pP5v7BGe17SORTO0OEuuaAwQTkAp8whcZvqon44wKFOikD+Al11K3JICQ==
+
 table@^6.0.9, table@^6.6.0:
   version "6.7.1"
   resolved "https://registry.yarnpkg.com/table/-/table-6.7.1.tgz#ee05592b7143831a8c94f3cee6aae4c1ccef33e2"

From 777e4d0e85ebfbbef9eb0d4a83c9c08a674e77c8 Mon Sep 17 00:00:00 2001
From: Suzanne Rozier <suz@truss.works>
Date: Mon, 4 Oct 2021 12:29:52 -0500
Subject: [PATCH 29/38] Revert button forward ref change

---
 src/components/Button/Button.tsx              | 132 ++++++++----------
 src/components/Modal/Modal.tsx                |   2 -
 .../ModalCloseButton/ModalCloseButton.tsx     |  41 +++---
 .../Modal/ModalWindow/ModalWindow.tsx         |   3 -
 4 files changed, 80 insertions(+), 98 deletions(-)

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index a6f55f4456..ae0d66e687 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import classnames from 'classnames'
 import { deprecationWarning } from '../../deprecation'
 
@@ -30,80 +30,72 @@ interface ButtonProps {
   unstyled?: boolean
 }
 
-export const Button = forwardRef(
-  (
-    {
-      type,
-      children,
-      secondary,
-      base,
-      accent,
-      accentStyle,
-      outline,
-      inverse,
-      size,
-      big,
-      small,
-      icon,
-      unstyled,
-      onClick,
-      className,
-      ...defaultProps
-    }: ButtonProps & JSX.IntrinsicElements['button'],
-    ref: React.ForwardedRef<HTMLButtonElement>
-  ): React.ReactElement => {
-    if (big) {
-      deprecationWarning('Button property big is deprecated.  Use size.')
-    }
-
-    if (icon) {
-      deprecationWarning('Button property icon is deprecated.')
-    }
+export const Button = ({
+  type,
+  children,
+  secondary,
+  base,
+  accent,
+  accentStyle,
+  outline,
+  inverse,
+  size,
+  big,
+  small,
+  icon,
+  unstyled,
+  onClick,
+  className,
+  ...defaultProps
+}: ButtonProps & JSX.IntrinsicElements['button']): React.ReactElement => {
+  if (big) {
+    deprecationWarning('Button property big is deprecated.  Use size.')
+  }
 
-    if (accent) {
-      deprecationWarning(
-        'Button property accent is deprecated. Use accentStyle.'
-      )
-    }
+  if (icon) {
+    deprecationWarning('Button property icon is deprecated.')
+  }
 
-    const isBig = size ? size === 'big' : big
-    const isSmall = size ? size === 'small' : small
+  if (accent) {
+    deprecationWarning('Button property accent is deprecated. Use accentStyle.')
+  }
 
-    if (isSmall) {
-      deprecationWarning(
-        'Small button is deprecated. Use the default, pass in a custom className, or use size big.'
-      )
-    }
+  const isBig = size ? size === 'big' : big
+  const isSmall = size ? size === 'small' : small
 
-    const classes = classnames(
-      'usa-button',
-      {
-        'usa-button--secondary': secondary,
-        'usa-button--base': base,
-        'usa-button--accent-cool': accent || accentStyle === 'cool',
-        'usa-button--accent-warm': accentStyle === 'warm',
-        'usa-button--outline': outline,
-        'usa-button--inverse': inverse,
-        'usa-button--big': isBig,
-        'usa-button--small': isSmall,
-        'usa-button--icon': icon,
-        'usa-button--unstyled': unstyled,
-      },
-      className
-    )
-
-    return (
-      <button
-        type={type}
-        className={classes}
-        onClick={onClick}
-        data-testid="button"
-        ref={ref}
-        {...defaultProps}>
-        {children}
-      </button>
+  if (isSmall) {
+    deprecationWarning(
+      'Small button is deprecated. Use the default, pass in a custom className, or use size big.'
     )
   }
-)
+
+  const classes = classnames(
+    'usa-button',
+    {
+      'usa-button--secondary': secondary,
+      'usa-button--base': base,
+      'usa-button--accent-cool': accent || accentStyle === 'cool',
+      'usa-button--accent-warm': accentStyle === 'warm',
+      'usa-button--outline': outline,
+      'usa-button--inverse': inverse,
+      'usa-button--big': isBig,
+      'usa-button--small': isSmall,
+      'usa-button--icon': icon,
+      'usa-button--unstyled': unstyled,
+    },
+    className
+  )
+
+  return (
+    <button
+      type={type}
+      className={classes}
+      onClick={onClick}
+      data-testid="button"
+      {...defaultProps}>
+      {children}
+    </button>
+  )
+}
 
 export default Button
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index fb1d801145..a0decf66f7 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -36,7 +36,6 @@ export const Modal = ({
   const initialPaddingRef = useRef<string>()
   const tempPaddingRef = useRef<string>()
   const modalEl = useRef<HTMLDivElement>(null)
-  const closeButtonEl = useRef<HTMLButtonElement>(null)
 
   const modalRootSelector = modalRoot || '.usa-modal-wrapper'
 
@@ -147,7 +146,6 @@ export const Modal = ({
           modalId={id}
           {...divProps}
           ref={modalEl}
-          closeButtonRef={closeButtonEl}
           isLarge={isLarge}
           forceAction={forceAction}
           tabIndex={-1}
diff --git a/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx b/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx
index e282bab27f..655d78c5e3 100644
--- a/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx
+++ b/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { IconClose } from '../../Icon/Icons'
 import { Button } from '../../Button/Button'
 
@@ -8,27 +8,22 @@ interface ModalCloseButtonProps {
 
 // TODO - accept custom aria-label
 
-export const ModalCloseButton = forwardRef(
-  (
-    {
-      handleClose,
-      ...buttonProps
-    }: ModalCloseButtonProps & JSX.IntrinsicElements['button'],
-    ref: React.ForwardedRef<HTMLButtonElement>
-  ): React.ReactElement => {
-    return (
-      <Button
-        {...buttonProps}
-        className="usa-modal__close"
-        aria-label="Close this window"
-        onClick={handleClose}
-        data-close-modal
-        type="button"
-        ref={ref}>
-        <IconClose aria-hidden="true" />
-      </Button>
-    )
-  }
-)
+export const ModalCloseButton = ({
+  handleClose,
+  ...buttonProps
+}: ModalCloseButtonProps &
+  JSX.IntrinsicElements['button']): React.ReactElement => {
+  return (
+    <Button
+      {...buttonProps}
+      className="usa-modal__close"
+      aria-label="Close this window"
+      onClick={handleClose}
+      data-close-modal
+      type="button">
+      <IconClose aria-hidden="true" />
+    </Button>
+  )
+}
 
 ModalCloseButton.displayName = 'ModalCloseButton'
diff --git a/src/components/Modal/ModalWindow/ModalWindow.tsx b/src/components/Modal/ModalWindow/ModalWindow.tsx
index 16bc14972e..42bb626c2d 100644
--- a/src/components/Modal/ModalWindow/ModalWindow.tsx
+++ b/src/components/Modal/ModalWindow/ModalWindow.tsx
@@ -10,7 +10,6 @@ interface ModalWindowProps {
   className?: string
   isLarge?: boolean
   forceAction?: boolean
-  closeButtonRef: React.ForwardedRef<HTMLButtonElement>
 }
 
 export const ModalWindow = forwardRef(
@@ -22,7 +21,6 @@ export const ModalWindow = forwardRef(
       handleClose,
       isLarge = false,
       forceAction = false,
-      closeButtonRef,
       ...divProps
     }: ModalWindowProps & JSX.IntrinsicElements['div'],
     ref: React.ForwardedRef<HTMLDivElement>
@@ -48,7 +46,6 @@ export const ModalWindow = forwardRef(
             <ModalCloseButton
               aria-controls={modalId}
               handleClose={handleClose}
-              ref={closeButtonRef}
             />
           )}
         </div>

From 1075eb1cb925bb07818961b0fc5aec2a57d0d56c Mon Sep 17 00:00:00 2001
From: Suzanne Rozier <suz@truss.works>
Date: Mon, 4 Oct 2021 15:36:29 -0500
Subject: [PATCH 30/38] Fix toggle event propagation, cleanup

---
 src/components/Modal/Modal.stories.tsx | 12 ++--
 src/components/Modal/Modal.test.tsx    | 85 ++++----------------------
 src/components/Modal/utils.ts          | 25 ++++++--
 3 files changed, 36 insertions(+), 86 deletions(-)

diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
index 5c7b3cccd2..83729c65c0 100644
--- a/src/components/Modal/Modal.stories.tsx
+++ b/src/components/Modal/Modal.stories.tsx
@@ -33,8 +33,7 @@ export const defaultModal = (): React.ReactElement => {
       <ModalOpenButton
         handleOpen={openModal}
         href="#example-modal-1"
-        aria-controls="example-modal-1"
-        onClick={(e) => e.preventDefault()}>
+        aria-controls="example-modal-1">
         Open default modal
       </ModalOpenButton>
       <Modal
@@ -79,8 +78,7 @@ export const largeModal = (): React.ReactElement => {
       <ModalOpenButton
         handleOpen={openModal}
         href="#example-modal-2"
-        aria-controls="example-modal-2"
-        onClick={(e) => e.preventDefault()}>
+        aria-controls="example-modal-2">
         Open large modal
       </ModalOpenButton>
       <Modal
@@ -126,8 +124,7 @@ export const forceActionModal = (): React.ReactElement => {
       <ModalOpenButton
         handleOpen={openModal}
         href="#example-modal-3"
-        aria-controls="example-modal-3"
-        onClick={(e) => e.preventDefault()}>
+        aria-controls="example-modal-3">
         Open modal with forced action
       </ModalOpenButton>
       <Modal
@@ -175,8 +172,7 @@ export const customFocusElementModal = (): React.ReactElement => {
       <ModalOpenButton
         handleOpen={openModal}
         href="#example-modal-1"
-        aria-controls="example-modal-1"
-        onClick={(e) => e.preventDefault()}>
+        aria-controls="example-modal-1">
         Open modal with custom initial focus element
       </ModalOpenButton>
       <Modal
diff --git a/src/components/Modal/Modal.test.tsx b/src/components/Modal/Modal.test.tsx
index 006d5cd84e..81085d2d28 100644
--- a/src/components/Modal/Modal.test.tsx
+++ b/src/components/Modal/Modal.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { render, screen, waitFor, fireEvent } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import { renderHook } from '@testing-library/react-hooks'
 
 import { Modal } from './Modal'
 import { useModal } from './utils'
@@ -71,65 +72,6 @@ const ExampleModal = ({
   )
 }
 
-const ExampleModalWithDoubleOpen = ({
-  openCallback,
-}: {
-  openCallback: () => void
-}): React.ReactElement => {
-  const { isOpen, openModal, closeModal } = useModal()
-
-  const handleDoubleOpen = (e: React.MouseEvent) => {
-    if (openModal(e)) {
-      openCallback()
-    }
-  }
-
-  return (
-    <>
-      <ModalOpenButton
-        handleOpen={openModal}
-        href="#example-modal-1"
-        aria-controls="example-modal-1"
-        onClick={(e) => e.preventDefault()}>
-        Open default modal
-      </ModalOpenButton>
-      <Modal
-        isOpen={isOpen}
-        closeModal={closeModal}
-        id="example-modal-1"
-        aria-labelledby="modal-1-heading"
-        aria-describedby="modal-1-description">
-        <ModalHeading id="modal-1-heading">
-          Are you sure you want to continue?
-        </ModalHeading>
-        <div className="usa-prose">
-          <p id="modal-1-description">
-            You have unsaved changes that will be lost.
-          </p>
-          <button type="button" onClick={handleDoubleOpen}>
-            This button should not do anything
-          </button>
-        </div>
-        <ModalFooter>
-          <ButtonGroup>
-            <Button type="button" data-close-modal onClick={closeModal}>
-              Continue without saving
-            </Button>
-            <Button
-              type="button"
-              data-close-modal
-              unstyled
-              className="padding-105 text-center"
-              onClick={closeModal}>
-              Go back
-            </Button>
-          </ButtonGroup>
-        </ModalFooter>
-      </Modal>
-    </>
-  )
-}
-
 const ExampleModalWithFocusElement = (): React.ReactElement => {
   const { isOpen, openModal, closeModal } = useModal()
 
@@ -306,7 +248,7 @@ describe('Modal component', () => {
     expect(modalState.closeModal).toHaveBeenCalled()
   })
 
-  it('renders a large modalWindow isLarge is true', () => {
+  it('renders a large modal window when isLarge is true', () => {
     const modalState = {
       isOpen: false,
       closeModal: jest.fn(),
@@ -551,25 +493,20 @@ describe('Modal component', () => {
     })
 
     it('stops event propagation if toggle modal is called from within a modal', () => {
-      const mockOpenCallback = jest.fn()
-
-      render(<ExampleModalWithDoubleOpen openCallback={mockOpenCallback} />, {
-        container: document.body,
-      })
+      const { result } = renderHook(() => useModal())
 
-      const openButton = screen.getByRole('button', {
-        name: 'Open default modal',
-      })
+      const closeSpy = jest.spyOn(result.current, 'closeModal')
 
-      userEvent.click(openButton)
+      const testModalId = 'testModal'
 
-      userEvent.click(
-        screen.getByRole('button', {
-          name: 'This button should not do anything',
-        })
+      render(
+        <Modal id={testModalId} {...result.current}>
+          Test modal
+        </Modal>
       )
 
-      expect(mockOpenCallback).not.toHaveBeenCalled()
+      userEvent.click(screen.getByText('Test modal'))
+      expect(closeSpy).toHaveLastReturnedWith(false)
     })
 
     describe('focusing', () => {
diff --git a/src/components/Modal/utils.ts b/src/components/Modal/utils.ts
index 2b9b0aba16..965c9de019 100644
--- a/src/components/Modal/utils.ts
+++ b/src/components/Modal/utils.ts
@@ -9,8 +9,8 @@ export type ModalHook = {
 export const useModal = (): ModalHook => {
   const [isOpen, setIsOpen] = useState(false)
 
-  const openModal = (e?: React.MouseEvent): boolean => {
-    const clickedElement = e?.target as Element
+  const allowToggle = (e: React.MouseEvent): boolean => {
+    const clickedElement = e.target as Element
 
     if (e && clickedElement) {
       if (clickedElement.closest('.usa-modal')) {
@@ -20,19 +20,36 @@ export const useModal = (): ModalHook => {
           clickedElement.closest('[data-close-modal]')
         ) {
           // Element is a close button - proceed
+          return true
         } else {
           // Don't allow opening a modal from within a modal
-          e.stopPropagation()
           return false
         }
       }
     }
 
+    return true
+  }
+
+  const openModal = (e?: React.MouseEvent): boolean => {
+    if (e && !allowToggle(e)) {
+      e.stopPropagation()
+      return false
+    }
+
     setIsOpen(true)
     return true
   }
 
-  const closeModal = (): void => setIsOpen(false)
+  const closeModal = (e?: React.MouseEvent): boolean => {
+    if (e && !allowToggle(e)) {
+      e.stopPropagation()
+      return false
+    }
+
+    setIsOpen(false)
+    return true
+  }
 
   return { isOpen, openModal, closeModal }
 }

From a334ebfe88a348f3f0c7651ea184a5a454b7de8b Mon Sep 17 00:00:00 2001
From: Suzanne Rozier <suz@truss.works>
Date: Tue, 5 Oct 2021 15:12:38 -0500
Subject: [PATCH 31/38] Change Modal API to use forwardRef

---
 src/components/Modal/Modal.stories.tsx |  61 +++--
 src/components/Modal/Modal.test.tsx    | 366 ++++++++++---------------
 src/components/Modal/Modal.tsx         | 282 ++++++++++---------
 src/components/Modal/utils.test.ts     |  48 ++++
 src/components/Modal/utils.ts          |  21 +-
 5 files changed, 403 insertions(+), 375 deletions(-)

diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
index 83729c65c0..445e312f4f 100644
--- a/src/components/Modal/Modal.stories.tsx
+++ b/src/components/Modal/Modal.stories.tsx
@@ -1,13 +1,12 @@
-import React from 'react'
+import React, { useRef } from 'react'
 
-import { Modal } from './Modal'
+import { Modal, ModalRef } from './Modal'
 import { ModalHeading } from './ModalHeading/ModalHeading'
 import { ModalFooter } from './ModalFooter/ModalFooter'
 import { ModalOpenButton } from './ModalOpenButton'
 
 import { Button } from '../Button/Button'
 import { ButtonGroup } from '../ButtonGroup/ButtonGroup'
-import { useModal } from './utils'
 
 export default {
   title: 'Components/Modal',
@@ -26,19 +25,21 @@ Source: http://designsystem.digital.gov/components/modal
 }
 
 export const defaultModal = (): React.ReactElement => {
-  const { isOpen, openModal, closeModal } = useModal()
+  const modalRef = useRef<ModalRef>()
+
+  const handleOpen = (e) => modalRef.current?.toggleModal(e, true)
+  const handleClose = (e) => modalRef.current?.toggleModal(e, false)
 
   return (
     <>
       <ModalOpenButton
-        handleOpen={openModal}
+        handleOpen={handleOpen}
         href="#example-modal-1"
         aria-controls="example-modal-1">
         Open default modal
       </ModalOpenButton>
       <Modal
-        isOpen={isOpen}
-        closeModal={closeModal}
+        ref={modalRef}
         id="example-modal-1"
         aria-labelledby="modal-1-heading"
         aria-describedby="modal-1-description">
@@ -52,7 +53,7 @@ export const defaultModal = (): React.ReactElement => {
         </div>
         <ModalFooter>
           <ButtonGroup>
-            <Button type="button" data-close-modal onClick={closeModal}>
+            <Button type="button" data-close-modal onClick={handleClose}>
               Continue without saving
             </Button>
             <Button
@@ -60,7 +61,7 @@ export const defaultModal = (): React.ReactElement => {
               data-close-modal
               unstyled
               className="padding-105 text-center"
-              onClick={closeModal}>
+              onClick={handleClose}>
               Go back
             </Button>
           </ButtonGroup>
@@ -71,19 +72,21 @@ export const defaultModal = (): React.ReactElement => {
 }
 
 export const largeModal = (): React.ReactElement => {
-  const { isOpen, openModal, closeModal } = useModal()
+  const modalRef = useRef<ModalRef>()
+
+  const handleOpen = (e) => modalRef.current?.toggleModal(e, true)
+  const handleClose = (e) => modalRef.current?.toggleModal(e, false)
 
   return (
     <>
       <ModalOpenButton
-        handleOpen={openModal}
+        handleOpen={handleOpen}
         href="#example-modal-2"
         aria-controls="example-modal-2">
         Open large modal
       </ModalOpenButton>
       <Modal
-        isOpen={isOpen}
-        closeModal={closeModal}
+        ref={modalRef}
         isLarge
         aria-labelledby="modal-2-heading"
         aria-describedby="modal-2-description"
@@ -98,7 +101,7 @@ export const largeModal = (): React.ReactElement => {
         </div>
         <ModalFooter>
           <ButtonGroup>
-            <Button type="button" data-close-modal onClick={closeModal}>
+            <Button type="button" data-close-modal onClick={handleClose}>
               Continue without saving
             </Button>
             <Button
@@ -106,7 +109,7 @@ export const largeModal = (): React.ReactElement => {
               data-close-modal
               unstyled
               className="padding-105 text-center"
-              onClick={closeModal}>
+              onClick={handleClose}>
               Go back
             </Button>
           </ButtonGroup>
@@ -117,19 +120,21 @@ export const largeModal = (): React.ReactElement => {
 }
 
 export const forceActionModal = (): React.ReactElement => {
-  const { isOpen, openModal, closeModal } = useModal()
+  const modalRef = useRef<ModalRef>()
+
+  const handleOpen = (e) => modalRef.current?.toggleModal(e, true)
+  const handleClose = (e) => modalRef.current?.toggleModal(e, false)
 
   return (
     <>
       <ModalOpenButton
-        handleOpen={openModal}
+        handleOpen={handleOpen}
         href="#example-modal-3"
         aria-controls="example-modal-3">
         Open modal with forced action
       </ModalOpenButton>
       <Modal
-        isOpen={isOpen}
-        closeModal={closeModal}
+        ref={modalRef}
         forceAction
         aria-labelledby="modal-3-heading"
         aria-describedby="modal-3-description"
@@ -146,7 +151,7 @@ export const forceActionModal = (): React.ReactElement => {
         </div>
         <ModalFooter>
           <ButtonGroup>
-            <Button type="button" data-close-modal onClick={closeModal}>
+            <Button type="button" data-close-modal onClick={handleClose}>
               Yes, stay signed in
             </Button>
             <Button
@@ -154,7 +159,7 @@ export const forceActionModal = (): React.ReactElement => {
               data-close-modal
               unstyled
               className="padding-105 text-center"
-              onClick={closeModal}>
+              onClick={handleClose}>
               Sign out
             </Button>
           </ButtonGroup>
@@ -165,19 +170,21 @@ export const forceActionModal = (): React.ReactElement => {
 }
 
 export const customFocusElementModal = (): React.ReactElement => {
-  const { isOpen, openModal, closeModal } = useModal()
+  const modalRef = useRef<ModalRef>()
+
+  const handleOpen = (e) => modalRef.current?.toggleModal(e, true)
+  const handleClose = (e) => modalRef.current?.toggleModal(e, false)
 
   return (
     <>
       <ModalOpenButton
-        handleOpen={openModal}
+        handleOpen={handleOpen}
         href="#example-modal-1"
         aria-controls="example-modal-1">
         Open modal with custom initial focus element
       </ModalOpenButton>
       <Modal
-        isOpen={isOpen}
-        closeModal={closeModal}
+        ref={modalRef}
         id="example-modal-1"
         aria-labelledby="modal-1-heading"
         aria-describedby="modal-1-description">
@@ -195,7 +202,7 @@ export const customFocusElementModal = (): React.ReactElement => {
         </div>
         <ModalFooter>
           <ButtonGroup>
-            <Button type="button" data-close-modal onClick={closeModal}>
+            <Button type="button" data-close-modal onClick={handleClose}>
               Continue without saving
             </Button>
             <Button
@@ -203,7 +210,7 @@ export const customFocusElementModal = (): React.ReactElement => {
               data-close-modal
               unstyled
               className="padding-105 text-center"
-              onClick={closeModal}>
+              onClick={handleClose}>
               Go back
             </Button>
           </ButtonGroup>
diff --git a/src/components/Modal/Modal.test.tsx b/src/components/Modal/Modal.test.tsx
index 81085d2d28..19510731f2 100644
--- a/src/components/Modal/Modal.test.tsx
+++ b/src/components/Modal/Modal.test.tsx
@@ -1,10 +1,14 @@
-import React from 'react'
-import { render, screen, waitFor, fireEvent } from '@testing-library/react'
+import React, { createRef, useRef } from 'react'
+import {
+  render,
+  screen,
+  waitFor,
+  fireEvent,
+  RenderOptions,
+} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { renderHook } from '@testing-library/react-hooks'
 
-import { Modal } from './Modal'
-import { useModal } from './utils'
+import { Modal, ModalRef } from './Modal'
 import { ModalHeading } from './ModalHeading/ModalHeading'
 import { ModalFooter } from './ModalFooter/ModalFooter'
 import { ModalOpenButton } from './ModalOpenButton'
@@ -21,29 +25,41 @@ jest.mock('./utils', () => {
   }
 })
 
+const renderWithModalRoot = (
+  ui: React.ReactElement,
+  options: RenderOptions = {}
+) => {
+  const modalContainer = document.createElement('div')
+  modalContainer.setAttribute('id', 'modal-root')
+
+  return render(ui, {
+    ...options,
+    container: document.body.appendChild(modalContainer),
+  })
+}
+
 const ExampleModal = ({
   forceAction = false,
 }: {
   forceAction?: boolean
 }): React.ReactElement => {
-  const { isOpen, openModal, closeModal } = useModal()
+  const modalRef = useRef<ModalRef>(null)
 
   return (
     <>
       <ModalOpenButton
-        handleOpen={openModal}
+        handleOpen={(e) => modalRef.current?.toggleModal(e, true)}
         href="#example-modal-1"
-        aria-controls="example-modal-1"
-        onClick={(e) => e.preventDefault()}>
+        aria-controls="example-modal-1">
         Open default modal
       </ModalOpenButton>
       <Modal
-        isOpen={isOpen}
-        closeModal={closeModal}
+        ref={modalRef}
         id="example-modal-1"
         aria-labelledby="modal-1-heading"
         aria-describedby="modal-1-description"
-        forceAction={forceAction}>
+        forceAction={forceAction}
+        modalRoot="#modal-root">
         <ModalHeading id="modal-1-heading">
           Are you sure you want to continue?
         </ModalHeading>
@@ -54,7 +70,10 @@ const ExampleModal = ({
         </div>
         <ModalFooter>
           <ButtonGroup>
-            <Button type="button" data-close-modal onClick={closeModal}>
+            <Button
+              type="button"
+              data-close-modal
+              onClick={(e) => modalRef.current?.toggleModal(e, false)}>
               Continue without saving
             </Button>
             <Button
@@ -62,7 +81,7 @@ const ExampleModal = ({
               data-close-modal
               unstyled
               className="padding-105 text-center"
-              onClick={closeModal}>
+              onClick={(e) => modalRef.current?.toggleModal(e, false)}>
               Go back
             </Button>
           </ButtonGroup>
@@ -73,23 +92,22 @@ const ExampleModal = ({
 }
 
 const ExampleModalWithFocusElement = (): React.ReactElement => {
-  const { isOpen, openModal, closeModal } = useModal()
+  const modalRef = useRef<ModalRef>(null)
 
   return (
     <>
       <ModalOpenButton
-        handleOpen={openModal}
+        handleOpen={(e) => modalRef.current?.toggleModal(e, true)}
         href="#example-modal-1"
-        aria-controls="example-modal-1"
-        onClick={(e) => e.preventDefault()}>
+        aria-controls="example-modal-1">
         Open default modal
       </ModalOpenButton>
       <Modal
-        isOpen={isOpen}
-        closeModal={closeModal}
+        ref={modalRef}
         id="example-modal-1"
         aria-labelledby="modal-1-heading"
-        aria-describedby="modal-1-description">
+        aria-describedby="modal-1-description"
+        modalRoot="#modal-root">
         <ModalHeading id="modal-1-heading">
           Are you sure you want to continue?
         </ModalHeading>
@@ -103,7 +121,10 @@ const ExampleModalWithFocusElement = (): React.ReactElement => {
         </div>
         <ModalFooter>
           <ButtonGroup>
-            <Button type="button" data-close-modal onClick={closeModal}>
+            <Button
+              type="button"
+              data-close-modal
+              onClick={(e) => modalRef.current?.toggleModal(e, false)}>
               Continue without saving
             </Button>
             <Button
@@ -111,7 +132,7 @@ const ExampleModalWithFocusElement = (): React.ReactElement => {
               data-close-modal
               unstyled
               className="padding-105 text-center"
-              onClick={closeModal}>
+              onClick={(e) => modalRef.current?.toggleModal(e, false)}>
               Go back
             </Button>
           </ButtonGroup>
@@ -122,19 +143,14 @@ const ExampleModalWithFocusElement = (): React.ReactElement => {
 }
 
 describe('Modal component', () => {
-  it('renders its children inside a modal wrapper', () => {
-    const modalState = {
-      isOpen: false,
-      closeModal: jest.fn(),
-    }
+  beforeEach(() => {
+    document.body.style.paddingRight = '0px'
+  })
 
+  it('renders its children inside a modal wrapper', () => {
     const testModalId = 'testModal'
 
-    render(
-      <Modal id={testModalId} {...modalState}>
-        Test modal
-      </Modal>
-    )
+    render(<Modal id={testModalId}>Test modal</Modal>)
 
     // Modal wrapper
     const modalWrapper = screen.getByRole('dialog')
@@ -159,17 +175,11 @@ describe('Modal component', () => {
   })
 
   it('passes aria props to the modal wrapper', () => {
-    const modalState = {
-      isOpen: false,
-      closeModal: jest.fn(),
-    }
-
     const testModalId = 'testModal'
 
     render(
       <Modal
         id={testModalId}
-        {...modalState}
         aria-labelledby="modal-label"
         aria-describedby="modal-description">
         Test modal
@@ -188,76 +198,72 @@ describe('Modal component', () => {
     expect(modalWindow).not.toHaveAttribute('aria-describedby')
   })
 
-  it('renders the visible state when open', () => {
-    const modalState = {
-      isOpen: true,
-      closeModal: jest.fn(),
-    }
+  it('renders the visible state when open', async () => {
+    const modalRef = createRef<ModalRef>()
+    const handleOpen = () => modalRef.current?.toggleModal(undefined, true)
 
     const testModalId = 'testModal'
 
-    render(
-      <Modal id={testModalId} {...modalState}>
+    renderWithModalRoot(
+      <Modal id={testModalId} ref={modalRef} modalRoot="#modal-root">
         Test modal
       </Modal>
     )
 
+    await waitFor(() => handleOpen())
+
+    expect(modalRef.current?.modalIsOpen).toBe(true)
     const modalWrapper = screen.getByRole('dialog')
     expect(modalWrapper).not.toHaveClass('is-hidden')
     expect(modalWrapper).toHaveClass('is-visible')
   })
 
-  it('can click on the close button to close', () => {
-    const modalState = {
-      isOpen: true,
-      closeModal: jest.fn(),
-    }
-
+  it('can click on the close button to close', async () => {
     const testModalId = 'testModal'
+    const modalRef = createRef<ModalRef>()
+    const handleOpen = () => modalRef.current?.toggleModal(undefined, true)
 
-    render(
-      <Modal id={testModalId} {...modalState}>
+    renderWithModalRoot(
+      <Modal id={testModalId} ref={modalRef} modalRoot="#modal-root">
         Test modal
       </Modal>
     )
 
+    await waitFor(() => handleOpen())
+
+    expect(modalRef.current?.modalIsOpen).toBe(true)
     const closeButton = screen.getByRole('button', {
       name: 'Close this window',
     })
     expect(closeButton).toBeInTheDocument()
     userEvent.click(closeButton)
-    expect(modalState.closeModal).toHaveBeenCalled()
+    expect(modalRef.current?.modalIsOpen).toBe(false)
   })
 
-  it('can click on the overlay to close', () => {
-    const modalState = {
-      isOpen: true,
-      closeModal: jest.fn(),
-    }
-
+  it('can click on the overlay to close', async () => {
     const testModalId = 'testModal'
+    const modalRef = createRef<ModalRef>()
+    const handleOpen = () => modalRef.current?.toggleModal(undefined, true)
 
     render(
-      <Modal id={testModalId} {...modalState}>
+      <Modal id={testModalId} ref={modalRef}>
         Test modal
       </Modal>
     )
 
+    await waitFor(() => handleOpen())
+
+    expect(modalRef.current?.modalIsOpen).toBe(true)
     const overlay = screen.getByTestId('modalOverlay')
     userEvent.click(overlay)
-    expect(modalState.closeModal).toHaveBeenCalled()
+    expect(modalRef.current?.modalIsOpen).toBe(false)
   })
 
   it('renders a large modal window when isLarge is true', () => {
-    const modalState = {
-      isOpen: false,
-      closeModal: jest.fn(),
-    }
-
     const testModalId = 'testModal'
 
     render(
-      <Modal id={testModalId} {...modalState} isLarge>
+      <Modal id={testModalId} isLarge>
         Test modal
       </Modal>
     )
@@ -266,15 +272,10 @@ describe('Modal component', () => {
   })
 
   it('does not render a close button when forceAction is true', () => {
-    const modalState = {
-      isOpen: false,
-      closeModal: jest.fn(),
-    }
-
     const testModalId = 'testModal'
 
     render(
-      <Modal id={testModalId} {...modalState} forceAction>
+      <Modal id={testModalId} forceAction>
         Test modal
       </Modal>
     )
@@ -292,42 +293,39 @@ describe('Modal component', () => {
   })
 
   describe('toggling', () => {
-    it('styles the body element', () => {
-      const closeModal = jest.fn()
-      const { rerender, baseElement } = render(
-        <Modal id="testModal" isOpen={false} closeModal={closeModal}>
+    it('styles the body element', async () => {
+      const modalRef = createRef<ModalRef>()
+      const handleOpen = () => modalRef.current?.toggleModal(undefined, true)
+      const handleClose = () => modalRef.current?.toggleModal(undefined, false)
+
+      const { baseElement } = render(
+        <Modal id="testModal" ref={modalRef}>
           Test modal
         </Modal>
       )
 
       expect(baseElement).not.toHaveClass('usa-js-modal--active')
-      expect(baseElement).not.toHaveStyle('padding-right: 0px')
+      expect(baseElement).toHaveStyle('padding-right: 0px')
 
-      rerender(
-        <Modal id="testModal" isOpen={true} closeModal={closeModal}>
-          Test modal
-        </Modal>
-      )
+      await waitFor(() => handleOpen())
 
       expect(baseElement).toHaveClass('usa-js-modal--active')
       expect(baseElement).toHaveStyle('padding-right: 15px')
 
-      rerender(
-        <Modal id="testModal" isOpen={false} closeModal={closeModal}>
-          Test modal
-        </Modal>
-      )
+      await waitFor(() => handleClose())
 
       expect(baseElement).not.toHaveClass('usa-js-modal--active')
       expect(baseElement).toHaveStyle('padding-right: 0px')
     })
 
-    it('styles the body element when it already has padding right', () => {
-      const closeModal = jest.fn()
+    it('styles the body element when it already has padding right', async () => {
+      const modalRef = createRef<ModalRef>()
+      const handleOpen = () => modalRef.current?.toggleModal(undefined, true)
+      const handleClose = () => modalRef.current?.toggleModal(undefined, false)
       document.body.style.paddingRight = '20px'
 
-      const { rerender, baseElement } = render(
-        <Modal id="testModal" isOpen={false} closeModal={closeModal}>
+      const { baseElement } = render(
+        <Modal id="testModal" ref={modalRef}>
           Test modal
         </Modal>
       )
@@ -335,39 +333,34 @@ describe('Modal component', () => {
       expect(baseElement).not.toHaveClass('usa-js-modal--active')
       expect(baseElement).toHaveStyle('padding-right: 20px')
 
-      rerender(
-        <Modal id="testModal" isOpen={true} closeModal={closeModal}>
-          Test modal
-        </Modal>
-      )
+      await waitFor(() => handleOpen())
 
       expect(baseElement).toHaveClass('usa-js-modal--active')
       expect(baseElement).toHaveStyle('padding-right: 35px')
 
-      rerender(
-        <Modal id="testModal" isOpen={false} closeModal={closeModal}>
-          Test modal
-        </Modal>
-      )
+      await waitFor(() => handleClose())
 
       expect(baseElement).not.toHaveClass('usa-js-modal--active')
       expect(baseElement).toHaveStyle('padding-right: 20px')
     })
 
-    it('hides other elements from screen readers', () => {
+    it('hides other elements from screen readers', async () => {
+      const modalRef = createRef<ModalRef>()
+      const handleOpen = () => modalRef.current?.toggleModal(undefined, true)
+      const handleClose = () => modalRef.current?.toggleModal(undefined, false)
+
       const modalProps = {
+        ref: modalRef,
         id: 'testModal',
-        closeModal: jest.fn(),
       }
-      const { rerender } = render(
+
+      render(
         <>
           <p data-testid="nonhidden">Some other element</p>
           <div data-testid="hidden" aria-hidden="true">
             Element that is normally hidden
           </div>
-          <Modal {...modalProps} isOpen={false}>
-            Test modal
-          </Modal>
+          <Modal {...modalProps}>Test modal</Modal>
         </>,
         {
           container: document.body,
@@ -381,17 +374,7 @@ describe('Modal component', () => {
 
       expect(screen.getByTestId('hidden')).toHaveAttribute('aria-hidden')
 
-      rerender(
-        <>
-          <p data-testid="nonhidden">Some other element</p>
-          <div data-testid="hidden" aria-hidden="true">
-            Element that is normally hidden
-          </div>
-          <Modal {...modalProps} isOpen={true}>
-            Test modal
-          </Modal>
-        </>
-      )
+      await waitFor(() => handleOpen())
 
       expect(screen.getByTestId('nonhidden')).toHaveAttribute('aria-hidden')
       expect(screen.getByTestId('nonhidden')).toHaveAttribute(
@@ -399,17 +382,7 @@ describe('Modal component', () => {
       )
       expect(screen.getByTestId('hidden')).toHaveAttribute('aria-hidden')
 
-      rerender(
-        <>
-          <p data-testid="nonhidden">Some other element</p>
-          <div data-testid="hidden" aria-hidden="true">
-            Element that is normally hidden
-          </div>
-          <Modal {...modalProps} isOpen={false}>
-            Test modal
-          </Modal>
-        </>
-      )
+      await waitFor(() => handleClose())
 
       expect(screen.getByTestId('nonhidden')).not.toHaveAttribute('aria-hidden')
       expect(screen.getByTestId('nonhidden')).not.toHaveAttribute(
@@ -419,23 +392,25 @@ describe('Modal component', () => {
       expect(screen.getByTestId('hidden')).toHaveAttribute('aria-hidden')
     })
 
-    it('hides other elements from screen readers with a custom modal root', () => {
+    it('hides other elements from screen readers with a custom modal root', async () => {
+      const modalRef = createRef<ModalRef>()
+      const handleOpen = () => modalRef.current?.toggleModal(undefined, true)
+      const handleClose = () => modalRef.current?.toggleModal(undefined, false)
+
       const modalProps = {
+        ref: modalRef,
         id: 'testModal',
-        closeModal: jest.fn(),
         modalRoot: '#modal-root',
       }
 
-      const { rerender } = render(
+      render(
         <>
           <p data-testid="nonhidden">Some other element</p>
           <div data-testid="hidden" aria-hidden="true">
             Element that is normally hidden
           </div>
           <div id="#modal-root">
-            <Modal {...modalProps} isOpen={false}>
-              Test modal
-            </Modal>
+            <Modal {...modalProps}>Test modal</Modal>
           </div>
         </>,
         {
@@ -450,19 +425,7 @@ describe('Modal component', () => {
 
       expect(screen.getByTestId('hidden')).toHaveAttribute('aria-hidden')
 
-      rerender(
-        <>
-          <p data-testid="nonhidden">Some other element</p>
-          <div data-testid="hidden" aria-hidden="true">
-            Element that is normally hidden
-          </div>
-          <div id="#modal-root">
-            <Modal {...modalProps} isOpen={true}>
-              Test modal
-            </Modal>
-          </div>
-        </>
-      )
+      await waitFor(() => handleOpen())
 
       expect(screen.getByTestId('nonhidden')).toHaveAttribute('aria-hidden')
       expect(screen.getByTestId('nonhidden')).toHaveAttribute(
@@ -470,19 +433,7 @@ describe('Modal component', () => {
       )
       expect(screen.getByTestId('hidden')).toHaveAttribute('aria-hidden')
 
-      rerender(
-        <>
-          <p data-testid="nonhidden">Some other element</p>
-          <div data-testid="hidden" aria-hidden="true">
-            Element that is normally hidden
-          </div>
-          <div id="#modal-root">
-            <Modal {...modalProps} isOpen={false}>
-              Test modal
-            </Modal>
-          </div>
-        </>
-      )
+      await waitFor(() => handleClose())
 
       expect(screen.getByTestId('nonhidden')).not.toHaveAttribute('aria-hidden')
       expect(screen.getByTestId('nonhidden')).not.toHaveAttribute(
@@ -492,28 +443,26 @@ describe('Modal component', () => {
       expect(screen.getByTestId('hidden')).toHaveAttribute('aria-hidden')
     })
 
-    it('stops event propagation if toggle modal is called from within a modal', () => {
-      const { result } = renderHook(() => useModal())
-
-      const closeSpy = jest.spyOn(result.current, 'closeModal')
-
-      const testModalId = 'testModal'
+    it('stops event propagation if toggle modal is called from within a modal', async () => {
+      const modalRef = createRef<ModalRef>()
+      const handleOpen = () => modalRef.current?.toggleModal(undefined, true)
 
       render(
-        <Modal id={testModalId} {...result.current}>
+        <Modal id="testModal" ref={modalRef}>
           Test modal
         </Modal>
       )
 
+      expect(modalRef.current?.modalIsOpen).toBe(false)
+      await waitFor(() => handleOpen())
+      expect(modalRef.current?.modalIsOpen).toBe(true)
       userEvent.click(screen.getByText('Test modal'))
-      expect(closeSpy).toHaveLastReturnedWith(false)
+      expect(modalRef.current?.modalIsOpen).toBe(true)
     })
 
     describe('focusing', () => {
       it('activates a focus trap', async () => {
-        render(<ExampleModal />, {
-          container: document.body,
-        })
+        renderWithModalRoot(<ExampleModal />)
 
         const openButton = screen.getByRole('button', {
           name: 'Open default modal',
@@ -546,9 +495,7 @@ describe('Modal component', () => {
       })
 
       it('returns focus to the opener element on close', async () => {
-        render(<ExampleModal />, {
-          container: document.body,
-        })
+        renderWithModalRoot(<ExampleModal />)
 
         const openButton = screen.getByRole('button', {
           name: 'Open default modal',
@@ -580,9 +527,7 @@ describe('Modal component', () => {
       })
 
       it('the escape key closes the modal', async () => {
-        render(<ExampleModal />, {
-          container: document.body,
-        })
+        renderWithModalRoot(<ExampleModal />)
 
         const openButton = screen.getByRole('button', {
           name: 'Open default modal',
@@ -609,9 +554,7 @@ describe('Modal component', () => {
       })
 
       it('can pass in a custom onFocus element', async () => {
-        render(<ExampleModalWithFocusElement />, {
-          container: document.body,
-        })
+        renderWithModalRoot(<ExampleModalWithFocusElement />)
 
         const openButton = screen.getByRole('button', {
           name: 'Open default modal',
@@ -636,68 +579,51 @@ describe('Modal component', () => {
         </div>
       )
 
-      it('styles the body element', () => {
-        const closeModal = jest.fn()
-        const { rerender, baseElement } = render(
-          <Modal
-            id="testModal"
-            isOpen={false}
-            closeModal={closeModal}
-            forceAction>
+      it('styles the body element', async () => {
+        const modalRef = createRef<ModalRef>()
+        const handleOpen = () => modalRef.current?.toggleModal(undefined, true)
+        const handleClose = () =>
+          modalRef.current?.toggleModal(undefined, false)
+
+        const { baseElement } = render(
+          <Modal id="testModal" ref={modalRef} forceAction>
             {testModalChildren}
           </Modal>
         )
 
         expect(baseElement).not.toHaveClass('usa-js-no-click')
 
-        rerender(
-          <Modal
-            id="testModal"
-            isOpen={true}
-            closeModal={closeModal}
-            forceAction>
-            {testModalChildren}
-          </Modal>
-        )
+        await waitFor(() => handleOpen())
 
         expect(baseElement).toHaveClass('usa-js-no-click')
 
-        rerender(
-          <Modal
-            id="testModal"
-            isOpen={false}
-            closeModal={closeModal}
-            forceAction>
-            {testModalChildren}
-          </Modal>
-        )
+        await waitFor(() => handleClose())
 
         expect(baseElement).not.toHaveClass('usa-js-no-click')
       })
 
-      it('cannot click on the overlay to close', () => {
-        const modalState = {
-          isOpen: true,
-          closeModal: jest.fn(),
-        }
+      it('cannot click on the overlay to close', async () => {
+        const modalRef = createRef<ModalRef>()
+        const handleOpen = () => modalRef.current?.toggleModal(undefined, true)
 
         const testModalId = 'testModal'
 
         render(
-          <Modal id={testModalId} {...modalState} forceAction>
+          <Modal id={testModalId} ref={modalRef} forceAction>
             {testModalChildren}
           </Modal>
         )
 
+        await waitFor(() => handleOpen())
+        expect(modalRef.current?.modalIsOpen).toBe(true)
+
         const overlay = screen.getByTestId('modalOverlay')
         userEvent.click(overlay)
-        expect(modalState.closeModal).not.toHaveBeenCalled()
+        expect(modalRef.current?.modalIsOpen).toBe(true)
       })
 
       it('the escape key does not close the modal', async () => {
-        render(<ExampleModal forceAction />, {
-          container: document.body,
-        })
+        renderWithModalRoot(<ExampleModal forceAction />)
 
         const openButton = screen.getByRole('button', {
           name: 'Open default modal',
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index a0decf66f7..16e40eaff7 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -1,7 +1,13 @@
-import React, { useEffect, useState, useRef } from 'react'
+import React, {
+  useEffect,
+  useState,
+  useRef,
+  forwardRef,
+  useImperativeHandle,
+} from 'react'
 import FocusTrap from 'focus-trap-react'
 
-import { ModalHook, getScrollbarWidth } from './utils'
+import { useModal, getScrollbarWidth } from './utils'
 import { ModalWindow } from './ModalWindow/ModalWindow'
 import { ModalWrapper } from './ModalWrapper/ModalWrapper'
 
@@ -14,147 +20,171 @@ interface ModalComponentProps {
   modalRoot?: string
 }
 
-export type ModalProps = ModalComponentProps &
-  Pick<ModalHook, 'isOpen' | 'closeModal'> &
-  JSX.IntrinsicElements['div']
-
-// TODO:
-// decide how to handle modal toggle button (anchor, button)
-//  - aria-controls=modal ID
-
-export const Modal = ({
-  id,
-  children,
-  isOpen,
-  closeModal,
-  isLarge = false,
-  forceAction = false,
-  modalRoot = '.usa-modal-wrapper',
-  ...divProps
-}: ModalProps): React.ReactElement => {
-  const [mounted, setMounted] = useState(false)
-  const initialPaddingRef = useRef<string>()
-  const tempPaddingRef = useRef<string>()
-  const modalEl = useRef<HTMLDivElement>(null)
-
-  const modalRootSelector = modalRoot || '.usa-modal-wrapper'
-
-  const NON_MODALS = `body > *:not(${modalRootSelector}):not([aria-hidden])`
-  const NON_MODALS_HIDDEN = `[data-modal-hidden]`
-
-  useEffect(() => {
-    const SCROLLBAR_WIDTH = getScrollbarWidth()
-    const INITIAL_PADDING =
-      window
-        .getComputedStyle(document.body)
-        .getPropertyValue('padding-right') || '0px'
-
-    const TEMPORARY_PADDING = `${
-      parseInt(INITIAL_PADDING.replace(/px/, ''), 10) +
-      parseInt(SCROLLBAR_WIDTH.replace(/px/, ''), 10)
-    }px`
-
-    initialPaddingRef.current = INITIAL_PADDING
-    tempPaddingRef.current = TEMPORARY_PADDING
-
-    setMounted(true)
-  }, [])
-
-  useEffect(() => {
-    if (mounted) {
-      const { body } = document
-
-      const INITIAL_PADDING = initialPaddingRef.current
-      const TEMPORARY_PADDING = tempPaddingRef.current
-
-      body.style.paddingRight =
-        (body.style.paddingRight === TEMPORARY_PADDING
-          ? INITIAL_PADDING
-          : TEMPORARY_PADDING) || ''
-
-      if (isOpen === true) {
-        body.classList.add('usa-js-modal--active')
-
-        document.querySelectorAll(NON_MODALS).forEach((el) => {
-          el.setAttribute('aria-hidden', 'true')
-          el.setAttribute('data-modal-hidden', '')
-        })
+export type ModalProps = ModalComponentProps & JSX.IntrinsicElements['div']
+
+export type ModalRef = {
+  modalId: string
+  modalIsOpen: boolean
+  toggleModal: (event?: React.MouseEvent, open?: boolean) => boolean
+}
+
+export const Modal = forwardRef(
+  (
+    {
+      id,
+      children,
+      isLarge = false,
+      forceAction = false,
+      modalRoot = '.usa-modal-wrapper',
+      ...divProps
+    }: ModalProps,
+    ref: React.Ref<ModalRef>
+  ): React.ReactElement => {
+    const { isOpen, closeModal, toggleModal } = useModal()
+    const [mounted, setMounted] = useState(false)
+    const initialPaddingRef = useRef<string>()
+    const tempPaddingRef = useRef<string>()
+    const modalEl = useRef<HTMLDivElement>(null)
+
+    const modalRootSelector = modalRoot || '.usa-modal-wrapper'
+
+    const NON_MODALS = `body > *:not(${modalRootSelector}):not([aria-hidden])`
+    const NON_MODALS_HIDDEN = `[data-modal-hidden]`
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        modalId: id,
+        modalIsOpen: isOpen,
+        toggleModal,
+      }),
+      [id, isOpen]
+    )
+
+    useEffect(() => {
+      const SCROLLBAR_WIDTH = getScrollbarWidth()
+      const INITIAL_PADDING =
+        window
+          .getComputedStyle(document.body)
+          .getPropertyValue('padding-right') || '0px'
+
+      const TEMPORARY_PADDING = `${
+        parseInt(INITIAL_PADDING.replace(/px/, ''), 10) +
+        parseInt(SCROLLBAR_WIDTH.replace(/px/, ''), 10)
+      }px`
+
+      initialPaddingRef.current = INITIAL_PADDING
+      tempPaddingRef.current = TEMPORARY_PADDING
+
+      setMounted(true)
+
+      return () => {
+        // On unmount
+        const { body } = document
+        const INITIAL_PADDING = initialPaddingRef.current
+        const TEMPORARY_PADDING = tempPaddingRef.current
 
-        if (forceAction) {
-          body.classList.add('usa-js-no-click')
-        }
-      } else if (isOpen === false) {
         body.classList.remove('usa-js-modal--active')
         body.classList.remove('usa-js-no-click')
 
+        body.style.paddingRight =
+          (body.style.paddingRight === TEMPORARY_PADDING
+            ? INITIAL_PADDING
+            : TEMPORARY_PADDING) || ''
+
         document.querySelectorAll(NON_MODALS_HIDDEN).forEach((el) => {
           el.removeAttribute('aria-hidden')
           el.removeAttribute('data-modal-hidden')
         })
       }
-    }
-
-    return () => {
-      const { body } = document
-
-      body.classList.remove('usa-js-modal--active')
-      body.classList.remove('usa-js-no-click')
+    }, [])
+
+    useEffect(() => {
+      if (mounted) {
+        const { body } = document
+
+        const INITIAL_PADDING = initialPaddingRef.current
+        const TEMPORARY_PADDING = tempPaddingRef.current
+
+        body.style.paddingRight =
+          (body.style.paddingRight === TEMPORARY_PADDING
+            ? INITIAL_PADDING
+            : TEMPORARY_PADDING) || ''
+
+        if (isOpen === true) {
+          body.classList.add('usa-js-modal--active')
+
+          document.querySelectorAll(NON_MODALS).forEach((el) => {
+            el.setAttribute('aria-hidden', 'true')
+            el.setAttribute('data-modal-hidden', '')
+          })
+
+          if (forceAction) {
+            body.classList.add('usa-js-no-click')
+          }
+        } else if (isOpen === false) {
+          body.classList.remove('usa-js-modal--active')
+          body.classList.remove('usa-js-no-click')
+
+          document.querySelectorAll(NON_MODALS_HIDDEN).forEach((el) => {
+            el.removeAttribute('aria-hidden')
+            el.removeAttribute('data-modal-hidden')
+          })
+        }
+      }
+    }, [isOpen])
 
-      document.querySelectorAll(NON_MODALS_HIDDEN).forEach((el) => {
-        el.removeAttribute('aria-hidden')
-        el.removeAttribute('data-modal-hidden')
-      })
-    }
-  }, [isOpen])
+    const ariaLabelledBy = divProps['aria-labelledby']
+    const ariaDescribedBy = divProps['aria-describedby']
 
-  const ariaLabelledBy = divProps['aria-labelledby']
-  const ariaDescribedBy = divProps['aria-describedby']
+    delete divProps['aria-labelledby']
+    delete divProps['aria-describedby']
 
-  delete divProps['aria-labelledby']
-  delete divProps['aria-describedby']
+    const initialFocus = () => {
+      const focusEl = modalEl.current?.querySelector('[data-focus]') as
+        | HTMLElement
+        | SVGElement
 
-  const initialFocus = () => {
-    const focusEl = modalEl.current?.querySelector('[data-focus]') as
-      | HTMLElement
-      | SVGElement
+      return focusEl ? focusEl : modalEl.current || false
+    }
 
-    return focusEl ? focusEl : modalEl.current || false
-  }
+    const focusTrapOptions = {
+      initialFocus,
+      escapeDeactivates: (): boolean => {
+        if (forceAction) return false
 
-  const focusTrapOptions = {
-    initialFocus,
-    escapeDeactivates: (): boolean => {
-      if (forceAction) return false
+        closeModal()
+        return true
+      },
+    }
 
-      closeModal()
-      return true
-    },
+    return (
+      <FocusTrap active={isOpen} focusTrapOptions={focusTrapOptions}>
+        <ModalWrapper
+          role="dialog"
+          id={id}
+          aria-labelledby={ariaLabelledBy}
+          aria-describedby={ariaDescribedBy}
+          data-force-action={forceAction}
+          isVisible={isOpen}
+          handleClose={closeModal}
+          forceAction={forceAction}>
+          <ModalWindow
+            modalId={id}
+            {...divProps}
+            ref={modalEl}
+            isLarge={isLarge}
+            forceAction={forceAction}
+            tabIndex={-1}
+            handleClose={closeModal}>
+            {children}
+          </ModalWindow>
+        </ModalWrapper>
+      </FocusTrap>
+    )
   }
+)
 
-  return (
-    <FocusTrap active={isOpen} focusTrapOptions={focusTrapOptions}>
-      <ModalWrapper
-        role="dialog"
-        id={id}
-        aria-labelledby={ariaLabelledBy}
-        aria-describedby={ariaDescribedBy}
-        data-force-action={forceAction}
-        isVisible={isOpen}
-        handleClose={closeModal}
-        forceAction={forceAction}>
-        <ModalWindow
-          modalId={id}
-          {...divProps}
-          ref={modalEl}
-          isLarge={isLarge}
-          forceAction={forceAction}
-          tabIndex={-1}
-          handleClose={closeModal}>
-          {children}
-        </ModalWindow>
-      </ModalWrapper>
-    </FocusTrap>
-  )
-}
+Modal.displayName = 'Modal'
 
 export default Modal
diff --git a/src/components/Modal/utils.test.ts b/src/components/Modal/utils.test.ts
index 91ff943ace..47917407c4 100644
--- a/src/components/Modal/utils.test.ts
+++ b/src/components/Modal/utils.test.ts
@@ -31,4 +31,52 @@ describe('the useModal hook', () => {
     })
     expect(result.current.isOpen).toEqual(false)
   })
+
+  describe('toggleModal', () => {
+    it('with no parameters sets isOpen to its opposite', () => {
+      const { result } = renderHook(() => useModal())
+      expect(result.current.isOpen).toEqual(false)
+      act(() => {
+        result.current.toggleModal()
+      })
+      expect(result.current.isOpen).toEqual(true)
+      act(() => {
+        result.current.toggleModal()
+      })
+      expect(result.current.isOpen).toEqual(false)
+    })
+
+    it('called with true sets isOpen to true', () => {
+      const { result } = renderHook(() => useModal())
+
+      expect(result.current.isOpen).toEqual(false)
+      act(() => {
+        result.current.toggleModal(undefined, true)
+      })
+      expect(result.current.isOpen).toEqual(true)
+      act(() => {
+        result.current.toggleModal(undefined, true)
+      })
+      expect(result.current.isOpen).toEqual(true)
+    })
+
+    it('called with false sets isOpen to false', () => {
+      const { result } = renderHook(() => useModal())
+
+      expect(result.current.isOpen).toEqual(false)
+      act(() => {
+        result.current.toggleModal(undefined, false)
+      })
+      expect(result.current.isOpen).toEqual(false)
+
+      act(() => {
+        result.current.toggleModal()
+      })
+      expect(result.current.isOpen).toEqual(true)
+      act(() => {
+        result.current.toggleModal(undefined, false)
+      })
+      expect(result.current.isOpen).toEqual(false)
+    })
+  })
 })
diff --git a/src/components/Modal/utils.ts b/src/components/Modal/utils.ts
index 965c9de019..9bcab48f14 100644
--- a/src/components/Modal/utils.ts
+++ b/src/components/Modal/utils.ts
@@ -3,7 +3,8 @@ import React, { useState } from 'react'
 export type ModalHook = {
   isOpen: boolean
   openModal: (e?: React.MouseEvent) => boolean
-  closeModal: () => void
+  closeModal: (e?: React.MouseEvent) => boolean
+  toggleModal: (e?: React.MouseEvent, open?: boolean) => boolean
 }
 
 export const useModal = (): ModalHook => {
@@ -51,7 +52,23 @@ export const useModal = (): ModalHook => {
     return true
   }
 
-  return { isOpen, openModal, closeModal }
+  const toggleModal = (e?: React.MouseEvent, open?: boolean): boolean => {
+    // console.log('TOGGLE MODAL', e, open)
+    if (e && !allowToggle(e)) {
+      e.stopPropagation()
+      return false
+    }
+
+    if (open === true) setIsOpen(true)
+    else if (open === false) setIsOpen(false)
+    else {
+      setIsOpen((state) => !state)
+    }
+
+    return true
+  }
+
+  return { isOpen, toggleModal, openModal, closeModal }
 }
 
 export const getScrollbarWidth = (): string => {

From b2c562ee6115dde5186288e0194f8b2a18f63e9a Mon Sep 17 00:00:00 2001
From: Suzanne Rozier <suz@truss.works>
Date: Tue, 5 Oct 2021 15:16:52 -0500
Subject: [PATCH 32/38] Replace closeModal, openModal with toggleModal

---
 src/components/Modal/Modal.tsx                |  6 ++++-
 .../ModalCloseButton/ModalCloseButton.tsx     |  2 --
 src/components/Modal/utils.test.ts            | 23 ------------------
 src/components/Modal/utils.ts                 | 24 +------------------
 4 files changed, 6 insertions(+), 49 deletions(-)

diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 16e40eaff7..471aa884bc 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -40,7 +40,7 @@ export const Modal = forwardRef(
     }: ModalProps,
     ref: React.Ref<ModalRef>
   ): React.ReactElement => {
-    const { isOpen, closeModal, toggleModal } = useModal()
+    const { isOpen, toggleModal } = useModal()
     const [mounted, setMounted] = useState(false)
     const initialPaddingRef = useRef<string>()
     const tempPaddingRef = useRef<string>()
@@ -51,6 +51,10 @@ export const Modal = forwardRef(
     const NON_MODALS = `body > *:not(${modalRootSelector}):not([aria-hidden])`
     const NON_MODALS_HIDDEN = `[data-modal-hidden]`
 
+    const closeModal = (e?: React.MouseEvent) => {
+      toggleModal(e, false)
+    }
+
     useImperativeHandle(
       ref,
       () => ({
diff --git a/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx b/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx
index 655d78c5e3..e695bbbad7 100644
--- a/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx
+++ b/src/components/Modal/ModalCloseButton/ModalCloseButton.tsx
@@ -6,8 +6,6 @@ interface ModalCloseButtonProps {
   handleClose: () => void
 }
 
-// TODO - accept custom aria-label
-
 export const ModalCloseButton = ({
   handleClose,
   ...buttonProps
diff --git a/src/components/Modal/utils.test.ts b/src/components/Modal/utils.test.ts
index 47917407c4..bb99f6318d 100644
--- a/src/components/Modal/utils.test.ts
+++ b/src/components/Modal/utils.test.ts
@@ -9,29 +9,6 @@ describe('the useModal hook', () => {
     expect(result.current.isOpen).toEqual(false)
   })
 
-  it('openModal sets isOpen to true', () => {
-    const { result } = renderHook(() => useModal())
-
-    act(() => {
-      result.current.openModal()
-    })
-    expect(result.current.isOpen).toEqual(true)
-  })
-
-  it('closeModal sets isOpen to false', () => {
-    const { result } = renderHook(() => useModal())
-
-    act(() => {
-      result.current.openModal()
-    })
-    expect(result.current.isOpen).toEqual(true)
-
-    act(() => {
-      result.current.closeModal()
-    })
-    expect(result.current.isOpen).toEqual(false)
-  })
-
   describe('toggleModal', () => {
     it('with no parameters sets isOpen to its opposite', () => {
       const { result } = renderHook(() => useModal())
diff --git a/src/components/Modal/utils.ts b/src/components/Modal/utils.ts
index 9bcab48f14..304e73db28 100644
--- a/src/components/Modal/utils.ts
+++ b/src/components/Modal/utils.ts
@@ -2,8 +2,6 @@ import React, { useState } from 'react'
 
 export type ModalHook = {
   isOpen: boolean
-  openModal: (e?: React.MouseEvent) => boolean
-  closeModal: (e?: React.MouseEvent) => boolean
   toggleModal: (e?: React.MouseEvent, open?: boolean) => boolean
 }
 
@@ -32,26 +30,6 @@ export const useModal = (): ModalHook => {
     return true
   }
 
-  const openModal = (e?: React.MouseEvent): boolean => {
-    if (e && !allowToggle(e)) {
-      e.stopPropagation()
-      return false
-    }
-
-    setIsOpen(true)
-    return true
-  }
-
-  const closeModal = (e?: React.MouseEvent): boolean => {
-    if (e && !allowToggle(e)) {
-      e.stopPropagation()
-      return false
-    }
-
-    setIsOpen(false)
-    return true
-  }
-
   const toggleModal = (e?: React.MouseEvent, open?: boolean): boolean => {
     // console.log('TOGGLE MODAL', e, open)
     if (e && !allowToggle(e)) {
@@ -68,7 +46,7 @@ export const useModal = (): ModalHook => {
     return true
   }
 
-  return { isOpen, toggleModal, openModal, closeModal }
+  return { isOpen, toggleModal }
 }
 
 export const getScrollbarWidth = (): string => {

From 059b5891e7faa7e4da5bee36e4222b3e9b4e846c Mon Sep 17 00:00:00 2001
From: Suzanne Rozier <suz@truss.works>
Date: Tue, 5 Oct 2021 15:36:32 -0500
Subject: [PATCH 33/38] Update modal exports

---
 src/index.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index 5b8a8e0802..6ba894111b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -86,9 +86,8 @@ export { Logo } from './components/Footer/Logo/Logo'
 export { SocialLinks } from './components/Footer/SocialLinks/SocialLinks'
 
 /** Modal components */
-export { Modal, ModalProps } from './components/Modal/Modal'
+export { Modal, ModalProps, ModalRef } from './components/Modal/Modal'
 export { ModalOpenButton } from './components/Modal/ModalOpenButton'
-export { useModal } from './components/Modal/utils'
 export { ModalHeading } from './components/Modal/ModalHeading/ModalHeading'
 export { ModalFooter } from './components/Modal/ModalFooter/ModalFooter'
 

From f10dc558e756beaa01d43fd9a9dbc69a6d482cc6 Mon Sep 17 00:00:00 2001
From: Suzanne Rozier <suz@truss.works>
Date: Wed, 6 Oct 2021 12:34:07 -0500
Subject: [PATCH 34/38] Add ModalToggleButton, ModalOpenLink components

---
 src/components/Button/Button.tsx              |   2 +-
 src/components/Link/Link.tsx                  |   2 +-
 src/components/Modal/Modal.stories.tsx        | 124 +++++++-------
 src/components/Modal/Modal.test.tsx           |  16 +-
 src/components/Modal/ModalOpenButton.tsx      |  38 -----
 src/components/Modal/ModalOpenLink.test.tsx   |  71 ++++++++
 src/components/Modal/ModalOpenLink.tsx        |  54 ++++++
 .../Modal/ModalToggleButton.test.tsx          | 159 ++++++++++++++++++
 src/components/Modal/ModalToggleButton.tsx    |  60 +++++++
 src/index.ts                                  |   3 +-
 10 files changed, 411 insertions(+), 118 deletions(-)
 delete mode 100644 src/components/Modal/ModalOpenButton.tsx
 create mode 100644 src/components/Modal/ModalOpenLink.test.tsx
 create mode 100644 src/components/Modal/ModalOpenLink.tsx
 create mode 100644 src/components/Modal/ModalToggleButton.test.tsx
 create mode 100644 src/components/Modal/ModalToggleButton.tsx

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index ae0d66e687..faf3d867e5 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { deprecationWarning } from '../../deprecation'
 
-interface ButtonProps {
+export interface ButtonProps {
   type: 'button' | 'submit' | 'reset'
   children: React.ReactNode
   secondary?: boolean
diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx
index 12a7574716..bb8b88b9e2 100644
--- a/src/components/Link/Link.tsx
+++ b/src/components/Link/Link.tsx
@@ -64,7 +64,7 @@ export function Link<FCProps = DefaultLinkProps>(
     // 3. Therefore we know that removing those props leaves us
     //    with FCProps
     //
-    const linkProps: FCProps = (remainingProps as unknown) as FCProps
+    const linkProps: FCProps = remainingProps as unknown as FCProps
     const classes = linkClasses(variant, className)
     return React.createElement(
       asCustom,
diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
index 445e312f4f..64bd48cc76 100644
--- a/src/components/Modal/Modal.stories.tsx
+++ b/src/components/Modal/Modal.stories.tsx
@@ -3,9 +3,8 @@ import React, { useRef } from 'react'
 import { Modal, ModalRef } from './Modal'
 import { ModalHeading } from './ModalHeading/ModalHeading'
 import { ModalFooter } from './ModalFooter/ModalFooter'
-import { ModalOpenButton } from './ModalOpenButton'
+import { ModalToggleButton } from './ModalToggleButton'
 
-import { Button } from '../Button/Button'
 import { ButtonGroup } from '../ButtonGroup/ButtonGroup'
 
 export default {
@@ -18,6 +17,27 @@ export default {
 ### USWDS 2.0 Modal component
 
 Source: http://designsystem.digital.gov/components/modal
+
+To use this component, you will need to create a ref and pass it into the rendered Modal component. This ref will expose several properties (also described by the exported ModalRef type):
+
+- modalId: string
+  - the value of the id attribute given to the modal
+- modalIsOpen: boolean
+  - true if the modal is currently open, otherwise false
+- toggleModal: (e?: React.MouseEvent, open?: boolean) => boolean
+  - use this function to open or close the modal.
+  - if attached to an event handler, pass the event in
+  - if the second argument is provided, it will explicitly open the modal if true, or explicitly close it if false
+  - returns true if the toggle operation was successful, false if the event was prevented.
+
+Follow the [USWDS](https://designsystem.digital.gov/components/modal/) guidance for using modals:
+
+- Pass a unique ID into each modal component.
+- Any component that opens the modal should be a button or anchor element, have the [data-open-modal] attribute, and [aria-controls] attribute with the value of the modal ID.
+- Any component that closes the modal should be a button element, and have the [data-close-modal] attribute, and [aria-controls] attribute with the value of the modal ID.
+- Use the forceAction prop on the modal component if the user should be forced to take an action before closing the modal.
+
+You can also use the provided ModalToggleButton and/or ModalOpenLink components, which will adhere to the above guidelines for convenience.
 `,
       },
     },
@@ -27,17 +47,11 @@ Source: http://designsystem.digital.gov/components/modal
 export const defaultModal = (): React.ReactElement => {
   const modalRef = useRef<ModalRef>()
 
-  const handleOpen = (e) => modalRef.current?.toggleModal(e, true)
-  const handleClose = (e) => modalRef.current?.toggleModal(e, false)
-
   return (
     <>
-      <ModalOpenButton
-        handleOpen={handleOpen}
-        href="#example-modal-1"
-        aria-controls="example-modal-1">
+      <ModalToggleButton modalRef={modalRef} opener>
         Open default modal
-      </ModalOpenButton>
+      </ModalToggleButton>
       <Modal
         ref={modalRef}
         id="example-modal-1"
@@ -53,17 +67,16 @@ export const defaultModal = (): React.ReactElement => {
         </div>
         <ModalFooter>
           <ButtonGroup>
-            <Button type="button" data-close-modal onClick={handleClose}>
+            <ModalToggleButton modalRef={modalRef} closer>
               Continue without saving
-            </Button>
-            <Button
-              type="button"
-              data-close-modal
+            </ModalToggleButton>
+            <ModalToggleButton
+              modalRef={modalRef}
+              closer
               unstyled
-              className="padding-105 text-center"
-              onClick={handleClose}>
+              className="padding-105 text-center">
               Go back
-            </Button>
+            </ModalToggleButton>
           </ButtonGroup>
         </ModalFooter>
       </Modal>
@@ -74,17 +87,11 @@ export const defaultModal = (): React.ReactElement => {
 export const largeModal = (): React.ReactElement => {
   const modalRef = useRef<ModalRef>()
 
-  const handleOpen = (e) => modalRef.current?.toggleModal(e, true)
-  const handleClose = (e) => modalRef.current?.toggleModal(e, false)
-
   return (
     <>
-      <ModalOpenButton
-        handleOpen={handleOpen}
-        href="#example-modal-2"
-        aria-controls="example-modal-2">
+      <ModalToggleButton modalRef={modalRef} opener>
         Open large modal
-      </ModalOpenButton>
+      </ModalToggleButton>
       <Modal
         ref={modalRef}
         isLarge
@@ -101,17 +108,16 @@ export const largeModal = (): React.ReactElement => {
         </div>
         <ModalFooter>
           <ButtonGroup>
-            <Button type="button" data-close-modal onClick={handleClose}>
+            <ModalToggleButton modalRef={modalRef} closer>
               Continue without saving
-            </Button>
-            <Button
-              type="button"
-              data-close-modal
+            </ModalToggleButton>
+            <ModalToggleButton
+              modalRef={modalRef}
+              closer
               unstyled
-              className="padding-105 text-center"
-              onClick={handleClose}>
+              className="padding-105 text-center">
               Go back
-            </Button>
+            </ModalToggleButton>
           </ButtonGroup>
         </ModalFooter>
       </Modal>
@@ -122,17 +128,11 @@ export const largeModal = (): React.ReactElement => {
 export const forceActionModal = (): React.ReactElement => {
   const modalRef = useRef<ModalRef>()
 
-  const handleOpen = (e) => modalRef.current?.toggleModal(e, true)
-  const handleClose = (e) => modalRef.current?.toggleModal(e, false)
-
   return (
     <>
-      <ModalOpenButton
-        handleOpen={handleOpen}
-        href="#example-modal-3"
-        aria-controls="example-modal-3">
+      <ModalToggleButton modalRef={modalRef} opener>
         Open modal with forced action
-      </ModalOpenButton>
+      </ModalToggleButton>
       <Modal
         ref={modalRef}
         forceAction
@@ -151,17 +151,16 @@ export const forceActionModal = (): React.ReactElement => {
         </div>
         <ModalFooter>
           <ButtonGroup>
-            <Button type="button" data-close-modal onClick={handleClose}>
+            <ModalToggleButton modalRef={modalRef} closer>
               Yes, stay signed in
-            </Button>
-            <Button
-              type="button"
-              data-close-modal
+            </ModalToggleButton>
+            <ModalToggleButton
+              modalRef={modalRef}
+              closer
               unstyled
-              className="padding-105 text-center"
-              onClick={handleClose}>
+              className="padding-105 text-center">
               Sign out
-            </Button>
+            </ModalToggleButton>
           </ButtonGroup>
         </ModalFooter>
       </Modal>
@@ -172,17 +171,11 @@ export const forceActionModal = (): React.ReactElement => {
 export const customFocusElementModal = (): React.ReactElement => {
   const modalRef = useRef<ModalRef>()
 
-  const handleOpen = (e) => modalRef.current?.toggleModal(e, true)
-  const handleClose = (e) => modalRef.current?.toggleModal(e, false)
-
   return (
     <>
-      <ModalOpenButton
-        handleOpen={handleOpen}
-        href="#example-modal-1"
-        aria-controls="example-modal-1">
+      <ModalToggleButton modalRef={modalRef} opener>
         Open modal with custom initial focus element
-      </ModalOpenButton>
+      </ModalToggleButton>
       <Modal
         ref={modalRef}
         id="example-modal-1"
@@ -202,17 +195,16 @@ export const customFocusElementModal = (): React.ReactElement => {
         </div>
         <ModalFooter>
           <ButtonGroup>
-            <Button type="button" data-close-modal onClick={handleClose}>
+            <ModalToggleButton modalRef={modalRef} closer>
               Continue without saving
-            </Button>
-            <Button
-              type="button"
-              data-close-modal
+            </ModalToggleButton>
+            <ModalToggleButton
+              modalRef={modalRef}
+              closer
               unstyled
-              className="padding-105 text-center"
-              onClick={handleClose}>
+              className="padding-105 text-center">
               Go back
-            </Button>
+            </ModalToggleButton>
           </ButtonGroup>
         </ModalFooter>
       </Modal>
diff --git a/src/components/Modal/Modal.test.tsx b/src/components/Modal/Modal.test.tsx
index 19510731f2..f206e1d318 100644
--- a/src/components/Modal/Modal.test.tsx
+++ b/src/components/Modal/Modal.test.tsx
@@ -11,7 +11,7 @@ import userEvent from '@testing-library/user-event'
 import { Modal, ModalRef } from './Modal'
 import { ModalHeading } from './ModalHeading/ModalHeading'
 import { ModalFooter } from './ModalFooter/ModalFooter'
-import { ModalOpenButton } from './ModalOpenButton'
+import { ModalToggleButton } from './ModalToggleButton'
 import { Button } from '../Button/Button'
 import { ButtonGroup } from '../ButtonGroup/ButtonGroup'
 
@@ -47,12 +47,9 @@ const ExampleModal = ({
 
   return (
     <>
-      <ModalOpenButton
-        handleOpen={(e) => modalRef.current?.toggleModal(e, true)}
-        href="#example-modal-1"
-        aria-controls="example-modal-1">
+      <ModalToggleButton modalRef={modalRef} opener>
         Open default modal
-      </ModalOpenButton>
+      </ModalToggleButton>
       <Modal
         ref={modalRef}
         id="example-modal-1"
@@ -96,12 +93,9 @@ const ExampleModalWithFocusElement = (): React.ReactElement => {
 
   return (
     <>
-      <ModalOpenButton
-        handleOpen={(e) => modalRef.current?.toggleModal(e, true)}
-        href="#example-modal-1"
-        aria-controls="example-modal-1">
+      <ModalToggleButton modalRef={modalRef} opener>
         Open default modal
-      </ModalOpenButton>
+      </ModalToggleButton>
       <Modal
         ref={modalRef}
         id="example-modal-1"
diff --git a/src/components/Modal/ModalOpenButton.tsx b/src/components/Modal/ModalOpenButton.tsx
deleted file mode 100644
index 4ed63dcaa1..0000000000
--- a/src/components/Modal/ModalOpenButton.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-/* eslint-disable jsx-a11y/interactive-supports-focus */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-import React from 'react'
-import classnames from 'classnames'
-
-type ModalOpenButtonProps = {
-  handleOpen: (e: React.MouseEvent) => void
-}
-
-// TODO - support <a> or <button> element
-// if A: set role="button"
-// pass click handler, prevent default
-
-export const ModalOpenButton = ({
-  children,
-  className,
-  handleOpen,
-  ...props
-}: ModalOpenButtonProps &
-  JSX.IntrinsicElements['a']): React.ReactElement<HTMLAnchorElement> => {
-  const classes = classnames('usa-button', className)
-
-  const handleClick: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
-    e.preventDefault()
-    handleOpen(e)
-  }
-
-  return (
-    <a
-      {...props}
-      className={classes}
-      role="button"
-      data-open-modal
-      onClick={handleClick}>
-      {children}
-    </a>
-  )
-}
diff --git a/src/components/Modal/ModalOpenLink.test.tsx b/src/components/Modal/ModalOpenLink.test.tsx
new file mode 100644
index 0000000000..0a14ce06ef
--- /dev/null
+++ b/src/components/Modal/ModalOpenLink.test.tsx
@@ -0,0 +1,71 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+
+import { ModalRef } from './Modal'
+import { ModalOpenLink } from './ModalOpenLink'
+import userEvent from '@testing-library/user-event'
+
+describe('ModalOpenLink', () => {
+  it('renders an anchor tag with the modal control attributes', () => {
+    const mockRef: ModalRef = {
+      modalIsOpen: false,
+      modalId: 'testModal',
+      toggleModal: jest.fn().mockReturnValue(true),
+    }
+
+    const modalRef: React.RefObject<ModalRef> = {
+      current: mockRef,
+    }
+
+    render(
+      <ModalOpenLink href="#testModal" modalRef={modalRef}>
+        Open modal
+      </ModalOpenLink>
+    )
+
+    const button = screen.getByRole('button', { name: 'Open modal' })
+    expect(button).toBeInTheDocument()
+    expect(button).toHaveAttribute('aria-controls', mockRef.modalId)
+    expect(button).toHaveAttribute('data-open-modal')
+  })
+
+  it('throws an error if clicked when the modal ref is null', () => {
+    const consoleSpy = jest.spyOn(console, 'error')
+
+    const modalRef: React.RefObject<ModalRef> = {
+      current: null,
+    }
+
+    render(
+      <ModalOpenLink href="#testModal" modalRef={modalRef}>
+        Open modal
+      </ModalOpenLink>
+    )
+
+    const button = screen.getByRole('button', { name: 'Open modal' })
+    userEvent.click(button)
+    expect(consoleSpy).toHaveBeenCalledWith('ModalRef is required')
+  })
+
+  it('toggles the modal when clicked', () => {
+    const mockRef: ModalRef = {
+      modalIsOpen: false,
+      modalId: 'testModal',
+      toggleModal: jest.fn().mockReturnValue(true),
+    }
+
+    const modalRef: React.RefObject<ModalRef> = {
+      current: mockRef,
+    }
+
+    render(
+      <ModalOpenLink href="#testModal" modalRef={modalRef}>
+        Open modal
+      </ModalOpenLink>
+    )
+
+    const button = screen.getByRole('button', { name: 'Open modal' })
+    userEvent.click(button)
+    expect(mockRef.toggleModal).toHaveBeenCalled()
+  })
+})
diff --git a/src/components/Modal/ModalOpenLink.tsx b/src/components/Modal/ModalOpenLink.tsx
new file mode 100644
index 0000000000..827806b38d
--- /dev/null
+++ b/src/components/Modal/ModalOpenLink.tsx
@@ -0,0 +1,54 @@
+import React from 'react'
+
+import { ModalRef } from './Modal'
+import {
+  CustomLinkProps,
+  DefaultLinkProps,
+  isCustomProps,
+  Link,
+} from '../Link/Link'
+
+type ModalOpenLinkProps = {
+  modalRef: React.RefObject<ModalRef>
+}
+
+export function ModalOpenLink(
+  props: DefaultLinkProps & ModalOpenLinkProps
+): React.ReactElement
+export function ModalOpenLink<T>(
+  props: CustomLinkProps<T> & ModalOpenLinkProps
+): React.ReactElement
+export function ModalOpenLink<FCProps = DefaultLinkProps & ModalOpenLinkProps>({
+  modalRef,
+  ...props
+}:
+  | (DefaultLinkProps & ModalOpenLinkProps)
+  | (CustomLinkProps<FCProps> & ModalOpenLinkProps)): React.ReactElement {
+  const linkProps = props as DefaultLinkProps | CustomLinkProps<FCProps>
+
+  const handleClick: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
+    if (!modalRef || !modalRef.current) {
+      console.error('ModalRef is required')
+      return false
+    }
+
+    e.preventDefault()
+    modalRef.current.toggleModal(e, true)
+  }
+
+  if (isCustomProps(linkProps)) {
+    return <Link<FCProps> {...linkProps} />
+  }
+
+  const definitelyLinkProps = linkProps as DefaultLinkProps
+
+  return (
+    <Link
+      {...definitelyLinkProps}
+      role="button"
+      aria-controls={modalRef?.current?.modalId}
+      data-open-modal
+      onClick={handleClick}
+    />
+  )
+}
diff --git a/src/components/Modal/ModalToggleButton.test.tsx b/src/components/Modal/ModalToggleButton.test.tsx
new file mode 100644
index 0000000000..78ae390640
--- /dev/null
+++ b/src/components/Modal/ModalToggleButton.test.tsx
@@ -0,0 +1,159 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+
+import { ModalRef } from './Modal'
+import { ModalToggleButton } from './ModalToggleButton'
+import userEvent from '@testing-library/user-event'
+
+describe('ModalToggleButton', () => {
+  it('renders a button with the modal control attributes', () => {
+    const mockRef: ModalRef = {
+      modalIsOpen: false,
+      modalId: 'testModal',
+      toggleModal: jest.fn().mockReturnValue(true),
+    }
+
+    const modalRef: React.RefObject<ModalRef> = {
+      current: mockRef,
+    }
+
+    render(
+      <ModalToggleButton modalRef={modalRef}>Open modal</ModalToggleButton>
+    )
+
+    const button = screen.getByRole('button', { name: 'Open modal' })
+    expect(button).toBeInTheDocument()
+    expect(button).toHaveAttribute('type', 'button')
+    expect(button).toHaveAttribute('aria-controls', mockRef.modalId)
+    expect(button).toHaveAttribute('data-open-modal')
+    expect(button).toHaveAttribute('data-close-modal')
+  })
+
+  it('throws an error if clicked when the modal ref is null', () => {
+    const consoleSpy = jest.spyOn(console, 'error')
+
+    const modalRef: React.RefObject<ModalRef> = {
+      current: null,
+    }
+
+    render(
+      <ModalToggleButton modalRef={modalRef}>Open modal</ModalToggleButton>
+    )
+
+    const button = screen.getByRole('button', { name: 'Open modal' })
+    userEvent.click(button)
+    expect(consoleSpy).toHaveBeenCalledWith('ModalRef is required')
+  })
+
+  it('toggles the modal when clicked', () => {
+    const mockRef: ModalRef = {
+      modalIsOpen: false,
+      modalId: 'testModal',
+      toggleModal: jest.fn().mockReturnValue(true),
+    }
+
+    const modalRef: React.RefObject<ModalRef> = {
+      current: mockRef,
+    }
+
+    render(
+      <ModalToggleButton modalRef={modalRef}>Open modal</ModalToggleButton>
+    )
+
+    const button = screen.getByRole('button', { name: 'Open modal' })
+    userEvent.click(button)
+    expect(mockRef.toggleModal).toHaveBeenCalled()
+  })
+
+  describe('if an opener', () => {
+    it('has the opener attribute', () => {
+      const mockRef: ModalRef = {
+        modalIsOpen: false,
+        modalId: 'testModal',
+        toggleModal: jest.fn().mockReturnValue(true),
+      }
+
+      const modalRef: React.RefObject<ModalRef> = {
+        current: mockRef,
+      }
+
+      render(
+        <ModalToggleButton modalRef={modalRef} opener>
+          Open modal
+        </ModalToggleButton>
+      )
+
+      const button = screen.getByRole('button', { name: 'Open modal' })
+      expect(button).toHaveAttribute('data-open-modal')
+      expect(button).not.toHaveAttribute('data-close-modal')
+    })
+
+    it('opens the modal when clicked', () => {
+      const mockRef: ModalRef = {
+        modalIsOpen: false,
+        modalId: 'testModal',
+        toggleModal: jest.fn().mockReturnValue(true),
+      }
+
+      const modalRef: React.RefObject<ModalRef> = {
+        current: mockRef,
+      }
+
+      render(
+        <ModalToggleButton modalRef={modalRef} opener>
+          Open modal
+        </ModalToggleButton>
+      )
+
+      const button = screen.getByRole('button', { name: 'Open modal' })
+      userEvent.click(button)
+      expect(mockRef.toggleModal).toHaveBeenCalledWith(expect.anything(), true)
+    })
+  })
+
+  describe('if a closer', () => {
+    it('has the closer attribute', () => {
+      const mockRef: ModalRef = {
+        modalIsOpen: false,
+        modalId: 'testModal',
+        toggleModal: jest.fn().mockReturnValue(true),
+      }
+
+      const modalRef: React.RefObject<ModalRef> = {
+        current: mockRef,
+      }
+
+      render(
+        <ModalToggleButton modalRef={modalRef} closer>
+          Close modal
+        </ModalToggleButton>
+      )
+
+      const button = screen.getByRole('button', { name: 'Close modal' })
+      expect(button).toHaveAttribute('data-close-modal')
+      expect(button).not.toHaveAttribute('data-open-modal')
+    })
+
+    it('closes the modal when clicked', () => {
+      const mockRef: ModalRef = {
+        modalIsOpen: false,
+        modalId: 'testModal',
+        toggleModal: jest.fn().mockReturnValue(true),
+      }
+
+      const modalRef: React.RefObject<ModalRef> = {
+        current: mockRef,
+      }
+
+      render(
+        <ModalToggleButton modalRef={modalRef} closer>
+          Close modal
+        </ModalToggleButton>
+      )
+
+      const button = screen.getByRole('button', { name: 'Close modal' })
+      userEvent.click(button)
+      expect(mockRef.toggleModal).toHaveBeenCalledWith(expect.anything(), false)
+    })
+  })
+})
diff --git a/src/components/Modal/ModalToggleButton.tsx b/src/components/Modal/ModalToggleButton.tsx
new file mode 100644
index 0000000000..ff0735beb4
--- /dev/null
+++ b/src/components/Modal/ModalToggleButton.tsx
@@ -0,0 +1,60 @@
+import React from 'react'
+
+import { ModalRef } from './Modal'
+import { ButtonProps, Button } from '../Button/Button'
+
+type ModalToggleButtonProps = {
+  modalRef: React.RefObject<ModalRef>
+  opener?: boolean
+  closer?: boolean
+}
+
+export const ModalToggleButton = ({
+  modalRef,
+  children,
+  opener,
+  closer,
+  ...props
+}: ModalToggleButtonProps &
+  Omit<ButtonProps, 'type'> &
+  JSX.IntrinsicElements['button']): React.ReactElement<HTMLButtonElement> => {
+  const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    if (!modalRef || !modalRef.current) {
+      console.error('ModalRef is required')
+      return false
+    }
+
+    if (opener && !closer) {
+      // Only open
+      modalRef.current.toggleModal(e, true)
+    } else if (closer && !opener) {
+      // Only close
+      modalRef.current.toggleModal(e, false)
+    } else {
+      // Toggle
+      modalRef.current.toggleModal(e)
+    }
+  }
+
+  const dataProps: {
+    'data-close-modal'?: boolean
+    'data-open-modal'?: boolean
+  } = {
+    'data-close-modal': true,
+    'data-open-modal': true,
+  }
+
+  if (opener && !closer) delete dataProps['data-close-modal']
+  if (closer && !opener) delete dataProps['data-open-modal']
+
+  return (
+    <Button
+      {...props}
+      {...dataProps}
+      type="button"
+      aria-controls={modalRef?.current?.modalId}
+      onClick={handleClick}>
+      {children}
+    </Button>
+  )
+}
diff --git a/src/index.ts b/src/index.ts
index 6ba894111b..a1f9fc05fa 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -87,7 +87,8 @@ export { SocialLinks } from './components/Footer/SocialLinks/SocialLinks'
 
 /** Modal components */
 export { Modal, ModalProps, ModalRef } from './components/Modal/Modal'
-export { ModalOpenButton } from './components/Modal/ModalOpenButton'
+export { ModalToggleButton } from './components/Modal/ModalToggleButton'
+export { ModalOpenLink } from './components/Modal/ModalOpenLink'
 export { ModalHeading } from './components/Modal/ModalHeading/ModalHeading'
 export { ModalFooter } from './components/Modal/ModalFooter/ModalFooter'
 

From b49836c0cedda219a2ac2996f14a52cf493c05b3 Mon Sep 17 00:00:00 2001
From: Suzanne Rozier <suz@truss.works>
Date: Wed, 6 Oct 2021 12:39:59 -0500
Subject: [PATCH 35/38] Update ModalOpenLink test

---
 src/components/Modal/ModalOpenLink.test.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Modal/ModalOpenLink.test.tsx b/src/components/Modal/ModalOpenLink.test.tsx
index 0a14ce06ef..0d5e176e72 100644
--- a/src/components/Modal/ModalOpenLink.test.tsx
+++ b/src/components/Modal/ModalOpenLink.test.tsx
@@ -47,7 +47,7 @@ describe('ModalOpenLink', () => {
     expect(consoleSpy).toHaveBeenCalledWith('ModalRef is required')
   })
 
-  it('toggles the modal when clicked', () => {
+  it('opens the modal when clicked', () => {
     const mockRef: ModalRef = {
       modalIsOpen: false,
       modalId: 'testModal',
@@ -66,6 +66,6 @@ describe('ModalOpenLink', () => {
 
     const button = screen.getByRole('button', { name: 'Open modal' })
     userEvent.click(button)
-    expect(mockRef.toggleModal).toHaveBeenCalled()
+    expect(mockRef.toggleModal).toHaveBeenCalledWith(expect.anything(), true)
   })
 })

From 129ffa12f33a9d6f30d2bf9253423dd99655586e Mon Sep 17 00:00:00 2001
From: Suzanne Rozier <suz@truss.works>
Date: Wed, 6 Oct 2021 12:44:59 -0500
Subject: [PATCH 36/38] Fix custom link implementation

---
 src/components/Modal/ModalOpenLink.test.tsx | 46 +++++++++++++++++++++
 src/components/Modal/ModalOpenLink.tsx      | 20 ++++-----
 2 files changed, 55 insertions(+), 11 deletions(-)

diff --git a/src/components/Modal/ModalOpenLink.test.tsx b/src/components/Modal/ModalOpenLink.test.tsx
index 0d5e176e72..2a56b72d42 100644
--- a/src/components/Modal/ModalOpenLink.test.tsx
+++ b/src/components/Modal/ModalOpenLink.test.tsx
@@ -68,4 +68,50 @@ describe('ModalOpenLink', () => {
     userEvent.click(button)
     expect(mockRef.toggleModal).toHaveBeenCalledWith(expect.anything(), true)
   })
+
+  it('renders with a custom component', () => {
+    type CustomLinkProps = React.PropsWithChildren<{
+      to: string
+      className?: string
+    }> &
+      JSX.IntrinsicElements['a']
+
+    const CustomLink: React.FunctionComponent<CustomLinkProps> = ({
+      to,
+      children,
+      className,
+      ...linkProps
+    }: CustomLinkProps): React.ReactElement => (
+      <a href={to} className={className} {...linkProps}>
+        {children}
+      </a>
+    )
+
+    const mockRef: ModalRef = {
+      modalIsOpen: false,
+      modalId: 'testModal',
+      toggleModal: jest.fn().mockReturnValue(true),
+    }
+
+    const modalRef: React.RefObject<ModalRef> = {
+      current: mockRef,
+    }
+
+    render(
+      <ModalOpenLink<CustomLinkProps>
+        to="#testModal"
+        asCustom={CustomLink}
+        modalRef={modalRef}>
+        Open modal
+      </ModalOpenLink>
+    )
+
+    const button = screen.getByRole('button', { name: 'Open modal' })
+    expect(button).toBeInTheDocument()
+    expect(button).toHaveAttribute('aria-controls', mockRef.modalId)
+    expect(button).toHaveAttribute('data-open-modal')
+    expect(button).toHaveAttribute('href', '#testModal')
+    userEvent.click(button)
+    expect(mockRef.toggleModal).toHaveBeenCalledWith(expect.anything(), true)
+  })
 })
diff --git a/src/components/Modal/ModalOpenLink.tsx b/src/components/Modal/ModalOpenLink.tsx
index 827806b38d..797bb3802d 100644
--- a/src/components/Modal/ModalOpenLink.tsx
+++ b/src/components/Modal/ModalOpenLink.tsx
@@ -24,8 +24,6 @@ export function ModalOpenLink<FCProps = DefaultLinkProps & ModalOpenLinkProps>({
 }:
   | (DefaultLinkProps & ModalOpenLinkProps)
   | (CustomLinkProps<FCProps> & ModalOpenLinkProps)): React.ReactElement {
-  const linkProps = props as DefaultLinkProps | CustomLinkProps<FCProps>
-
   const handleClick: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
     if (!modalRef || !modalRef.current) {
       console.error('ModalRef is required')
@@ -36,19 +34,19 @@ export function ModalOpenLink<FCProps = DefaultLinkProps & ModalOpenLinkProps>({
     modalRef.current.toggleModal(e, true)
   }
 
+  const linkProps = {
+    ...props,
+    role: 'button',
+    'aria-controls': modalRef?.current?.modalId,
+    'data-open-modal': true,
+    onClick: handleClick,
+  } as DefaultLinkProps | CustomLinkProps<FCProps>
+
   if (isCustomProps(linkProps)) {
     return <Link<FCProps> {...linkProps} />
   }
 
   const definitelyLinkProps = linkProps as DefaultLinkProps
 
-  return (
-    <Link
-      {...definitelyLinkProps}
-      role="button"
-      aria-controls={modalRef?.current?.modalId}
-      data-open-modal
-      onClick={handleClick}
-    />
-  )
+  return <Link {...definitelyLinkProps} />
 }

From ded43ce51c80526b0a4619b5173a422c9616b810 Mon Sep 17 00:00:00 2001
From: Suzanne Rozier <suz@truss.works>
Date: Thu, 7 Oct 2021 09:19:29 -0500
Subject: [PATCH 37/38] Add open modal stories

---
 src/components/Modal/OpenModal.stories.tsx | 163 +++++++++++++++++++++
 src/components/Modal/utils.ts              |   1 -
 2 files changed, 163 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Modal/OpenModal.stories.tsx

diff --git a/src/components/Modal/OpenModal.stories.tsx b/src/components/Modal/OpenModal.stories.tsx
new file mode 100644
index 0000000000..a721417970
--- /dev/null
+++ b/src/components/Modal/OpenModal.stories.tsx
@@ -0,0 +1,163 @@
+import React from 'react'
+
+import { ModalWindow } from './ModalWindow/ModalWindow'
+import { ModalHeading } from './ModalHeading/ModalHeading'
+import { ModalFooter } from './ModalFooter/ModalFooter'
+import { ButtonGroup } from '../ButtonGroup/ButtonGroup'
+import { Button } from '../Button/Button'
+import { ModalWrapper } from './ModalWrapper/ModalWrapper'
+
+type StorybookArguments = {
+  handleClose: () => void
+}
+
+export default {
+  title: 'Components/Modal/Open states',
+  argTypes: {
+    handleClose: { action: 'Close modal' },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+### USWDS 2.0 Modal component
+
+Source: http://designsystem.digital.gov/components/modal
+`,
+      },
+    },
+  },
+}
+
+export const defaultModal = (
+  argTypes: StorybookArguments
+): React.ReactElement => {
+  return (
+    <ModalWrapper
+      role="dialog"
+      id="example-modal-1"
+      isVisible={true}
+      handleClose={argTypes.handleClose}
+      forceAction={false}
+      aria-labelledby="modal-1-heading"
+      aria-describedby="modal-1-description">
+      <ModalWindow
+        modalId="example-modal-1"
+        tabIndex={-1}
+        handleClose={argTypes.handleClose}>
+        <ModalHeading id="modal-1-heading">
+          Are you sure you want to continue?
+        </ModalHeading>
+        <div className="usa-prose">
+          <p id="modal-1-description">
+            You have unsaved changes that will be lost.
+          </p>
+        </div>
+        <ModalFooter>
+          <ButtonGroup>
+            <Button type="button" onClick={argTypes.handleClose}>
+              Continue without saving
+            </Button>
+            <Button
+              type="button"
+              onClick={argTypes.handleClose}
+              unstyled
+              className="padding-105 text-center">
+              Go back
+            </Button>
+          </ButtonGroup>
+        </ModalFooter>
+      </ModalWindow>
+    </ModalWrapper>
+  )
+}
+
+export const largeModal = (
+  argTypes: StorybookArguments
+): React.ReactElement => {
+  return (
+    <ModalWrapper
+      role="dialog"
+      id="example-modal-2"
+      isVisible={true}
+      handleClose={argTypes.handleClose}
+      forceAction={false}
+      aria-labelledby="modal-2-heading"
+      aria-describedby="modal-2-description">
+      <ModalWindow
+        isLarge
+        modalId="example-modal-2"
+        tabIndex={-1}
+        handleClose={argTypes.handleClose}>
+        <ModalHeading id="modal-2-heading">
+          Are you sure you want to continue?
+        </ModalHeading>
+        <div className="usa-prose">
+          <p id="modal-2-description">
+            You have unsaved changes that will be lost.
+          </p>
+        </div>
+        <ModalFooter>
+          <ButtonGroup>
+            <Button type="button" onClick={argTypes.handleClose}>
+              Continue without saving
+            </Button>
+            <Button
+              type="button"
+              onClick={argTypes.handleClose}
+              unstyled
+              className="padding-105 text-center">
+              Go back
+            </Button>
+          </ButtonGroup>
+        </ModalFooter>
+      </ModalWindow>
+    </ModalWrapper>
+  )
+}
+
+export const forceActionModal = (
+  argTypes: StorybookArguments
+): React.ReactElement => {
+  return (
+    <ModalWrapper
+      role="dialog"
+      id="example-modal-3"
+      isVisible={true}
+      handleClose={argTypes.handleClose}
+      forceAction={true}
+      aria-labelledby="modal-3-heading"
+      aria-describedby="modal-3-description">
+      <ModalWindow
+        forceAction
+        modalId="example-modal-3"
+        tabIndex={-1}
+        handleClose={argTypes.handleClose}>
+        <ModalHeading id="modal-3-heading">
+          Your session will end soon.
+        </ModalHeading>
+        <div className="usa-prose">
+          <p id="modal-3-description">
+            You’ve been inactive for too long. Please choose to stay signed in
+            or sign out. Otherwise, you’ll be signed out automatically in 5
+            minutes.
+          </p>
+        </div>
+        <ModalFooter>
+          <ButtonGroup>
+            <Button type="button" onClick={argTypes.handleClose}>
+              Yes, stay signed in
+            </Button>
+            <Button
+              type="button"
+              onClick={argTypes.handleClose}
+              unstyled
+              className="padding-105 text-center">
+              Sign out
+            </Button>
+          </ButtonGroup>
+        </ModalFooter>
+      </ModalWindow>
+    </ModalWrapper>
+  )
+}
diff --git a/src/components/Modal/utils.ts b/src/components/Modal/utils.ts
index 304e73db28..4e0e9d9380 100644
--- a/src/components/Modal/utils.ts
+++ b/src/components/Modal/utils.ts
@@ -31,7 +31,6 @@ export const useModal = (): ModalHook => {
   }
 
   const toggleModal = (e?: React.MouseEvent, open?: boolean): boolean => {
-    // console.log('TOGGLE MODAL', e, open)
     if (e && !allowToggle(e)) {
       e.stopPropagation()
       return false

From d76d583cbfc18e0decc91d7d6f70b17a0dc540e5 Mon Sep 17 00:00:00 2001
From: Suzanne Rozier <suz@truss.works>
Date: Thu, 7 Oct 2021 10:04:40 -0500
Subject: [PATCH 38/38] Fix Storybook action lag by replacing close handler
 with noop

Co-authored-by: Brandon Lenz <brandonalenz@gmail.com>
---
 src/components/Modal/OpenModal.stories.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/Modal/OpenModal.stories.tsx b/src/components/Modal/OpenModal.stories.tsx
index a721417970..ed0408289d 100644
--- a/src/components/Modal/OpenModal.stories.tsx
+++ b/src/components/Modal/OpenModal.stories.tsx
@@ -11,10 +11,14 @@ type StorybookArguments = {
   handleClose: () => void
 }
 
+const noop = (): void => {
+  return
+}
+
 export default {
   title: 'Components/Modal/Open states',
   argTypes: {
-    handleClose: { action: 'Close modal' },
+    handleClose: noop,
   },
   parameters: {
     docs: {