bramw_baserow/web-frontend/stories/FormGroup.stories.mdx

import { Meta, Story, Props, Canvas } from '@storybook/addon-docs/blocks'
import { config, withDesign } from 'storybook-addon-designs'
import { action } from '@storybook/addon-actions'

import FormGroup from '@baserow/modules/core/components/FormGroup'
import FormInput from '@baserow/modules/core/components/FormInput'
import ButtonIcon from '@baserow/modules/core/components/FormInput'

<Meta
    title="Baserow/Form Elements/Group"
    component={FormGroup}
    parameters={{
        backgrounds: {
            default: 'light',
            values: [
                { name: 'white', value: '#ffffff' },
                { name: 'light', value: '#eeeeee' },
                { name: 'dark', value: '#222222' },
            ],
        },
    }}
    decorators={[withDesign]}
    argTypes={{
        label: {
            control: {
                type: 'text',
            },
            defaultValue: 'Label',
        },
        required: {
            control: {
                type: 'boolean',
                options: [true, false],
            },
            defaultValue: false,
        },
        smallLabel: {
            control: {
                type: 'boolean',
                options: [true, false],
            },
            defaultValue: false,
        },
        horizontal: {
            control: {
                type: 'boolean',
                options: [true, false],
            },
            defaultValue: false,
        },
        horizontalVariable: {
            control: {
                type: 'boolean',
                options: [true, false],
            },
            defaultValue: false,
        },
        error: {
            control: {
                type: 'boolean',
                options: [true, false],
            },
            defaultValue: false,
        },
    }}
/>

# FormGroup

FormGroup is a component that contains a label and a form input. It has several slots:

-   label: The label of the form group. (can also be passed as a prop)
-   label-after: An additional label that is shown after the main label.
-   error: The error message of the form group.
-   warning: The warning message of the form group.
-   helper: A description of the form group. (can also be passed as a prop)

export const Template = (args, { argTypes }) => ({
    components: { FormGroup, FormInput },
    props: Object.keys(argTypes),
    template: `
    <FormGroup v-bind="$props">
        <template v-if="${'after-label' in args}" v-slot:after-label>${
        args['after-label']
    }</template>
       <FormInput placeholder="Enter some text..." icon-left="iconoir-db" :error="${
           args.error
       }"></FormInput>
        <template v-if="${
            'error' in args
        }" v-slot:error>This is the error message</template>
        <template v-if="${'after-input' in args}" v-slot:after-input>${
        args['after-input']
    }</template>
    </FormGroup>
    `,
})

export const designConfig = {
    type: 'figma',
    url: 'https://www.figma.com/file/W7R2rQW7ohsZMeHRfEcPFW/Design-Library?node-id=1%3A87&mode=dev',
}

<Canvas>
    <Story
        name="Default"
        parameters={{
            design: config(designConfig),
        }}
        args={{
            helperText:
                'We’ll use this address if we need to contact you about your account.',
        }}
    >
        {Template.bind({})}
    </Story>
    <Story
        name="w/ after label"
        parameters={{
            design: config(designConfig),
        }}
        args={{
            'after-label': '<span>Forgot?</span>',
            required: true,
        }}
    >
        {Template.bind({})}
    </Story>
    <Story
        name="w/ after input element"
        parameters={{
            design: config(designConfig),
        }}
        args={{
            'after-input':
                '<ButtonIcon icon="iconoir-trash" type="secondary"/>',
        }}
    >
        {Template.bind({})}
    </Story>
</Canvas>

## Example

```javascript
<InputGroup>Label</InputGroup>
```

## Props

<Props of={InputGroup} />