feat(component): new Modal component

package.json

@@ -47,7 +47,8 @@
     "dependencies": {
         "@babel/polyfill": "7.0.0",
         "css-vars-ponyfill": "1.16.4",
-        "prop-types": "^15.7.2"
+        "prop-types": "^15.7.2",
+        "react-modal": "3.9.1"
     },
     "peerDependencies": {
         "react": "^16.8.6",

src/components/Modal/Modal.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import bem from 'bem';
+import ReactModal from 'react-modal';
+import styles from './Modal.scss';
+
+const { block, elem } = bem({
+    name: 'Modal',
+    classnames: styles
+});
+
+const Modal = props => {
+    const {
+        children,
+        isOpen,
+        contentLabel,
+        onRequestClose,
+        className,
+        portalClassName,
+        overlayClassName,
+        ...rest
+    } = props;
+
+    const { className: portalClass } = block(props);
+    const { className: overlayClass } = elem('overlay', props);
+    const { className: overlayEnterClass } = elem('overlayEnter', props);
+    const { className: overlayExitClass } = elem('overlayExit', props);
+    const { className: contentClass } = elem('content', props);
+    const { className: contentEnterClass } = elem('contentEnter', props);
+    const { className: contentExitClass } = elem('contentExit', props);
+
+    const contentClassJoined = [contentClass, className].join(' ');
+
+    return (
+        <ReactModal
+            isOpen={isOpen}
+            contentLabel={contentLabel}
+            onRequestClose={onRequestClose}
+            closeTimeoutMS={300}
+            portalClassName={portalClass}
+            overlayClassName={{
+                base: overlayClass,
+                afterOpen: overlayEnterClass,
+                beforeClose: overlayExitClass
+            }}
+            className={{
+                base: contentClassJoined,
+                afterOpen: contentEnterClass,
+                beforeClose: contentExitClass
+            }}
+            {...rest}
+        >
+            {children}
+        </ReactModal>
+    );
+};
+
+Modal.displayName = 'Modal';
+
+Modal.propTypes = {
+    /** elements to be rendered within the modal */
+    children: PropTypes.node.isRequired,
+    /** The state of the modal */
+    isOpen: PropTypes.bool.isRequired,
+    /** A title for the modal that will be used by screenreaders */
+    contentLabel: PropTypes.string.isRequired,
+    /** A function to be called when the modal is closed */
+    onRequestClose: PropTypes.func,
+    /** Additional class to be applied to the content part */
+    className: PropTypes.string
+};
+
+Modal.defaultProps = {
+    onRequestClose: null,
+    className: ''
+};
+
+export default Modal;

src/components/Modal/Modal.scss

@@ -0,0 +1,45 @@
+.Modal {
+    &__overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(0, 0, 0, 0.5);
+        opacity: 0;
+        transition: opacity var(--transition-duration) ease-in-out;
+    }
+
+    &__overlayEnter {
+        opacity: 1;
+    }
+
+    &__overlayExit {
+        opacity: 0;
+    }
+
+    &__content {
+        position: relative;
+        top: 15vh;
+        width: 65vw;
+        height: 65vh;
+        margin: auto;
+        max-width: var(--site-container-max-size);
+        border: 1px solid var(--border-color-strong);
+        border-radius: var(--border-radius);
+        background-color: var(--color-background);
+        box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.8);
+        overflow: auto;
+        outline: none;
+        transform: translateY(50px);
+        transition: transform var(--transition-duration);
+    }
+
+    &__contentEnter {
+        transform: translateY(0);
+    }
+
+    &__contentExit {
+        transform: translateY(50px);
+    }
+}

src/components/Modal/__tests__/Modal.spec.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import toJson from 'enzyme-to-json';
+import Modal from '../Modal';
+
+describe('Modal', () => {
+    it('should render correctly', () => {
+        const wrapper = shallow(
+            <Modal isOpen contentLabel="Content label">
+                Some children
+            </Modal>
+        );
+        expect(toJson(wrapper)).toMatchSnapshot();
+    });
+});

