import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks'

import { BASIC } from '../_utils/taxonomy'
import { ItemChoice } from '../itemChoice'
import { ItemsList, ItemsListDivider } from './index'

<Meta title={`${BASIC}/ItemsList`} />

# **ItemsList**

<Canvas>
  <Story name="With separators between each item">
    <ItemsList withSeparators>
      <ItemChoice label="Item 1" href="#1" />
      <ItemChoice label="Item 2" href="#2" />
      <ItemChoice label="Item 3" href="#3" />
    </ItemsList>
  </Story>
  <Story name="With custom positioned separators">
    <ItemsList>
      <ItemChoice label="Item 1" href="#1" />
      <ItemChoice label="Item 2" href="#2" />
      <ItemChoice label="Item 3" href="#3" />
      <ItemsListDivider />
      <ItemChoice label="Item 4" href="#4" />
    </ItemsList>
  </Story>
  <Story name="With only 1 item">
    <ItemsList>
      <ItemChoice label="Item 1" href="#1" />
    </ItemsList>
  </Story>
</Canvas>

## Specifications

## Usage

```jsx
import { ItemsList } from '@blablacar/ui-library/build/itemsList'
<ItemsList withSeparators>
  <ItemChoice label="Item 1" href="#1" />
  <ItemChoice label="Item 2" href="#2" />
  <ItemChoice label="Item 3" href="#3" />
</ItemsList>
```

<ArgsTable of={ItemsList} />