bed674df87
Fix/SW-1128/SW-1124 side peek and gallery * fix(SW-1128): updated style and mobile design for sidepeek select hotel * fix(SW-1128): update link sidepeek * fix(SW-1124): fix padding gallery * fix(SW-1128): fix sidepeek mobile design * fix(SW-1128): fix mobile design * fix(SW-1128): fix gallery icon caption Approved-by: Niclas Edenvin
87 lines
2.3 KiB
TypeScript
87 lines
2.3 KiB
TypeScript
"use client"
|
|
|
|
import { useRef } from "react"
|
|
|
|
import { ChevronDownIcon } from "@/components/Icons"
|
|
import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
|
|
|
|
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,
|
|
}: 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 }
|
|
)
|
|
} else {
|
|
content.style.maxHeight = "0"
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<li className={accordionItemVariants({ className, variant, theme })}>
|
|
<details ref={detailsRef} onToggle={toggleAccordion}>
|
|
<summary className={styles.summary}>
|
|
{IconComp && (
|
|
<IconComp className={styles.icon} color="baseTextHighcontrast" />
|
|
)}
|
|
{variant === "sidepeek" ? (
|
|
<Subtitle
|
|
className={styles.title}
|
|
type="two"
|
|
color="baseTextHighContrast"
|
|
>
|
|
{title}
|
|
</Subtitle>
|
|
) : (
|
|
<Body
|
|
textTransform="bold"
|
|
color="baseTextHighContrast"
|
|
className={styles.title}
|
|
>
|
|
{title}
|
|
</Body>
|
|
)}
|
|
<ChevronDownIcon
|
|
className={styles.chevron}
|
|
color="burgundy"
|
|
width={20}
|
|
height={20}
|
|
/>
|
|
</summary>
|
|
<div ref={contentRef} className={styles.content}>
|
|
{children}
|
|
</div>
|
|
</details>
|
|
</li>
|
|
)
|
|
}
|