import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import ChatList from './'
import { List, _Item } from './ChatList.storiesHelpers'

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

# ChatList

A ChatList component is wrapper that renders a collection of `ChatList.Items`

<Canvas>
  <Story name="default">
    <List />
  </Story>
</Canvas>

#### Reference

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

<br />
<br />

### Props

<ArgsTable of={ChatList} />

### Stories

#### Loading

<Canvas>
  <Story name="Loading">
    <ChatList>
      <ChatList.Item />
      <ChatList.Item />
    </ChatList>
  </Story>
</Canvas>

## ChatList.Item

A ChatList.Item component renders the UI that represents the state of a Chat converstation.

This component will automatically render `Skeleton` if the `name` or `message` prop is missing.

<Canvas>
  <Story name="Chat Item">
    <_Item />
  </Story>
</Canvas>

<ArgsTable of={ChatList.Item} />

## ChatList.BlankSlate

A ChatList.BlankSlate component provides information when there is no content. This component has been automatically integrated into `ChatList` when there are no ChatList.Items.

<Canvas>
  <Story name="Chat BlankSlate/Empty">
    <div>
      <ChatList.BlankSlate>Nothing to see here.</ChatList.BlankSlate>
      <br />
      <ChatList />
    </div>
  </Story>
</Canvas>

<ArgsTable of={ChatList.BlankSlate} />
