mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-26 12:29:06 +01:00
[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
This commit is contained in:
António Regadas
GitHub
parent
6ed72d6934
commit
300bfd6e69
@ -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>
|
||||||
|
`;
|
||||||
@ -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;
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
.compliance-modal {
|
||||||
|
ol {
|
||||||
|
list-style: decimal;
|
||||||
|
list-style-position: inside;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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';
|
||||||
@ -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();
|
||||||
|
});
|
||||||
|
});
|
||||||
1
ui/components/institutional/compliance-modal/index.js
Normal file
1
ui/components/institutional/compliance-modal/index.js
Normal file
@ -0,0 +1 @@
|
|||||||
|
export { default } from './compliance-modal';
|
||||||
Loading…
Reference in New Issue
Block a user