refactor: create MenuAccordion to isolate custom styles and logic

Author: pettinarip

src/components/Nav/Mobile/LvlAccordion.tsx

@@ -9,14 +9,15 @@ import { trackCustomEvent } from "@/lib/utils/matomo"
 import { cleanPath } from "@/lib/utils/url"
 
 import { BaseLink } from "../../../../tailwind/Link"
+import type { Level, NavItem, NavSectionKey } from "../types"
+
+import ExpandIcon from "./ExpandIcon"
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
-} from "../../../../tailwind/ui/accordion"
-import type { Level, NavItem, NavSectionKey } from "../types"
-
-import ExpandIcon from "./ExpandIcon"
+  AccordionTrigger,
+} from "./MenuAccordion"
 
 import { useNavMenuColorsTw } from "@/hooks/useNavMenuColorsTw"
 
@@ -106,15 +107,15 @@ const LvlAccordion = ({
             </AccordionItem>
           )
 
-        const Heading = `h${lvl + 1}` as "h2" | "h3" | "h4" | "h5"
         return (
           <AccordionItem
             key={label}
             value={label}
             className="border-t border-body-light last:border-b"
           >
-            <AccordionPrimitive.Header
-              className="flex"
+            <AccordionTrigger
+              heading={`h${lvl + 1}` as "h2" | "h3" | "h4" | "h5"}
+              className={cn(menuColors.body, nestedAccordionSpacingMap[lvl])}
               onClick={() => {
                 trackCustomEvent({
                   eventCategory: "Mobile navigation menu",
@@ -124,38 +125,27 @@ const LvlAccordion = ({
                   } section: ${label} - ${description.slice(0, 16)}...`,
                 })
               }}
-              asChild
             >
-              <Heading>
-                <AccordionPrimitive.Trigger
+              <ExpandIcon isOpen={isExpanded} />
+              <div>
+                <p
+                  className={cn(
+                    "flex-1 text-md font-bold leading-tight",
+                    menuColors.body
+                  )}
+                >
+                  {label}
+                </p>
+                <p
                   className={cn(
-                    "group flex flex-1 items-center justify-start gap-2 px-4 py-4 text-start font-medium transition-all hover:bg-background-highlight focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary-hover md:px-4 [&[data-state=open]]:bg-background-highlight [&[data-state=open]]:text-primary-high-contrast",
-                    menuColors.body,
-                    nestedAccordionSpacingMap[lvl]
+                    "text-sm font-normal leading-tight",
+                    menuColors.lvl[lvl].subtext
                   )}
                 >
-                  <ExpandIcon isOpen={isExpanded} />
-                  <div>
-                    <p
-                      className={cn(
-                        "flex-1 text-md font-bold leading-tight",
-                        menuColors.body
-                      )}
-                    >
-                      {label}
-                    </p>
-                    <p
-                      className={cn(
-                        "text-sm font-normal leading-tight",
-                        menuColors.lvl[lvl].subtext
-                      )}
-                    >
-                      {description}
-                    </p>
-                  </div>
-                </AccordionPrimitive.Trigger>
-              </Heading>
-            </AccordionPrimitive.Header>
+                  {description}
+                </p>
+              </div>
+            </AccordionTrigger>
 
             <AccordionContent
               className={cn("mt-0 p-0", menuColors.lvl[lvl + 1].background)}

src/components/Nav/Mobile/MenuAccordion.tsx

@@ -0,0 +1,37 @@
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+
+import { cn } from "@/lib/utils/cn"
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+} from "../../../../tailwind/ui/accordion"
+
+type AccordionTriggerProps = {
+  heading?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+} & React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+
+const AccordionTrigger = ({
+  heading = "h2",
+  className,
+  ...props
+}: AccordionTriggerProps) => {
+  const Heading = heading
+
+  return (
+    <AccordionPrimitive.Header className="flex" asChild>
+      <Heading>
+        <AccordionPrimitive.Trigger
+          className={cn(
+            "group flex flex-1 items-center justify-start gap-2 px-4 py-4 text-start font-medium transition-all hover:bg-background-highlight focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary-hover md:px-4 [&[data-state=open]]:bg-background-highlight [&[data-state=open]]:text-primary-high-contrast",
+            className
+          )}
+          {...props}
+        />
+      </Heading>
+    </AccordionPrimitive.Header>
+  )
+}
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger }

src/components/Nav/Mobile/MenuBody.tsx

@@ -1,21 +1,21 @@
 import { useState } from "react"
 import { useRouter } from "next/router"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
 
 import { cn } from "@/lib/utils/cn"
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
 import { SECTION_LABELS } from "@/lib/constants"
 
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-} from "../../../../tailwind/ui/accordion"
 import type { Level, NavSections } from "../types"
 
 import ExpandIcon from "./ExpandIcon"
 import LvlAccordion from "./LvlAccordion"
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "./MenuAccordion"
 
 import { useNavMenuColorsTw } from "@/hooks/useNavMenuColorsTw"
 
@@ -47,8 +47,8 @@ const MenuBody = ({ linkSections, onToggle }: MenuBodyProps) => {
               value={key}
               className="border-b border-body-light first:border-t"
             >
-              <AccordionPrimitive.Header
-                className="flex"
+              <AccordionTrigger
+                className={cn(menuColors.body)}
                 onClick={() => {
                   trackCustomEvent({
                     eventCategory: "Mobile navigation menu",
@@ -58,22 +58,12 @@ const MenuBody = ({ linkSections, onToggle }: MenuBodyProps) => {
                     } section: ${locale} - ${key}`,
                   })
                 }}
-                asChild
               >
-                <h2>
-                  <AccordionPrimitive.Trigger
-                    className={cn(
-                      "group flex flex-1 items-center justify-between gap-2 px-4 py-4 font-medium transition-all hover:bg-background-highlight focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary-hover md:px-4 [&[data-state=open]]:bg-background-highlight [&[data-state=open]]:text-primary-high-contrast",
-                      menuColors.body
-                    )}
-                  >
-                    <ExpandIcon isOpen={isExpanded} />
-                    <span className="flex-1 text-start text-lg font-bold leading-none">
-                      {label}
-                    </span>
-                  </AccordionPrimitive.Trigger>
-                </h2>
-              </AccordionPrimitive.Header>
+                <ExpandIcon isOpen={isExpanded} />
+                <span className="flex-1 text-start text-lg font-bold leading-none">
+                  {label}
+                </span>
+              </AccordionTrigger>
 
               <AccordionContent
                 className={cn(