Merge pull request #63 from Scout-NU/faq-page

Faq page

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
+        },
+      },
+    },
   ],
 }

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`
-
-
-`
+export const UseCaseSection = styled.div``

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,
+}) => (
+  <>
+    <Banner imageUrl={imageUrl}>
+      <CTABackground>
+        <CTATitle>{ctaTitle}</CTATitle>
+        <ContactButton href={ctaDestination}>{ctaLabel}</ContactButton>
+      </CTABackground>
+    </Banner>
+  </>
+)

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

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 (
+    <>
+      <ToggleContainer>
+        <FAQQuestionTitle>{questionText}</FAQQuestionTitle>
+        {isOpen ? (
+          <CloseIcon
+            onClick={() => setOpen(false)}
+            role="button"
+            aria-label="Close FAQ question"
+          />
+        ) : (
+          <OpenIcon
+            onClick={() => setOpen(true)}
+            role="button"
+            aria-label="Expand FAQ question"
+          />
+        )}
+      </ToggleContainer>
+      {isOpen && <FAQAnswer>{answerText}</FAQAnswer>}
+    </>
+  )
+}

src/components/faq/faq-question/FAQQuestion.styles.js

@@ -0,0 +1,23 @@
+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: 0;
+`
+
+export const FAQAnswer = styled(Body)`
+  color: ${colors.blue900};
+  padding-left: 24px;
+  width: 90%;
+  line-height: 32px;
+`

src/components/faq/faq.js

@@ -0,0 +1,74 @@
+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,
+} 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,
+    ctabackground,
+    frequently_asked_question,
+    individual_topic,
+  } = data
+
+  const [selectedTopic, setSelected] = React.useState()
+
+  return (
+    <FAQContainer>
+      <H3>{main_section_heading}</H3>
+      <TopicFAQSection>
+        <TopicContainer>
+          <TopicsPicker
+            topics={individual_topic.map((t, i) => ({
+              ...t,
+              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(
+                t.topic_heading === selectedTopic ? undefined : t.topic_heading
+              )
+            }
+          />
+        </TopicContainer>
+
+        <FAQQuestionsContainer>
+          {frequently_asked_question
+            .filter(fq => (selectedTopic ? fq.topic === selectedTopic : true))
+            .map(fq => (
+              <FAQWrapper key={fq.question}>
+                <FAQQuestion
+                  questionText={fq.question}
+                  answerText={fq.answer}
+                />
+              </FAQWrapper>
+            ))}
+        </FAQQuestionsContainer>
+      </TopicFAQSection>
+      <FAQContact
+        imageUrl={ctabackground.url}
+        ctaTitle={cta_heading}
+        ctaLabel={cta_button_text}
+        ctaDestination={cta_button_destination.url}
+      />
+    </FAQContainer>
+  )
+}
+
+export default FAQPage

src/components/faq/faq.styles.js

@@ -0,0 +1,35 @@
+import styled from "@emotion/styled"
+import dimensions from "../../style/dimensions"
+
+export const FAQContainer = styled.div`
+  padding-top: 12vh;
+`
+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`
+  flex: 4;
+`
+
+export const FAQQuestionsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 6;
+  @media (max-width: ${dimensions.maxwidthDesktop}px) {
+    display: none;
+  }
+`
+
+export const FAQWrapper = styled.div`
+  margin-bottom: 20px;
+`

src/components/faq/topics-picker/TopicsPicker.js

@@ -0,0 +1,44 @@
+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]
+    )
+  }
+
+  return (
+    <TopicsContainer>
+      {topics.map(t => (
+        <React.Fragment key={t.label}>
+          <TopicBox
+            role="button"
+            aria-label="General FAQ Question topic filter"
+            onClick={() => onTopicSelected(t)}
+            selected={t.selected}
+          >
+            {t.label}
+          </TopicBox>
+          {openTopics.includes(t.label) &&
+            t.questions.map(fq => (
+              <TopicFAQContainer key={fq.question}>
+                <FAQQuestion
+                  questionText={fq.question}
+                  answerText={fq.answer}
+                />
+              </TopicFAQContainer>
+            ))}
+        </React.Fragment>
+      ))}
+    </TopicsContainer>
+  )
+}