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--preview" />
</Canvas>

### No placeholder

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

### Disabled

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

### External label

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

### External label (large)

<Canvas>
  <Story id="components-inputs-select--external-large-label" />
</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>

### Error (message)

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

### Success message

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

### Description

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

### Clear value programmatically

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

## Supported Property Mixins

Spacing:

<Canvas>
  <Story id="components-inputs-select--mixins-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"
/>