src/components/Modal/__tests__/__snapshots__/Modal.spec.js.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Modal should render correctly 1`] = `
+<Modal
+  ariaHideApp={true}
+  bodyOpenClassName="ReactModal__Body--open"
+  className={
+    Object {
+      "afterOpen": "Modal__contentEnter",
+      "base": "Modal__content ",
+      "beforeClose": "Modal__contentExit",
+    }
+  }
+  closeTimeoutMS={300}
+  contentLabel="Content label"
+  isOpen={true}
+  onRequestClose={null}
+  overlayClassName={
+    Object {
+      "afterOpen": "Modal__overlayEnter",
+      "base": "Modal__overlay",
+      "beforeClose": "Modal__overlayExit",
+    }
+  }
+  parentSelector={[Function]}
+  portalClassName="ReactModalPortal"
+  role="dialog"
+  shouldCloseOnEsc={true}
+  shouldCloseOnOverlayClick={true}
+  shouldFocusAfterRender={true}
+  shouldReturnFocusAfterClose={true}
+>
+  Some children
+</Modal>
+`;

src/components/Modal/index.js

@@ -0,0 +1 @@
+export { default } from './Modal';

src/index.js

@@ -13,6 +13,7 @@ export { default as Input } from './components/Input';
 export { default as Link } from './components/Link';
 export { List, ListItem, ListActions } from './components/List';
 export { default as LoadingSpinner } from './components/LoadingSpinner';
+export { default as Modal } from './components/Modal';
 export { NavBar, NavItem } from './components/Navigation';
 export { PageWidthRestrictor, BlockWidthRestrictor } from './components/WidthRestrictor';
 export { default as Pagination } from './components/Pagination';

src/utils/OneUI/OneUI.js

@@ -1,4 +1,5 @@
 import cssVarsPonyfill from 'css-vars-ponyfill';
+import ReactModal from 'react-modal';
 
 const isInternetExplorer11 = () => {
     const ua = window.navigator.userAgent;
@@ -83,6 +84,14 @@ class OneUI {
             head.appendChild(styleElement);
         });
     }
+
+    /**
+     * Inits ReactModal and sets global params for it.
+     * @param {string} selector - css selector for the app element
+     */
+    static modalInit(selector) {
+        ReactModal.setAppElement(selector);
+    }
 }
 
 export default OneUI;

stories/Modal.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { boolean, text, withKnobs } from '@storybook/addon-knobs';
+import { withInfo } from '@storybook/addon-info';
+import { Modal } from '@textkernel/oneui';
+
+storiesOf('Modal', module)
+    .addDecorator(withKnobs)
+    .addDecorator(withInfo)
+    .add(
+        'Modal',
+        () => {
+            const onClose = () => console.log('Modal was requested to be closed.');
+            return (
+                <Modal
+                    isOpen={boolean('Open', false)}
+                    contentLabel={text(
+                        'Label for content visible to screenreaders',
+                        'My superb modal'
+                    )}
+                    onRequestClose={onClose}
+                >
+                    Some content
+                </Modal>
+            );
+        },
+        {
+            info: {
+                text: `
+                ## Usage information
+
+                This component is a wrapper around [react-modal](http://reactcommunity.org/react-modal/#usage).
+                
+                * You can pass other props according to their definition, apart from classes.
+                * For accessibility reasons you need to __initialise__ modal use in your app. 
+                For more info see [app element](http://reactcommunity.org/react-modal/accessibility/#app-element) in thier documentation. 
+                To do this:
+
+                > import OneUI from '@textkernel/oneui';
+
+                > OneUI.__initModal__(appElementSelector);
+
+                
+
+                To see the modal in action here, change the Open prop to 'true' in the Knobs section.
+                `
+            }
+        }
+    );

stories/index.js

@@ -13,6 +13,7 @@ import './Input';
 import './Link';
 import './List';
 import './LoadingSpinner';
+import './Modal';
 import './Navigation';
 import './WidthRestrictor';
 import './Pagination';