From d1c3b3bae511f040d3fa54d1ace8742481c49710 Mon Sep 17 00:00:00 2001 From: Jessica Ellis Date: Thu, 27 Aug 2020 13:36:48 -0700 Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20form=20page=20with?= =?UTF-8?q?=20recap=20header.=20needs=20form=20component=20(#133)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 🎸 add form page with recap header. needs form component * feat(form-page.js): adds conditinal render to form-page and markdown/path for get-resilience closes #116 and closes #117 * Update _featureList.scss --- package-lock.json | 212 ++++++++++++++++++++++++++ package.json | 3 +- src/components/FeatureList.js | 19 +++ src/components/scss/_featureList.scss | 29 ++++ src/components/scss/styles.scss | 1 + src/pages/get-resilience/index.md | 13 ++ src/templates/form-page.js | 107 +++++++++++++ 7 files changed, 383 insertions(+), 1 deletion(-) create mode 100644 src/components/FeatureList.js create mode 100644 src/components/scss/_featureList.scss create mode 100644 src/pages/get-resilience/index.md create mode 100644 src/templates/form-page.js diff --git a/package-lock.json b/package-lock.json index fe9da17..98c5f48 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1861,6 +1861,101 @@ } } }, + "@material-ui/core": { + "version": "4.11.0", + "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.0.tgz", + "integrity": "sha512-bYo9uIub8wGhZySHqLQ833zi4ZML+XCBE1XwJ8EuUVSpTWWG57Pm+YugQToJNFsEyiKFhPh8DPD0bgupz8n01g==", + "requires": { + "@babel/runtime": "^7.4.4", + "@material-ui/styles": "^4.10.0", + "@material-ui/system": "^4.9.14", + "@material-ui/types": "^5.1.0", + "@material-ui/utils": "^4.10.2", + "@types/react-transition-group": "^4.2.0", + "clsx": "^1.0.4", + "hoist-non-react-statics": "^3.3.2", + "popper.js": "1.16.1-lts", + "prop-types": "^15.7.2", + "react-is": "^16.8.0", + "react-transition-group": "^4.4.0" + }, + "dependencies": { + "csstype": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.2.tgz", + "integrity": "sha512-ofovWglpqoqbfLNOTBNZLSbMuGrblAf1efvvArGKOZMBrIoJeu5UsAipQolkijtyQx5MtAzT/J9IHj/CEY1mJw==" + }, + "dom-helpers": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz", + "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==", + "requires": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, + "react-transition-group": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz", + "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==", + "requires": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + } + } + } + }, + "@material-ui/styles": { + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.10.0.tgz", + "integrity": "sha512-XPwiVTpd3rlnbfrgtEJ1eJJdFCXZkHxy8TrdieaTvwxNYj42VnnCyFzxYeNW9Lhj4V1oD8YtQ6S5Gie7bZDf7Q==", + "requires": { + "@babel/runtime": "^7.4.4", + "@emotion/hash": "^0.8.0", + "@material-ui/types": "^5.1.0", + "@material-ui/utils": "^4.9.6", + "clsx": "^1.0.4", + "csstype": "^2.5.2", + "hoist-non-react-statics": "^3.3.2", + "jss": "^10.0.3", + "jss-plugin-camel-case": "^10.0.3", + "jss-plugin-default-unit": "^10.0.3", + "jss-plugin-global": "^10.0.3", + "jss-plugin-nested": "^10.0.3", + "jss-plugin-props-sort": "^10.0.3", + "jss-plugin-rule-value-function": "^10.0.3", + "jss-plugin-vendor-prefixer": "^10.0.3", + "prop-types": "^15.7.2" + } + }, + "@material-ui/system": { + "version": "4.9.14", + "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.9.14.tgz", + "integrity": "sha512-oQbaqfSnNlEkXEziDcJDDIy8pbvwUmZXWNqlmIwDqr/ZdCK8FuV3f4nxikUh7hvClKV2gnQ9djh5CZFTHkZj3w==", + "requires": { + "@babel/runtime": "^7.4.4", + "@material-ui/utils": "^4.9.6", + "csstype": "^2.5.2", + "prop-types": "^15.7.2" + } + }, + "@material-ui/types": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz", + "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==" + }, + "@material-ui/utils": { + "version": "4.10.2", + "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.10.2.tgz", + "integrity": "sha512-eg29v74P7W5r6a4tWWDAAfZldXIzfyO1am2fIsC39hdUUHm/33k6pGOKPbgDjg/U/4ifmgAePy/1OjkKN6rFRw==", + "requires": { + "@babel/runtime": "^7.4.4", + "prop-types": "^15.7.2", + "react-is": "^16.8.0" + } + }, "@mikaelkristiansson/domready": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/@mikaelkristiansson/domready/-/domready-1.0.10.tgz", @@ -2167,6 +2262,14 @@ "csstype": "^2.2.0" } }, + "@types/react-transition-group": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz", + "integrity": "sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==", + "requires": { + "@types/react": "*" + } + }, "@types/rimraf": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/@types/rimraf/-/rimraf-2.0.4.tgz", @@ -4649,6 +4752,11 @@ "mimic-response": "^1.0.0" } }, + "clsx": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz", + "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==" + }, "coa": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz", @@ -5379,6 +5487,15 @@ } } }, + "css-vendor": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz", + "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==", + "requires": { + "@babel/runtime": "^7.8.3", + "is-in-browser": "^1.0.2" + } + }, "css-what": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz", @@ -11098,6 +11215,11 @@ "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz", "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==" }, + "hyphenate-style-name": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz", + "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==" + }, "iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", @@ -12372,6 +12494,91 @@ "verror": "1.10.0" } }, + "jss": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss/-/jss-10.4.0.tgz", + "integrity": "sha512-l7EwdwhsDishXzqTc3lbsbyZ83tlUl5L/Hb16pHCvZliA9lRDdNBZmHzeJHP0sxqD0t1mrMmMR8XroR12JBYzw==", + "requires": { + "@babel/runtime": "^7.3.1", + "csstype": "^3.0.2", + "is-in-browser": "^1.1.3", + "tiny-warning": "^1.0.2" + }, + "dependencies": { + "csstype": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.2.tgz", + "integrity": "sha512-ofovWglpqoqbfLNOTBNZLSbMuGrblAf1efvvArGKOZMBrIoJeu5UsAipQolkijtyQx5MtAzT/J9IHj/CEY1mJw==" + } + } + }, + "jss-plugin-camel-case": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.4.0.tgz", + "integrity": "sha512-9oDjsQ/AgdBbMyRjc06Kl3P8lDCSEts2vYZiPZfGAxbGCegqE4RnMob3mDaBby5H9vL9gWmyyImhLRWqIkRUCw==", + "requires": { + "@babel/runtime": "^7.3.1", + "hyphenate-style-name": "^1.0.3", + "jss": "10.4.0" + } + }, + "jss-plugin-default-unit": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.4.0.tgz", + "integrity": "sha512-BYJ+Y3RUYiMEgmlcYMLqwbA49DcSWsGgHpVmEEllTC8MK5iJ7++pT9TnKkKBnNZZxTV75ycyFCR5xeLSOzVm4A==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.4.0" + } + }, + "jss-plugin-global": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.4.0.tgz", + "integrity": "sha512-b8IHMJUmv29cidt3nI4bUI1+Mo5RZE37kqthaFpmxf5K7r2aAegGliAw4hXvA70ca6ckAoXMUl4SN/zxiRcRag==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.4.0" + } + }, + "jss-plugin-nested": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.4.0.tgz", + "integrity": "sha512-cKgpeHIxAP0ygeWh+drpLbrxFiak6zzJ2toVRi/NmHbpkNaLjTLgePmOz5+67ln3qzJiPdXXJB1tbOyYKAP4Pw==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.4.0", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-props-sort": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.4.0.tgz", + "integrity": "sha512-j/t0R40/2fp+Nzt6GgHeUFnHVY2kPGF5drUVlgkcwYoHCgtBDOhTTsOfdaQFW6sHWfoQYgnGV4CXdjlPiRrzwA==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.4.0" + } + }, + "jss-plugin-rule-value-function": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.4.0.tgz", + "integrity": "sha512-w8504Cdfu66+0SJoLkr6GUQlEb8keHg8ymtJXdVHWh0YvFxDG2l/nS93SI5Gfx0fV29dO6yUugXnKzDFJxrdFQ==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.4.0", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-vendor-prefixer": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.4.0.tgz", + "integrity": "sha512-DpF+/a+GU8hMh/948sBGnKSNfKkoHg2p9aRFUmyoyxgKjOeH9n74Ht3Yt8lOgdZsuWNJbPrvaa3U4PXKwxVpTQ==", + "requires": { + "@babel/runtime": "^7.3.1", + "css-vendor": "^2.0.8", + "jss": "10.4.0" + } + }, "jsx-ast-utils": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.3.0.tgz", @@ -15183,6 +15390,11 @@ "ts-pnp": "^1.1.6" } }, + "popper.js": { + "version": "1.16.1-lts", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz", + "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==" + }, "portfinder": { "version": "1.0.25", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.25.tgz", diff --git a/package.json b/package.json index fea0220..7242087 100644 --- a/package.json +++ b/package.json @@ -4,11 +4,12 @@ "version": "1.1.3", "author": "Mutual Aid", "dependencies": { + "@material-ui/core": "^4.11.0", "gatsby": "^2.13.31", "gatsby-image": "^2.0.23", - "gatsby-plugin-netlify-identity-widget": "1.1.1", "gatsby-plugin-netlify": "2.2.1", "gatsby-plugin-netlify-cms": "4.2.2", + "gatsby-plugin-netlify-identity-widget": "1.1.1", "gatsby-plugin-purgecss": "^4.0.0", "gatsby-plugin-react-helmet": "^3.0.4", "gatsby-plugin-sass": "^2.0.7", diff --git a/src/components/FeatureList.js b/src/components/FeatureList.js new file mode 100644 index 0000000..288d78f --- /dev/null +++ b/src/components/FeatureList.js @@ -0,0 +1,19 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + + +const FeatureList = ({ items }) => ( +
+ +
+); + +FeatureList.propTypes = { + items: PropTypes.arrayOf(PropTypes.string).isRequired, +}; + +export default FeatureList; diff --git a/src/components/scss/_featureList.scss b/src/components/scss/_featureList.scss new file mode 100644 index 0000000..b2cdae9 --- /dev/null +++ b/src/components/scss/_featureList.scss @@ -0,0 +1,29 @@ +.featureList_container { + border: 1px solid $color-grey; + border-radius: 4px; + padding: 1.5em; + height: 100%; + + ul { + display: flex; + flex-direction: column; + justify-content: space-around; + height: 100%; + width: 90%; + list-style: none; + margin: auto; + padding: 0px; + + li::before { + content: "\2713"; + color: $bg-primary; + margin: 0 0.5em; + } + } +} + +.featureList_item { + font-weight: 600; + text-transform: uppercase; + height: 40px; +} diff --git a/src/components/scss/styles.scss b/src/components/scss/styles.scss index c18c09d..ba21eb0 100644 --- a/src/components/scss/styles.scss +++ b/src/components/scss/styles.scss @@ -6,6 +6,7 @@ @import "./card"; @import "./contact"; @import "./custom_mixins"; +@import "./featureList"; @import "./footer"; @import "./grid"; @import "./header"; diff --git a/src/pages/get-resilience/index.md b/src/pages/get-resilience/index.md new file mode 100644 index 0000000..80028c2 --- /dev/null +++ b/src/pages/get-resilience/index.md @@ -0,0 +1,13 @@ +--- +templateKey: form-page +path: /get-resilience +title: Easy to use, adaptable, open-source system made for mutual aid groups +features: + - REQUESTS MANAGEMENT + - ONLINE PAYMENT + - SCHEDULING + - DELIVERY ROUTING +--- +We want to be able to help as many mutual aid groups as we can and we want to hear from you what your needs are and how our app can help! + +[How our partners use it](/partners) \ No newline at end of file diff --git a/src/templates/form-page.js b/src/templates/form-page.js new file mode 100644 index 0000000..762ea1a --- /dev/null +++ b/src/templates/form-page.js @@ -0,0 +1,107 @@ +import React, { useMemo } from 'react'; +import PropTypes from 'prop-types'; +import { graphql } from 'gatsby'; +import Grid from '@material-ui/core/Grid'; +import Layout from '../components/Layout'; +import Content, { HTMLContent } from '../components/Content'; +import FeatureList from '../components/FeatureList'; + +export const FormPageTemplate = ({ + title, + content, + contentComponent, + features, +}) => { + const PageContent = contentComponent || Content; + + const recap = useMemo(() => { + if (features.length > 0) { + if (content) { + return ( + + +

{title}

+ + + + + + + ); + } else { + return ( +
+

{title}

+ +
+ ); + } + } else if (content) { + return ( +
+

{title}

+ +
+ ); + } + + return

{title}

; + }, [title, features, content]) + + return ( +
+
+ {recap} +
+
+ ); +}; + +FormPageTemplate.propTypes = { + title: PropTypes.string.isRequired, + content: PropTypes.string, + contentComponent: PropTypes.func, + features: PropTypes.arrayOf(PropTypes.string), +}; + +FormPageTemplate.defaultProps = { + content: "", + features: [], +} + +const FormPage = ({ data }) => { + const { markdownRemark: post } = data; + + return ( + + + + ); +}; + +FormPage.propTypes = { + data: PropTypes.shape({ + markdownRemark: PropTypes.shape({ + frontmatter: PropTypes.object, + }), + }).isRequired, +}; + +export default FormPage; + +export const formPageQuery = graphql` + query FormPage($id: String!) { + markdownRemark(id: { eq: $id }) { + html + frontmatter { + title + features + } + } + } +`;