@amsterdam/design-system-react
Version:
All React components from the Amsterdam Design System. Use it to compose pages in your website or application.
8 lines (7 loc) • 929 B
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { clsx } from 'clsx';
import { forwardRef } from 'react';
export const ProgressListSubstep = forwardRef(({ children, className, status, ...restProps }, ref) => {
return (_jsxs("li", { "aria-current": status === 'current' ? 'step' : undefined, className: clsx('ams-progress-list-substeps__step', status && `ams-progress-list-substeps__step--${status}`, className), ref: ref, ...restProps, children: [_jsxs("div", { className: "ams-progress-list-substeps__indicator", children: [_jsx("div", { className: "ams-progress-list-substeps__marker", children: _jsx("span", { className: "ams-progress-list-substeps__marker-shape" }) }), _jsx("span", { className: "ams-progress-list-substeps__connector" })] }), _jsx("div", { className: "ams-progress-list-substeps__content", children: children })] }));
});
ProgressListSubstep.displayName = 'ProgressList.Substep';