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

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

# Input
<br />

## `Inputs` provide a way to quickly add common functionality around form inputs.
<br />

### Input text
<Canvas>
    <Story name="Input text">
        <Input name="name" />
    </Story>
</Canvas>

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

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

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

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

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

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

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

### Number
<Canvas>
    <Story name="Number">
        <Input type="number" name="name" />
    </Story>
</Canvas>

### Email
<Canvas>
    <Story name="Email">
        <Input type="email" name="name" />
    </Story>
</Canvas>

### With hint
<Canvas>
    <Story name="With hint">
        <Input
            label="Label"
            name="name"
            hint="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        />
    </Story>
</Canvas>

### Phone with addon
<Canvas>
    <Story name="Phone with addon">
        <Input label="Label" name="name" type="tel" addon="+1" />
    </Story>
</Canvas>

## Usage Example

```jsx
import Input from '@appdirect/sfb-theme-components/src/atoms/input/Input';

<Input name="name" label="Label" />
```
## Props

<ArgsTable of={Input} />
