import { Story, Preview, Meta } from "@storybook/addon-docs/blocks";
import { THEME } from "../../types";
import { Input } from "../../components/Input";

export const decorators = [
  (storyFn) => <div className="p-8 bg-gray-800">{storyFn()}</div>,
];

<Meta
  title="Components/Forms/Input (Branded)"
  component={Input}
  decorators={decorators}
/>

# Brand Input

The [`Input`](/?path=/docs/components-input--input) component is also available in a `brand` theme variant. Supported functionaliy for the brand theme `Input` is shown below. If an `Input` is within a brand themed [`FormGroup`](http://localhost:9002/?path=/docs/components-aptible-branding-formgroup--form-group), it will automatically use that as its `theme`. To override this, provide a value to the `Input`'s `theme` prop.

<Preview>
  <Story name="Brand Input">
    <Input type="text" theme={THEME.BRAND} />
  </Story>
</Preview>

## Demos

### Disabled

<Preview>
  <Story name="Disabled">
    <Input type="text" theme={THEME.BRAND} value="Disabled" disabled />
  </Story>
</Preview>

### With Placeholder

<Preview>
  <Story name="Placeholder">
    <Input type="text" theme={THEME.BRAND} placeholder="Placeholder Text" />
  </Story>
</Preview>