Merge pull request #437 from thepolicylab-projectportals/398-add-faq-…

…projects feat: add faq section to project details page
thepolicylab-projectportals · Mar 30, 2023 · c1bd172 · c1bd172
2 parents 1ce598d + 083771c
commit c1bd172
Show file tree

Hide file tree

Showing 10 changed files with 131 additions and 29 deletions.
diff --git a/packages/example-site/content/project/completed-project2.json b/packages/example-site/content/project/completed-project2.json
@@ -26,6 +26,16 @@
   "employer": "example employer",
   "email": "example email",
   "description": "example description",
+  "faq": [
+    {
+      "title": "This is another question?",
+      "text": "We are looking for answers to specific projects."
+    },
+    {
+      "title": "Here's another question on the CMS side",
+      "text": "Here's an answer for that question! Yay!"
+    }
+  ],
   "emailContent": "example emailContent",
   "purpose": "example purpose",
   "key": "example key",

diff --git a/packages/example/src/pages/accordion.js b/packages/example/src/pages/accordion.js
@@ -0,0 +1,29 @@
+import React from "react"
+import { Accordion } from "@thepolicylab-projectportals/gatsby-theme-project-portal/src/components/Accordion"
+
+const twoElems = [
+  { title: "Topic A", text: "topic-a" },
+  { title: "Topic B", text: "topic-b" },
+]
+const AccordionTest = () => {
+  return (
+    <>
+      <h2>Various Behaviours of Accordion Component</h2>
+      <h3>Accordion with two elements:</h3>
+      {twoElems.map(({ title, text }, i) => (
+        <Accordion key={"collapsibleList_" + i} title={title} text={text} />
+      ))}
+      <h3>Accordion with no elements:</h3>
+      <Accordion title={"No text elements:"}></Accordion>
+      <h3>Has elements, but they are empty:</h3>
+      <Accordion title={""} text={""}></Accordion>
+      <h3>Accordion with one item:</h3>
+      <Accordion
+        title={"We only get one question"}
+        text={"And we hate answering it."}
+      ></Accordion>
+    </>
+  )
+}
+
+export default AccordionTest
diff --git a/packages/example/src/pages/index.js b/packages/example/src/pages/index.js
@@ -30,6 +30,7 @@ import { ContactForm } from "@thepolicylab-projectportals/gatsby-theme-project-p
 
 import { useStaticQuery, graphql } from "gatsby"
 import { getImage } from "gatsby-plugin-image"
+import AccordionTest from "./accordion"
 
 var markdownContent = `
 
@@ -450,6 +451,10 @@ const Index = () => {
         lede={"sample lede"}
         sortOptions={["endDate", "created"]}
       />
+      <div>
+        ____________________________TEST__ACCORDION____________________________
+      </div>
+      <AccordionTest />
     </>
   )
 }

diff --git a/packages/gatsby-theme-project-portal/src/components/Accordion.tsx b/packages/gatsby-theme-project-portal/src/components/Accordion.tsx
@@ -0,0 +1,29 @@
+import React from "react"
+import { Disclosure } from "@headlessui/react"
+import { FaMinus, FaPlus } from "react-icons/fa"
+import { MarkdownText } from "./MarkdownText"
+
+interface AccordionProps {
+  title: string
+  text: string
+}
+
+export const Accordion: React.FC<AccordionProps> = ({ title, text }) => {
+  return (
+    <div className="w-full my-6">
+      <Disclosure>
+        {({ open }) => (
+          <>
+            <Disclosure.Button className="flex items-center justify-between w-full px-4 py-3 text-left bg-navbar">
+              <span className="text-h4 font-bold">{title}</span>
+              {open ? <FaMinus /> : <FaPlus />}
+            </Disclosure.Button>
+            <Disclosure.Panel className="text-body p-4 w-9/10">
+              <MarkdownText text={text} />
+            </Disclosure.Panel>
+          </>
+        )}
+      </Disclosure>
+    </div>
+  )
+}
diff --git a/packages/gatsby-theme-project-portal/src/components/ProjectDetail.tsx b/packages/gatsby-theme-project-portal/src/components/ProjectDetail.tsx
@@ -12,6 +12,8 @@ import {
   TopicType,
 } from "."
 
+import { Accordion } from "./Accordion"
+
 import { statusOutput, isNA, isEmpty } from "../utils"
 
 export interface ProjectDetailLayoutProps {
@@ -39,6 +41,12 @@ export interface ProjectDetailLayoutProps {
   // Project team
   projectTeam?: ContactType[]
 
+  // (Optional) FAQ
+  faq: {
+    title: string
+    text: string
+  }[]
+
   // Metadata
   status: string
   opportunityCloses: Date
@@ -72,6 +80,7 @@ export const ProjectDetailLayout: FunctionComponent<
   emailContent,
   mainContact,
   projectTeam,
+  faq,
 }) => {
   return (
     <article>
@@ -182,6 +191,20 @@ export const ProjectDetailLayout: FunctionComponent<
                   <SectionOfItem label="Helpful links" value={priorResearch} />
                 </div>
               )}
+              {!isEmpty(faq) && (
+                <>
+                  <section className="w-full mt-10 lg:w-11/12">
+                    <h3 className="text-h3">Frequently Asked Questions</h3>
+                    {faq.map(({ title, text }, i) => (
+                      <Accordion
+                        key={"collapsibleList_" + i}
+                        title={title}
+                        text={text}
+                      />
+                    ))}
+                  </section>
+                </>
+              )}
             </div>
             {!(mainContact === null || mainContact === undefined) && (
               <MainContact

diff --git a/packages/gatsby-theme-project-portal/src/layouts/AboutPageLayout.tsx b/packages/gatsby-theme-project-portal/src/layouts/AboutPageLayout.tsx
@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from "react"
 import { Disclosure } from "@headlessui/react"
 import { FaPlus, FaMinus } from "react-icons/fa"
-
+import { Accordion } from "../components/Accordion"
 import { Layout } from "./Layout"
 import {
   HeaderWithImage,
@@ -36,31 +36,6 @@ interface AboutProps {
   }
 }
 
-interface AccordionProps {
-  title: string
-  text: string
-}
-
-const Accordion: React.FC<AccordionProps> = ({ title, text }) => {
-  return (
-    <div className="w-full my-6">
-      <Disclosure>
-        {({ open }) => (
-          <>
-            <Disclosure.Button className="flex items-center justify-between w-full px-4 py-3 text-left bg-navbar">
-              <span className="text-h4 font-bold">{title}</span>
-              {open ? <FaMinus /> : <FaPlus />}
-            </Disclosure.Button>
-            <Disclosure.Panel className="text-body p-4 w-9/10">
-              <MarkdownText text={text} />
-            </Disclosure.Panel>
-          </>
-        )}
-      </Disclosure>
-    </div>
-  )
-}
-
 const AboutList = ({ aboutTitle, aboutText }) => {
   return (
     <div className="mb-8">

diff --git a/packages/gatsby-theme-project-portal/src/templates/project-detail-page.js b/packages/gatsby-theme-project-portal/src/templates/project-detail-page.js
@@ -59,6 +59,10 @@ export const query = graphql`
           }
         }
       }
