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

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

# Clickable List

- [Form Input Accessibility
  Tips](/?path=/story/components-inputs-accessibility-tips--page)

`ClickableList` creates a list of clickable rows (ie: a row with an right-side arrow) that accepts an array of `options`, and an `onClick` function that returns the row's ID that was clicked.

The `options` contain:

- the `id` and `text` for the row
- a `loading` state if that row is submitting/loading

## Stories

### Default

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

### Disabled

<Canvas>
  <Story id="components-inputs-clickablelist--disabled" />
</Canvas>

## Supported Property Mixins

Spacing:

<Canvas>
  <Story id="components-inputs-clickablelist--mixins-spacing" />
</Canvas>

Stackee:

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

## Props

<FlowPropsTable ofComponent={ClickableList} />

## 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/src/core/forms/clickable-list"
  type="github"
/>
