From 8c36d160db48cd075786b7a8ecfc0ae8ffc25e6c Mon Sep 17 00:00:00 2001 From: samgildea Date: Wed, 5 May 2021 12:17:42 -0400 Subject: [PATCH 01/13] #59 singular use case page --- src/pages/process.js | 10 +-- src/schemas/use_case.json | 11 ++- src/templates/use-case-styles.js | 90 ++++++++++++++++++++++ src/templates/use_case.js | 127 ++++++++++++++++++++++--------- 4 files changed, 197 insertions(+), 41 deletions(-) create mode 100644 src/templates/use-case-styles.js diff --git a/src/pages/process.js b/src/pages/process.js index 1b5c615..5cdb62f 100644 --- a/src/pages/process.js +++ b/src/pages/process.js @@ -18,7 +18,7 @@ export const query = graphql` data { find_button_destination find_button_text - find_description + # find_description find_header header_image { url @@ -27,10 +27,10 @@ export const query = graphql` height } } - how_description { - text - } - how_header + # how_description { + # text + # } + # how_header how_images { how_image { url diff --git a/src/schemas/use_case.json b/src/schemas/use_case.json index c5d150b..200b6be 100644 --- a/src/schemas/use_case.json +++ b/src/schemas/use_case.json @@ -47,8 +47,9 @@ } }, "overview_description" : { - "type" : "Text", + "type" : "StructuredText", "config" : { + "multi" : "paragraph", "label" : "Overview Description" } }, @@ -80,6 +81,14 @@ "type" : "Group", "config" : { "fields" : { + "reason_image" : { + "type" : "Image", + "config" : { + "constraint" : { }, + "thumbnails" : [ ], + "label" : "Reason Image" + } + }, "specific_reason_heading" : { "type" : "Text", "config" : { diff --git a/src/templates/use-case-styles.js b/src/templates/use-case-styles.js new file mode 100644 index 0000000..fb30deb --- /dev/null +++ b/src/templates/use-case-styles.js @@ -0,0 +1,90 @@ +import styled from "styled-components" +import dimensions from "../style/dimensions" +import { layoutPaddingDesktop, layoutPaddingMobile } from "../style/variables" +import colors from "../style/colors" + +export const UseCaseContainer = styled.div`` + +export const UseCaseIntro = styled.div` + @media (min-width: ${dimensions.maxwidthTablet}px) { + display: flex; + padding-top: 248px; + } +` + +export const IntroImages = styled.div` + position: relative; +` + +export const ImageOne = styled.div` + margin-bottom: 52px; + img { + width: 100%; + height: 329px; + object-fit: cover; + margin-top: 170px; + + } + + @media (min-width: ${dimensions.maxwidthTablet}px) { + img { + width: 42vw; + height: 358px; + object-fit: cover; + margin-top: 0px; + + } + } +` + + +export const WhySection = styled.div` + + + +` + + +export const IntroTextSection = styled.div` + @media (min-width: ${dimensions.maxwidthTablet}px) { + margin-left: 83px; + } +` + +export const IntroHeader = styled.div` + color: ${colors.blue900}; +` + +export const ImageTwo = styled.div` + img { + display: none; + } + @media (min-width: ${dimensions.maxwidthTablet}px) { + img { + display: inherit; + width: 25vw; + height: 480px; + object-fit: cover; + float: right; + } + } +` + +export const IntroDescription = styled.div` + margin-bottom: 37px; + color: ${colors.black900}; +` + +export const MobileImage = styled.div` + img { + width: 100%; + height: 437px; + object-fit: cover; + } + + @media (min-width: ${dimensions.maxwidthTablet}px) { + img { + display: none; + } + } +` diff --git a/src/templates/use_case.js b/src/templates/use_case.js index 0d0a429..b039367 100644 --- a/src/templates/use_case.js +++ b/src/templates/use_case.js @@ -1,52 +1,109 @@ import React from "react" import { graphql } from "gatsby" +import { + UseCaseContainer, + UseCaseIntro, + IntroImages, + ImageOne, + ImageTwo, + IntroTextSection, + IntroHeader, + IntroDescription, + MobileImage, + WhySection, +} from "./use-case-styles" +import Layout from "../components/layout" + +import { H1, Body } from "../style/type-styles" export default function Product({ data }) { const use_case = data.allPrismicUseCase.edges[0].node - return

{use_case.data.preview_title}

