From f9f6f6e4ee6c209795ecee7a106e2fc699d9eaca Mon Sep 17 00:00:00 2001
From: Richard Xia <richardxia@richardxia.com>
Date: Sun, 8 Nov 2020 21:37:40 -0800
Subject: [PATCH] Add generic Modal component.

---
 src/components/grid-aware/Modal/Modal.js      | 40 ++++++++++++++++
 .../grid-aware/Modal/Modal.module.css         | 45 ++++++++++++++++++
 .../grid-aware/Modal/Modal.stories.js         | 47 +++++++++++++++++++
 .../grid-aware/Modal/close-icon.svg           |  4 ++
 src/components/grid-aware/Modal/index.js      |  1 +
 5 files changed, 137 insertions(+)
 create mode 100644 src/components/grid-aware/Modal/Modal.js
 create mode 100644 src/components/grid-aware/Modal/Modal.module.css
 create mode 100644 src/components/grid-aware/Modal/Modal.stories.js
 create mode 100644 src/components/grid-aware/Modal/close-icon.svg
 create mode 100644 src/components/grid-aware/Modal/index.js

diff --git a/src/components/grid-aware/Modal/Modal.js b/src/components/grid-aware/Modal/Modal.js
new file mode 100644
index 00000000..08be31fb
--- /dev/null
+++ b/src/components/grid-aware/Modal/Modal.js
@@ -0,0 +1,40 @@
+import PropTypes from "prop-types";
+import React from "react";
+import ReactModal from "react-modal";
+
+import s from "./Modal.module.css";
+import closeIcon from "./close-icon.svg";
+
+const Modal = ({ children, isOpen, setIsOpen, ariaHideApp, contentLabel }) => (
+  <ReactModal
+    className={s.content}
+    overlayClassName={s.overlay}
+    isOpen={isOpen}
+    onRequestClose={() => setIsOpen(false)}
+    ariaHideApp={ariaHideApp}
+    contentLabel={contentLabel}
+  >
+    <button
+      className={s.closeButton}
+      onClick={() => setIsOpen(false)}
+      type="button"
+    >
+      <img src={closeIcon} alt="Close" />
+    </button>
+    {children}
+  </ReactModal>
+);
+
+Modal.propTypes = {
+  children: PropTypes.node.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  setIsOpen: PropTypes.func.isRequired,
+  ariaHideApp: PropTypes.bool,
+  contentLabel: PropTypes.string.isRequired,
+};
+
+Modal.defaultProps = {
+  ariaHideApp: true,
+};
+
+export default Modal;
diff --git a/src/components/grid-aware/Modal/Modal.module.css b/src/components/grid-aware/Modal/Modal.module.css
new file mode 100644
index 00000000..600551a5
--- /dev/null
+++ b/src/components/grid-aware/Modal/Modal.module.css
@@ -0,0 +1,45 @@
+.overlay {
+  background-color: rgba(0, 0, 0, 0.5);
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  position: fixed;
+  right: 0;
+  top: 0;
+}
+
+.content {
+  background: var(--color-white);
+  border-radius: 16px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
+  box-sizing: border-box;
+  margin: 80px auto 40px;
+  max-width: 850px;
+  outline: none;
+  padding: 50px;
+  position: relative;
+}
+
+.closeButton {
+  background: none;
+  border: 0;
+  cursor: pointer;
+  display: inline-block;
+  padding: 0;
+  position: absolute;
+  right: 30px;
+  top: 30px;
+}
+
+@media (--tablet-and-down) {
+  .content {
+    margin-left: 20px;
+    margin-right: 20px;
+    padding: 35px 25px;
+  }
+
+  .closeButton {
+    right: 25px;
+    top: 25px;
+  }
+}
diff --git a/src/components/grid-aware/Modal/Modal.stories.js b/src/components/grid-aware/Modal/Modal.stories.js
new file mode 100644
index 00000000..5c3f23bd
--- /dev/null
+++ b/src/components/grid-aware/Modal/Modal.stories.js
@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+
+import Modal from "./Modal";
+
+export default {
+  title: "Grid-Aware/Modal",
+  component: Modal,
+};
+
+const Template = () => {
+  const [modalIsOpen, setModalIsOpen] = useState(true);
+  return (
+    <div>
+      <Modal
+        isOpen={modalIsOpen}
+        setIsOpen={setModalIsOpen}
+        /* Disable ariaHideApp in Storybook to suppress warning about not
+         * setting the app element.
+         * https://github.com/reactjs/react-modal/issues/576
+         */
+        ariaHideApp={false}
+        contentLabel="Example Modal"
+      >
+        <div style={{ font: "var(--font-body-medium)" }}>
+          <h1 style={{ font: "var(--font-headline)" }}>Work with Us</h1>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </p>
+        </div>
+      </Modal>
+      <div>
+        <button type="button" onClick={() => setModalIsOpen(!modalIsOpen)}>
+          Toggle Modal
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export const DefaultModal = Template.bind({});
+DefaultModal.args = {};
diff --git a/src/components/grid-aware/Modal/close-icon.svg b/src/components/grid-aware/Modal/close-icon.svg
new file mode 100644
index 00000000..7f0b0b0f
--- /dev/null
+++ b/src/components/grid-aware/Modal/close-icon.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 6L6 18" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 6L18 18" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/grid-aware/Modal/index.js b/src/components/grid-aware/Modal/index.js
new file mode 100644
index 00000000..09b91f72
--- /dev/null
+++ b/src/components/grid-aware/Modal/index.js
@@ -0,0 +1 @@
+export { default } from "./Modal";