add Modal component

client/package-lock.json

@@ -1740,6 +1740,15 @@
         "@types/react": "*"
       }
     },
+    "@types/react-modal": {
+      "version": "3.8.2",
+      "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.8.2.tgz",
+      "integrity": "sha512-/Drs+XfHg9M60fy2Q63UUlhECXSNknDu3tnwFnbOhcdDjq03VD3hLCfv3X+BBzRqgu4TOu+TwEwBhgI8qdVAAQ==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-paginate": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/@types/react-paginate/-/react-paginate-6.2.1.tgz",
@@ -13136,6 +13145,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
       "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "react-markdown": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-4.1.0.tgz",
@@ -13150,6 +13164,17 @@
         "xtend": "^4.0.1"
       }
     },
+    "react-modal": {
+      "version": "3.8.2",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.8.2.tgz",
+      "integrity": "sha512-wxNk94wy/DMh2LyJa8K+LyOQDhQfhKuBrZ4SxS091p75cpW+STfY+9GpAuvl6P6Yt2r/+wxYH8Z3G5Ww/L8Tiw==",
+      "requires": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.5.10",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      }
+    },
     "react-moment": {
       "version": "0.9.2",
       "resolved": "https://registry.npmjs.org/react-moment/-/react-moment-0.9.2.tgz",

client/package.json

@@ -32,6 +32,7 @@
     "react-ga": "^2.6.0",
     "react-helmet": "^5.2.1",
     "react-markdown": "^4.1.0",
+    "react-modal": "^3.8.2",
     "react-moment": "^0.9.2",
     "react-paginate": "^6.3.0",
     "react-popper": "^1.3.3",
@@ -51,6 +52,7 @@
     "@types/react-dom": "^16.8.4",
     "@types/react-dotdotdot": "^1.2.0",
     "@types/react-helmet": "^5.0.8",
+    "@types/react-modal": "^3.8.2",
     "@types/react-paginate": "^6.2.1",
     "@types/react-router-dom": "^4.3.4",
     "@types/react-transition-group": "^2.9.2",

client/src/components/atoms/Modal.module.scss

@@ -0,0 +1,88 @@
+@import '../../styles/variables';
+
+.modalOverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba($brand-black, .7);
+    overflow-x: hidden;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    animation: fadeIn .2s ease-out backwards;
+}
+
+.modal {
+    padding: $spacer;
+    border-radius: $border-radius;
+    background: $brand-white;
+    margin: $spacer auto;
+    max-width: $break-point--small;
+    position: relative;
+    animation: moveUp .2s ease-out backwards;
+
+    @media (min-width: $break-point--small) {
+        padding: $spacer * 2 $spacer;
+    }
+
+    &:focus {
+        outline: 0;
+    }
+}
+
+.header {
+    margin-bottom: $spacer;
+}
+
+.title {
+    font-size: $font-size-h3;
+    margin: 0;
+
+    @media (min-width: $break-point--small) {
+        font-size: $font-size-h2;
+    }
+}
+
+.description {
+    margin: 0;
+    margin-top: $spacer / 2;
+}
+
+.close {
+    position: absolute;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    box-shadow: none;
+    outline: 0;
+    top: $spacer / 4;
+    right: $spacer / 2;
+    font-size: $font-size-h2;
+    color: $brand-grey;
+
+    &:hover,
+    &:focus {
+        opacity: .7;
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes moveUp {
+    from {
+        transform: translate3d(0, 1rem, 0);
+    }
+
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+}

client/src/components/atoms/Modal.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import ReactModal from 'react-modal'
+import styles from './Modal.module.scss'
+
+ReactModal.setAppElement('#root')
+
+const Modal = ({
+    title,
+    description,
+    isOpen,
+    toggleModal,
+    children,
+    onAfterOpen,
+    onRequestClose
+}: {
+    title: string
+    description?: string
+    isOpen: boolean
+    toggleModal: () => void
+    children: any
+    onAfterOpen?: () => void
+    onRequestClose?: () => void
+}) => {
+    return (
+        <ReactModal
+            isOpen={isOpen}
+            onAfterOpen={onAfterOpen}
+            onRequestClose={onRequestClose}
+            contentLabel={title}
+            className={styles.modal}
+            overlayClassName={styles.modalOverlay}
+        >
+            <button className={styles.close} onClick={toggleModal}>
+                &times;
+            </button>
+
+            <header className={styles.header}>
+                <h2 className={styles.title}>{title}</h2>
+                {description && (
+                    <p className={styles.description}>{description}</p>
+                )}
+            </header>
+
+            {children}
+        </ReactModal>
+    )
+}
+
+export default Modal

client/src/styles/global.scss

@@ -274,6 +274,9 @@ samp {
     font-size: $font-size-small;
     border-radius: $border-radius;
     text-shadow: none;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-all;
 
     h1 &,
     h2 &,