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

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

# Text Input

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

A text input field.

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

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

Supports accessible description and error states:

<Canvas>
  <Story id="components-inputs-textinput--password-messaging" />
</Canvas>

## States

### Disabled

A disabled control cannot be tabbed to or interacted with.

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

### ReadOnly

A read-only control is used for display a value and still needs to be tabbable by screen readers; however you can't change its value.

<Canvas>
  <Story id="components-inputs-textinput--read-only" />
</Canvas>

## Masking Modes

`TextInput` supports a number of masking modes using the `type` property:

Each masking mode restricts and formats input as appropriate, and may also render extra UI.

### Text (default)

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

### Date

<Canvas>
  <Story id="components-inputs-textinput--date" />
</Canvas>

### Number

<Canvas>
  <Story id="components-inputs-textinput--number" />
</Canvas>

### Currency

<Canvas>
  <Story id="components-inputs-textinput--currency" />
</Canvas>

### Grouped Code

<Canvas>
  <Story id="components-inputs-textinput--grouped-code" />
</Canvas>

### Password

<Canvas>
  <Story id="components-inputs-textinput--password" />
</Canvas>

## Label Styles

Floating labels are the preferred design going forward. However for legacy purposes we also support an "external" label style:

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

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

## Supported Property Mixins:

Spacing:

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

Stackee

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

## Props

<FlowPropsTable ofComponent={TextInput} />

## External Reference

<ExternalReferenceLink
  src="https://www.figma.com/file/FDd6CaSdzwPebuzTexclKm/Patchwork-Web-Component-Library?node-id=1103%3A0"
  type="figma"
/>
<ExternalReferenceLink
  src="https://github.com/wealthsimple/patchwork/tree/master/src/core/forms/text-input"
  type="github"
/>