-
Notifications
You must be signed in to change notification settings - Fork 35
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #13957 from transcom/B-20473-INT
B 20473 int
- Loading branch information
Showing
37 changed files
with
451 additions
and
145 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2721,4 +2721,4 @@ experimental: | |
notify: | ||
branches: | ||
only: | ||
- main | ||
- main |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
45 changes: 45 additions & 0 deletions
45
src/components/ConfirmationModals/CancelMoveConfirmationModal.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { Button } from '@trussworks/react-uswds'; | ||
|
||
import Modal, { ModalTitle, ModalClose, ModalActions, connectModal } from 'components/Modal/Modal'; | ||
|
||
export const CancelMoveConfirmationModal = ({ onClose, onSubmit, moveID, title, content, submitText, closeText }) => ( | ||
<Modal> | ||
<ModalClose handleClick={() => onClose()} /> | ||
<ModalTitle> | ||
<h3>{title}</h3> | ||
</ModalTitle> | ||
<p>{content}</p> | ||
<ModalActions autofocus="true"> | ||
<Button data-focus="true" className="usa-button--destructive" type="submit" onClick={() => onSubmit(moveID)}> | ||
{submitText} | ||
</Button> | ||
<Button className="usa-button--secondary" type="button" onClick={() => onClose()} data-testid="modalBackButton"> | ||
{closeText} | ||
</Button> | ||
</ModalActions> | ||
</Modal> | ||
); | ||
|
||
CancelMoveConfirmationModal.propTypes = { | ||
onClose: PropTypes.func.isRequired, | ||
onSubmit: PropTypes.func.isRequired, | ||
|
||
title: PropTypes.string, | ||
content: PropTypes.string, | ||
submitText: PropTypes.string, | ||
closeText: PropTypes.string, | ||
}; | ||
|
||
CancelMoveConfirmationModal.defaultProps = { | ||
title: 'Are you sure?', | ||
content: | ||
'You’ll lose all the information in this move. If you want it back later, you’ll have to request a new move.', | ||
submitText: 'Cancel move', | ||
closeText: 'Keep move', | ||
}; | ||
|
||
CancelMoveConfirmationModal.displayName = 'CancelMoveConfirmationModal'; | ||
|
||
export default connectModal(CancelMoveConfirmationModal); |
33 changes: 33 additions & 0 deletions
33
src/components/ConfirmationModals/CancelMoveConfirmationModal.stories.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
import React from 'react'; | ||
|
||
import CancelMoveConfirmationModal from './CancelMoveConfirmationModal'; | ||
|
||
export default { | ||
title: 'Components/CancelMoveConfirmationModal', | ||
component: CancelMoveConfirmationModal, | ||
args: { | ||
moveID: '111', | ||
}, | ||
argTypes: { | ||
onClose: { action: 'close button clicked' }, | ||
onSubmit: { action: 'submit button clicked' }, | ||
}, | ||
}; | ||
|
||
const Template = (args) => <CancelMoveConfirmationModal {...args} />; | ||
|
||
export const Basic = Template.bind({}); | ||
|
||
export const WithOverrides = Template.bind({}); | ||
WithOverrides.args = { | ||
title: 'This is a sample title', | ||
content: 'Some sample description', | ||
submitText: 'YES!', | ||
closeText: 'NO', | ||
}; | ||
|
||
const ConnectedTemplate = (args) => <CancelMoveConfirmationModal {...args} />; | ||
export const ConnectedModal = ConnectedTemplate.bind({}); | ||
ConnectedModal.args = { | ||
isOpen: true, | ||
}; |
53 changes: 53 additions & 0 deletions
53
src/components/ConfirmationModals/CancelMoveConfirmationModal.test.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
import React from 'react'; | ||
import { render, screen } from '@testing-library/react'; | ||
import userEvent from '@testing-library/user-event'; | ||
|
||
import { CancelMoveConfirmationModal } from 'components/ConfirmationModals/CancelMoveConfirmationModal'; | ||
|
||
let onClose; | ||
let onSubmit; | ||
beforeEach(() => { | ||
onClose = jest.fn(); | ||
onSubmit = jest.fn(); | ||
}); | ||
|
||
describe('CancelMoveConfirmationModal', () => { | ||
const moveID = '123456'; | ||
|
||
it('renders the component', async () => { | ||
render(<CancelMoveConfirmationModal onSubmit={onSubmit} onClose={onClose} moveID={moveID} />); | ||
|
||
expect(await screen.findByRole('heading', { level: 3, name: 'Are you sure?' })).toBeInTheDocument(); | ||
}); | ||
|
||
it('closes the modal when close icon is clicked', async () => { | ||
render(<CancelMoveConfirmationModal onSubmit={onSubmit} onClose={onClose} shipmentID={moveID} />); | ||
|
||
const closeButton = await screen.findByTestId('modalCloseButton'); | ||
|
||
await userEvent.click(closeButton); | ||
|
||
expect(onClose).toHaveBeenCalledTimes(1); | ||
}); | ||
|
||
it('closes the modal when the keep button is clicked', async () => { | ||
render(<CancelMoveConfirmationModal onSubmit={onSubmit} onClose={onClose} moveID={moveID} />); | ||
|
||
const keepButton = await screen.findByRole('button', { name: 'Keep move' }); | ||
|
||
await userEvent.click(keepButton); | ||
|
||
expect(onClose).toHaveBeenCalledTimes(1); | ||
}); | ||
|
||
it('calls the submit function when cancel button is clicked', async () => { | ||
render(<CancelMoveConfirmationModal onSubmit={onSubmit} onClose={onClose} moveID={moveID} />); | ||
|
||
const cancelButton = await screen.findByRole('button', { name: 'Cancel move' }); | ||
|
||
await userEvent.click(cancelButton); | ||
|
||
expect(onSubmit).toHaveBeenCalledWith(moveID); | ||
expect(onSubmit).toHaveBeenCalledTimes(1); | ||
}); | ||
}); |
Oops, something went wrong.