UNPKG

@amsterdam/design-system-react

Version:

All React components from the Amsterdam Design System. Use it to compose pages in your website or application.

20 lines (19 loc) 1.2 kB
import { jsx as _jsx } from "react/jsx-runtime"; import { clsx } from 'clsx'; import { forwardRef } from 'react'; import { headingSizes } from '../Heading/Heading'; import { ProgressListContext } from './ProgressListContext'; import { ProgressListStep } from './ProgressListStep'; import { ProgressListSubstep } from './ProgressListSubstep'; import { ProgressListSubsteps } from './ProgressListSubsteps'; export const progressListHeadingSizes = headingSizes.filter((size) => size !== 1); const ProgressListRoot = forwardRef(({ children, className, headingLevel, ...restProps }, ref) => (_jsx(ProgressListContext.Provider, { value: { headingLevel: headingLevel }, children: _jsx("ol", { ...restProps, className: clsx('ams-progress-list', `ams-progress-list--heading-${headingLevel}`, className), ref: ref, children: children }) }))); /** * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-progress-list--docs Progress List docs at Amsterdam Design System} */ export const ProgressList = Object.assign(ProgressListRoot, { Step: ProgressListStep, Substep: ProgressListSubstep, Substeps: ProgressListSubsteps, }); ProgressListRoot.displayName = 'ProgressList';