import { Meta, ArgTypes, Story } from "@storybook/addon-docs/blocks";
import { List, ListItem } from ".";
import * as ListStories from "./List.stories";

<Meta of={ListStories} />

# List

List is a a general purpose list that can receive any styling props.

## Install

```bash
yarn add @simplybusiness/mobius
```

## Usage

```js
import { List, ListItem } from "@simplybusiness/mobius";
```

## Examples

### Unordered

<Story of={ListStories.Unordered} />

{/* prettier-ignore */}
```jsx
import { List, ListItem } from "@simplybusiness/mobius";

<List>
  <ListItem>Foo</ListItem>
  <ListItem>Bar</ListItem>
  <ListItem>Baz</ListItem>
</List>
```

### Ordered

<Story of={ListStories.Ordered} />

{/* prettier-ignore */}
```jsx
import { List, ListItem } from "@simplybusiness/mobius";

<List isOrdered={true}>
  <ListItem>Foo</ListItem>
  <ListItem>Bar</ListItem>
  <ListItem>Baz</ListItem>
</List>
```

#### Starting from a specific number

<Story of={ListStories.StartingFromASpecificNumber} />

{/* prettier-ignore */}
```jsx
import { List, ListItem } from "@simplybusiness/mobius";

<List isOrdered={true} start={12}>
  <ListItem>Foo</ListItem>
  <ListItem>Bar</ListItem>
  <ListItem>Baz</ListItem>
</List>
```

#### Reverse order

<Story of={ListStories.Reversed} />

{/* prettier-ignore */}
```jsx
import { List, ListItem } from "@simplybusiness/mobius";

<List isOrdered={true} isReversed={true}>
  <ListItem>Foo</ListItem>
  <ListItem>Bar</ListItem>
  <ListItem>Baz</ListItem>
</List>
```

### With Custom Icons

<Story of={ListStories.WithCustomIcons} />

{/* prettier-ignore */}
```jsx
import { List, ListItem, Text, Icon } from "@simplybusiness/mobius";
import { tick, cross } from "@simplybusiness/icons"; 

<List icon={<Icon icon={tick} color="green" />}>
  <ListItem>
    <Text variant="body" spacing="tight">
      Morbi eget sapien nulla. Mauris sodales est vel ullamcorper
      efficitur. Nam lobortis metus et ultricies imperdiet. Phasellus at
      sapien pharetra, commodo lorem eu, malesuada dui. Curabitur
      vulputate massa nec massa blandit, auctor elementum dolor ultricies.
    </Text>
  </ListItem>
  <ListItem icon={<Icon icon={cross} color="red" />}>
    Etiam feugiat neque vel nulla semper ultrices. Phasellus lobortis nisl
    id mollis malesuada. Suspendisse ut porttitor purus. Praesent ornare
    felis a mattis pharetra. Pellentesque habitant morbi tristique
    senectus et netus et malesuada fames ac turpis egestas. Donec
    venenatis tristique condimentum.
  </ListItem>
  <ListItem>
    Nunc at turpis iaculis, finibus tellus eget, tempus mi. Vestibulum
    eget egestas mauris, non porttitor nisl. Nam a facilisis sem. Interdum
    et malesuada fames ac ante ipsum primis in faucibus. Suspendisse sit
    amet neque tempor, vestibulum eros ut, vulputate quam.
  </ListItem>
</List>
```

## Props

### List

<ArgTypes components={{ List: List, ListItem: ListItem }} />

## Component HTML Structure and Class names

The following HTML is rendered for an unordered List:

```html
<ul class="mobius-list">
  <li class="mobius-list__item">...</li>

  (more ListItems...)
</ul>
```

And an ordered List:

```html
<ol class="mobius-list">
  <li class="mobius-list__item">...</li>

  (more ListItems...)
</ol>
```
