@wix/design-system/dist/docs/components/HorizontalTimelineExamples.md

@wix/design-system

## Feature Examples


### Structure
- description: Create timeline content by using `items` prop. Each item has props to control `label`, `width`, `icon` and `state`.
- example: 
```jsx 
<HorizontalTimeline
  items={[
    { label: 'Item 1' },
    { label: 'Item 2' },
    { label: 'Item 3' },
  ]}
/>
```

### Align Label
- description: 
        Control text horizontal alignment with alignLabel prop. It has two options:<br/>
          &emsp;- center (default) - use it in all common cases. <br/>
          &emsp;- start - use it to align text to the left. <br/>
      
- example: 
```jsx 
<StorybookComponents.Stack flexDirection="column">
      <HorizontalTimeline
        items={[
          {
            label: 'Center',
            icon: <HorizontalTimeline.DefaultIcon />
           },
          {
            label: 'Center',
            icon: <HorizontalTimeline.DefaultIcon />
           },
        ]}
      />
      <HorizontalTimeline
        alignLabel="start"
        items={[
          {
            label: 'Start',
            icon: <HorizontalTimeline.DefaultIcon />
           },
          {
            label: 'Start',
            icon: <HorizontalTimeline.DefaultIcon />
           },
        ]}
      />
    </StorybookComponents.Stack>
```

### Skin
- description: 
        Control the style with skin prop. It supports  2 options:<br/>
          &emsp;- dark (default) - use it on colored backgrounds, for example inside SectionHelper.<br/>
          &emsp;- standard - use it on light backgrounds, for example inside a card.<br/>
      
- example: 
```jsx 
<StorybookComponents.Stack flexDirection="column">
  <HorizontalTimeline
    skin='dark'
    items={[
      {
        label: 'Completed',
        line: 'filled',
        icon: <HorizontalTimeline.CompleteIcon />,
      },
      {
        label: 'Active',
        line: 'filled',
        icon: <HorizontalTimeline.ActiveIcon />
      },
      {
        label: 'Upcoming',
        icon: <HorizontalTimeline.DefaultIcon />
      },
    ]}
  />
  <HorizontalTimeline
    skin='standard'
    items={[
      {
        label: 'Completed',
        line: 'filled',
        icon: <HorizontalTimeline.CompleteIcon skin='standard' />,
      },
      {
        label: 'Active',
        line: 'filled',
        icon: <HorizontalTimeline.ActiveIcon skin='standard' />
      },
      {
        label: 'Upcoming',
        icon: <HorizontalTimeline.DefaultIcon skin='standard' />
      },
    ]}
  />
</StorybookComponents.Stack>;
```

### Line Type
- description: 
        Control the line type with line prop. It supports  2 options:<br/>
          &emsp;- dashed (default) - use it on colored backgrounds, for example inside SectionHelper.<br/>
          &emsp;- filled - use it to show that this timeline is past.<br/>
      
- example: 
```jsx 
<HorizontalTimeline
  items={[
    { label: 'Item 1', line: 'filled' },
    { label: 'Item 2', line: 'filled' },
    { label: 'Item 3', line: 'filled' },
    { label: 'Item 4' },
    { label: 'Item 5' },
  ]}
/>
```

### Item Icons
- description: 
        Specify item status by using icon prop for items:<br/>
          &emsp;- DefaultIcon - indicates incomplete steps.<br/>
          &emsp;- ActiveIcon - highlights currently active step.<br/>
          &emsp;- CompleteIcon - indicates complete steps.<br/>
          &emsp;- DestructiveIcon - indicates a step that failed to complete.<br/>
          &emsp;- BoundaryIcon - indicates a milestone that doesn’t have status, but should be reflected in the timeline.<br/>
      
- example: 
```jsx 
<HorizontalTimeline
  items={[
    {
      label: 'Item 1',
      icon: <HorizontalTimeline.BoundaryIcon />,
     },
    {
      label: 'Item 2',
      icon: <HorizontalTimeline.ActiveIcon />,
    },
    {
      label: 'Item 3',
      icon: <HorizontalTimeline.CompleteIcon />,
    },
    {
      label: 'Item 4',
      icon: <HorizontalTimeline.DestructiveIcon />,
    },
    {
      label: 'Item 5',
      icon: <HorizontalTimeline.DefaultIcon />,
    },
  ]}
/>
```




    


## Common Use Case Examples


### Connect Domain
- description: One of the applications where this component is helpful — it shows the status of domain connection that was requested by a user.
- example: 
```jsx 
<HorizontalTimeline
  items={[
    {
      label: 'You completed the steps',
      line: 'filled',
      icon: <HorizontalTimeline.CompleteIcon />,
    },
    {
      label: "We're checking your domain",
      line: 'filled',
      icon: <HorizontalTimeline.ActiveIcon />,
    },
    {
      label: 'Your domain is connecting',
    },
    {
      label: 'Your site is live worldwide',
    },
  ]}
/>;
```