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

<Meta title="Utilities/UI Convenience/List" component={List} />

# List

A List component is a presentational component, and is an enhanced version of the default HTML `<ul>` (or `<ol>`). The List component provide a container for `List.Item` components.

## List.Item

An Item component is a presentational component, and is an enhanced version of the default HTML `<li>`.

<Canvas>
  <Story name="default">
    <List
      border={select(
        'border',
        {
          dot: 'dot',
          line: 'line',
          none: null,
        },
        null
      )}
      type={select(
        'type',
        {
          bullet: 'bullet',
          inline: 'inline',
          number: 'number',
          none: null,
        },
        'bullet'
      )}
      size={select(
        'size',
        {
          lg: 'lg',
          md: 'md',
          sm: 'sm',
          xs: 'xs',
        },
        null
      )}
    >
      <List.Item>
        <Text>Zoolander</Text>
      </List.Item>
      <List.Item>
        <Text>Old School</Text>
      </List.Item>
      <List.Item>
        <Text>Elf</Text>
      </List.Item>
      <List.Item>
        <Text>Anchorman: The Legend of Ron Burgandy</Text>
      </List.Item>
    </List>
  </Story>
</Canvas>

#### Reference

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

<br />
<br />

### Props

<ArgsTable of={List} />
