@stihl-design-system/components/components/Stepper/Step.d.ts

Welcome to the STIHL Design System react component library.

import { default as React, JSX } from 'react';
import { StepState } from './Step.utils';
import { StepperTranslations } from './Stepper.utils';
/** Local copy of the Step data contract to avoid circular dependency with `Stepper.tsx`. */
export interface Step {
    label: string;
    hint?: string;
    disabled?: boolean;
    state?: StepState;
    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
}
export interface StepperStepProps {
    /** Step object */
    step: Step;
    /** Index of this step in the list */
    index: number;
    /** Orientation of the Stepper */
    orientation: 'horizontal' | 'vertical';
    /** Total number of steps */
    stepsCount: number;
    /** Translation function */
    t: (key: keyof StepperTranslations, replacements?: string[]) => string;
    /** Called when the button is clicked (index is already bound in parent) */
    onStepClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
    /** Collect the ref for scroll / focus management */
    buttonRef?: (el: HTMLButtonElement | null) => void;
}
/**
 * Presentational single Step inside the DSStepper.
 * Keeps the markup & ARIA logic isolated from the Stepper container.
 */
export declare const StepperStep: ({ step, index, stepsCount, t, onStepClick, buttonRef, orientation, }: StepperStepProps) => JSX.Element;
export default StepperStep;