@amsterdam/design-system-react 3.2.1 → 3.3.0

package/dist/ProgressList/ProgressListStep.js

@@ -1,13 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowForwardIcon } from '@amsterdam/design-system-react-icons';
+import { ArrowForwardIcon, ChevronDownIcon } from '@amsterdam/design-system-react-icons';
 import { clsx } from 'clsx';
-import { forwardRef, useContext } from 'react';
+import { forwardRef, useContext, useId, useState } from 'react';
 import { Heading } from '../Heading';
 import { Icon } from '../Icon';
 import { AccessibleStatusText } from './AccessibleStatusText';
 import { ProgressListContext } from './ProgressListContext';
-export const ProgressListStep = forwardRef(({ children, className, hasSubsteps, heading, status, ...restProps }, ref) => {
+export const ProgressListStep = forwardRef(({ children, className, defaultCollapsed, hasSubsteps, heading, onToggle, status, ...restProps }, ref) => {
     const { headingLevel } = useContext(ProgressListContext);
-    return (_jsxs("li", { "aria-current": status === 'current' ? 'step' : undefined, className: clsx(className, 'ams-progress-list__step', hasSubsteps && 'ams-progress-list__step--has-substeps', status && `ams-progress-list__step--${status}`), ref: ref, ...restProps, children: [_jsxs("div", { className: "ams-progress-list__indicator", children: [_jsx("div", { className: "ams-progress-list__marker", children: _jsx("span", { className: "ams-progress-list__marker-shape", children: status === 'current' && _jsx(Icon, { color: "inverse", svg: ArrowForwardIcon }) }) }), _jsx("span", { className: "ams-progress-list__connector" })] }), _jsxs("div", { className: "ams-progress-list__content", children: [_jsxs(Heading, { className: "ams-progress-list__heading", level: headingLevel, children: [_jsx(AccessibleStatusText, { status: status }), heading] }), children] })] }));
+    const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed ?? status === 'completed');
+    const iconSize = `heading-${headingLevel}`;
+    const panelId = useId();
+    return (_jsxs("li", { "aria-current": status === 'current' ? 'step' : undefined, className: clsx(className, 'ams-progress-list__step', isCollapsed && 'ams-progress-list__step--collapsed', hasSubsteps && 'ams-progress-list__step--has-substeps', status && `ams-progress-list__step--${status}`), ref: ref, ...restProps, children: [_jsxs("div", { className: "ams-progress-list__indicator", children: [_jsx("div", { className: "ams-progress-list__marker", children: _jsx("span", { className: "ams-progress-list__marker-shape", children: status === 'current' && _jsx(Icon, { color: "inverse", svg: ArrowForwardIcon }) }) }), _jsx("span", { className: "ams-progress-list__connector" })] }), _jsxs("div", { className: "ams-progress-list__content", children: [_jsx(Heading, { className: "ams-progress-list__heading", level: headingLevel, children: _jsxs("button", { "aria-controls": panelId, "aria-expanded": !isCollapsed, className: "ams-progress-list__button", onClick: () => {
+                                const next = !isCollapsed;
+                                setIsCollapsed(next);
+                                onToggle?.(!next);
+                            }, type: "button", children: [_jsx(Icon, { className: "ams-progress-list__icon", size: iconSize, svg: ChevronDownIcon }), _jsx(AccessibleStatusText, { status: status }), heading] }) }), _jsx("div", { className: "ams-progress-list__panel", id: panelId, children: children })] })] }));
 });
 ProgressListStep.displayName = 'ProgressList.Step';