import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { FormList } from './form-list.component';
import { FlowPropsTable, ExternalReferenceLink } from '../../../utils';

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

# Form List

`FormList` takes an array of components as `items` to be displayed as form elements.

The proper `border` is applied by the FormList, but the padding is the responsibility of whatever is implementing FormList.

ie: to display a list of text, items must be passed in as:

```tsx
const items = [
  <Box spacing={['pr3', 'pl3']}>
    <Span>first item</Span>
  </Box>,
  <Box spacing={['pr3', 'pl3']}>
    <Span>second item</Span>
  </Box>,
];
```

## Stories

### Default

<Canvas>
  <Story id="components-inputs-formlist--default" />
</Canvas>

## Supported Property Mixins

Margin-only spacing:

<Canvas>
  <Story id="components-inputs-formlist--mixins-margin-only-spacing" />
</Canvas>

Stackee:

<Canvas>
  <Story id="components-inputs-formlist--mixins-stackee" />
</Canvas>

## Props

<FlowPropsTable ofComponent={FormList} />

## External Reference

<ExternalReferenceLink
  src="https://www.figma.com/file/r5zKXblbSt0b869OEcOWXu/Patchwork-Web?node-id=637%3A66"
  type="figma"
/>
<ExternalReferenceLink
  src="https://github.com/wealthsimple/patchwork/tree/master/core/forms/form-list"
  type="github"
/>
