@kadconsulting/dry/dist/src/components/ProgressSteps/ProgressStepsTypes.d.ts

KAD Reusable Component Library

import { ReactNode, HTMLAttributes } from 'react';
import { TypographyComponents, TypographyProps } from '../Typography/types';
import { AllIconNames } from '..';
export interface ProgressStepsProps extends HTMLAttributes<HTMLElement> {
    /** Additional props for custom functionality */
    passProps?: object;
    /** Support for testing-library/react `screen.getByTestId` */
    'data-testid'?: string;
    /** Array of step objects to render */
    steps: Partial<Step>[];
    /** Boolean to enable or disable the progress bar */
    progressBarEnabled?: boolean;
    /** Size of the steps ('sm' | 'md' | 'lg') */
    size?: 'sm' | 'md' | 'lg';
    /** Orientation of the progress steps ('horizontal' | 'vertical') */
    orientation?: 'horizontal' | 'vertical';
    /** Alignment of the steps within the container ('start' | 'center' | 'end') */
    alignment?: 'start' | 'center' | 'end';
    /** Color of the active step */
    activeColor?: string;
    /** Callback function when a step is clicked */
    onStepClick?: (step: number) => void;
    /** Component to render the title of each step */
    TitleComponent?: React.ComponentType<{
        children: React.ReactNode;
    }> | TypographyComponents /** Component to render additional text for each step */;
    TextComponent?: React.ComponentType<{
        children: React.ReactNode;
    }> | TypographyComponents /** Common props to pass to both TitleComponent and TextComponent */;
    typographyProps?: Partial<TypographyProps>;
    /** Method to highlight the active step ('line' | 'step') */
    highlightMethod?: 'line' | 'step';
    hasIcon?: boolean;
    step?: number;
    isMobile?: boolean;
}
export interface Step {
    /** Unique identifier for the step, if not provided, index will be used */
    id?: number;
    /** Icon name from AllIconNames, it must be a key in the AllIconNames enum */
    icon?: AllIconNames;
    /** Title of the step, displayed prominently */
    title: string;
    /** Additional text or description for the step */
    text: string;
    /** Optional children to render inside the step */
    children?: ReactNode;
}