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

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

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

# Brand Textarea

The [`Textarea`](/?path=/docs/components-textarea--textarea) component is also available in a `brand` theme variant. Supported functionaliy for the brand theme `Textarea` is shown below. If a `Textarea` 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 `Textarea`'s `theme` prop.

<Preview>
  <Story name="Brand Textarea">
    <Textarea theme={THEME.BRAND} />
  </Story>
</Preview>

## Demos

### Disabled

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

### With Placeholder

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