56 lines
2.2 KiB
TypeScript
56 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import LayoutAccordion from "../../layout/Accordion";
|
|
import type { FaqAccordionViewProps } from "./Accordion.types";
|
|
|
|
/**
|
|
* Figma: "Sections / Accordion" (22130-889248; mobile FAQ 22132-889380).
|
|
* Inset: **4/32** stacked, **96/64** from `md` (22130:889249), **160/96** from `lg` (22130:889247 / 22135:890328).
|
|
* Rows: **s** below `lg`, **m** at `lg`, **l** at `xl` via `xlSize`.
|
|
* Section title: Large Heading below `lg`; X Large Heading at `lg`; XX Large Heading at `xl` (22135:890398).
|
|
*/
|
|
function FaqAccordionView({
|
|
title,
|
|
items,
|
|
size,
|
|
lgSize,
|
|
xlSize,
|
|
headingId,
|
|
className = "",
|
|
}: FaqAccordionViewProps) {
|
|
return (
|
|
<section
|
|
aria-labelledby={headingId}
|
|
className={`bg-[var(--color-surface-default-secondary)] px-[var(--spacing-scale-004)] py-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-096)] md:py-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-160)] lg:py-[var(--spacing-scale-096)] ${className}`.trim()}
|
|
>
|
|
<div className="mx-auto flex w-full flex-col items-center gap-[var(--spacing-scale-096)] md:gap-[var(--spacing-scale-040)]">
|
|
<h2
|
|
id={headingId}
|
|
className="w-full text-center font-bricolage-grotesque text-[length:var(--text-large-heading)] font-bold leading-[length:var(--text-large-heading--line-height)] text-[var(--color-content-default-brand-primary,#fefcc9)] lg:text-[length:var(--text-x-large-heading)] lg:leading-[length:var(--text-x-large-heading--line-height)] xl:text-[length:var(--text-xx-large-heading)] xl:leading-[length:var(--text-xx-large-heading--line-height)] xl:tracking-[var(--text-xx-large-heading--letter-spacing)]"
|
|
>
|
|
{title}
|
|
</h2>
|
|
<div className="w-full md:px-0">
|
|
{items.map((item, index) => (
|
|
<LayoutAccordion
|
|
key={`${item.title}-${index}`}
|
|
title={item.title}
|
|
subhead={item.subhead}
|
|
size={size}
|
|
lgSize={lgSize}
|
|
xlSize={xlSize}
|
|
>
|
|
{item.answer}
|
|
</LayoutAccordion>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
FaqAccordionView.displayName = "FaqAccordionView";
|
|
|
|
export default memo(FaqAccordionView);
|