import { Preview, Meta, Story, Props } from "@storybook/addon-docs/blocks";
import { withKnobs, text, color } from "@storybook/addon-knobs";
import { ListGroup } from './ListGroup.js';
import { ListItem } from './ListItem.js';

<Meta title="ListGroup" component={ListGroup} />

# ListGroup

To display a series of content.

## Examples

<Preview>
  <Story name="Vertial list">
    <ListGroup>
        <ListItem key="1">List component 1</ListItem>
        <ListItem key="2">List component 2</ListItem>
        <ListItem key="3">List component 3</ListItem>
        <ListItem key="4">List component 4</ListItem>
    </ListGroup>
  </Story>
</Preview>

> Use `disabled` and `active` props to highlight or disable list items.

<Preview>
  <Story name="Vertical list with active and disabled props">
    <ListGroup>
        <ListItem active key="1">List component 1</ListItem>
        <ListItem disabled key="2">List component 2</ListItem>
        <ListItem key="3">List component 3</ListItem>
        <ListItem key="4">List component 4</ListItem>
    </ListGroup>
  </Story>
</Preview>

> Use `type` props to treat items as a `button`, `link` or a `div`. Default is `div`.

<Preview>
  <Story name="Vertical list made of button and links">
    <ListGroup>
        <ListItem key="1" type="link">List component 1</ListItem>
        <ListItem key="2" type="button">List component 2</ListItem>
        <ListItem key="3" type="link">List component 3</ListItem>
        <ListItem key="4" type="button">List component 4</ListItem>
    </ListGroup>
  </Story>
</Preview>

> Set the `horizontal` props as `true` to display the list horizontally.

<Preview>
  <Story name="Horizontal list">
    <ListGroup horizontal>
        <ListItem key="1">List component 1</ListItem>
        <ListItem key="2">List component 2</ListItem>
        <ListItem key="3">List component 3</ListItem>
        <ListItem key="4">List component 4</ListItem>
    </ListGroup>
  </Story>
</Preview>

## Usage

`import { ListGroup, ListItem } from "ui-neu"`

```jsx
<ListGroup>
  <ListItem key="1">List component 1</ListItem>
  <ListItem key="2">List component 2</ListItem>
</ListGroup>
```

## Props

Props for each of the components are included below. This is still under development and changes are anticipated to occur in upcoming releases.

#### ListGroup

<Props of={ListGroup} />

#### ListItem

<Props of={ListItem} />