From 7670e6da586b10905bf5f71d0579250b72513e5a Mon Sep 17 00:00:00 2001 From: Richard Xia Date: Fri, 6 Nov 2020 08:46:22 -0800 Subject: [PATCH 1/5] Add react-modal. --- package-lock.json | 16 ++++++++++++++++ package.json | 3 ++- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index a49625e5..8d161e84 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16332,6 +16332,11 @@ } } }, + "exenv": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", + "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=" + }, "exif-parser": { "version": "0.1.12", "resolved": "https://registry.npmjs.org/exif-parser/-/exif-parser-0.1.12.tgz", @@ -29645,6 +29650,17 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, + "react-modal": { + "version": "3.11.2", + "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.11.2.tgz", + "integrity": "sha512-o8gvvCOFaG1T7W6JUvsYjRjMVToLZgLIsi5kdhFIQCtHxDkA47LznX62j+l6YQkpXDbvQegsDyxe/+JJsFQN7w==", + "requires": { + "exenv": "^1.2.0", + "prop-types": "^15.5.10", + "react-lifecycles-compat": "^3.0.0", + "warning": "^4.0.3" + } + }, "react-popper": { "version": "1.3.7", "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.7.tgz", diff --git a/package.json b/package.json index 23b3278c..d7d71281 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,8 @@ "pure-react-carousel": "^1.27.6", "react": "^16.13.1", "react-burger-menu": "^2.9.0", - "react-helmet": "^6.1.0" + "react-helmet": "^6.1.0", + "react-modal": "^3.11.2" }, "devDependencies": { "@babel/core": "^7.11.6", From 2059d401fa6276f393555583d215d1109782a157 Mon Sep 17 00:00:00 2001 From: Richard Xia Date: Sun, 8 Nov 2020 21:37:40 -0800 Subject: [PATCH 2/5] 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 }) => ( + setIsOpen(false)} + ariaHideApp={ariaHideApp} + contentLabel={contentLabel} + > + + {children} + +); + +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 ( +
+ +
+

Work with Us

+

+ 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. +

