import { Meta, Canvas, Story, SourceState } from "@storybook/blocks";
import { ComponentHeading } from "../../storybook-components";
import { List } from "./List";

<Meta title="Components/Data/List" component={List} />

<ComponentHeading
  componentName="List"
  description="Provides an HTML ul element"
  sourcePath="src/components/List/List.tsx"
/>

## Installation

```jsx
import { List } from "@conveyorhq/arrow-ds";
```

## Basic usage

<Canvas withSource={SourceState.OPEN}>
  <Story name="List">
    <List>
      {[0, 1, 2, 3, 4].map((item) => (
        <List.Item key={item}>This is the List component</List.Item>
      ))}
    </List>
  </Story>
</Canvas>

## API

### List

Extends `HTMLOListElement`, `HTMLUListElement`

### List.Item

Extends `HTMLLIElement`

## Demos

### Unordered list

<Canvas withSource={SourceState.OPEN}>
  <Story name="Unordered list">
    <List>
      {[0, 1, 2, 3, 4].map((item) => (
        <List.Item key={item}>This is the List component</List.Item>
      ))}
    </List>
  </Story>
</Canvas>

### Ordered list

<Canvas withSource={SourceState.OPEN}>
  <Story name="Ordered list">
    <List>
      {[0, 1, 2, 3, 4].map((item) => (
        <List.Item key={item}>This is the List component</List.Item>
      ))}
    </List>
  </Story>
</Canvas>

### Styling a list

The list component is unstyled by default, but you can style it using
[Tailwind](https://tailwindcss.com/docs/preflight#lists-are-unstyled).

<Canvas withSource={SourceState.OPEN}>
  <Story name="Styled list">
    <List className="list-disc pl-4">
      {[0, 1, 2, 3, 4].map((item) => (
        <List.Item className="my-1" key={item}>
          This is the List component
        </List.Item>
      ))}
    </List>
  </Story>
</Canvas>