@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 } from "react/jsx-runtime";
import { ArrowForwardIcon } from '@amsterdam/design-system-react-icons';
import { clsx } from 'clsx';
import { forwardRef, useContext } from 'react';
import { Heading } from '../Heading';
import { Icon } from '../Icon';
import { ProgressListContext } from './ProgressListContext';
export const ProgressListStep = forwardRef(({ children, className, hasSubsteps, heading, 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: [_jsx(Heading, { className: "ams-progress-list__heading", level: headingLevel, children: heading }), children] })] }));
});
ProgressListStep.displayName = 'ProgressList.Step';