accordion component

src/components/paragraphs/paragraph.tsx

@@ -15,6 +15,7 @@ import SupAuthorListParagraph from "@components/paragraphs/sup-author-list/sup-a
 import SupSearchFormParagraph from "@components/paragraphs/sup-search-form/sup-search-form-paragraph"
 import SupBlogTeaserParagraph from "@components/paragraphs/sup-blog-teaser/sup-blog-teaser-paragraph"
 import UnpublishedBanner from "@components/elements/unpublished-banner"
+import FaqParagraph from "@components/paragraphs/stanford-faq/faq-paragraph"
 
 type Props = {
   /**
@@ -70,6 +71,8 @@ const ParagraphComponent = async ({paragraph}: Props) => {
       return <SupSearchFormParagraph paragraph={paragraph} {...itemProps} />
     case "ParagraphSupBlogTeaser":
       return <SupBlogTeaserParagraph paragraph={paragraph} {...itemProps} />
+    case "ParagraphStanfordFaq":
+      return <FaqParagraph paragraph={paragraph} {...itemProps} />
   }
   console.warn(`Unknown paragraph ${paragraph.__typename}. Item ${paragraph.id}.`)
 }

src/components/paragraphs/stanford-faq/expand-collapse-all.tsx

@@ -0,0 +1,34 @@
+"use client"
+
+import Button from "@components/elements/button"
+import {useBoolean} from "usehooks-ts"
+import {HTMLAttributes, useEffect, useRef} from "react"
+
+type Props = HTMLAttributes<HTMLButtonElement>
+
+const ExpandCollapseAll = ({...props}: Props) => {
+  const {value: expand, toggle} = useBoolean(false)
+  const ref = useRef<HTMLButtonElement>(null)
+
+  useEffect(() => {
+    const buttons = ref.current?.parentElement?.parentElement?.getElementsByTagName("button") || []
+    for (let i = 0; i < buttons.length; i++) {
+      if (!expand && buttons[i].getAttribute("aria-expanded") === "false") {
+        buttons[i].click()
+      }
+
+      if (expand && buttons[i].getAttribute("aria-expanded") === "true") {
+        buttons[i].click()
+      }
+    }
+  }, [expand])
+
+  return (
+    // @ts-expect-error ref object type issue.
+    <Button ref={ref} buttonElem onClick={toggle} {...props}>
+      {expand ? "Expand All" : "Collapse All"}
+    </Button>
+  )
+}
+
+export default ExpandCollapseAll

src/components/paragraphs/stanford-faq/faq-paragraph.tsx

@@ -0,0 +1,40 @@
+import {HtmlHTMLAttributes} from "react"
+import {ParagraphStanfordFaq} from "@lib/gql/__generated__/drupal.d"
+import {H2} from "@components/elements/headers"
+import Wysiwyg from "@components/elements/wysiwyg"
+import Accordion from "@components/elements/accordion"
+import twMerge from "@lib/utils/twMergeConfig"
+import ExpandCollapseAll from "@components/paragraphs/stanford-faq/expand-collapse-all"
+
+type Props = HtmlHTMLAttributes<HTMLDivElement> & {
+  paragraph: ParagraphStanfordFaq
+}
+
+const FaqParagraph = ({paragraph, ...props}: Props) => {
+  return (
+    <div {...props} className={twMerge("mx-auto max-w-1200 space-y-20", props.className)}>
+      <div className="flex items-center justify-between gap-20">
+        {paragraph.suFaqHeadline && <H2>{paragraph.suFaqHeadline}</H2>}
+
+        <ExpandCollapseAll className="ml-auto" />
+      </div>
+      <Wysiwyg html={paragraph.suFaqDescription?.processed} />
+
+      <div>
+        {paragraph.suFaqQuestions?.map(question => (
+          <Accordion
+            className="border-t border-black-40 last:border-b"
+            buttonProps={{className: "mt-6"}}
+            key={question.id}
+            button={question.suAccordionTitle}
+            headingLevel={paragraph.suFaqHeadline ? "h3" : "h2"}
+          >
+            <Wysiwyg html={question.suAccordionBody.processed} />
+          </Accordion>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default FaqParagraph