@wix/design-system/dist/types/HorizontalTimeline/index.d.ts

@wix/design-system

import * as React from 'react';

export type HorizontalTimelineItemSkin = 'dark' | 'light';
export type HorizontalTimelineItemLine = 'filled' | 'dashed';
export type HorizontalTimelineSkin = 'dark' | 'standard';
export type HorizontalTimelineAlignLabel = 'center' | 'start';

interface HorizontalTimelineItem {
  /** item's text */
  label?: React.ReactNode;
  /** item's skin (deprecated)
   * @default 'dark'
   */
  skin?: HorizontalTimelineItemSkin;
  /** item's icon */
  icon?: React.ReactNode;
  /** item's line type */
  line?: HorizontalTimelineItemLine;
  /** custom width for item */
  width?: React.CSSProperties['width'];
  /** Ellipsis for item's label */
  labelEllipsis?: boolean;
}

export interface HorizontalTimelineProps {
  /** Applied as data-hook HTML attribute that can be used in the tests */
  dataHook?: string;
  /** Specifies a CSS class name to be appended to the component’s root element.
   * @internal
   */
  className?: string;
  /** Aligns the labels of items.
   * @default 'center'
   */
  alignLabel?: HorizontalTimelineAlignLabel;
  /** item's skin (deprecated)
   * @default 'dark'
   */
  skin?: HorizontalTimelineSkin;
  /**
   * Timeline items
   *  * `skin` - Controls line and text color (deprecated).
   *  * `line ` - Affects the line type, can be one of: 'filled' | 'dashed'.
   *  * `label` -  Text displayed below the icon.
   *  * `icon ` - An icon representing a timeline item.
   *  * `width ` - The width of the timeline item, can be percentage or pixels.
   *  * `labelEllipsis ` - Set ellipsis for item's label  .
   */
  items?: HorizontalTimelineItem[];
}

interface HorizontalTimelineIcon {
  /** item's skin (deprecated)
   * @default 'dark'
   */
  skin?: HorizontalTimelineSkin;
}

export default class HorizontalTimeline extends React.PureComponent<HorizontalTimelineProps> {
  static DefaultIcon: React.FC<HorizontalTimelineIcon>;
  static ActiveIcon: React.FC<HorizontalTimelineIcon>;
  static DestructiveIcon: React.FC;
  static CompleteIcon: React.FC<HorizontalTimelineIcon>;
  static BoundaryIcon: React.FC<HorizontalTimelineIcon>;
}