): React.ReactElement => {
-
- /** Example of Modal Component Using Hooks */
- const { isOpen, openModal, closeModal } = useModal()
- /** End of Example of Modal Component Using Hooks */
-
- return (
-
- Modals
-
-
- This page provides examples of how modals may be used within an
- application.
-
-
-
-
- {/* Example of modal using redux for state management */}
-
closeModalAction('testModal')}>
- This is a modal that uses redux!
-
-
-
- {/* Example of modal using hooks for state management */}
-
- This is a modal that uses hooks!
-
-
My Modal
-
-const testActions = (
- <>
-
-
-
-)
-
-export const basic = (): React.ReactElement => (
-
-
- This is a basic modal!
-
-
-
- This is a basic modal!
-
-
-
- This is a basic modal!
-
-
-
- This is a basic modal!
-
-
-
Close case?}
- actions={
- <>
-
-
-
- }>
-
- This will close your investigative work for{' '}
- Case #590381450 and forward the case to adjudication.
-
-
-
-
-
- Close case?}
- actions={
- <>
-
-
-
- }>
-
- This will close your investigative work for{' '}
- Case #590381450 and forward the case to adjudication.
-
-
-
-
This is a test modal!
-
- )
-
- const ConnectedTestModal = connectModal(TestModal)
-
- return (
-
-
-
-
- )
-}
diff --git a/src/components/Modal/Modal.test.tsx b/src/components/Modal/Modal.test.tsx
deleted file mode 100644
index 11cb35d9ec..0000000000
--- a/src/components/Modal/Modal.test.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import { renderHook, act } from '@testing-library/react-hooks'
-
-jest.mock('../../deprecation')
-import { deprecationWarning } from '../../deprecation'
-import { Modal, connectModal, useModal } from './Modal'
-
-describe('Modal component', () => {
- it('renders without errors', () => {
- const { queryByTestId } = render(My Modal)
- expect(queryByTestId('modal')).toBeInTheDocument()
- expect(deprecationWarning).toHaveBeenCalledTimes(1)
- })
-})
-
-const TestModal = (): React.ReactElement => My Modal
-
-describe('connectModal', () => {
- beforeEach(() => {
- jest.clearAllMocks()
- })
- const mockClose = jest.fn()
-
- describe('if isOpen is false', () => {
- it('does not render its children', () => {
- const TestConnectedModal = connectModal(TestModal)
- const { queryByText } = render(
-
- )
- expect(queryByText('My Modal')).not.toBeInTheDocument()
- expect(deprecationWarning).toHaveBeenCalledTimes(1)
- })
- })
-
- describe('if isOpen is true', () => {
- it('renders its children', () => {
- const TestConnectedModal = connectModal(TestModal)
- const { queryByText } = render(
-
- )
- expect(queryByText('My Modal')).toBeInTheDocument()
- expect(deprecationWarning).toHaveBeenCalledTimes(2)
- })
- })
-})
-
-describe('useModal', () => {
- beforeEach(() => {
- jest.clearAllMocks()
- })
-
- it('provides state and functions for opening/closing a modal', () => {
- const { result } = renderHook(() => useModal())
- expect(deprecationWarning).toHaveBeenCalledTimes(1)
- expect(result.current.isOpen).toEqual(false)
- expect(typeof result.current.openModal).toBe('function')
- expect(typeof result.current.closeModal).toBe('function')
-
- act(() => {
- result.current.openModal()
- })
-
- expect(result.current.isOpen).toEqual(true)
- expect(deprecationWarning).toHaveBeenCalledTimes(2)
-
- act(() => {
- result.current.closeModal()
- })
-
- expect(result.current.isOpen).toEqual(false)
- expect(deprecationWarning).toHaveBeenCalledTimes(3)
- })
-})
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
deleted file mode 100644
index 751a085edb..0000000000
--- a/src/components/Modal/Modal.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import React, { useState } from 'react'
-import classnames from 'classnames'
-
-import styles from './Modal.module.scss'
-import { deprecationWarning } from '../../deprecation'
-
-type ModalProps = {
- title?: React.ReactNode
- children: React.ReactNode
- actions?: React.ReactNode
- className?: string
-}
-
-/** Modal UI component */
-export const Modal = ({
- title,
- children,
- actions,
- className,
-}: ModalProps): React.ReactElement => {
- const classes = classnames(styles.modal, className)
-
- deprecationWarning(
- 'Modal is deprecated. Modal will be removed from react-uswds alongside all other Modal related components and functions in the next major release.'
- )
-
- return (
-
-
{title}
-
{children}
-
{actions}
-
{children}
-}
-
-/** connectModal and useModal package the logic & state of opening/closing a modal */
-export interface ConnectedModalProps {
- isOpen: boolean
- onClose: () => void
-}
-
-export const connectModal = function (
- Component: React.FunctionComponent
| React.ComponentType
-): React.FunctionComponent
{
- const ConnectedModal = ({
- isOpen,
- ...props
- }: P): React.ReactElement | null => {
- deprecationWarning(
- "Modal is deprecated. 'connectModal' will be removed from react-uswds alongside all other Modal related components and functions in the next major release."
- )
-
- if (!isOpen) return null
- return (
- <>
-
-
-
-
-
- )
- }
-
- return ConnectedModal
-}
-
-export type ModalHook = {
- isOpen: boolean
- openModal: () => void
- closeModal: () => void
-}
-
-export const useModal = (): ModalHook => {
- deprecationWarning(
- 'Modal is deprecated. The useModal hook will be removed from react-uswds alongside all other Modal related components and functions in the next major release.'
- )
-
- const [isOpen, setIsOpen] = useState(false)
-
- 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 d2bb8e85b7..7a79e04d6d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -109,15 +109,3 @@ export { ProcessListItem } from './components/ProcessList/ProcessListItem/Proces
export { ProcessListHeading } from './components/ProcessList/ProcessListHeading/ProcessListHeading'
export { SiteAlert } from './components/SiteAlert/SiteAlert'
-
-/** Truss-designed components */
-export {
- Modal,
- Overlay,
- ModalContainer,
- connectModal,
- useModal,
-} from './components/Modal/Modal'
-
-// Types and interfaces should be exported separately
-export type { ConnectedModalProps, ModalHook } from './components/Modal/Modal'