## Feature Examples


### Structure
- description: Add content to a timeline by using `items` prop. Each item has props to control these containers:<br/> 
        &emsp;- `customPrefix` - overrides the default circle with a specified icon to mark important milestones.<br/>
        &emsp;- `label` -  describes the event.<br/>
        &emsp;- `labelAction` -  enables an action that provides more info or leads to an event.<br/>
        &emsp;- `suffix` - displays event’s date or other additional info.<br/>
        <br/>
        Note that all of these containers are nodes (i.e., can store any component as a child item). Their positions are fixed.
- example: 
```jsx 
() => {
  const items = [
    {
      label: (
        <StorybookComponents.Placeholder>Label</StorybookComponents.Placeholder>
      ),
      labelAction: (
        <StorybookComponents.Placeholder>
          Label action
        </StorybookComponents.Placeholder>
      ),
      suffix: (
        <StorybookComponents.Placeholder>
          Suffix
        </StorybookComponents.Placeholder>
      ),
      customPrefix: (
        <StorybookComponents.Placeholder>
          Custom Prefix
        </StorybookComponents.Placeholder>
      ),
    },
  ];

  return <Timeline items={items} />;
};
```

### Gap
- description: Control vertical distance between the items with a `gap` prop.<br/>
      <br/>
      Default value is 30 px.
- example: 
```jsx 
() => {
  const items = [
    {
      label: 'Item 1',
    },
    {
      label: 'Item 2',
    },
  ];

  return (
    <StorybookComponents.Stack>
      <Timeline items={items} />
      <Timeline items={items} gap="60px" />
    </StorybookComponents.Stack>
  );
};
```

### Label
- description: Set the content for an item’s label with a `label` prop.<br/>
      <br/>
      Label describes the event of the Timeline item. It wraps into multiple lines where necessary.<br/>
      <br/>
      Note that the label container accepts any component as a child item.
- example: 
```jsx 
() => {
  const items = [
    {
      label: 'Label',
    },
    {
      label:
        'Label that is very long and does not fit into a single line, so it wraps into multiple lines, since the Timeline component has to fit into its parent container',
    },
  ];

  return <Timeline items={items} />;
};
```

### Label action
- description: Add an action button for a Timeline’s item using a `labelAction` prop.<br/>
      <br/>
      Use it as a link to actions or further information about the Timeline item.
- example: 
```jsx 
() => {
  const items = [
    {
      label: 'Label',
      labelAction: <TextButton size="small">Label action</TextButton>,
    },
    {
      labelAction: (
        <TextButton size="small">Label action without a Label</TextButton>
      ),
    },
  ];

  return <Timeline items={items} />;
};
```

### Custom Prefix
- description: Set a custom icon for a Timeline item with a `customPrefix` prop. Use it to highlight important milestones or errors.<br/>
      <br/>
      Control it for each item individually.<br/>
      <br/>
      When not defined, prefix is a default filled-in circle.
- example: 
```jsx 
() => {
  const items = [
    {
      label: 'Without custom Prefix',
    },
    {
      label: 'With custom Prefix',
      customPrefix: <Icons.StatusCompleteSmall />,
    },
  ];

  return <Timeline items={items} />;
};
```

### Suffix
- description: Add more information to the Timeline item with a `suffix` prop.<br/>
      <br/>
      Use it to show the date of an event (but it can also render any component as a child item).
- example: 
```jsx 
() => {
  const items = [
    {
      label: 'Item 1',
      suffix: 'Suffix as a text',
    },
    {
      label: 'Item 2',
      suffix: <Badge skin="neutral">Suffix as a component</Badge>,
    },
  ];

  return <Timeline items={items} />;
};
```




    


## Common Use Case Examples


### Store Order Activity
- description: Illustrate the history of a product order with a Timeline, stored inside a `<Card/>`.<br/>
      <br/>
      In this case, users can fill in recent events into the Timeline themselves, change events’ status, and view more related information.
- example: 
```jsx 
() => {
  const initialItems = [
    {
      label: (
        <Box gap="2">
          <Text size="small">Invoice created</Text>
          <BadgeSelect
            type="outlined"
            size="small"
            options={[
              { id: '0', skin: 'neutral', text: 'waiting for payment' },
              { id: '1', skin: 'success', text: 'paid in full' },
              { id: '2', skin: 'warning', text: 'paid in part' },
              { id: '3', skin: 'danger', text: 'payment is due' },
            ]}
          />
        </Box>
      ),
      labelAction: <TextButton size="small">View Invoice</TextButton>,
      suffix: 'Aug 12, 2021',
    },
    {
      label: 'Digital product links sent to John',
      suffix: 'Aug 9, 2021',
    },
    {
      label: 'Order marked as Fulfilled',
      suffix: 'Aug 9, 2021',
    },
    {
      label: 'Order marked as Paid',
      suffix: 'Aug 9, 2021',
    },
    {
      label: 'John placed an order',
      labelAction: <TextButton size="small">View Order Summary</TextButton>,
      suffix: 'Aug 8, 2021',
    },
  ];
  const [items, setItems] = React.useState(initialItems);

  const addNode = value => {
    setItems([{ label: value, suffix: 'Today' }, ...items]);
  };

  return (
    <Card>
      <Card.Header title="Order Activity" />
      <Card.Divider />
      <Card.Content>
        <Timeline
          items={[
            {
              label: (
                <FormField label="Add a note (your customers will not see this)">
                  <ListItemEditable
                    onApprove={value => addNode(value)}
                    onCancel={() => {}}
                    placeholder="Activity Note"
                    cancelButtonTooltipContent="Cancel"
                    approveButtonTooltipContent="Approve"
                    size="small"
                    margins="none"
                  />
                </FormField>
              ),
              suffix: 'Today',
            },
            ...items,
          ]}
        />
      </Card.Content>
    </Card>
  );
};
```