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

import Badge from '@baserow/modules/core/components/Badge'

<Meta
    title="Baserow/Badges/Default"
    component={Badge}
    parameters={{
        backgrounds: {
            default: 'white',
            values: [
                { name: 'white', value: '#ffffff' },
                { name: 'light', value: '#eeeeee' },
                { name: 'dark', value: '#222222' },
            ],
        },
    }}
    decorators={[withDesign]}
    argTypes={{
        default: {
            control: 'text',
            description: 'Slot content',
            defaultValue: 'Label',
        },
        color: {
            control: {
                type: 'select',
                options: [
                    'cyan',
                    'green',
                    'yellow',
                    'red',
                    'magenta',
                    'purple',
                    'neutral',
                ],
            },
            defaultValue: 'cyan',
        },
        size: {
            control: {
                type: 'select',
                options: ['regular', 'small', 'large'],
            },
            defaultValue: 'regular',
        },
        indicator: {
            control: {
                type: 'boolean',
                options: [true, false],
            },
            defaultValue: true,
        },
        rounded: {
            control: {
                type: 'boolean',
                options: [true, false],
            },
            defaultValue: false,
        },
        bold: {
            control: {
                type: 'boolean',
                options: [true, false],
            },
            defaultValue: false,
        },
    }}
/>

# Badge

export const Template = (args, { argTypes }) => ({
    components: { Badge },
    props: Object.keys(argTypes),
    template: `<Badge v-bind="$props">${args.default}</Badge>`,
})

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

<Canvas>
    <Story
        name="Default"
        args={{ color: 'neutral' }}
        parameters={{
            design: config(designConfig),
        }}
    >
        {Template.bind({})}
    </Story>
</Canvas>

## Example

```javascript
<Badge color="cyan" indicator="true" size="large"></Badge>
```

## Props

<Props of={Badge} />