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

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

# Select

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

A drop down select control.

## Stories

### Default

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

### Large

<Canvas>
  <Story id="components-inputs-select--large" />
</Canvas>

### No placeholder

<Canvas>
  <Story id="components-inputs-select--normal-no-placeholder" />
</Canvas>

### Disabled

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

### One option disabled

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

### Pre-selected value

<Canvas>
  <Story id="components-inputs-select--pre-selected-value" />
</Canvas>

### Error (boolean)

<Canvas>
  <Story id="components-inputs-select--error-bool" />
</Canvas>

### Hide label

<Canvas>
  <Story id="components-inputs-select--hide-label" />
</Canvas>

### Hide label (large)

<Canvas>
  <Story id="components-inputs-select--large-hide-label" />
</Canvas>

### Clear value programmatically

<Canvas>
  <Story id="components-inputs-select--undefined-value" />
</Canvas>

## Supported Property Mixins

Margin-only spacing:

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

Stackee spacing:

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

## Props

<FlowPropsTable ofComponent={Select} />

## 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/select"
  type="github"
/>
