-
Notifications
You must be signed in to change notification settings - Fork 5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[MMI] 2642 compliance modal component (#18410)
* adds component, styles and storybook file * wip * prettier and adds test * prettier * lint * review fix * lint * updates to IconSize, IconName
- Loading branch information
Showing
6 changed files
with
265 additions
and
0 deletions.
There are no files selected for viewing
93 changes: 93 additions & 0 deletions
93
ui/components/institutional/compliance-modal/__snapshots__/compliance-modal.test.js.snap
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,93 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`ComplianceModal should render the correct content 1`] = ` | ||
<div> | ||
<div | ||
class="modal-container" | ||
> | ||
<div | ||
class="modal-container__content" | ||
> | ||
<div | ||
class="box box--flex-direction-row" | ||
> | ||
<header | ||
class="box box--display-flex box--flex-direction-row box--justify-content-space-between" | ||
> | ||
<div | ||
class="box box--display-flex box--flex-direction-row box--justify-content-flex-start box--align-items-center" | ||
> | ||
<img | ||
alt="Codefi Compliance" | ||
height="32" | ||
src="images/compliance-logo-small.svg" | ||
width="32" | ||
/> | ||
<h4 | ||
class="box mm-text mm-text--body-md box--margin-left-2 box--flex-direction-row box--color-text-default" | ||
> | ||
[codefiCompliance] | ||
</h4> | ||
</div> | ||
<button | ||
aria-label="[close]" | ||
class="box mm-button-icon mm-button-icon--size-sm box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg" | ||
data-testid="compliance-modal-close" | ||
> | ||
<span | ||
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit" | ||
style="mask-image: url('./images/icons/close.svg');" | ||
/> | ||
</button> | ||
</header> | ||
<p | ||
class="box mm-text mm-text--body-md box--padding-bottom-3 box--flex-direction-row box--color-text-alternative" | ||
data-testid="compliance-info" | ||
> | ||
[complianceBlurb0] | ||
</p> | ||
<p | ||
class="box mm-text mm-text--body-md box--padding-bottom-3 box--flex-direction-row box--color-text-alternative" | ||
> | ||
[complianceBlurb1] | ||
</p> | ||
<p | ||
class="box mm-text mm-text--body-md box--padding-bottom-3 box--flex-direction-row box--color-text-alternative" | ||
> | ||
[complianceBlurpStep0] | ||
</p> | ||
<ol | ||
data-testid="compliance-bullets" | ||
> | ||
<li> | ||
[complianceBlurbStep1] | ||
</li> | ||
<li> | ||
[complianceBlurbStep2] | ||
</li> | ||
<li> | ||
[complianceBlurbStep3] | ||
</li> | ||
<li> | ||
[complianceBlurbStep4] | ||
</li> | ||
<li> | ||
[complianceBlurbStep5] | ||
</li> | ||
</ol> | ||
</div> | ||
</div> | ||
<div | ||
class="modal-container__footer" | ||
> | ||
<button | ||
class="button btn--rounded btn-primary modal-container__footer-button" | ||
role="button" | ||
tabindex="0" | ||
> | ||
[openCodefiCompliance] | ||
</button> | ||
</div> | ||
</div> | ||
</div> | ||
`; |
88 changes: 88 additions & 0 deletions
88
ui/components/institutional/compliance-modal/compliance-modal.js
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,88 @@ | ||
import React from 'react'; | ||
import { useDispatch } from 'react-redux'; | ||
import { useI18nContext } from '../../../hooks/useI18nContext'; | ||
import { hideModal } from '../../../store/actions'; | ||
import Modal from '../../app/modal'; | ||
import Box from '../../ui/box'; | ||
import { Text, ButtonIcon, IconSize, IconName } from '../../component-library'; | ||
import { | ||
AlignItems, | ||
JustifyContent, | ||
TextColor, | ||
DISPLAY, | ||
} from '../../../helpers/constants/design-system'; | ||
|
||
const ComplianceModal = () => { | ||
const dispatch = useDispatch(); | ||
const t = useI18nContext(); | ||
|
||
const handleSubmit = () => { | ||
global.platform.openTab({ | ||
url: 'https://start.compliance.codefi.network/', | ||
}); | ||
}; | ||
|
||
const handleClose = () => dispatch(hideModal()); | ||
|
||
return ( | ||
<Modal | ||
onClose={handleClose} | ||
onSubmit={handleSubmit} | ||
submitText={t('openCodefiCompliance')} | ||
submitType="primary" | ||
> | ||
<Box> | ||
<Box | ||
as="header" | ||
display={DISPLAY.FLEX} | ||
justifyContent={JustifyContent.spaceBetween} | ||
> | ||
<Box | ||
display={DISPLAY.FLEX} | ||
justifyContent={JustifyContent.flexStart} | ||
alignItems={AlignItems.center} | ||
> | ||
<img | ||
height={32} | ||
width={32} | ||
src="images/compliance-logo-small.svg" | ||
alt="Codefi Compliance" | ||
/> | ||
<Text as="h4" marginLeft={2} color={TextColor.textDefault}> | ||
{t('codefiCompliance')} | ||
</Text> | ||
</Box> | ||
<ButtonIcon | ||
data-testid="compliance-modal-close" | ||
iconName={IconName.Close} | ||
size={IconSize.Sm} | ||
ariaLabel={t('close')} | ||
onClick={handleClose} | ||
/> | ||
</Box> | ||
<Text | ||
data-testid="compliance-info" | ||
paddingBottom={3} | ||
color={TextColor.textAlternative} | ||
> | ||
{t('complianceBlurb0')} | ||
</Text> | ||
<Text paddingBottom={3} color={TextColor.textAlternative}> | ||
{t('complianceBlurb1')} | ||
</Text> | ||
<Text paddingBottom={3} color={TextColor.textAlternative}> | ||
{t('complianceBlurpStep0')} | ||
</Text> | ||
<ol data-testid="compliance-bullets"> | ||
<li>{t('complianceBlurbStep1')}</li> | ||
<li>{t('complianceBlurbStep2')}</li> | ||
<li>{t('complianceBlurbStep3')}</li> | ||
<li>{t('complianceBlurbStep4')}</li> | ||
<li>{t('complianceBlurbStep5')}</li> | ||
</ol> | ||
</Box> | ||
</Modal> | ||
); | ||
}; | ||
|
||
export default ComplianceModal; |
6 changes: 6 additions & 0 deletions
6
ui/components/institutional/compliance-modal/compliance-modal.scss
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,6 @@ | ||
.compliance-modal { | ||
ol { | ||
list-style: decimal; | ||
list-style-position: inside; | ||
} | ||
} |
22 changes: 22 additions & 0 deletions
22
ui/components/institutional/compliance-modal/compliance-modal.stories.js
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,22 @@ | ||
import React from 'react'; | ||
import { Provider } from 'react-redux'; | ||
import configureStore from '../../../store/store'; | ||
import testData from '../../../../.storybook/test-data'; | ||
import ComplianceModal from '.'; | ||
|
||
const store = configureStore(testData); | ||
|
||
export default { | ||
title: 'Components/Institutional/ComplianceModal', | ||
decorators: [(story) => <Provider store={store}>{story()}</Provider>], | ||
component: ComplianceModal, | ||
argTypes: { | ||
onClick: { | ||
action: 'onClick', | ||
}, | ||
}, | ||
}; | ||
|
||
export const DefaultStory = (args) => <ComplianceModal {...args} />; | ||
|
||
DefaultStory.storyName = 'ComplianceModal'; |
55 changes: 55 additions & 0 deletions
55
ui/components/institutional/compliance-modal/compliance-modal.test.js
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,55 @@ | ||
import React from 'react'; | ||
import { render, fireEvent } from '@testing-library/react'; | ||
import { useDispatch } from 'react-redux'; | ||
import sinon from 'sinon'; | ||
import { hideModal } from '../../../store/actions'; | ||
import ComplianceModal from '.'; | ||
|
||
jest.mock('react-redux', () => ({ | ||
useDispatch: jest.fn(), | ||
})); | ||
|
||
jest.mock('../../../store/actions', () => ({ | ||
hideModal: jest.fn(), | ||
})); | ||
|
||
describe('ComplianceModal', () => { | ||
let dispatchMock; | ||
|
||
beforeEach(() => { | ||
dispatchMock = jest.fn(); | ||
useDispatch.mockReturnValue(dispatchMock); | ||
}); | ||
|
||
afterEach(() => { | ||
jest.resetAllMocks(); | ||
}); | ||
|
||
it('should render the correct content', () => { | ||
const { container, getByTestId } = render(<ComplianceModal />); | ||
|
||
expect(getByTestId('compliance-info')).toBeInTheDocument(); | ||
expect(getByTestId('compliance-bullets')).toBeInTheDocument(); | ||
expect(container).toMatchSnapshot(); | ||
}); | ||
|
||
it('should close the modal when close button is clicked', () => { | ||
const { getByTestId } = render(<ComplianceModal />); | ||
|
||
fireEvent.click(getByTestId('compliance-modal-close')); | ||
|
||
expect(hideModal).toHaveBeenCalled(); | ||
expect(dispatchMock).toHaveBeenCalledWith(hideModal()); | ||
}); | ||
|
||
it('should open the Compliance page when submit button is clicked', () => { | ||
global.platform = { openTab: sinon.spy() }; | ||
const { container } = render(<ComplianceModal />); | ||
|
||
const btn = container.getElementsByClassName('btn-primary')[0]; | ||
|
||
fireEvent.click(btn); | ||
|
||
expect(global.platform.openTab.called).toBeTruthy(); | ||
}); | ||
}); |
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 @@ | ||
export { default } from './compliance-modal'; |