+
+ +
+ +
+
+ ); +}; + +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 @@ + + + + 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"; From 5eed696e34dc9bfbc071ed54716a1b7482c40949 Mon Sep 17 00:00:00 2001 From: Richard Xia Date: Tue, 10 Nov 2020 23:38:00 -0800 Subject: [PATCH 3/5] Add VolunteerSignupForm Mailchimp form. --- .../mailchimp/VolunteerSignupForm.css | 34 ++++++++++ .../mailchimp/VolunteerSignupForm.js | 62 +++++++++++++++++++ .../mailchimp/VolunteerSignupForm.module.css | 11 ++++ .../mailchimp/VolunteerSignupForm.stories.js | 27 ++++++++ 4 files changed, 134 insertions(+) create mode 100644 src/components/thirdparty/mailchimp/VolunteerSignupForm.css create mode 100644 src/components/thirdparty/mailchimp/VolunteerSignupForm.js create mode 100644 src/components/thirdparty/mailchimp/VolunteerSignupForm.module.css create mode 100644 src/components/thirdparty/mailchimp/VolunteerSignupForm.stories.js diff --git a/src/components/thirdparty/mailchimp/VolunteerSignupForm.css b/src/components/thirdparty/mailchimp/VolunteerSignupForm.css new file mode 100644 index 00000000..38c44c05 --- /dev/null +++ b/src/components/thirdparty/mailchimp/VolunteerSignupForm.css @@ -0,0 +1,34 @@ +/* This file contains global styles because we are overriding the default styles + * that come from Mailchimp. */ +/* stylelint-disable selector-max-id */ + +#mc_embed_signup form { + padding: 0 !important; +} + +#mc_embed_signup .mc-field-group { + margin-bottom: 39px; + padding-bottom: 0 !important; +} + +#mc_embed_signup .mc-field-group label { + font: var(--font-caption); + margin-bottom: 10px !important; +} + +#mc_embed_signup .mc-field-group input { + border: 1px solid var(--color-gray-400); + border-radius: 0; + font: var(--font-body-small); + padding: 16px 17px 15px !important; +} + +#mc_embed_signup .button { + background-color: var(--color-sheltertech-blue) !important; + border-radius: 0 !important; + color: var(--color-white) !important; + font: var(--font-action) !important; + height: auto !important; + padding: 16px 40px !important; + text-transform: uppercase; +} diff --git a/src/components/thirdparty/mailchimp/VolunteerSignupForm.js b/src/components/thirdparty/mailchimp/VolunteerSignupForm.js new file mode 100644 index 00000000..59a19a08 --- /dev/null +++ b/src/components/thirdparty/mailchimp/VolunteerSignupForm.js @@ -0,0 +1,62 @@ +import React from "react"; + +import "./VolunteerSignupForm.css"; +import s from "./VolunteerSignupForm.module.css"; + +/* eslint-disable react/no-danger */ +// This entire file is just about embedding an external form + +const rawInnerHtml = { + __html: ` + + + +
+
+
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
+ + +`, +}; + +const VolunteerSignupForm = () => ( +
+

Work With Us

+

+ Thank you for your interest in partnering with ShelterTech! Enter your + contact information below and we'll get back to you shortly. +

+
+
+); +export default VolunteerSignupForm; diff --git a/src/components/thirdparty/mailchimp/VolunteerSignupForm.module.css b/src/components/thirdparty/mailchimp/VolunteerSignupForm.module.css new file mode 100644 index 00000000..08b05dc3 --- /dev/null +++ b/src/components/thirdparty/mailchimp/VolunteerSignupForm.module.css @@ -0,0 +1,11 @@ +.title { + font: var(--font-headline); + margin-bottom: 20px; + margin-top: 0; +} + +.description { + font: var(--font-body-medium); + margin-bottom: 40px; + margin-top: 0; +} diff --git a/src/components/thirdparty/mailchimp/VolunteerSignupForm.stories.js b/src/components/thirdparty/mailchimp/VolunteerSignupForm.stories.js new file mode 100644 index 00000000..355f2fa1 --- /dev/null +++ b/src/components/thirdparty/mailchimp/VolunteerSignupForm.stories.js @@ -0,0 +1,27 @@ +import React from "react"; + +import VolunteerSignupForm from "./VolunteerSignupForm"; + +export default { + title: "Third Party/Mailchimp/VolunteerSignupForm", + component: VolunteerSignupForm, +}; + +const Template = () => ( +
+

+ Note: This is a real form, and submitting it will really subscribe you to + a Mailchimp list. +

+ +
+); + +export const Default = Template.bind({}); +Default.args = {}; From f2a578d35771abd05b058f1eefa343430a56ab41 Mon Sep 17 00:00:00 2001 From: Richard Xia Date: Tue, 10 Nov 2020 23:39:00 -0800 Subject: [PATCH 4/5] Hook up Volunteer modal to Home page. --- src/components/layout.js | 6 +- src/pages/new/index.js | 336 ++++++++++++++++++++------------------- 2 files changed, 179 insertions(+), 163 deletions(-) diff --git a/src/components/layout.js b/src/components/layout.js index edef962f..760ec638 100644 --- a/src/components/layout.js +++ b/src/components/layout.js @@ -1,5 +1,6 @@ import PropTypes from "prop-types"; -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; +import ReactModal from "react-modal"; import "../stylesheets/global.css"; import { BurgerMenu, Navigation } from "./grid-aware/Navigation"; @@ -14,6 +15,9 @@ const Layout = ({ children }) => { const pageWrapperID = "page-wrapper"; const outerContainerID = "outer-container"; const [burgerMenuIsOpen, setBurgerMenuIsOpen] = useState(false); + useEffect(() => { + ReactModal.setAppElement(`#${outerContainerID}`); + }, []); return (
( - - - - {} }, - ]} - /> - { + const [volunteerFormIsOpen, setVolunteerFormIsOpen] = useState(false); + return ( + + + + + + + - - - - - - -); + "Our programs are largely funded by donations from people who care about bridging the digital divide. Support ShelterTech today.", + }} + image1={{ + url: image1, + alt: "Two volunteers working on a laptop together at a datathon.", + }} + image2={{ + url: image2, + alt: "Team posing for a photo after a design workshop.", + }} + image3={{ + url: image3, + alt: "Multiple volunteers working at a datathon.", + }} + ctaTitle="Volunteer, donate, or reach out to our partnerships team" + ctaButtons={[ + { text: "Volunteer", internalLink: "/new/volunteer" }, + { text: "Donate", internalLink: "/new/donate" }, + { text: "Work with us", onClick: () => setVolunteerFormIsOpen(true) }, + ]} + /> + + + + + + + + ); +}; From 3a34ba0021ffbb2b022b4f69944fc696323ad9da Mon Sep 17 00:00:00 2001 From: Richard Xia Date: Mon, 16 Nov 2020 00:11:17 -0800 Subject: [PATCH 5/5] Mock React.createPortal for react-modal to work in tests. Got this from https://github.com/facebook/react/issues/11565#issuecomment-427547413 --- jest/loadershim.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/jest/loadershim.js b/jest/loadershim.js index d08bba40..bbefc068 100644 --- a/jest/loadershim.js +++ b/jest/loadershim.js @@ -2,3 +2,9 @@ global.___loader = { enqueue: jest.fn(), }; + +// Used to allow react-modal to work in tests. +// https://github.com/facebook/react/issues/11565#issuecomment-427547413 +jest.mock("react-dom", () => ({ + createPortal: (node) => node, +}));