import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks'

import { BASIC } from '../_utils/taxonomy'
import { inputModes, inputTypes, TextField } from './index'

<Meta title={`${BASIC}/Text Inputs`} />

# **TextField**

<Canvas>
  <Story name="Inputs (Text Field)">
    <TextField
      type={inputTypes.TEXT}
      id="id"
      name="inputName"
      inputMode={inputModes.TEXT}
      pattern="pattern"
      placeholder="Placeholder"
      labelledBy="aria label"
      disabled={false}
      readOnly={false}
      label=""
      error=""
      onChange={() => {}}
      onFocus={() => {}}
      onBlur={() => {}}
      focus={false}
      required={false}
      maxLength={1000}
      autoComplete="off"
      title="accessibility text"
    />
  </Story>
</Canvas>

## Specifications

> Empty unfocus state

In unfocus state the placholder is displayed.

> Empty focus state

When user taps on the input we display the cursor and the keyboard and we keep the placeholder as long as the user doesn’t start typing.

> Typing focus state

When user starts typing we hide the placeholder and (if that’s the case) display the cross on the right that allows the user to erase the input.

When user taps on the cross we move back to the empty focus state (placeholder + cursor + keyboard).

When input has help icon it doesn’t have a cross. Help icon opens a new modal screen with related explanations.

> Filled unfocus state

When user taps outside of the input area, starts scrolling or hide the keyboard we unfocus the input (hide the cursor) but we keep the cross (if that’s the case) and the value entered. If this value is too long when unfocus we display the beginning of the value.
When user re-taps on the input we place the cursor after the last character typed.

> Behaviour

If users come back to a previous step in which there was an input, we remember what the user input in the field (and so display the next button for example when needed).

> Long texts

We can’t go on 2 lines, if text is too long we just don’t show the beginning of the text.

> Read only input field.

Input fields can be read only, which means they display user provided data, but you can’t directly type into them.

When tapped the open another screen dedicated for providing the input or
a system picker.

They don’t have a focused state and don’t contain the clear button.

> Focus state

Active input field should have a 2pt blue inner border.

## Usage

```jsx
import { TextField } from '@blablacar/ui-library/build/textField'
;<TextField />
```

<ArgsTable of={TextField} />