b85a3a57ec
feat/SW-1444 destination page add destination list component * feat(SW-1444): add list component * feat(SW-1444): add subtitle to accordion * feat(SW-1444): refactor component structure * feat(SW-1444): add desktop breakpoint * feat(SW-1444): fix typo * feat(SW-1444): add props * feat(SW-1444): add query * feat(SW-1444): updated query * feat(SW-1444): display data * feat(SW-1444): fix merge hickup * feat(SW-1444): change var name * feat(SW-1444): remove unsued translations * feat(SW-1444): use country as title * feat(SW-1444): sort hotels in query * feat(SW-1444): make responsive * feat(SW-1444): fetch country url * feat(SW-1444): update logging * feat(SW-1444): remove spread Approved-by: Erik Tiekstra
96 lines
2.6 KiB
TypeScript
96 lines
2.6 KiB
TypeScript
"use client"
|
|
|
|
import { useRef } from "react"
|
|
|
|
import { ChevronDownIcon } from "@/components/Icons"
|
|
import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
|
|
import { trackAccordionClick } from "@/utils/tracking"
|
|
|
|
import Body from "../../Text/Body"
|
|
import Subtitle from "../../Text/Subtitle"
|
|
import { accordionItemVariants } from "./variants"
|
|
|
|
import styles from "./accordionItem.module.css"
|
|
|
|
import type { AccordionItemProps } from "./accordionItem"
|
|
|
|
export default function AccordionItem({
|
|
children,
|
|
icon,
|
|
title,
|
|
theme,
|
|
variant,
|
|
className,
|
|
trackingId,
|
|
subtitle,
|
|
}: AccordionItemProps) {
|
|
const contentRef = useRef<HTMLDivElement>(null)
|
|
const detailsRef = useRef<HTMLDetailsElement>(null)
|
|
|
|
const IconComp = getIconByIconName(icon)
|
|
|
|
function toggleAccordion() {
|
|
const details = detailsRef.current
|
|
const content = contentRef.current
|
|
if (details && content) {
|
|
if (details.open) {
|
|
content.style.maxHeight = `${content.scrollHeight}px`
|
|
content.addEventListener(
|
|
"transitionend",
|
|
() => {
|
|
// Remove maxHeight after transition to allow content to transition multiple times
|
|
content.style.maxHeight = "none"
|
|
},
|
|
{ once: true }
|
|
)
|
|
if (trackingId) {
|
|
trackAccordionClick(trackingId)
|
|
}
|
|
} else {
|
|
content.style.maxHeight = "0"
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<li className={accordionItemVariants({ className, variant, theme })}>
|
|
<details ref={detailsRef} onToggle={toggleAccordion}>
|
|
<summary className={styles.summary}>
|
|
{IconComp && <IconComp color="baseTextHighcontrast" />}
|
|
{variant === "sidepeek" ? (
|
|
<Subtitle
|
|
className={styles.title}
|
|
type="two"
|
|
color="baseTextHighContrast"
|
|
>
|
|
{title}
|
|
</Subtitle>
|
|
) : (
|
|
<div className={styles.title}>
|
|
{subtitle ? (
|
|
<Subtitle type="two" color="baseTextHighContrast">
|
|
{title}
|
|
</Subtitle>
|
|
) : (
|
|
<Body textTransform="bold" color="baseTextHighContrast">
|
|
{title}
|
|
</Body>
|
|
)}
|
|
{subtitle && <Body color="baseTextHighContrast">{subtitle}</Body>}
|
|
</div>
|
|
)}
|
|
<ChevronDownIcon
|
|
className={styles.chevron}
|
|
color="burgundy"
|
|
width={20}
|
|
height={20}
|
|
/>
|
|
</summary>
|
|
<div ref={contentRef} className={styles.content}>
|
|
{children}
|
|
</div>
|
|
</details>
|
|
</li>
|
|
)
|
|
}
|