@wix/design-system
Version:
@wix/design-system
39 lines • 1.61 kB
TypeScript
import { ReactNode } from 'react';
import { ValuesOf } from '../utils/typeUtils';
import { LINE_TYPES, SKINS } from './Timeline.constants';
export type TimelineItemLine = ValuesOf<typeof LINE_TYPES>;
export type TimelineSkin = ValuesOf<typeof SKINS>;
export interface TimelineItem {
/** event text - could be a node or a string */
label: ReactNode;
/** action element in the end of event text */
labelAction?: ReactNode;
/** TODO: still in development. custom bullet element like icon or avatar */
customPrefix?: ReactNode;
/** suffix text or element placed on the right */
suffix?: ReactNode;
/** line style for the event */
line?: TimelineItemLine;
}
export interface TimelineProps {
/**
* Specifies a CSS class name to be appended to the component’s root element.
* @internal
*/
className?: string;
/** Applies a data-hook HTML attribute to be used in the tests */
dataHook?: string;
/**
* Defines each individual event item in the component:
* - `label` stores a text string naming the event or renders other components as its children
* - `labelAction` stores an action button (or other components) related to the event
* - `customPrefix` defines a custom milestone symbol for an item on the vertical axis
* - `suffix` stores a date of the event (or other components)
*/
items: TimelineItem[];
/** Sets the distance that separates each item from the one below */
gap?: string;
/** Sets the skin of the component */
skin?: TimelineSkin;
}
//# sourceMappingURL=Timeline.types.d.ts.map