import { ArgTypes, Canvas, Meta } from "@storybook/addon-docs/blocks";
import { TextField } from "./TextField";
import * as TextFieldStories from "./TextField.stories";

<Meta of={TextFieldStories} />

# TextField

TextField allows a user to input some text.

## Install

```bash
yarn add @simplybusiness/mobius
```

## Usage

```js
import { TextField } from "@simplybusiness/mobius";
```

## Examples

### Default

<Canvas of={TextFieldStories.Default} />

### Placeholder

<Canvas of={TextFieldStories.Placeholder} />

### Controlled Value

<Canvas of={TextFieldStories.ControlledValue} />

### Disabled

<Canvas of={TextFieldStories.Disabled} />

### Valid

<Canvas of={TextFieldStories.Valid} />

### Hidden

<Canvas of={TextFieldStories.Hidden} />

### Invalid

<Canvas of={TextFieldStories.Invalid} />

### WithPrefixInside

<Canvas of={TextFieldStories.WithPrefixInside} />

### WithPrefixAndSuffixInside

<Canvas of={TextFieldStories.WithPrefixAndSuffixInside} />

### WithPrefixInsideAndSuffixOutside

<Canvas of={TextFieldStories.WithPrefixInsideAndSuffixOutside} />

### WithPrefixOutsideAndSuffixInside

<Canvas of={TextFieldStories.WithPrefixOutsideAndSuffixInside} />

### WithPrefixOutside

<Canvas of={TextFieldStories.WithPrefixOutside} />

### WithSuffixOutside

<Canvas of={TextFieldStories.WithSuffixOutside} />

### ReadOnly

<Canvas of={TextFieldStories.ReadOnly} />

## Outside vs inside

Adornments placed in inside props will be wrapped with the input container border.

Adornments placed in outside props will be placed outside the input container border.

The below are the guidelines on when to use outside/inside adornment props.

Components that decorate the input, magnifying glass icon next to search field, for example, should be placed inside.

Components that trigger an action, search or submit button next to text field, for example, should be placed outside.

### TextField fills width of container by default

<TextFieldStories.ExampleHorizontal />

## Accessibility

It's recommended to pass a `label` prop in order to show a visual label. When the `label` prop is not provided, make sure to provide the `aria-label` prop instead. If the text field is labeled by a separate element, the `aria-labelledby` props must be used with the id of the labeling element.

## Events

The `onChange` prop can be used to listen to changes of the value of the input. See the prop table for the complete list of events supported.
See the example of controlled component using the `onChange` prop.

## Props

<ArgTypes of={TextField} />

## Component HTML Structure and Class names

The following HTML is rendered for a TextField:

```html
<div class="mobius-text-field">
  <label class="mobius-label">{label}</label>
  <input class="mobius-text-field__input" type="text" />
  <div class="mobius-error-message">{errors}</div>
</div>
```

Class names are augmented with the following flags if true:

- \--is-disabled
- \--is-selected
- \--is-valid
- \--is-invalid
- \--is-optional
- \--is-hidden
