@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";
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
import { ChevronDownIcon } from '@amsterdam/design-system-react-icons';
import clsx from 'clsx';
import { forwardRef, useContext, useId, useState } from 'react';
import AccordionContext from './AccordionContext';
import { getHeadingTag } from '../Heading/getHeadingTag';
import { Icon } from '../Icon/Icon';
export const AccordionSection = forwardRef(({ children, className, expanded = false, label, ...restProps }, ref) => {
    const { headingLevel, sectionAs } = useContext(AccordionContext);
    const [isExpanded, setIsExpanded] = useState(expanded);
    const HeadingTag = getHeadingTag(headingLevel);
    const SectionTag = sectionAs || 'section';
    const id = useId();
    const buttonId = `button-${id}`;
    const panelId = `panel-${id}`;
    return (_jsxs("div", { className: clsx('ams-accordion__section', className), ref: ref, ...restProps, children: [_jsx(HeadingTag, { className: "ams-accordion__header", 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: "heading-4", 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';