## 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:\ - center (default) - use it in all common cases.\ - start - use it to align text to the left.
- 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:\ - dark (default) - use it on colored backgrounds, for example inside SectionHelper.\ - standard - use it on light backgrounds, for example inside a card.
- 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:\ - dashed (default) - use it on colored backgrounds, for example inside SectionHelper.\ - filled - use it to show that this timeline is past.
- 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:\ - DefaultIcon - indicates incomplete steps.\ - ActiveIcon - highlights currently active step.\ - CompleteIcon - indicates complete steps.\ - DestructiveIcon - indicates a step that failed to complete.\ - BoundaryIcon - indicates a milestone that doesn't have status, but should be reflected in the timeline.
- 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',
    },
  ]}
/>;
```