+      faq {
+        text
+        title
+      }
     }
   }
 `
diff --git a/packages/gatsby-theme-project-portal/utils/types.js b/packages/gatsby-theme-project-portal/utils/types.js
@@ -49,6 +49,7 @@ const projectPortalConfigTypeDefs = `
 const PROJECT_NODE_TYPE = `Project`
 const CONTACT_NODE_TYPE = `Contact`
 const TOPIC_NODE_TYPE = `Topic`
+const TITLE_AND_TEXT_TYPE = `TitleAndText`
 
 const projectTypeDefs = `
     interface ${PROJECT_NODE_TYPE} implements Node {
@@ -83,6 +84,8 @@ const projectTypeDefs = `
       
       mainContact: ${CONTACT_NODE_TYPE}
       projectTeam: [${CONTACT_NODE_TYPE}]
+      
+      faq: [${TITLE_AND_TEXT_TYPE}]
     }
     
     interface ${TOPIC_NODE_TYPE} implements Node {
@@ -111,7 +114,6 @@ const contactTypeDefs = `
 const CARD_PAGE_NODE_TYPE = `cardPage`
 const CARD_PAGE_FILTER_TYPE = `cardPageFilterOn`
 const GENERAL_PAGE_NODE_TYPE = `generalPage`
-const TITLE_AND_TEXT_TYPE = `TitleAndText`
 const pageTypeDefs = `
   interface ${CARD_PAGE_NODE_TYPE} implements Node {
     id: ID!

diff --git a/packages/project-portal-content-netlify/gatsby-node.js b/packages/project-portal-content-netlify/gatsby-node.js
@@ -91,6 +91,9 @@ exports.createSchemaCustomization = ({ actions, schema, getNode }) => {
         requirement: "String",
         keyDates: "String",
         statusOfData: "String",
+        faq: {
+          type: [TITLE_AND_TEXT_TYPE],
+        },
         priorResearch: "String",
         fundingInfo: "String",
         emailContent: "String",

diff --git a/packages/project-portal-content-netlify/src/cms/cms.js b/packages/project-portal-content-netlify/src/cms/cms.js
@@ -189,6 +189,28 @@ CMS.init({
             required: false,
             hint: 'People or organizations who are involved. To create a new contact or modify an existing one, go to the "Contacts" collection.',
           },
+          {
+            name: "faq",
+            label: "FAQ",
+            widget: "list",
+            required: false,
+            fields: [
+              {
+                name: "title",
+                label: "Question",
+                widget: "string",
+                required: false,
+                hint: "The heading which is shown before the user expands the text block",
+              },
+              {
+                name: "text",
+                label: "Answer",
+                widget: "markdown",
+                required: false,
+                hint: "The text which is shown when the user expands the text block",
+              },
+            ],
+          },
           {
             name: "created",
             label: "Date Posted",
@@ -391,14 +413,14 @@ CMS.init({
                 fields: [
                   {
                     name: "title",
-                    label: "Title",
+                    label: "Question",
                     widget: "string",
                     required: false,
                     hint: "The heading which is shown before the user expands the text block",
                   },
                   {
                     name: "text",
-                    label: "Text",
+                    label: "Answer",
                     widget: "markdown",
                     required: false,
                     hint: "The text which is shown when the user expands the text block",
-Original file line number
+Diff line change
@@ Expand Up / @@ -59,6 +59,10 @@ export const query = graphql` @@
               }
             }
           }
+          faq {
+            text
+            title
+          }
         }
       }
     `