+ return ( + + + + + + + + + + + + + + + +

{use_case.data.overview_heading}

+ + {use_case.data.overview_description.raw.map(paragraph => { + return ( + + {paragraph.text} + + ) + })} + + + + + + + + + + + + + + + ) } export const query = graphql` query($uid: String!) { allPrismicUseCase(filter: { uid: { eq: $uid } }) { - edges { - node { - uid - data { - preview_title - preview_image { - url - } - specific_reason { - specific_reason_heading - specific_reason_description - } - reasons_main_heading - preview_description - overview_image_two { - url - } - overview_image_one { - url - } - overview_heading - overview_description - learn_more_button_text - learn_more_button_destination { - url - } - demo_video { - url - } - demo_heading - cta_button_text - cta_button_destination { - url + edges { + node { + uid + data { + preview_title + preview_image { + url + } + specific_reason { + specific_reason_heading + specific_reason_description + } + reasons_main_heading + preview_description + overview_image_two { + url + } + overview_image_one { + url + } + overview_heading + overview_description { + text + raw + } + learn_more_button_text + learn_more_button_destination { + url + } + demo_video { + url + } + demo_heading + cta_button_text + cta_button_destination { + url + } } } } } } - } ` From b7d267e5e300a83b6c13de58e6909a6868db0f36 Mon Sep 17 00:00:00 2001 From: samgildea Date: Wed, 5 May 2021 14:57:43 -0400 Subject: [PATCH 02/13] #59 updating demo video --- src/schemas/use_case.json | 180 +++++++++++++++---------------- src/templates/use-case-styles.js | 124 ++++++++++++++++++--- src/templates/use_case.js | 64 +++++++++-- 3 files changed, 258 insertions(+), 110 deletions(-) diff --git a/src/schemas/use_case.json b/src/schemas/use_case.json index 200b6be..2433881 100644 --- a/src/schemas/use_case.json +++ b/src/schemas/use_case.json @@ -1,134 +1,134 @@ { - "Main" : { - "uid" : { - "type" : "UID", - "config" : { - "label" : "uid" + "Main": { + "uid": { + "type": "UID", + "config": { + "label": "uid" } }, - "preview_title" : { - "type" : "Text", - "config" : { - "label" : "Preview Title" + "preview_title": { + "type": "Text", + "config": { + "label": "Preview Title" } }, - "preview_description" : { - "type" : "Text", - "config" : { - "label" : "Preview Description" + "preview_description": { + "type": "Text", + "config": { + "label": "Preview Description" } }, - "preview_image" : { - "type" : "Image", - "config" : { - "constraint" : { }, - "thumbnails" : [ ], - "label" : "Preview Image" + "preview_image": { + "type": "Image", + "config": { + "constraint": {}, + "thumbnails": [], + "label": "Preview Image" } }, - "learn_more_button_text" : { - "type" : "Text", - "config" : { - "label" : "Learn More Button Text" + "learn_more_button_text": { + "type": "Text", + "config": { + "label": "Learn More Button Text" } }, - "learn_more_button_destination" : { - "type" : "Link", - "config" : { - "label" : "Learn More Button Destination" + "learn_more_button_destination": { + "type": "Link", + "config": { + "label": "Learn More Button Destination" } } }, - "Overview" : { - "overview_heading" : { - "type" : "Text", - "config" : { - "label" : "Overview Heading" + "Overview": { + "overview_heading": { + "type": "Text", + "config": { + "label": "Overview Heading" } }, - "overview_description" : { - "type" : "StructuredText", - "config" : { - "multi" : "paragraph", - "label" : "Overview Description" + "overview_description": { + "type": "StructuredText", + "config": { + "multi": "paragraph", + "label": "Overview Description" } }, - "overview_image_one" : { - "type" : "Image", - "config" : { - "constraint" : { }, - "thumbnails" : [ ], - "label" : "Overview Image One" + "overview_image_one": { + "type": "Image", + "config": { + "constraint": {}, + "thumbnails": [], + "label": "Overview Image One" } }, - "overview_image_two" : { - "type" : "Image", - "config" : { - "constraint" : { }, - "thumbnails" : [ ], - "label" : "Overview Image Two" + "overview_image_two": { + "type": "Image", + "config": { + "constraint": {}, + "thumbnails": [], + "label": "Overview Image Two" } } }, - "Reasons" : { - "reasons_main_heading" : { - "type" : "Text", - "config" : { - "label" : "Reasons Main Heading" + "Reasons": { + "reasons_main_heading": { + "type": "Text", + "config": { + "label": "Reasons Main Heading" } }, - "specific_reason" : { - "type" : "Group", - "config" : { - "fields" : { - "reason_image" : { - "type" : "Image", - "config" : { - "constraint" : { }, - "thumbnails" : [ ], - "label" : "Reason Image" + "specific_reason": { + "type": "Group", + "config": { + "fields": { + "reason_image": { + "type": "Image", + "config": { + "constraint": {}, + "thumbnails": [], + "label": "Reason Image" } }, - "specific_reason_heading" : { - "type" : "Text", - "config" : { - "label" : "Specific Reason Heading" + "specific_reason_heading": { + "type": "Text", + "config": { + "label": "Specific Reason Heading" } }, - "specific_reason_description" : { - "type" : "Text", - "config" : { - "label" : "Specific Reason Description" + "specific_reason_description": { + "type": "Text", + "config": { + "label": "Specific Reason Description" } } }, - "label" : "Specific Reason" + "label": "Specific Reason" } }, - "cta_button_text" : { - "type" : "Text", - "config" : { - "label" : "CTA Button Text" + "cta_button_text": { + "type": "Text", + "config": { + "label": "CTA Button Text" } }, - "cta_button_destination" : { - "type" : "Link", - "config" : { - "label" : "CTA Button Destination" + "cta_button_destination": { + "type": "Link", + "config": { + "label": "CTA Button Destination" } } }, - "Demo" : { - "demo_heading" : { - "type" : "Text", - "config" : { - "label" : "Demo Heading" + "Demo": { + "demo_heading": { + "type": "Text", + "config": { + "label": "Demo Heading" } }, - "demo_video" : { - "type" : "Embed", - "config" : { - "label" : "Demo Video" + "demo_video_url": { + "type": "Text", + "config": { + "label": "Demo Video Url" } } } diff --git a/src/templates/use-case-styles.js b/src/templates/use-case-styles.js index fb30deb..1b05c02 100644 --- a/src/templates/use-case-styles.js +++ b/src/templates/use-case-styles.js @@ -23,27 +23,19 @@ export const ImageOne = styled.div` height: 329px; object-fit: cover; margin-top: 170px; - } @media (min-width: ${dimensions.maxwidthTablet}px) { img { - width: 42vw; - height: 358px; - object-fit: cover; - margin-top: 0px; - - } + width: 42vw; + height: 358px; + object-fit: cover; + margin-top: 0px; + } } ` - -export const WhySection = styled.div` - - - -` - +export const WhySection = styled.div`` export const IntroTextSection = styled.div` @media (min-width: ${dimensions.maxwidthTablet}px) { @@ -88,3 +80,107 @@ export const MobileImage = styled.div` } } ` + +export const WhyHeader = styled.div` + width: 100%; + text-align: center; + margin-top: 118px; + margin-bottom: 88px; + + color: ${colors.blue900}; + + @media (min-width: ${dimensions.maxwidthTablet}px) { + margin-top: 152px; + margin-bottom: 0px; + } +` + +export const Reasons = styled.div` + @media (min-width: ${dimensions.maxwidthTablet}px) { + display: flex; + justify-content: space-around; + margin-top: 85px; + } +` + +export const SpecificReason = styled.div` + margin-top: 58px; +` + +export const SpecificImage = styled.div` + display: flex; + justify-content: center; + align-content: center; +` + +export const SpecificReasonHeading = styled.div` + text-align: center; + + color: ${colors.blue900}; + + @media (min-width: ${dimensions.maxwidthTablet}px) { + } +` + +export const SpecificReasonDescription = styled.div` + color: ${colors.black900}; + @media (min-width: ${dimensions.maxwidthTablet}px) { + width: 21vw; + } +` + +export const WhyCTA = styled.div` + margin-top: 104px; + display: flex; + justify-content: center; + + a { + background-color: ${colors.orange900}; + text-transform: uppercase; + color: ${colors.white900}; + padding-left: 48px; + font-size: 16px; + padding-right: 48px; + padding-top: 16px; + padding-bottom: 16px; + text-decoration: none; + } +` + +export const DemoVideoSection = styled.div` +margin-top: 75px; +margin-bottom: 75px; + +@media (min-width: ${dimensions.maxwidthTablet}px) { + margin-top: 192px; + margin-bottom: 192px; + justify-content: center; + display: flex; +} + + + +` + +export const DemoVideo = styled.div` + +iframe { + width: 72vw; + height: 562px; +} + +@media (max-width: ${dimensions.maxwidthTablet}px) { + iframe { + width: 100%; + height: 173px; + } +} + +` + + +export const DemoHeading = styled.div` + +color: ${colors.blue900}; + +` diff --git a/src/templates/use_case.js b/src/templates/use_case.js index b039367..241a258 100644 --- a/src/templates/use_case.js +++ b/src/templates/use_case.js @@ -11,10 +11,20 @@ import { IntroDescription, MobileImage, WhySection, + WhyHeader, + Reasons, + SpecificReason, + SpecificImage, + SpecificReasonHeading, + SpecificReasonDescription, + WhyCTA, + DemoVideoSection, + DemoHeading, + DemoVideo, } from "./use-case-styles" import Layout from "../components/layout" -import { H1, Body } from "../style/type-styles" +import { H1, H2, H3, Body } from "../style/type-styles" export default function Product({ data }) { const use_case = data.allPrismicUseCase.edges[0].node @@ -52,10 +62,51 @@ export default function Product({ data }) { - - + +

{use_case.data.reasons_main_heading}

+ + + {use_case.data.specific_reason.map(reason => { + return ( + + + + + +

{reason.specific_reason_heading}

+ + + {reason.specific_reason_description} + + + ) + })} + + + + + {use_case.data.cta_button_text} + + + + +
+ +

{use_case.data.demo_heading}

