feat: properly type accordions

src/components/atlas/BuildAccordion.tsx

@@ -1,5 +1,6 @@
 /** @jsxImportSource react */
 import { Accordion } from "@adjust/components";
+import type { AccordionItem } from "@adjust/components/build/Accordion/Item";
 import { htmlWithTitles } from "@components/utils/htmlWithTitles";
 import type { FC } from "react";
 
@@ -14,12 +15,9 @@ const BuildAccordion: FC<{
 
   const content = htmlWithTitles(props.content);
 
-  // Each accordion exists in its own list, so we can hardcode the value of `id` to 1.
-  // If we want to create multi-accordion lists in future we will need to iterate the `id`.
-
-  const data = [
+  const data: AccordionItem[] = [
     {
-      id: 1,
+      id: content.anchor,
       title: content.title || "",
       content: content.body,
       badge: {},

src/components/utils/htmlWithTitles.tsx

@@ -17,9 +17,13 @@ export const htmlWithTitles = (content: string) => {
    We need to extract the first header 3 and use it as the label */
 
   const title = el.querySelector("body > h3");
+  let label: string = "";
+  let anchor: string = "";
 
-  const label = title?.textContent?.toString();
-  const anchor = title?.id.toString();
+  if (title && title.textContent) {
+    label = title.textContent.toString();
+    anchor = title.id.toString();
+  }
 
   // If the next sibling of the header is a header 4, we need to store this.