import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { TextInput } from './text-input.component';
import { FlowPropsTable, ExternalReferenceLink } from '../../../utils';

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

# Text Input

A text input field. Supports the following masking modes:

- date
- email
- number
- text
- password'

## Stories

### Default

<Canvas withToolbar>
  <Story id="forms-textinput--default" />
</Canvas>

### Large

<Canvas withToolbar>
  <Story id="forms-textinput--large" />
</Canvas>

### With Button Text

<Canvas withToolbar>
  <Story id="forms-textinput--with-button-text" />
</Canvas>

### With Button Text and Error

<Canvas withToolbar>
  <Story id="forms-textinput--with-button-text-and-error" />
</Canvas>

### With Value Disabled

<Canvas withToolbar>
  <Story id="forms-textinput--with-value-disabled" />
</Canvas>

### With Icon Left

<Canvas withToolbar>
  <Story id="forms-textinput--with-icon-left" />
</Canvas>

### With Icon Right

<Canvas withToolbar>
  <Story id="forms-textinput--with-icon-right" />
</Canvas>

### Checkmark Icon Right, Large

<Canvas withToolbar>
  <Story id="forms-textinput--with-checkmark-icon-right-large" />
</Canvas>

### With Icon Right, Disabled

<Canvas withToolbar>
  <Story id="forms-textinput--with-icon-right-disabled" />
</Canvas>

### With Error Icon

<Canvas withToolbar>
  <Story id="forms-textinput--with-error-icon" />
</Canvas>

### With Error

<Canvas withToolbar>
  <Story id="forms-textinput--with-error" />
</Canvas>

### With Error (Array)

<Canvas withToolbar>
  <Story id="forms-textinput--error-array" />
</Canvas>

### Focus on Mount

<Canvas withToolbar>
  <Story id="forms-textinput--focus-on-mount" />
</Canvas>

### Extended Styles

<Canvas withToolbar>
  <Story id="forms-textinput--with-extended-styles" />
</Canvas>

### Date Formatting Mask

<Canvas withToolbar>
  <Story id="forms-textinput--date-formatting-mask" />
</Canvas>

### Date Formatting Mask (Large)

<Canvas withToolbar>
  <Story id="forms-textinput--date-formatting-mask-large" />
</Canvas>

### Date Formatting Mask (Error)

<Canvas withToolbar>
  <Story id="forms-textinput--date-formatting-mask-error" />
</Canvas>

### Date Formatting Mask (Icon Left)

<Canvas withToolbar>
  <Story id="forms-textinput--date-formatting-mask-icon-left" />
</Canvas>

### Date Formatting Mask (Icon Right)

<Canvas withToolbar>
  <Story id="forms-textinput--date-formatting-mask-icon-right" />
</Canvas>

### Phone Number Mask

<Canvas withToolbar>
  <Story id="forms-textinput--phone-number-mask" />
</Canvas>

### Numeric

<Canvas withToolbar>
  <Story id="forms-textinput--numeric" />
</Canvas>

### Password

<Canvas withToolbar>
  <Story id="forms-textinput--password" />
  <Story id="forms-textinput--password-disabled" />
</Canvas>

### Password with Floating Label

<Canvas withToolbar>
  <Story id="forms-textinput--floating-label-password" />
  <Story id="forms-textinput--floating-label-password-disabled" />
</Canvas>

### Currency Mask

<Canvas withToolbar>
  <Story id="forms-textinput--currency-mask" />
</Canvas>

### No Border

<Canvas withToolbar>
  <Story id="forms-textinput--no-border" />
</Canvas>

## Supported Layout Props

Margin-only spacing:

<Canvas withToolbar>
  <Story id="forms-textinput--mixins-margin-only-spacing" />
</Canvas>

Stackee:

<Canvas withToolbar>
  <Story id="forms-textinput--mixins-stackee" />
</Canvas>

## Props

<FlowPropsTable ofComponent={TextInput} />

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