import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import { Grid } from '../Grid';
import { Button } from '../Button';
import { TextField } from './';

<Meta title="Components/TextField" component={TextField} />

# TextField

The `<TextField/>` component.

## Import

```js
import { TextField } from '@firstclasspostcodes/sw14';
// or
import { TextField } from '@firstclasspostcodes/sw14/lib/components/TextField';
```
<Preview>
  <Story name="Standard">
    <TextField placeholder="This is placeholder text" fullWidth/>
  </Story>
</Preview>

<Preview>
  <Story name="Black">
    <TextField background="black" color="white" placeholder="This is placeholder text" fullWidth/>
  </Story>
</Preview>

<Preview>
  <Story name="With a button">
    <Grid>
      <Grid.Shrink>
        <TextField placeholder="This is placeholder text" fullWidth/>
      </Grid.Shrink>
      <Grid.Shrink>
        <Button color="white" background="black">Submit</Button>
      </Grid.Shrink>
    </Grid>
  </Story>
</Preview>

<Preview>
  <Story name="Disabled">
    <TextField placeholder="This is placeholder text" disabled fullWidth/>
  </Story>
</Preview>

<Preview>
  <Story name="Password">
    <TextField type="password" fullWidth/>
  </Story>
</Preview>

<Preview>
  <Story name="Invalid">
    <TextField pattern="[A-Za-z]{3}" defaultValue="This text is invalid" fullWidth/>
  </Story>
</Preview>

<Preview>
  <Story name="Multiline">
    <TextField multiline invalid fullWidth/>
  </Story>
</Preview>