@amsterdam/design-system-react/dist/ProgressList/ProgressListStep.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, Fragment as _Fragment } from "react/jsx-runtime";
import { ArrowForwardIcon, 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';
import { AccessibleStatusText } from './AccessibleStatusText';
import { ProgressListContext } from './ProgressListContext';
export const ProgressListStep = forwardRef(({ children, className, defaultCollapsed, hasSubsteps, heading, onToggle, status, ...restProps }, ref) => {
    const { collapsible, headingLevel } = useContext(ProgressListContext);
    const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed ?? status === 'completed');
    const iconSize = `heading-${headingLevel}`;
    const panelId = useId();
    // Toggles the local collapsed state and emits the new expanded state
    const handleClick = () => {
        const nextIsExpanded = isCollapsed;
        setIsCollapsed(!isCollapsed);
        onToggle?.(nextIsExpanded);
    };
    return (_jsxs("li", { "aria-current": status === 'current' ? 'step' : undefined, className: clsx(className, 'ams-progress-list__step', collapsible && 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: collapsible ? (_jsxs("button", { "aria-controls": panelId, "aria-expanded": !isCollapsed, className: "ams-progress-list__button", onClick: handleClick, type: "button", children: [_jsx(Icon, { className: "ams-progress-list__icon", size: iconSize, svg: ChevronDownIcon }), _jsx(AccessibleStatusText, { status: status }), heading] })) : (_jsxs(_Fragment, { children: [_jsx(AccessibleStatusText, { status: status }), heading] })) }), _jsx("div", { className: "ams-progress-list__panel", id: collapsible ? panelId : undefined, children: children })] })] }));
});
ProgressListStep.displayName = 'ProgressList.Step';