feat: accordion module (#9)

- **feat: accordion module**
- **feat: add SEO title**

Author: ben-basten

app/assets/css/_animation.css

@@ -31,3 +31,29 @@
     transform: translateY(0);
   }
 }
+
+@utility animate-slideDown {
+  animation: slideDown var(--duration-default) var(--ease-default);
+}
+
+@utility animate-slideUp {
+  animation: slideUp var(--duration-default) var(--ease-default);
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--reka-accordion-content-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--reka-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}

app/components/PageStandard.vue

@@ -25,6 +25,10 @@ if (error.value) {
   });
 }
 
+useHead({
+  title: data.value?.seoTitle || undefined,
+});
+
 const contentModules = computed(
   () => data.value?.contentModulesCollection?.items || [],
 );

app/components/modules/Accordion.vue

@@ -0,0 +1,60 @@
+<template>
+  <ContentContainer
+    as="section"
+    grid
+    class="mb-vertical md:mb-vertical-lg gap-y-7"
+  >
+    <div class="col-span-12 md:col-span-5 max-w-copy flex flex-col gap-y-6">
+      <Heading as="h2">{{ data.heading }}</Heading>
+      <RichTextRenderer :json="data?.copy?.json" />
+    </div>
+
+    <div class="col-span-12 md:col-span-6 md:col-start-7">
+      <AccordionRoot type="multiple" class="flex flex-col">
+        <AccordionItem
+          v-for="(item, index) in items"
+          :key="index"
+          :value="`item-${index}`"
+          class="border-b-2 border-accent"
+        >
+          <AccordionHeader as="h3">
+            <AccordionTrigger
+              class="group flex gap-x-4 w-full items-center justify-between py-6 text-left type-h4 cursor-pointer"
+            >
+              <span>{{ item.title }}</span>
+              <IconChevronDown
+                aria-hidden
+                class="size-5 shrink-0 transition-transform duration-default ease-default group-data-[state=open]:rotate-180"
+              />
+            </AccordionTrigger>
+          </AccordionHeader>
+          <AccordionContent
+            class="overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp"
+          >
+            <div class="pb-4 type-body">
+              <RichTextRenderer :json="item.copy?.json" />
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      </AccordionRoot>
+    </div>
+  </ContentContainer>
+</template>
+
+<script setup lang="ts">
+import {
+  AccordionContent,
+  AccordionHeader,
+  AccordionItem,
+  AccordionRoot,
+  AccordionTrigger,
+} from "reka-ui";
+import type { ModuleProps } from "~/types/module";
+import type { AccordionFragment } from "~~/shared/types/graphql";
+
+const { data } = defineProps<ModuleProps<AccordionFragment>>();
+
+const items = computed(
+  () => data.itemsCollection?.items.filter((item) => item !== null) ?? [],
+);
+</script>

app/components/render/ModuleRenderer.vue

@@ -5,6 +5,7 @@
 <script setup lang="ts">
 import HomepageHero from "~/components/modules/HomepageHero.vue";
 import FiftyFifty from "~/components/modules/FiftyFifty.vue";
+import Accordion from "~/components/modules/Accordion.vue";
 import type { Component } from "vue";
 import type { PageStandardFragment } from "~~/shared/types/graphql";
 
@@ -19,6 +20,7 @@ const { data } = defineProps<{
 const modules: Record<string, Component> = {
   HomepageHero: HomepageHero,
   ModuleFiftyfifty: FiftyFifty,
+  ModuleAccordion: Accordion,
 };
 
 const component = computed(() => {

app/components/svg/IconChevronDown.vue

@@ -0,0 +1,9 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 -960 960 960"
+    fill="currentColor"
+  >
+    <path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z" />
+  </svg>
+</template>

server/graphql/modules/accordion.fragment.ts

@@ -0,0 +1,20 @@
+import { gql } from "graphql-request";
+
+export const ACCORDION_FRAGMENT = gql`
+  fragment Accordion on ModuleAccordion {
+    heading
+    copy {
+      json
+    }
+    itemsCollection(limit: 15) {
+      items {
+        ... on ComponentTitleCopy {
+          title
+          copy {
+            json
+          }
+        }
+      }
+    }
+  }
+`;

server/graphql/queries/page-standard.query.ts

@@ -3,6 +3,7 @@ import { HOMEPAGE_HERO_FRAGMENT } from "../modules/homepage-hero.fragment";
 import { IMAGE_FRAGMENT } from "../fragments/Image.fragment";
 import { FIFTY_FIFTY_FRAGMENT } from "../modules/fifty-fifty.fragment";
 import { LINK_FRAGMENT } from "../fragments/Link.fragment";
+import { ACCORDION_FRAGMENT } from "../modules/accordion.fragment";
 
 export const PAGE_STANDARD_QUERY = gql`
   query PageStandard($slug: String!) {
@@ -17,6 +18,7 @@ export const PAGE_STANDARD_QUERY = gql`
   fragment PageStandard on PageStandard {
     cmsName
     slug
+    seoTitle
     contentModulesCollection(limit: 15) {
       items {
         __typename
@@ -26,11 +28,15 @@ export const PAGE_STANDARD_QUERY = gql`
         ... on ModuleFiftyfifty {
           ...FiftyFifty
         }
+        ... on ModuleAccordion {
+          ...Accordion
+        }
       }
     }
   }
   ${HOMEPAGE_HERO_FRAGMENT}
   ${FIFTY_FIFTY_FRAGMENT}
+  ${ACCORDION_FRAGMENT}
   ${IMAGE_FRAGMENT}
   ${LINK_FRAGMENT}
 `;