@amsterdam/design-system-react/dist/src/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, useEffect, useId, useState } from 'react';
import { Heading } from '../Heading';
import { Icon } from '../Icon';
import { AccordionContext } from './AccordionContext';
export const AccordionSection = forwardRef(({ children, className, defaultExpanded, expanded, label, ...restProps }, ref) => {
    const { headingLevel, sectionAs } = useContext(AccordionContext);
    const [isExpanded, setIsExpanded] = useState(defaultExpanded ?? expanded ?? false);
    useEffect(() => {
        if (expanded !== undefined) {
            console.warn('Accordion.Section: The `expanded` prop is deprecated. Use `defaultExpanded` instead.');
        }
    }, []);
    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, { 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';