bramw_baserow/web-frontend/stories/Toast.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 Toast from '@baserow/modules/core/components/toasts/Toast'

<Meta
    title="Baserow/Toasts & Alerts/Toasts"
    component={Toast}
    decorators={[withDesign]}
    argTypes={{
        default: {
            defaultValue:
                'Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam.',
        },
        type: {
            control: {
                type: 'select',
                options: [
                    'info-neutral',
                    'info-primary',
                    'warning',
                    'error',
                    'success',
                ],
            },
        },
        position: {
            control: {
                type: 'radio',
                options: [null, 'top', 'bottom'],
            },
            defaultValue: null,
        },
        loading: {
            control: {
                type: 'boolean',
                options: [true, false],
            },
            defaultValue: true,
        },
        closeButton: {
            control: {
                type: 'boolean',
                options: [true, false],
            },
            defaultValue: false,
        },
    }}
/>

# Toast

A toast is a small message that is shown to the user. It can be used to inform the user about something.
The icon can be set (unlikely to an alert). The type define the color scheme of the toast.
The toast is also set to close automatically after 5 seconds. The position has to be managed by its parent.

export const Template = (args, { argTypes }) => ({
    components: { Toast },
    props: Object.keys(argTypes),
    template: `
    <Toast @close="close()" v-bind="$props">
        <template v-if="${'title' in args}"  v-slot:title>${
        args.title
    }</template>
        <template v-slot>${args.default}</template>
        <template v-if="${'actions' in args}" v-slot:actions>${
        args.actions
    }</template>
    </Toast>
    `,
    methods: { close: action('closed') },
})

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

<Canvas>
    <Story
        name="Info primary"
        args={{
            type: 'info-primary',
            title: 'We’ve just released a new feature',
            icon: 'iconoir-settings',
            actions:
                '<span class="toast__actions-button toast__actions-button--primary">View</span><span class="toast__actions-button" @click="close()">Dismiss</span>',
        }}
        parameters={{
            design: config(designConfig),
        }}
    >
        {Template.bind({})}
    </Story>
    <Story
        name="Info neutral"
        args={{
            type: 'info-neutral',
            title: 'We’ve just released a new feature',
            icon: 'iconoir-settings',
            actions:
                '<span class="toast__actions-button toast__actions-button--primary">View</span><span class="toast__actions-button">Dismiss</span>',
        }}
        parameters={{
            design: config(designConfig),
        }}
    >
        {Template.bind({})}
    </Story>
    <Story
        name="Warning"
        args={{
            type: 'warning',
            title: 'Database has been modified',
            icon: 'iconoir-database-restore',
            actions:
                '<span class="toast__actions-button toast__actions-button--primary">Undo</span>',
        }}
        parameters={{
            design: config(designConfig),
        }}
    >
        {Template.bind({})}
    </Story>
    <Story
        name="Error"
        args={{
            type: 'error',
            title: 'Database has been deleted',
            icon: 'iconoir-db-error',
            actions:
                '<span class="toast__actions-button toast__actions-button--primary">Undo</span>',
        }}
        parameters={{
            design: config(designConfig),
        }}
    >
        {Template.bind({})}
    </Story>
    <Story
        name="Success"
        args={{
            type: 'success',
            title: 'Successfully updated profile',
            icon: 'iconoir-db-check',
            actions:
                '<span class="toast__actions-button">Dismiss</span><span class="toast__actions-button toast__actions-button--primary">View changes</span>',
        }}
        parameters={{
            design: config(designConfig),
        }}
    >
        {Template.bind({})}
    </Story>
    <Story
        name="No type or icon"
        args={{
            title: 'Updates have been made to your profile',
            actions:
                '<span class="toast__actions-button toast__actions-button--primary">Dismiss</span><span class="toast__actions-button">View changes</span>',
        }}
        parameters={{
            design: config(designConfig),
        }}
    >
        {Template.bind({})}
    </Story>
</Canvas>

## Example

```javascript
<Toast type="success" loading>
    <template #title>Updates have been made to your profile</template>
    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam.<span>
    <template #actions><button @click="close()">Dismiss</button><button @click="anyMethod()">View changes</button></template>
</Toast>
```

## Props

<Props of={Toast} />