adilallo
51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { memo, useCallback, useId, useState } from "react";
|
|
import AccordionView from "./Accordion.view";
|
|
import type { AccordionProps, AccordionSizeValue } from "./Accordion.types";
|
|
|
|
/**
|
|
* Figma: "Layout / Accordion" (21842-2813); Medium 22135-890258; optional `lgSize` / `xlSize` stacking (FAQ **s**→**m** `lg`; **l** `xl`, 22135-890328).
|
|
*/
|
|
const AccordionContainer = memo<AccordionProps>(
|
|
({
|
|
title,
|
|
subhead,
|
|
children,
|
|
size: sizeProp = "l",
|
|
lgSize,
|
|
xlSize,
|
|
defaultOpen = false,
|
|
className = "",
|
|
}) => {
|
|
const size: AccordionSizeValue = sizeProp;
|
|
const [isOpen, setIsOpen] = useState(defaultOpen);
|
|
const panelId = useId();
|
|
const buttonId = useId();
|
|
|
|
const onToggle = useCallback(() => {
|
|
setIsOpen((open) => !open);
|
|
}, []);
|
|
|
|
return (
|
|
<AccordionView
|
|
title={title}
|
|
subhead={subhead}
|
|
children={children}
|
|
size={size}
|
|
lgSize={lgSize}
|
|
xlSize={xlSize}
|
|
isOpen={isOpen}
|
|
panelId={panelId}
|
|
buttonId={buttonId}
|
|
onToggle={onToggle}
|
|
className={className}
|
|
/>
|
|
);
|
|
},
|
|
);
|
|
|
|
AccordionContainer.displayName = "Accordion";
|
|
|
|
export default AccordionContainer;
|