@wix/design-system
Version:
@wix/design-system
46 lines (41 loc) • 1.26 kB
TypeScript
import * as React from 'react';
export interface StepperProps {
/** Hook for testing purposes. */
dataHook?: string;
/** Event triggered on step click: `onClick(stepIndex)` */
onClick?: (index: number) => void;
/** Index of the active step. */
activeStep: number;
/**
* An array of steps, where each step is an object with the following properties:
* - `text` - step title text (required).
* - `type` - step type (`completed`, `disabled`, `error` or default `normal`).
*/
steps: StepperStep[];
/** Style type.
* @default 'circle'
*/
type?: StepperType;
/**
* Fit mode for steps. In `stretched` mode the component will grow to fill parent
* container width.
* @default 'compact'
*/
fit?: StepperFit;
/** Sets the size of the items
* @default 'small'
*/
size?: StepperSize;
}
export default class Stepper extends React.PureComponent<StepperProps> {}
export interface StepperStep {
text: string;
/** Style type.
* @default 'circle'
*/
type?: StepperStepType;
}
export type StepperType = 'circle' | 'text';
export type StepperFit = 'compact' | 'stretched';
export type StepperStepType = 'completed' | 'disabled' | 'error' | 'normal';
export type StepperSize = 'medium' | 'small';