@activecollab/components/dist/esm/components/StepSequence/StepSequence.d.ts

ActiveCollab Components

import { FC, MouseEventHandler, ReactElement, ReactNode } from "react";
/** Token colour role a step and its connector are painted with */
export type StepSequenceTone = "success" | "info" | "warning" | "danger" | "neutral";
/** Ring style of a step: filled, toned outline or dashed outline */
export type StepSequenceFill = "solid" | "outline" | "dashed";
export interface IStepSequenceStep {
    /** Colour role of the step, resolved to theme tokens */
    tone: StepSequenceTone;
    /** How the step's ring is drawn */
    fill: StepSequenceFill;
    /** Glyph rendered inside the step; a plain dot when omitted */
    icon?: ReactNode;
    /** Animates the glyph, marking a step as the one currently running */
    pulse?: boolean;
    /** Tooltip content shown when the step is hovered; no tooltip when omitted */
    tooltip?: ReactElement | string;
    /** Tone of the connector leading into this step; the step's own tone when omitted */
    connectorTone?: StepSequenceTone;
    /** Stable key for the step; falls back to the step index */
    key?: string;
}
export interface IStepSequenceProps {
    /** Steps, rendered left to right and joined by connector lines */
    steps: IStepSequenceStep[];
    /** When provided the whole sequence is a single interactive button */
    onClick?: MouseEventHandler<HTMLButtonElement>;
    /** Accessible label, announced when the sequence is interactive */
    ariaLabel?: string;
    /** Class for the wrapper element */
    className?: string;
}
export declare const StepSequence: FC<IStepSequenceProps>;
//# sourceMappingURL=StepSequence.d.ts.map