+ + + + + +
+ ) @@ -75,6 +126,9 @@ export const query = graphql` specific_reason { specific_reason_heading specific_reason_description + reason_image { + url + } } reasons_main_heading preview_description @@ -93,9 +147,7 @@ export const query = graphql` learn_more_button_destination { url } - demo_video { - url - } + demo_video_url demo_heading cta_button_text cta_button_destination { From 10221081ec181c36524ff007055572e1e8f0737b Mon Sep 17 00:00:00 2001 From: samgildea Date: Wed, 5 May 2021 15:04:22 -0400 Subject: [PATCH 03/13] #59 updating spacing --- src/templates/use_case.js | 24 ++++++++++++++++++------ 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/src/templates/use_case.js b/src/templates/use_case.js index 241a258..174fcd6 100644 --- a/src/templates/use_case.js +++ b/src/templates/use_case.js @@ -35,11 +35,17 @@ export default function Product({ data }) { - + Use Case Demo Primary Image - + Use Case Demo Secondary Image @@ -57,7 +63,10 @@ export default function Product({ data }) { - + Use Case Demo Secondary Image @@ -67,11 +76,14 @@ export default function Product({ data }) { - {use_case.data.specific_reason.map(reason => { + {use_case.data.specific_reason.map((reason, id) => { return ( - + - + {`Reason

{reason.specific_reason_heading}

From e38a986cfcf460326e8618c8fb6a723fa1f39749 Mon Sep 17 00:00:00 2001 From: samgildea Date: Fri, 7 May 2021 11:21:01 -0400 Subject: [PATCH 04/13] addimg @emotion/styled --- package-lock.json | 182 +++++++++++++++++++ package.json | 2 + src/components/solutions/solutions-styles.js | 2 +- 3 files changed, 185 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index da83241..a60e5a0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1135,6 +1135,97 @@ "to-fast-properties": "^2.0.0" } }, + "@emotion/babel-plugin": { + "version": "11.3.0", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.3.0.tgz", + "integrity": "sha512-UZKwBV2rADuhRp+ZOGgNWg2eYgbzKzQXfQPtJbu/PLy8onurxlNCLvxMQEvlr1/GudguPI5IU9qIY1+2z1M5bA==", + "requires": { + "@babel/helper-module-imports": "^7.12.13", + "@babel/plugin-syntax-jsx": "^7.12.13", + "@babel/runtime": "^7.13.10", + "@emotion/hash": "^0.8.0", + "@emotion/memoize": "^0.7.5", + "@emotion/serialize": "^1.0.2", + "babel-plugin-macros": "^2.6.1", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "^4.0.3" + }, + "dependencies": { + "@babel/helper-module-imports": { + "version": "7.13.12", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.13.12.tgz", + "integrity": "sha512-4cVvR2/1B693IuOvSI20xqqa/+bl7lqAMR59R4iu39R9aOX8/JoYY1sFaNvUMyMBGnHdwvJgUrzNLoUZxXypxA==", + "requires": { + "@babel/types": "^7.13.12" + } + }, + "@babel/helper-plugin-utils": { + "version": "7.13.0", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz", + "integrity": "sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ==" + }, + "@babel/helper-validator-identifier": { + "version": "7.14.0", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz", + "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==" + }, + "@babel/plugin-syntax-jsx": { + "version": "7.12.13", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.12.13.tgz", + "integrity": "sha512-d4HM23Q1K7oq/SLNmG6mRt85l2csmQ0cHRaxRXjKW0YFdEXqlZ5kzFQKH5Uc3rDJECgu+yCRgPkG04Mm98R/1g==", + "requires": { + "@babel/helper-plugin-utils": "^7.12.13" + } + }, + "@babel/runtime": { + "version": "7.14.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.0.tgz", + "integrity": "sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + }, + "@babel/types": { + "version": "7.14.1", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.1.tgz", + "integrity": "sha512-S13Qe85fzLs3gYRUnrpyeIrBJIMYv33qSTg1qoBwiG6nPKwUWAD9odSzWhEedpwOIzSEI6gbdQIWEMiCI42iBA==", + "requires": { + "@babel/helper-validator-identifier": "^7.14.0", + "to-fast-properties": "^2.0.0" + } + }, + "@emotion/memoize": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz", + "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==" + }, + "escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==" + } + } + }, + "@emotion/cache": { + "version": "11.4.0", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.4.0.tgz", + "integrity": "sha512-Zx70bjE7LErRO9OaZrhf22Qye1y4F7iDl+ITjet0J+i+B88PrAOBkKvaAWhxsZf72tDLajwCgfCjJ2dvH77C3g==", + "requires": { + "@emotion/memoize": "^0.7.4", + "@emotion/sheet": "^1.0.0", + "@emotion/utils": "^1.0.0", + "@emotion/weak-memoize": "^0.2.5", + "stylis": "^4.0.3" + } + }, + "@emotion/hash": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" + }, "@emotion/is-prop-valid": { "version": "0.8.8", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", @@ -1148,6 +1239,77 @@ "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" }, + "@emotion/react": { + "version": "11.4.0", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.4.0.tgz", + "integrity": "sha512-4XklWsl9BdtatLoJpSjusXhpKv9YVteYKh9hPKP1Sxl+mswEFoUe0WtmtWjxEjkA51DQ2QRMCNOvKcSlCQ7ivg==", + "requires": { + "@babel/runtime": "^7.13.10", + "@emotion/cache": "^11.4.0", + "@emotion/serialize": "^1.0.2", + "@emotion/sheet": "^1.0.1", + "@emotion/utils": "^1.0.0", + "@emotion/weak-memoize": "^0.2.5", + "hoist-non-react-statics": "^3.3.1" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.14.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.0.tgz", + "integrity": "sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + } + } + }, + "@emotion/serialize": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz", + "integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==", + "requires": { + "@emotion/hash": "^0.8.0", + "@emotion/memoize": "^0.7.4", + "@emotion/unitless": "^0.7.5", + "@emotion/utils": "^1.0.0", + "csstype": "^3.0.2" + } + }, + "@emotion/sheet": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.0.1.tgz", + "integrity": "sha512-GbIvVMe4U+Zc+929N1V7nW6YYJtidj31lidSmdYcWozwoBIObXBnaJkKNDjZrLm9Nc0BR+ZyHNaRZxqNZbof5g==" + }, + "@emotion/styled": { + "version": "11.3.0", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.3.0.tgz", + "integrity": "sha512-fUoLcN3BfMiLlRhJ8CuPUMEyKkLEoM+n+UyAbnqGEsCd5IzKQ7VQFLtzpJOaCD2/VR2+1hXQTnSZXVJeiTNltA==", + "requires": { + "@babel/runtime": "^7.13.10", + "@emotion/babel-plugin": "^11.3.0", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/serialize": "^1.0.2", + "@emotion/utils": "^1.0.0" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.14.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.0.tgz", + "integrity": "sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + }, + "@emotion/is-prop-valid": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz", + "integrity": "sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ==", + "requires": { + "@emotion/memoize": "^0.7.4" + } + } + } + }, "@emotion/stylis": { "version": "0.8.5", "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", @@ -1158,6 +1320,16 @@ "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" }, + "@emotion/utils": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz", + "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==" + }, + "@emotion/weak-memoize": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz", + "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==" + }, "@endemolshinegroup/cosmiconfig-typescript-loader": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/@endemolshinegroup/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-3.0.2.tgz", @@ -6859,6 +7031,11 @@ } } }, + "find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" + }, "find-up": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz", @@ -16890,6 +17067,11 @@ } } }, + "stylis": { + "version": "4.0.10", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.10.tgz", + "integrity": "sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==" + }, "subscriptions-transport-ws": { "version": "0.9.18", "resolved": "https://registry.npmjs.org/subscriptions-transport-ws/-/subscriptions-transport-ws-0.9.18.tgz", diff --git a/package.json b/package.json index 6052d68..483ef5e 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,8 @@ "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1" }, "dependencies": { + "@emotion/react": "^11.4.0", + "@emotion/styled": "^11.3.0", "@walltowall/gatsby-source-prismic-schemas": "^1.1.0", "gatsby": "^2.26.1", "gatsby-background-image": "^1.5.0", diff --git a/src/components/solutions/solutions-styles.js b/src/components/solutions/solutions-styles.js index 92fa828..0a42ce2 100644 --- a/src/components/solutions/solutions-styles.js +++ b/src/components/solutions/solutions-styles.js @@ -1,4 +1,4 @@ -import styled from "styled-components" +import styled from '@emotion/styled' import colors from "../../style/colors" import dimensions from "../../style/dimensions" import { From bb8352679bc463465942819de5901dfae825d490 Mon Sep 17 00:00:00 2001 From: samgildea Date: Fri, 7 May 2021 11:24:09 -0400 Subject: [PATCH 05/13] Adding @emotion/styled to type styles --- src/style/type-styles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/style/type-styles.js b/src/style/type-styles.js index 00762ba..8648634 100644 --- a/src/style/type-styles.js +++ b/src/style/type-styles.js @@ -1,4 +1,4 @@ -import styled from "styled-components" +import styled from '@emotion/styled' const minSize = { h1: 50, From c4756f0d8cbc5d7790c4463d6b1278b8dc7d0002 Mon Sep 17 00:00:00 2001 From: samgildea Date: Fri, 7 May 2021 11:35:42 -0400 Subject: [PATCH 06/13] Adding @emotion/styled to type-styles --- src/style/type-styles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/style/type-styles.js b/src/style/type-styles.js index 8648634..17cc5c0 100644 --- a/src/style/type-styles.js +++ b/src/style/type-styles.js @@ -1,4 +1,4 @@ -import styled from '@emotion/styled' +import styled from "@emotion/styled" const minSize = { h1: 50, From d3a549ee0ccecee2806da0f704210e91f3419fc5 Mon Sep 17 00:00:00 2001 From: Joseph Annis Date: Fri, 7 May 2021 13:32:20 -0400 Subject: [PATCH 07/13] General topics. --- gatsby-config.js | 9 +- src/components/faq/faq.js | 36 ++++++++ src/components/faq/faq.styles.js | 8 ++ .../faq/topics-picker/TopicsPicker.js | 20 +++++ .../faq/topics-picker/TopicsPicker.styles.js | 38 ++++++++ src/pages/faq.js | 36 ++++++++ src/schemas/faq.json | 88 +++++++++++++++++++ src/style/colors.js | 5 +- 8 files changed, 234 insertions(+), 6 deletions(-) create mode 100644 src/components/faq/faq.js create mode 100644 src/components/faq/faq.styles.js create mode 100644 src/components/faq/topics-picker/TopicsPicker.js create mode 100644 src/components/faq/topics-picker/TopicsPicker.styles.js create mode 100644 src/pages/faq.js create mode 100644 src/schemas/faq.json diff --git a/gatsby-config.js b/gatsby-config.js index fc3e9b5..b3bfc55 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -33,6 +33,7 @@ module.exports = { schemas: { // all the schemas here test: require("./src/schemas/test.json"), + faq: require("./src/schemas/faq.json"), product_page: require("./src/schemas/product_page.json"), product: require("./src/schemas/product.json"), Process: require("./src/schemas/process.json"), @@ -47,9 +48,9 @@ module.exports = { resolve: "gatsby-plugin-react-svg", options: { rule: { - include: /vectors/ // See below to configure properly - } - } - } + include: /vectors/, // See below to configure properly + }, + }, + }, ], } diff --git a/src/components/faq/faq.js b/src/components/faq/faq.js new file mode 100644 index 0000000..50f9b8e --- /dev/null +++ b/src/components/faq/faq.js @@ -0,0 +1,36 @@ +import React from "react" +import { H3 } from "../../style/type-styles" +import { FAQContainer, TopicContiner } from "./faq.styles" +import { TopicsPicker } from "./topics-picker/TopicsPicker" + +const FAQPage = ({ data }) => { + const { + main_section_heading, + topics_section_heading, + cta_button_destination, + cta_button_text, + cta_heading, + frequently_asked_question, + individual_topic, + } = data + + const [selectedTopic, setSelected] = React.useState() + console.log(individual_topic) + return ( + +

{main_section_heading}

+ + ({ + label: t.topic_heading, + id: t.topic_heading + i, + selected: t.topic_heading + i === selectedTopic, + }))} + onTopicPicked={id => setSelected(id)} + /> + + + ) +} + +export default FAQPage diff --git a/src/components/faq/faq.styles.js b/src/components/faq/faq.styles.js new file mode 100644 index 0000000..603b196 --- /dev/null +++ b/src/components/faq/faq.styles.js @@ -0,0 +1,8 @@ +import styled from "@emotion/styled" + +export const FAQContainer = styled.div` + padding-top: 12vh; +` +export const TopicContiner = styled.div` + width: 30%; +` diff --git a/src/components/faq/topics-picker/TopicsPicker.js b/src/components/faq/topics-picker/TopicsPicker.js new file mode 100644 index 0000000..12b8479 --- /dev/null +++ b/src/components/faq/topics-picker/TopicsPicker.js @@ -0,0 +1,20 @@ +import React from "react" +import { TopicBox, TopicsContainer } from "./TopicsPicker.styles" + +export const TopicsPicker = ({ topics, onTopicPicked }) => { + return ( + + {topics.map(t => ( + onTopicPicked(t.id)} + selected={t.selected} + key={t.id} + > + {t.label} + + ))} + + ) +} diff --git a/src/components/faq/topics-picker/TopicsPicker.styles.js b/src/components/faq/topics-picker/TopicsPicker.styles.js new file mode 100644 index 0000000..d7bec4f --- /dev/null +++ b/src/components/faq/topics-picker/TopicsPicker.styles.js @@ -0,0 +1,38 @@ +import { css } from "@emotion/react" +import styled from "@emotion/styled" +import colors from "../../../style/colors" + +export const TopicsContainer = styled.div` + display: flex; + flex-direction: row; + flex-wrap: wrap; +` + +const SelectedBox = css` + border: 3px solid ${colors.orange900}; + background-color: ${colors.orange900_transparent}; +` + +export const TopicBox = styled.div` + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + margin: 10px; + width: 200px; + height: 150px; + font-weight: bolder; + + cursor: pointer; + border: 2px solid ${colors.orange900}; + background-color: transparent; + transition: all 0.1s ease-in-out; + color: ${colors.orange900}; + text-transform: uppercase; + + ${props => props.selected && SelectedBox}; + + &:hover { + ${SelectedBox}; + } +` diff --git a/src/pages/faq.js b/src/pages/faq.js new file mode 100644 index 0000000..540bf75 --- /dev/null +++ b/src/pages/faq.js @@ -0,0 +1,36 @@ +import { graphql } from "gatsby" +import React from "react" +import FAQPage from "../components/faq/faq" +import Layout from "../components/layout" + +export default function FAQ({ data }) { + return ( + + + + ) +} + +export const query = graphql` + query FAQQuery { + prismicFaqPage(data: {}) { + data { + main_section_heading + topics_section_heading + cta_heading + cta_button_text + cta_button_destination { + link_type + } + frequently_asked_question { + question + answer + topic + } + individual_topic { + topic_heading + } + } + } + } +` diff --git a/src/schemas/faq.json b/src/schemas/faq.json new file mode 100644 index 0000000..a9d255c --- /dev/null +++ b/src/schemas/faq.json @@ -0,0 +1,88 @@ +{ + "Main": {}, + "Top Questions": { + "main_section_heading": { + "type": "Text", + "config": { + "label": "Main Section Heading" + } + }, + "frequently_asked_question": { + "type": "Group", + "config": { + "fields": { + "question": { + "type": "Text", + "config": { + "label": "Question" + } + }, + "answer": { + "type": "Text", + "config": { + "label": "Answer" + } + }, + "topic": { + "type": "Text", + "config": { + "label": "topic", + "placeholder": "The topic this question answer pair is associated with" + } + } + }, + "label": "Frequently Asked Question" + } + } + }, + "Topics": { + "topics_section_heading": { + "type": "Text", + "config": { + "label": "Topics Section Heading" + } + }, + "individual_topic": { + "type": "Group", + "config": { + "fields": { + "topic_image": { + "type": "Image", + "config": { + "constraint": {}, + "thumbnails": [], + "label": "Topic Image" + } + }, + "topic_heading": { + "type": "Text", + "config": { + "label": "Topic Heading" + } + } + }, + "label": "Individual Topic" + } + } + }, + "Call To Action": { + "cta_heading": { + "type": "Text", + "config": { + "label": "CTA Heading" + } + }, + "cta_button_text": { + "type": "Text", + "config": { + "label": "CTA Button Text" + } + }, + "cta_button_destination": { + "type": "Link", + "config": { + "label": "CTA Button Destination" + } + } + } +} diff --git a/src/style/colors.js b/src/style/colors.js index caf71eb..929e416 100644 --- a/src/style/colors.js +++ b/src/style/colors.js @@ -8,12 +8,13 @@ const colors = { white900: "#FFFFFF", orange900: "#F27A28", + orange900_transparent: "rgb(242, 106, 33, .07)", blue900: "#245373", lightblue900: "#6480A5", lighterblue900: "#6EA8C0", softblue900: "#ECF3F7", gray900: "#585858", - black_overlay: "rgb(0, 0, 0, 0.55)" + black_overlay: "rgb(0, 0, 0, 0.55)", } -export default colors \ No newline at end of file +export default colors From e061f64f295d2f4636f3c1b12c42eaccc4c101f8 Mon Sep 17 00:00:00 2001 From: Joseph Annis Date: Fri, 7 May 2021 14:09:37 -0400 Subject: [PATCH 08/13] topic filtering. --- .../faq/faq-question/FAQQuestion.js | 34 +++++++++++ .../faq/faq-question/FAQQuestion.styles.js | 22 ++++++++ src/components/faq/faq.js | 56 ++++++++++++++----- src/components/faq/faq.styles.js | 20 ++++++- .../faq/topics-picker/TopicsPicker.js | 2 +- .../faq/topics-picker/TopicsPicker.styles.js | 5 +- src/style/type-styles.js | 9 ++- src/vectors/close.svg | 4 ++ src/vectors/open.svg | 5 ++ 9 files changed, 138 insertions(+), 19 deletions(-) create mode 100644 src/components/faq/faq-question/FAQQuestion.js create mode 100644 src/components/faq/faq-question/FAQQuestion.styles.js create mode 100644 src/vectors/close.svg create mode 100644 src/vectors/open.svg diff --git a/src/components/faq/faq-question/FAQQuestion.js b/src/components/faq/faq-question/FAQQuestion.js new file mode 100644 index 0000000..ce407dd --- /dev/null +++ b/src/components/faq/faq-question/FAQQuestion.js @@ -0,0 +1,34 @@ +import React, { useState } from "react" +import CloseIcon from "../../../vectors/close.svg" +import OpenIcon from "../../../vectors/open.svg" +import { + FAQAnswer, + FAQQuestionTitle, + ToggleContainer, +} from "./FAQQuestion.styles" + +export const FAQQuestion = ({ questionText, answerText }) => { + const [isOpen, setOpen] = useState(false) + + return ( + <> + + {questionText} + {isOpen ? ( + setOpen(false)} + role="button" + aria-label="Close FAQ question" + /> + ) : ( + setOpen(true)} + role="button" + aria-label="Expand FAQ question" + /> + )} + + {isOpen && {answerText}} + + ) +} diff --git a/src/components/faq/faq-question/FAQQuestion.styles.js b/src/components/faq/faq-question/FAQQuestion.styles.js new file mode 100644 index 0000000..0be81a5 --- /dev/null +++ b/src/components/faq/faq-question/FAQQuestion.styles.js @@ -0,0 +1,22 @@ +import styled from "@emotion/styled" +import colors from "../../../style/colors" +import { Body, H4 } from "../../../style/type-styles" + +export const ToggleContainer = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; +` + +export const FAQQuestionTitle = styled(H4)` + color: ${colors.blue900}; + margin-top: 0; +` +export const FAQAnswer = styled(Body)` + color: ${colors.blue900}; + padding-left: 24px; + width: 90%; + line-height: 32px; +` diff --git a/src/components/faq/faq.js b/src/components/faq/faq.js index 50f9b8e..2cdef0c 100644 --- a/src/components/faq/faq.js +++ b/src/components/faq/faq.js @@ -1,6 +1,13 @@ import React from "react" import { H3 } from "../../style/type-styles" -import { FAQContainer, TopicContiner } from "./faq.styles" +import { FAQQuestion } from "./faq-question/FAQQuestion" +import { + FAQContainer, + FAQQuestionsContainer, + TopicContainer, + TopicFAQSection, + FAQWrapper, +} from "./faq.styles" import { TopicsPicker } from "./topics-picker/TopicsPicker" const FAQPage = ({ data }) => { @@ -14,21 +21,44 @@ const FAQPage = ({ data }) => { individual_topic, } = data - const [selectedTopic, setSelected] = React.useState() - console.log(individual_topic) + const [selectedTopic, setSelected] = React.useState( + individual_topic[0]?.topic_heading ?? "" + ) + console.log(selectedTopic) + console.log(frequently_asked_question) return (

{main_section_heading}

- - ({ - label: t.topic_heading, - id: t.topic_heading + i, - selected: t.topic_heading + i === selectedTopic, - }))} - onTopicPicked={id => setSelected(id)} - /> - + + + ({ + ...t, + label: t.topic_heading, + id: t.topic_heading + i, + selected: t.topic_heading === selectedTopic, + }))} + onTopicPicked={t => + setSelected( + t.topic_heading === selectedTopic ? undefined : t.topic_heading + ) + } + /> + + + + {frequently_asked_question + .filter(fq => (selectedTopic ? fq.topic === selectedTopic : true)) + .map(fq => ( + + + + ))} + + ) } diff --git a/src/components/faq/faq.styles.js b/src/components/faq/faq.styles.js index 603b196..65ac4e3 100644 --- a/src/components/faq/faq.styles.js +++ b/src/components/faq/faq.styles.js @@ -3,6 +3,22 @@ import styled from "@emotion/styled" export const FAQContainer = styled.div` padding-top: 12vh; ` -export const TopicContiner = styled.div` - width: 30%; +export const TopicFAQSection = styled.section` + display: flex; + flex-direction: row; + justify-content: space-between; +` + +export const TopicContainer = styled.div` + flex: 3; +` + +export const FAQQuestionsContainer = styled.div` + display: flex; + flex-direction: column; + flex: 7; +` + +export const FAQWrapper = styled.div` + margin-bottom: 20px; ` diff --git a/src/components/faq/topics-picker/TopicsPicker.js b/src/components/faq/topics-picker/TopicsPicker.js index 12b8479..973c55b 100644 --- a/src/components/faq/topics-picker/TopicsPicker.js +++ b/src/components/faq/topics-picker/TopicsPicker.js @@ -8,7 +8,7 @@ export const TopicsPicker = ({ topics, onTopicPicked }) => { onTopicPicked(t.id)} + onClick={() => onTopicPicked(t)} selected={t.selected} key={t.id} > diff --git a/src/components/faq/topics-picker/TopicsPicker.styles.js b/src/components/faq/topics-picker/TopicsPicker.styles.js index d7bec4f..72bb32b 100644 --- a/src/components/faq/topics-picker/TopicsPicker.styles.js +++ b/src/components/faq/topics-picker/TopicsPicker.styles.js @@ -19,8 +19,9 @@ export const TopicBox = styled.div` align-items: center; justify-content: center; margin: 10px; - width: 200px; - height: 150px; + flex: 50%; + max-width: 40%; + aspect-ratio: 4/3; font-weight: bolder; cursor: pointer; diff --git a/src/style/type-styles.js b/src/style/type-styles.js index 17cc5c0..7e970b1 100644 --- a/src/style/type-styles.js +++ b/src/style/type-styles.js @@ -4,6 +4,7 @@ const minSize = { h1: 50, h2: 30, h3: 20, + h4: 20, p: 16, nav: 16, sub1: 25, @@ -22,6 +23,7 @@ const fontSizes = { h1: `calc(${minSize.h1}px + (64 - ${minSize.h1}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`, h2: `calc(${minSize.h2}px + (48 - ${minSize.h2}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`, h3: `calc(${minSize.h3}px + (32 - ${minSize.h3}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`, + h4: `calc(${minSize.h4}px + (22 - ${minSize.h4}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`, p: `calc(${minSize.p}px + (24 - ${minSize.p}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`, NavText: `calc(${minSize.nav}px + (24 - ${minSize.nav}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`, Sub1: `calc(${minSize.sub1}px + (36 - ${minSize.sub1}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`, @@ -43,6 +45,11 @@ const H3 = styled.h3` font-weight: bold; ` +const H4 = styled.h4` + font-size: ${fontSizes.h4}; + font-weight: bold; +` + const P = styled.p` font-size: ${fontSizes.p}; ` @@ -60,4 +67,4 @@ const Body = styled.div` font-size: ${fontSizes.body}; ` -export { H1, H2, H3, P, NavText, Sub1, Body } +export { H1, H2, H3, H4, P, NavText, Sub1, Body } diff --git a/src/vectors/close.svg b/src/vectors/close.svg new file mode 100644 index 0000000..c3cf8cd --- /dev/null +++ b/src/vectors/close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/vectors/open.svg b/src/vectors/open.svg new file mode 100644 index 0000000..733b2d2 --- /dev/null +++ b/src/vectors/open.svg @@ -0,0 +1,5 @@ + + + + + From 9e2b528d0b95ba586d1e93b8165680fe5f0c5fa0 Mon Sep 17 00:00:00 2001 From: samgildea Date: Fri, 7 May 2021 15:34:57 -0400 Subject: [PATCH 09/13] #59 update singular use case key and alt text --- src/schemas/use_case.json | 12 ++++++++++++ src/templates/use_case.js | 10 ++++++---- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/src/schemas/use_case.json b/src/schemas/use_case.json index 2433881..ee6af57 100644 --- a/src/schemas/use_case.json +++ b/src/schemas/use_case.json @@ -53,6 +53,12 @@ "label": "Overview Description" } }, + "image_one_alt": { + "type": "Text", + "config": { + "label": "Image One Alt" + } + }, "overview_image_one": { "type": "Image", "config": { @@ -61,6 +67,12 @@ "label": "Overview Image One" } }, + "image_two_alt": { + "type": "Text", + "config": { + "label": "Image Two Alt" + } + }, "overview_image_two": { "type": "Image", "config": { diff --git a/src/templates/use_case.js b/src/templates/use_case.js index 174fcd6..9777907 100644 --- a/src/templates/use_case.js +++ b/src/templates/use_case.js @@ -36,14 +36,14 @@ export default function Product({ data }) { Use Case Demo Primary Image Use Case Demo Secondary Image @@ -53,9 +53,9 @@ export default function Product({ data }) {

{use_case.data.overview_heading}

 - {use_case.data.overview_description.raw.map(paragraph => { + {use_case.data.overview_description.raw.map((paragraph, id) => { return ( - + {paragraph.text} ) @@ -144,6 +144,8 @@ export const query = graphql` } reasons_main_heading preview_description + image_one_alt + image_two_alt overview_image_two { url } From a1f5aa9450a7d11b4e9f2f87e5254e18b7e04123 Mon Sep 17 00:00:00 2001 From: Joseph Annis Date: Fri, 7 May 2021 15:42:30 -0400 Subject: [PATCH 10/13] Add contact section. --- src/components/contact/contact-styles.js | 20 ++++----- src/components/faq/faq-contact/FAQContact.js | 18 ++++++++ .../faq/faq-contact/FAQContact.styles.js | 41 +++++++++++++++++++ .../faq/faq-question/FAQQuestion.styles.js | 1 + src/components/faq/faq.js | 17 +++++--- src/components/faq/faq.styles.js | 8 ++++ .../faq/topics-picker/TopicsPicker.styles.js | 7 ++++ src/components/layout.js | 10 ++--- src/pages/faq.js | 5 ++- src/schemas/faq.json | 8 ++++ src/style/type-styles.js | 2 +- 11 files changed, 113 insertions(+), 24 deletions(-) create mode 100644 src/components/faq/faq-contact/FAQContact.js create mode 100644 src/components/faq/faq-contact/FAQContact.styles.js diff --git a/src/components/contact/contact-styles.js b/src/components/contact/contact-styles.js index d5767b0..63dcbea 100644 --- a/src/components/contact/contact-styles.js +++ b/src/components/contact/contact-styles.js @@ -1,12 +1,12 @@ -import styled from "styled-components" +import styled from "@emotion/styled" import colors from "../../style/colors" import dimensions from "../../style/dimensions" - import { fontSizes } from "../../style/type-styles" import { layoutPaddingDesktop, layoutPaddingMobile, } from "../../style/variables" + export const ContactContainer = styled.div` min-height: 100vh; ` @@ -16,7 +16,6 @@ export const ContactForm = styled.div` width: 100%; @media (min-width: ${dimensions.maxwidthTablet}px) { width: 36vw; - } color: ${colors.blue900}; input { @@ -49,7 +48,7 @@ export const ContactSection = styled.div` export const ContactDescription = styled.div` margin-bottom: 64px; ` -export const ContactButton = styled.button` +export const ContactButton = styled.a` font-size: 16px; padding-right: 60px; padding-left: 60px; @@ -60,6 +59,11 @@ export const ContactButton = styled.button` color: ${colors.white900}; border: none; + transition: all 0.1s ease-in-out; + + &:hover { + box-shadow: 0 0 46px -9px ${colors.orange900}; + } ` export const ContactImageSection = styled.div` @@ -72,7 +76,6 @@ export const ContactImageSection = styled.div` object-fit: cover; } - @media (max-width: ${dimensions.maxwidthTablet}px) { margin-right: -${layoutPaddingMobile}; @@ -83,9 +86,7 @@ export const ContactImageSection = styled.div` height: 263px; object-fit: cover; } - } - ` export const SpecificContactInfo = styled.div` @@ -108,7 +109,4 @@ export const AddressSection = styled.div` margin-bottom: 110px; ` -export const UseCaseSection = styled.div` - - -` \ No newline at end of file +export const UseCaseSection = styled.div`` diff --git a/src/components/faq/faq-contact/FAQContact.js b/src/components/faq/faq-contact/FAQContact.js new file mode 100644 index 0000000..79ae096 --- /dev/null +++ b/src/components/faq/faq-contact/FAQContact.js @@ -0,0 +1,18 @@ +import React from "react" +import { ContactButton } from "../../contact/contact-styles" +import { Banner, CTABackground, CTATitle } from "./FAQContact.styles" +export const FAQContact = ({ + imageUrl, + ctaTitle, + ctaLabel, + ctaDestination, +}) => ( + <> + + + {ctaTitle} + {ctaLabel} + + + +) diff --git a/src/components/faq/faq-contact/FAQContact.styles.js b/src/components/faq/faq-contact/FAQContact.styles.js new file mode 100644 index 0000000..1edc9be --- /dev/null +++ b/src/components/faq/faq-contact/FAQContact.styles.js @@ -0,0 +1,41 @@ +import styled from "@emotion/styled" +import colors from "../../../style/colors" +import dimensions from "../../../style/dimensions" +import { H3 } from "../../../style/type-styles" +import { + layoutPaddingDesktop, + layoutPaddingMobile, +} from "../../../style/variables" + +export const Banner = styled.div` + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + background-image: url(${props => props.imageUrl}); + width: 100vw; + padding: 40px 60px; + margin: -${layoutPaddingDesktop}; + height: 70vh; + + @media (max-width: ${dimensions.maxwidthMobile}px) { + height: 40vh; + margin: -${layoutPaddingMobile}; + } +` + +export const CTABackground = styled.div` + width: 100%; + height: 100%; + + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + background-color: ${colors.white900}; +` + +export const CTATitle = styled(H3)` + color: ${colors.blue900}; +` diff --git a/src/components/faq/faq-question/FAQQuestion.styles.js b/src/components/faq/faq-question/FAQQuestion.styles.js index 0be81a5..2c99c36 100644 --- a/src/components/faq/faq-question/FAQQuestion.styles.js +++ b/src/components/faq/faq-question/FAQQuestion.styles.js @@ -14,6 +14,7 @@ export const FAQQuestionTitle = styled(H4)` color: ${colors.blue900}; margin-top: 0; ` + export const FAQAnswer = styled(Body)` color: ${colors.blue900}; padding-left: 24px; diff --git a/src/components/faq/faq.js b/src/components/faq/faq.js index 2cdef0c..fa518ae 100644 --- a/src/components/faq/faq.js +++ b/src/components/faq/faq.js @@ -1,12 +1,13 @@ import React from "react" import { H3 } from "../../style/type-styles" +import { FAQContact } from "./faq-contact/FAQContact" import { FAQQuestion } from "./faq-question/FAQQuestion" import { FAQContainer, FAQQuestionsContainer, + FAQWrapper, TopicContainer, TopicFAQSection, - FAQWrapper, } from "./faq.styles" import { TopicsPicker } from "./topics-picker/TopicsPicker" @@ -17,15 +18,13 @@ const FAQPage = ({ data }) => { cta_button_destination, cta_button_text, cta_heading, + ctabackground, frequently_asked_question, individual_topic, } = data - const [selectedTopic, setSelected] = React.useState( - individual_topic[0]?.topic_heading ?? "" - ) - console.log(selectedTopic) - console.log(frequently_asked_question) + const [selectedTopic, setSelected] = React.useState() + console.log(cta_button_destination) return (

{main_section_heading}

@@ -59,6 +58,12 @@ const FAQPage = ({ data }) => { ))} + ) } diff --git a/src/components/faq/faq.styles.js b/src/components/faq/faq.styles.js index 65ac4e3..e890170 100644 --- a/src/components/faq/faq.styles.js +++ b/src/components/faq/faq.styles.js @@ -1,4 +1,5 @@ import styled from "@emotion/styled" +import dimensions from "../../style/dimensions" export const FAQContainer = styled.div` padding-top: 12vh; @@ -7,6 +8,13 @@ export const TopicFAQSection = styled.section` display: flex; flex-direction: row; justify-content: space-between; + @media (max-width: ${dimensions.maxwidthDesktop}px) { + flex-direction: column-reverse; + } + margin-bottom: 20vh; + @media (max-width: ${dimensions.maxwidthMobile}px) { + margin-bottom: 10vh; + } ` export const TopicContainer = styled.div` diff --git a/src/components/faq/topics-picker/TopicsPicker.styles.js b/src/components/faq/topics-picker/TopicsPicker.styles.js index 72bb32b..aa19e74 100644 --- a/src/components/faq/topics-picker/TopicsPicker.styles.js +++ b/src/components/faq/topics-picker/TopicsPicker.styles.js @@ -1,6 +1,7 @@ import { css } from "@emotion/react" import styled from "@emotion/styled" import colors from "../../../style/colors" +import dimensions from "../../../style/dimensions" export const TopicsContainer = styled.div` display: flex; @@ -36,4 +37,10 @@ export const TopicBox = styled.div` &:hover { ${SelectedBox}; } + + @media (max-width: ${dimensions.maxwidthDesktop}px) { + flex: 100%; + max-width: 100%; + height: 100px; + } ` diff --git a/src/components/layout.js b/src/components/layout.js index 0d2e5b4..2117e43 100644 --- a/src/components/layout.js +++ b/src/components/layout.js @@ -1,16 +1,16 @@ import React from "react" import styled from "styled-components" -import "../style/typography.scss" -import "../style/global.scss" -import dimensions from "../style/dimensions" -import { layoutPaddingDesktop, layoutPaddingMobile } from "../style/variables" import Footer from "../components/footer/footer" import Header from "../components/header/header" +import dimensions from "../style/dimensions" +import "../style/global.scss" +import "../style/typography.scss" +import { layoutPaddingDesktop, layoutPaddingMobile } from "../style/variables" const LayoutContainer = styled.div`` const LayoutBody = styled.div` @media (min-width: ${dimensions.maxwidthTablet}px) { - padding: 0 ${layoutPaddingDesktop} ${layoutPaddingDesktop};s + padding: 0 ${layoutPaddingDesktop} ${layoutPaddingDesktop}; } @media (max-width: ${dimensions.maxwidthTablet}px) { diff --git a/src/pages/faq.js b/src/pages/faq.js index 540bf75..178ba2d 100644 --- a/src/pages/faq.js +++ b/src/pages/faq.js @@ -17,10 +17,13 @@ export const query = graphql` data { main_section_heading topics_section_heading + ctabackground { + url + } cta_heading cta_button_text cta_button_destination { - link_type + url } frequently_asked_question { question diff --git a/src/schemas/faq.json b/src/schemas/faq.json index a9d255c..246d048 100644 --- a/src/schemas/faq.json +++ b/src/schemas/faq.json @@ -66,6 +66,14 @@ } }, "Call To Action": { + "ctabackground": { + "type": "Image", + "config": { + "constraint": {}, + "thumbnails": [], + "label": "ctaBackground" + } + }, "cta_heading": { "type": "Text", "config": { diff --git a/src/style/type-styles.js b/src/style/type-styles.js index 7e970b1..8a8e277 100644 --- a/src/style/type-styles.js +++ b/src/style/type-styles.js @@ -67,4 +67,4 @@ const Body = styled.div` font-size: ${fontSizes.body}; ` -export { H1, H2, H3, H4, P, NavText, Sub1, Body } +export { H1, H2, H3, H4, P, NavText, Sub1, Body, fontSizes } From 11417de520f972aa606a343cd8c377e776854b95 Mon Sep 17 00:00:00 2001 From: Joseph Annis Date: Fri, 7 May 2021 16:27:16 -0400 Subject: [PATCH 11/13] Some resizing. --- .../faq/faq-question/FAQQuestion.styles.js | 2 +- src/components/faq/faq.js | 5 +- src/components/faq/faq.styles.js | 7 ++- .../faq/topics-picker/TopicsPicker.js | 47 ++++++++++++++----- .../faq/topics-picker/TopicsPicker.styles.js | 13 +++++ 5 files changed, 59 insertions(+), 15 deletions(-) diff --git a/src/components/faq/faq-question/FAQQuestion.styles.js b/src/components/faq/faq-question/FAQQuestion.styles.js index 2c99c36..d65db58 100644 --- a/src/components/faq/faq-question/FAQQuestion.styles.js +++ b/src/components/faq/faq-question/FAQQuestion.styles.js @@ -12,7 +12,7 @@ export const ToggleContainer = styled.div` export const FAQQuestionTitle = styled(H4)` color: ${colors.blue900}; - margin-top: 0; + margin: 0; ` export const FAQAnswer = styled(Body)` diff --git a/src/components/faq/faq.js b/src/components/faq/faq.js index fa518ae..04d493f 100644 --- a/src/components/faq/faq.js +++ b/src/components/faq/faq.js @@ -24,7 +24,7 @@ const FAQPage = ({ data }) => { } = data const [selectedTopic, setSelected] = React.useState() - console.log(cta_button_destination) + return (

{main_section_heading}

@@ -36,6 +36,9 @@ const FAQPage = ({ data }) => { label: t.topic_heading, id: t.topic_heading + i, selected: t.topic_heading === selectedTopic, + questions: frequently_asked_question.filter( + faq => faq.topic === t.topic_heading + ), }))} onTopicPicked={t => setSelected( diff --git a/src/components/faq/faq.styles.js b/src/components/faq/faq.styles.js index e890170..a057e0d 100644 --- a/src/components/faq/faq.styles.js +++ b/src/components/faq/faq.styles.js @@ -18,13 +18,16 @@ export const TopicFAQSection = styled.section` ` export const TopicContainer = styled.div` - flex: 3; + flex: 4; ` export const FAQQuestionsContainer = styled.div` display: flex; flex-direction: column; - flex: 7; + flex: 6; + @media (max-width: ${dimensions.maxwidthDesktop}px) { + display: none; + } ` export const FAQWrapper = styled.div` diff --git a/src/components/faq/topics-picker/TopicsPicker.js b/src/components/faq/topics-picker/TopicsPicker.js index 973c55b..b515b07 100644 --- a/src/components/faq/topics-picker/TopicsPicker.js +++ b/src/components/faq/topics-picker/TopicsPicker.js @@ -1,19 +1,44 @@ -import React from "react" -import { TopicBox, TopicsContainer } from "./TopicsPicker.styles" +import React, { useState } from "react" +import { FAQQuestion } from "../faq-question/FAQQuestion" +import { + TopicBox, + TopicFAQContainer, + TopicsContainer, +} from "./TopicsPicker.styles" export const TopicsPicker = ({ topics, onTopicPicked }) => { + const [openTopics, setOpen] = useState([]) + const onTopicSelected = topic => { + const { label } = topic + onTopicPicked(topic) + setOpen(prev => + prev.includes(label) ? prev.filter(t => t !== label) : [...prev, label] + ) + } + console.log(openTopics) return ( {topics.map(t => ( - onTopicPicked(t)} - selected={t.selected} - key={t.id} - > - {t.label} - + <> + onTopicSelected(t)} + selected={t.selected} + > + {t.label} + + {openTopics.includes(t.label) && + t.questions.map((fq, i) => ( + + + + ))} + ))} ) diff --git a/src/components/faq/topics-picker/TopicsPicker.styles.js b/src/components/faq/topics-picker/TopicsPicker.styles.js index aa19e74..9c1c834 100644 --- a/src/components/faq/topics-picker/TopicsPicker.styles.js +++ b/src/components/faq/topics-picker/TopicsPicker.styles.js @@ -43,4 +43,17 @@ export const TopicBox = styled.div` max-width: 100%; height: 100px; } + @media (max-width: ${dimensions.maxwidthDesktop}px) { + width: 100%; + } +` + +export const TopicFAQContainer = styled.div` + flex: 100%; + max-width: 100%; + margin: 10px; + display: none; + @media (max-width: ${dimensions.maxwidthDesktop}px) { + display: initial; + } ` From 72fc6bda7e195ef9aed3908ea580e63a54d51962 Mon Sep 17 00:00:00 2001 From: Joseph Annis Date: Fri, 7 May 2021 16:27:33 -0400 Subject: [PATCH 12/13] Remove logs. --- src/components/faq/topics-picker/TopicsPicker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/faq/topics-picker/TopicsPicker.js b/src/components/faq/topics-picker/TopicsPicker.js index b515b07..bb8e017 100644 --- a/src/components/faq/topics-picker/TopicsPicker.js +++ b/src/components/faq/topics-picker/TopicsPicker.js @@ -15,7 +15,7 @@ export const TopicsPicker = ({ topics, onTopicPicked }) => { prev.includes(label) ? prev.filter(t => t !== label) : [...prev, label] ) } - console.log(openTopics) + return ( {topics.map(t => ( From af51bbca8b05e95bd93eaf4596a760afe4016736 Mon Sep 17 00:00:00 2001 From: Joseph Annis Date: Fri, 7 May 2021 16:30:21 -0400 Subject: [PATCH 13/13] Fix keys. --- src/components/faq/topics-picker/TopicsPicker.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/faq/topics-picker/TopicsPicker.js b/src/components/faq/topics-picker/TopicsPicker.js index bb8e017..db231e6 100644 --- a/src/components/faq/topics-picker/TopicsPicker.js +++ b/src/components/faq/topics-picker/TopicsPicker.js @@ -19,7 +19,7 @@ export const TopicsPicker = ({ topics, onTopicPicked }) => { return ( {topics.map(t => ( - <> + { {t.label} {openTopics.includes(t.label) && - t.questions.map((fq, i) => ( - + t.questions.map(fq => ( + ))} - + ))} )