import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import { createSpec, faker } from '@helpscout/helix'
import Timeline from './'

<Meta
  title="Components/Conversation/Timeline"
  component={Timeline}
  parameters={{
    design: {
      type: 'figma',
      url:
        'https://www.figma.com/file/Wp9mDxTvWicSTWtezj2ImkMP/HSDS-Product?node-id=2582%3A7859',
    },
  }}
/>

# Timeline

<Canvas>
  <Story name="default">
    <Timeline>
      {createSpec({
        timestamp: '9:41am',
        text: faker.lorem.sentence(),
      })
        .generate(7)
        .map(o => {
          return (
            <Timeline.Item key={o.text} timestamp={o.timestamp}>
              <Text>{o.text}</Text>
            </Timeline.Item>
          )
        })}
    </Timeline>
  </Story>
</Canvas>

#### Reference

- **Designer**: Buzz
- **Engineering**: Juan Pablo
- **Usage**: ChatApp

<br />
<br />

### Props

<ArgsTable of={Timeline} />

## Timeline.Item

A `Timeline.Item` component renders individual items within a `Timeline`.

<ArgsTable of={Timeline.Item} />

### Example

```jsx
<Timeline>
  <Timeline.Item>60% of the time, it works everytime.</Timeline.Item>
</Timeline>
```
