Add generic Modal component.

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;

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;
+  }
+}

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 = {};

src/components/grid-aware/Modal/index.js

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