Merge branch '167-regression-add-created-date-field-to-projects-netli…

…fy-and-check-that-it-works-with-sorting' into fix-unify-datetime-formats-netlify

packages/gatsby-theme-project-portal/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@tailwindcss/forms": "^0.5.3",
+    "@headlessui/react": "^1.7.3",
     "autoprefixer": "^10.0.4",
     "gatsby-plugin-image": "^2.24.0",
     "gatsby-plugin-postcss": "^5.24.0",

packages/gatsby-theme-project-portal/src/pages/about.tsx

@@ -0,0 +1,135 @@
+import React from "react"
+import { graphql } from "gatsby"
+import { Disclosure } from "@headlessui/react"
+import { Layout } from "@thepolicylab-projectportals/gatsby-theme-project-portal/src/layouts"
+import {
+  HeaderWithImage,
+  MarkdownText,
+} from "@thepolicylab-projectportals/gatsby-theme-project-portal/src/components"
+import { FaPlus, FaMinus } from "react-icons/fa"
+import { useStaticText, useSiteMetadata } from "../hooks"
+import { isNA } from "../utils"
+
+interface AboutProps {
+  data: {
+    bgImage: {
+      childImageSharp: {
+        resize: {
+          src: string
+        }
+      }
+    }
+  }
+}
+
+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">
+      {aboutTitle && <h3 className="text-h3 mb-4">{aboutTitle}</h3>}
+      <MarkdownText text={aboutText} />
+    </div>
+  )
+}
+
+export default ({ data }: AboutProps) => {
+  const { title } = useSiteMetadata()
+  const language = useStaticText()
+  console.log("test")
+  console.log(data)
+  return (
+    <Layout activePage="About" title="About" description={`About the ${title}`}>
+      <main>
+        <header>
+          <HeaderWithImage
+            title="About"
+            lede=""
+            imageSrc={data?.bgImage?.childImageSharp.resize.src}
+          />
+        </header>
+
+        <article className="w-full pt-5 px-8 lg:px-16 xl:px-24 lg:w-2/3">
+          <section className="mb-20">
+            {language.about.header && (
+              <h2 className="text-h3 sm:text-h2 my-8 font-bold text-black">
+                {language.about.header}
+              </h2>
+            )}
+            {language.about.aims.map(({ title, text }, i) => (
+              <AboutList
+                key={"list_" + i}
+                aboutTitle={title}
+                aboutText={text}
+              />
+            ))}
+          </section>
+
+          <section className="mb-20">
+            <h2 className="text-h3 sm:text-h2 my-6">
+              Frequently Asked Questions
+            </h2>
+            {language.about.faq.map(({ title, text }, i) => (
+              <Accordion
+                key={"collapsibleList_" + i}
+                title={title}
+                text={text}
+              />
+            ))}
+          </section>
+
+          {!isNA(language.about.accessibility) && (
+            <section id="accessibility">
+              <h2 className="text-h3 sm:text-h2 my-6">
+                Accessibility Statement
+              </h2>
+              <MarkdownText
+                className="mb-10 leading-normal text-body lg:text-body"
+                text={language.about.accessibility}
+              />
+            </section>
+          )}
+        </article>
+      </main>
+    </Layout>
+  )
+}
+
+export const query = graphql`
+  query AboutQuery {
+    bgImage: file(
+      name: { eq: "about" }
+      extension: { in: ["png", "jpg", "jpeg"] }
+      sourceInstanceName: { eq: "themeImages" }
+    ) {
+      childImageSharp {
+        resize(width: 1536) {
+          src
+        }
+      }
+    }
+  }
+`

yarn.lock

@@ -1490,6 +1490,11 @@
   dependencies:
     "@hapi/hoek" "^9.0.0"
 
+"@headlessui/react@^1.7.3":
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.3.tgz#853c598ff47b37cdd192c5cbee890d9b610c3ec0"
+  integrity sha512-LGp06SrGv7BMaIQlTs8s2G06moqkI0cb0b8stgq7KZ3xcHdH3qMP+cRyV7qe5x4XEW/IGY48BW4fLesD6NQLng==
+
 "@humanwhocodes/config-array@^0.5.0":
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9"