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

<Meta title="Atoms/Textarea" component={Textarea} />

# Textarea
<br />

## `Textareas` are used to allow for text input while also providing some props allowing further customization.

The `label` and `name` props are required for a11y reasons, if not there the `<Textarea />` will not appear.
<br />

### Default
<Canvas>
    <Story name="Default">
        <Textarea name="name" label="Label" />
    </Story>
</Canvas>

### With placeholder
<Canvas>
    <Story name="With placeholder">
        <Textarea name="name" label="Label" placeholder="placeholder" />
    </Story>
</Canvas>

### Required
<Canvas>
    <Story name="Required">
        <Textarea name="name" label="Label" placeholder="placeholder" required />
    </Story>
</Canvas>

### With default value
<Canvas>
    <Story name="With default value">
        <Textarea name="name" label="Label" defaultValue="default value" />
    </Story>
</Canvas>

### Read only
<Canvas>
    <Story name="Read only">
        <Textarea name="name" label="Label" defaultValue="default value" readOnly />
    </Story>
</Canvas>

### With hidden label (a11y)
<Canvas>
    <Story name="With hidden label (a11y)">
        <Textarea name="name" label="Label" hiddenLabel />
    </Story>
</Canvas>

### With error
<Canvas>
    <Story name="With error">
        <Textarea name="name" label="Label" error="This is required" />
    </Story>
</Canvas>

### Disabled
<Canvas>
    <Story name="Disabled">
        <Textarea name="name" label="Label" disabled />
    </Story>
</Canvas>

## Usage Example
```jsx
import Textarea from '@appdirect/sfb-theme-components/src/atoms/textarea/Textarea'

<Textarea
    name="name"
    label="label"
    defaultValue="default value"
    error="This is required"
    disabled
    readOnly
    hiddenLabel
/>

```

## Props
<ArgsTable of={Textarea} />
