mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 18:00:18 +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