@amsterdam/design-system-react/dist/Accordion/AccordionSection.js

All React components from the Amsterdam Design System. Use it to compose pages in your website or application.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ChevronDownIcon } from '@amsterdam/design-system-react-icons';
import { clsx } from 'clsx';
import { forwardRef, useContext, useId, useState } from 'react';
import { Heading } from '../Heading';
import { Icon } from '../Icon/Icon';
import AccordionContext from './AccordionContext';
// The 'ams-accordion__header' class is @deprecated and will be removed in a future release.
export const AccordionSection = forwardRef(({ children, className, expanded = false, label, ...restProps }, ref) => {
    const { headingLevel, sectionAs } = useContext(AccordionContext);
    const [isExpanded, setIsExpanded] = useState(expanded);
    const SectionTag = sectionAs || 'section';
    const id = useId();
    const iconSize = `heading-${headingLevel}`;
    const buttonId = `button-${id}`;
    const panelId = `panel-${id}`;
    return (_jsxs("div", { className: clsx('ams-accordion__section', className), ref: ref, ...restProps, children: [_jsx(Heading, { className: "ams-accordion__header", level: headingLevel, children: _jsxs("button", { "aria-controls": panelId, "aria-expanded": isExpanded, className: "ams-accordion__button", id: buttonId, onClick: () => setIsExpanded(!isExpanded), type: "button", children: [_jsx(Icon, { className: "ams-accordion__icon", size: iconSize, svg: ChevronDownIcon }), label] }) }), _jsx(SectionTag, { "aria-labelledby": buttonId, className: clsx('ams-accordion__panel', { 'ams-accordion__panel--expanded': isExpanded }), id: panelId, children: children })] }));
});
AccordionSection.displayName = 'Accordion.Section';