diff --git a/src/components/V2Modal/V2Modal.js b/src/components/V2Modal/V2Modal.js new file mode 100644 index 0000000..19eef50 --- /dev/null +++ b/src/components/V2Modal/V2Modal.js @@ -0,0 +1,127 @@ +import React, { useEffect } from 'react'; +import { bool, node, oneOf, string, arrayOf, shape } from 'prop-types'; +import classnames from 'classnames'; +import { pascalize } from 'humps'; +import * as olt from '@lightelligence/styles'; +import { isServerSideRendering } from '../../utils/isServerSideRendering'; + +import { + V2MODAL_TYPE_CRITICAL, + V2MODAL_TYPE_SUCCESS, + V2MODAL_TYPE_INFO, + V2MODAL_TYPE_WARNING, + V2MODAL_TYPE_ACTION, +} from './types'; + +export const V2Modal = ({ + type, + wide, + icon, + title, + content, + actions, + open, + className, + modalProps, + dialogProps, + headerProps, + contentProps, + footerProps, + ...props +}) => { + useEffect(() => { + if (!isServerSideRendering) { + document.documentElement.style.overflow = open ? 'hidden' : ''; + } + }, [open]); + + const { className: modalClassName, ...otherModalProps } = modalProps; + const { className: dialogClassName, ...otherDialogProps } = dialogProps; + const { className: footerClassName, ...otherFooterProps } = footerProps; + const { className: headerClassName, ...otherHeaderProps } = headerProps; + const { className: contentClassName, ...otherContentProps } = contentProps; + + return ( +
+
+ { +
+ {icon} + {title} +
+ } + { +
+ {content} +
+ } +
+ {actions.map((action) => action)} +
+
+
+ ); +}; + +V2Modal.propTypes = { + type: oneOf([ + V2MODAL_TYPE_CRITICAL, + V2MODAL_TYPE_SUCCESS, + V2MODAL_TYPE_INFO, + V2MODAL_TYPE_WARNING, + V2MODAL_TYPE_ACTION, + ]), + wide: bool, + title: string, + icon: node, + content: node, + open: bool.isRequired, + actions: arrayOf(node), + className: string, + modalProps: shape({ className: string }), + dialogProps: shape({ className: string }), + headerProps: shape({ className: string }), + contentProps: shape({ className: string }), + footerProps: shape({ className: string }), +}; + +V2Modal.defaultProps = { + type: null, + wide: false, + title: null, + icon: null, + content: '', + actions: [], + className: null, + modalProps: {}, + dialogProps: {}, + headerProps: {}, + contentProps: {}, + footerProps: {}, +}; diff --git a/src/components/V2Modal/V2Modal.md b/src/components/V2Modal/V2Modal.md new file mode 100644 index 0000000..e4c3bb5 --- /dev/null +++ b/src/components/V2Modal/V2Modal.md @@ -0,0 +1,267 @@ +# Showing a Modal + +Use the *V2Modal* Component to render a modal. + +```js +import { V2Modal, V2Button, Headline, Paragraph } from '@lightelligence/react'; +initialState = { modalOpen: false}; +const toggleModal = () => { + setState({ modalOpen: !state.modalOpen }); +}; +
+ Basic Modal + Ok + ]} + /> +
+``` + +## Context variations + +The *V2Modal* can be rendered with different variations based on the context. + +We support the following types: +- `V2MODAL_TYPE_CRITICAL = 'critical'`
+ Use the critical *V2Modal* whenever you want to communicate a critical or error state to the user. Especially when proceeding will likely lead to an undesired outcome for the user that he is probably not aware of. e.g.: Deleting a role will lead to users being deleted from the tenant because they have no role afterward. + +- `V2MODAL_TYPE_WARNING = 'warning'`
+ The warning *V2Modal* is used when needing to show important information e.g. to prevent errors. e.g.: 15 of your devices have not responded, check your device management. + +- `V2MODAL_TYPE_INFO = 'info'`
+ The info *V2Modal* can be used whenever an additional non-critical information should be provided to the user. The info will not have negative results no matter the users choice. e.g.: You have been invited to a tenant, accept or decline. + +- `V2MODAL_TYPE_SUCCESS = 'success'`
+ Use the success *V2Modal* to communicate a success message the user has to be made aware of. e.g.: You successfully finished an action. + +- `V2MODAL_TYPE_ACTION = 'action'`
+ Use the action *V2Modal* for changes that demand active user input. e.g.: Edit the description of a tenant. + + +```js +import { V2Modal, V2MODAL_TYPE_CRITICAL, V2MODAL_TYPE_SUCCESS, V2MODAL_TYPE_INFO, V2MODAL_TYPE_WARNING, V2MODAL_TYPE_ACTION, V2Button } from '@lightelligence/react'; +initialState = { modalOpen: { + error: false, + warning: false, + info: false, + success: false, + action: false, +}}; +const toggleModal = (type) => { + setState({ modalOpen: { + ...state.modalOpen, + [type]: !state.modalOpen[type] + }}); +}; + +const onSubmit = (type) => { + alert('All errors have been fixed!'); + setState({ modalOpen: { + ...state.modalOpen, + [type]: false + }}); +}; +
+ toggleModal('error')}>Open Error Modal + toggleModal('warning')}>Open Warning Modal + toggleModal('info')}>Open Info Modal + toggleModal('success')}>Open Success Modal + toggleModal('action')}>Open Action Modal + toggleModal('error')} + > + Cancel + , + onSubmit('error')} + > + Ok + + ]}/> + toggleModal('warning')} + > + Cancel + , + onSubmit('warning')} + > + Ok + + ]}/> + toggleModal('info')} + > + Cancel + , + onSubmit('info')} + > + Ok + + ]}/> + toggleModal('success')} + > + Cancel + , + onSubmit('success')} + > + Ok + + ]}/> + toggleModal('action')} + > + Cancel + , + onSubmit('action')} + > + Ok + + ]}/> +
+``` + +## Custom Header Modals + +In rare occasions the icon can be individually changed. Use the `icon` property to provide an icon. +You can also change the background color of the header using the `headerProps` property. + +All styles of the modal can be changed using `modalProps`, `dialogProps`, `headerProps`, `contentProps`, and `footerProps`. *Use with care!* + + + +```js +import classnames from 'classnames'; +import { V2Modal, V2Button, Icon, Headline, Paragraph } from '@lightelligence/react'; +import * as olt from '@lightelligence/styles'; +initialState = { modalOpen: false}; +const toggleModal = () => { + setState({modalOpen: !state.modalOpen}); +}; +
+ Modified Header and More Content + } + headerProps={{style: {backgroundColor: 'black'}}} + open={state.modalOpen} + content={ + <> + Headline + + Lorem ipsum dolor sit amet + + + } + actions={[ + Ok + ]} + /> +
+``` + + +```js +import { V2Modal, V2Button, V2ModalContent, Paragraph } from '@lightelligence/react'; +initialState = { modalOpen: false }; +const toggleModal = () => { + setState({modalOpen: !state.modalOpen}); +}; +
+ Wide Modal + + + Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. + + + Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. + + + Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. + + + Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. + + + Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. + + + } + actions={[ + + Ok + + ]}/> +
+``` diff --git a/src/components/V2Modal/V2Modal.test.js b/src/components/V2Modal/V2Modal.test.js new file mode 100644 index 0000000..519abfa --- /dev/null +++ b/src/components/V2Modal/V2Modal.test.js @@ -0,0 +1,144 @@ +import React from 'react'; +import { render, fireEvent } from '@testing-library/react'; + +import { oltStyles } from '../..'; + +import { Icon } from '../Icon'; +import { V2Button } from '../V2Button'; +import { V2Modal } from './V2Modal'; +import { + V2MODAL_TYPE_CRITICAL, + V2MODAL_TYPE_SUCCESS, + V2MODAL_TYPE_INFO, + V2MODAL_TYPE_WARNING, + V2MODAL_TYPE_ACTION, +} from './types'; + +const renderModal = (props) => { + return render( + , + ); +}; + +describe('V2Modal', () => { + test('has the model uses the right classes from styles', () => { + const { getByTestId } = renderModal(); + const modal = getByTestId('modal'); + expect(modal.classList.contains(oltStyles.V2Modal)).toBe(true); + }); + test('has the model dialog uses the right classes from styles', () => { + const { getByTestId } = renderModal(); + const modal = getByTestId('dialog'); + expect(modal.classList.contains(oltStyles.V2ModalDialog)).toBe(true); + }); + test('has the model header uses the right classes from styles', () => { + const { getByTestId } = renderModal(); + const modal = getByTestId('header'); + expect(modal.classList.contains(oltStyles.V2ModalHeader)).toBe(true); + }); + test('has the model content uses the right classes from styles', () => { + const { getByTestId } = renderModal(); + const modal = getByTestId('content'); + expect(modal.classList.contains(oltStyles.V2ModalContent)).toBe(true); + }); + test('has the model footer uses the right classes from styles', () => { + const { getByTestId } = renderModal(); + const modal = getByTestId('footer'); + expect(modal.classList.contains(oltStyles.V2ModalFooter)).toBe(true); + }); + test('sets isOpen', () => { + const { getByTestId } = renderModal({ + open: true, + }); + const modal = getByTestId('modal'); + expect(modal.classList.contains(oltStyles.isOpen)).toBe(true); + }); + + test('triggers onClick', () => { + const onClick = jest.fn(); + const { getByTestId } = renderModal({ + actions: [ + + Ok + , + ], + }); + const footer = getByTestId('footer'); + const button = footer.getElementsByTagName('button')[0]; + fireEvent.click(button); + expect(onClick).toHaveBeenCalled(); + }); + test('renders critical modifier', () => { + const { getByTestId } = renderModal({ + type: V2MODAL_TYPE_CRITICAL, + }); + const modal = getByTestId('modal'); + expect(modal.classList.contains(oltStyles.V2ModalCritical)).toBe(true); + }); + test('renders warning modifier', () => { + const { getByTestId } = renderModal({ + type: V2MODAL_TYPE_WARNING, + }); + const modal = getByTestId('modal'); + expect(modal.classList.contains(oltStyles.V2ModalWarning)).toBe(true); + }); + test('renders info modifier', () => { + const { getByTestId } = renderModal({ + type: V2MODAL_TYPE_INFO, + }); + const modal = getByTestId('modal'); + expect(modal.classList.contains(oltStyles.V2ModalInfo)).toBe(true); + }); + test('renders success modifier', () => { + const { getByTestId } = renderModal({ + type: V2MODAL_TYPE_SUCCESS, + }); + const modal = getByTestId('modal'); + expect(modal.classList.contains(oltStyles.V2ModalSuccess)).toBe(true); + }); + test('renders action modifier', () => { + const { getByTestId } = renderModal({ + type: V2MODAL_TYPE_ACTION, + }); + const modal = getByTestId('modal'); + expect(modal.classList.contains(oltStyles.V2ModalAction)).toBe(true); + }); + test('renders custom icons ', () => { + const { getByTestId } = renderModal({ + icon: , + }); + const header = getByTestId('header'); + const icon = header.getElementsByTagName('i')[0]; + expect(icon.classList.contains(oltStyles.Icon)).toBe(true); + expect(icon.classList.contains(oltStyles.IconPrimary)).toBe(true); + expect(icon.classList.contains(oltStyles.IconActionAddDefault)).toBe(true); + }); + test('renders wide modals ', () => { + const { getByTestId } = renderModal({ + wide: true, + }); + const modal = getByTestId('modal'); + expect(modal.classList.contains(oltStyles.V2ModalWide)).toBe(true); + }); +}); diff --git a/src/components/V2Modal/index.js b/src/components/V2Modal/index.js new file mode 100644 index 0000000..abfb614 --- /dev/null +++ b/src/components/V2Modal/index.js @@ -0,0 +1,2 @@ +export { V2Modal } from './V2Modal'; +export * from './types'; diff --git a/src/components/V2Modal/types.js b/src/components/V2Modal/types.js new file mode 100644 index 0000000..6d3555f --- /dev/null +++ b/src/components/V2Modal/types.js @@ -0,0 +1,5 @@ +export const V2MODAL_TYPE_CRITICAL = 'critical'; +export const V2MODAL_TYPE_SUCCESS = 'success'; +export const V2MODAL_TYPE_INFO = 'info'; +export const V2MODAL_TYPE_WARNING = 'warning'; +export const V2MODAL_TYPE_ACTION = 'action'; diff --git a/src/index.js b/src/index.js index 53d18b9..41496ea 100644 --- a/src/index.js +++ b/src/index.js @@ -9,6 +9,7 @@ export * from './components/Dropdown'; export * from './components/Icon'; export * from './components/Menu'; export * from './components/Modal'; +export * from './components/V2Modal'; export * from './components/Navbar'; export * from './components/Notification'; export * from './components/Snackbar';