Add Modal

package.json

@@ -60,7 +60,11 @@
     "classnames": "^2.2.6",
     "cosmiconfig": "^7.0.0",
     "deepmerge": "^4.2.2",
+    "focus-trap-react": "^8.0.0",
+    "no-scroll": "^2.1.1",
     "prop-types": "^15.7.2",
+    "react-focus-lock": "^2.4.1",
+    "react-scrolllock": "^5.0.1",
     "sanitize.css": "^12.0.1",
     "svgo": "^1.3.2",
     "svgstore": "^3.0.0-2",

src/modules/index.css

@@ -1,2 +1,3 @@
 @import url('select/select.css');
 @import url('popover/popover.css');
+@import url('modal/modal.css');

src/modules/modal/content.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import styles from './modal.css'
+
+import { classNames } from 'utils'
+
+const ModalContent = ({
+  children,
+  className,
+  tag: Tag = 'div',
+  ...passProps
+}) => (
+  <Tag
+    className={classNames.use(styles.content).join(className)}
+    {...passProps}
+  >
+    {children}
+  </Tag>
+)
+
+export default ModalContent

src/modules/modal/footer.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import styles from './modal.css'
+
+import { classNames } from 'utils'
+
+const ModalFooter = ({
+  children,
+  className,
+  tag: Tag = 'footer',
+  ...passProps
+}) => (
+  <Tag className={classNames.use(styles.footer).join(className)} {...passProps}>
+    {children}
+  </Tag>
+)
+
+export default ModalFooter

src/modules/modal/modal.css

@@ -0,0 +1,65 @@
+:root {
+  --modal-padding-x: var(--component-padding-x, 1rem);
+  --modal-padding-y: var(--component-padding-y, 1rem);
+  --modal-background: var(--white, #fff);
+  --modal-corner-radius: var(--component-corner-radius, 2px);
+  --modal-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+  --modal-title-color: var(--gray-800);
+  --modal-overlay-color: rgba(0, 0, 0, 0.5);
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  background: var(--modal-overlay-color);
+}
+
+.title {
+  padding-bottom: 1rem;
+  color: var(--modal-title-color);
+  border-bottom: 1px solid var(--gray-200);
+}
+
+.footer {
+  padding-top: 1rem;
+  border-top: 1px solid var(--gray-200);
+}
+
+.content {
+  overflow-y: scroll;
+}
+
+.modal {
+  position: relative;
+  top: 10vh;
+  display: flex;
+  flex-direction: column;
+  max-height: 80vh;
+  padding: var(--modal-padding-y) var(--modal-padding-x);
+  margin-right: auto;
+  margin-left: auto;
+  overflow-y: scroll;
+  background: var(--modal-background);
+  border-radius: var(--modal-corner-radius);
+  box-shadow: var(--modal-box-shadow);
+}
+
+@media (min-width: 768px) {
+  .modal {
+    width: 750px;
+  }
+}
+@media (min-width: 992px) {
+  .modal {
+    width: 970px;
+  }
+}
+@media (min-width: 1200px) {
+  .modal {
+    width: 1170px;
+  }
+}