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

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

<Meta
    title="Baserow/Buttons/Standard"
    component={Button}
    decorators={[withDesign]}
    argTypes={{
        default: {
            defaultValue: 'Label',
        },
        tag: {
            control: {
                type: 'radio',
                options: ['a', 'button', 'nuxt-link'],
            },
            defaultValue: 'button',
        },
        type: {
            control: {
                type: 'select',
                options: ['primary', 'secondary', 'danger', 'upload', 'ghost'],
            },
            defaultValue: 'primary',
        },
        size: {
            control: {
                type: 'radio',
                options: ['tiny', 'small', 'regular', 'large', 'xlarge'],
            },
            defaultValue: 'regular',
        },
        icon: {
            defaultValue: 'iconoir-gitlab-full',
        },
        rel: {
            control: {
                type: 'text',
            },
            defaultValue: null,
        },
        href: {
            control: {
                type: 'text',
            },
            defaultValue: '',
        },
        target: {
            control: {
                type: 'select',
                options: ['_blank', '_self', '_parent', '_top'],
            },
            defaultValue: null,
        },
        loading: {
            control: {
                type: 'boolean',
                options: [true, false],
            },
            defaultValue: false,
        },
        disabled: {
            control: {
                type: 'boolean',
                options: [true, false],
            },
            defaultValue: false,
        },
        fullWidth: {
            control: {
                type: 'boolean',
                options: [true, false],
            },
            defaultValue: false,
        },
    }}
/>

# Button

Button has 3 main variations: `primary`, `secondary` and `danger`

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

export const designConfig = {
    type: 'figma',
    url: 'https://www.figma.com/file/W7R2rQW7ohsZMeHRfEcPFW/Design-Library?type=design&node-id=1-85&mode=design&t=ZFKwI59cTYQROI8S-0',
}

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

## Example

```javascript
<Button type="danger" icon="check-circle"></Button>
```

## Props

<Props of={Button} />