@cimpress/react-components
Version:
React components to support the MCP styleguide
58 lines • 2.08 kB
TypeScript
import { ReactNode, DetailedHTMLProps, HTMLAttributes } from 'react';
import { Direction } from './common';
import { PublicComponentProps } from './types';
export interface StepProps extends PublicComponentProps {
typeName?: string;
active?: boolean;
activeColor?: string;
/**
* Additional information about the step to render below the step indicator.
*/
children?: ReactNode;
completed?: boolean;
index?: string | number;
/**
* Name for the step. Provided to the onClick function when it is called.
*/
name?: string;
/**
* Function to call when a step is clicked on. If no function is provided, steps will not appear clickable.
*/
onClick?: (index?: string | number, name?: string) => void;
/**
* If provided, this sets the step's color regardless of whether it's completed, active, etc.
*/
overrideStatus?: 'success' | 'warning' | 'error' | 'info';
partial?: boolean;
small?: boolean;
/**
* If provided, content for a tooltip to appear when a user hovers over the step.
*/
tip?: ReactNode;
/**
* Direction for the tooltip (see tooltip documentation).
*/
tipDirection?: Direction;
/**
* Direction of Stepper Component wrapping this step
*/
vertical?: boolean;
/**
* An element that will replace the step's indicator.
*/
icon?: ReactNode;
activeSubStep?: string | number;
connectorColor?: string;
}
export interface StepCircleProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
size: number;
borderWidth: number;
color: string;
filled?: boolean;
}
export interface StepHalfCircleProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
size: number;
color: string;
}
export declare const Step: ({ typeName, active, activeColor, completed, onClick, tip, tipDirection, small, partial, icon, children, vertical, className, style, overrideStatus, ...rest }: StepProps) => JSX.Element;
//# sourceMappingURL=Step.d.ts.map