import { Story, Preview, Props, Meta } from "@storybook/addon-docs/blocks";
import { STATUS_VARIANT } from "../../types";
import { ICON_TYPE } from "../Icon";
import { Input, INPUT_ICON_POSITION } from "./Input";

<Meta title="Components/Forms/Input" component={Input} />

# Input

The input component allows you to create text inputs for a form.

```jsx
import { Input } from "@aptible/arrow-ds";
```

<Preview>
  <Story name="Text Input">
    <Input type="text" />
  </Story>
</Preview>

## Custom Props

These are the custom props that extend [`React.HTMLProps<HTMLInputElement>`](/?path=/docs/resources-element-props-input--page).

<Props of={Input} />

## Demos

### Disabled

<Preview>
  <Story name="Disabled">
    <Input type="text" disabled />
  </Story>
</Preview>

### With Placeholder

<Preview>
  <Story name="Placeholder">
    <Input type="text" placeholder="Placeholder Text" />
  </Story>
</Preview>

### With Icon

<Preview isColumn>
  <Story name="Icon Left">
    <Input type="text" icon={ICON_TYPE.SEARCH} placeholder="Left" />
  </Story>
  <Story name="Icon Right">
    <Input
      type="text"
      icon={ICON_TYPE.SEARCH}
      iconPosition={INPUT_ICON_POSITION.RIGHT}
      placeholder="Right"
    />
  </Story>
  <Story name="Loading Icon">
    <Input
      type="text"
      icon={ICON_TYPE.SPINNER_THIRD}
      iconPosition={INPUT_ICON_POSITION.RIGHT}
      iconProps={{
        spin: true,
      }}
      placeholder="Loading…"
    />
  </Story>
</Preview>

### Variants

<Preview isColumn>
  <Story name="Success">
    <Input type="text" variant={STATUS_VARIANT.SUCCESS} />
  </Story>
  <Story name="Warning">
    <Input type="text" variant={STATUS_VARIANT.WARNING} />
  </Story>
  <Story name="Danger">
    <Input type="text" variant={STATUS_VARIANT.DANGER} />
  </Story>
</Preview>

### Monospace

<Preview>
  <Story name="Monospace">
    <Input type="text" placeholder="Monospace font" className="font-mono" />
  </Story>
</Preview>