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

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

# Alert

An alert is a component that is used to display a message to the user.
The type defined the color scheme of the alert and the icon that is displayed.
It can be displayed at the bottom or top right of the page.

export const Template = (args, { argTypes }) => ({
    components: { Alert },
    props: Object.keys(argTypes),
    template: `
    <Alert @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>
    </Alert>
    `,
    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',
            actions: `<Button type="primary" size="small">View</Button> <button class="alert__actions-button-text alert__actions-button-text--normal">Dismiss</button>`,
        }}
        parameters={{
            design: config(designConfig),
        }}
    >
        {Template.bind({})}
    </Story>
    <Story
        name="Info neutral"
        args={{
            type: 'info-neutral',
            title: 'We’ve just released a new feature',
            actions:
                '<Button type="ghost" size="small">View</Button><button class="alert__actions-button-text alert__actions-button-text--normal">Dismiss</button>',
        }}
        parameters={{
            design: config(designConfig),
        }}
    >
        {Template.bind({})}
    </Story>
    <Story
        name="Warning"
        args={{
            type: 'warning',
            title: 'This action might cause problems',
            actions:
                '<Button type="warning" size="small">View</Button><button class="alert__actions-button-text">Dismiss</button>',
        }}
        parameters={{
            design: config(designConfig),
        }}
    >
        {Template.bind({})}
    </Story>
    <Story
        name="Error"
        args={{
            type: 'error',
            title: 'There was a problem with this action',
            actions:
                '<Button type="error" size="small">View</Button><button class="alert__actions-button-text">Dismiss</button>',
        }}
        parameters={{
            design: config(designConfig),
        }}
    >
        {Template.bind({})}
    </Story>
    <Story
        name="Success"
        args={{
            type: 'success',
            title: 'Successfully updated profile',
            actions:
                '<Button type="success" size="small">View</Button><button class="alert__actions-button-text alert__actions-button-text--loading">View changes</button>',
        }}
        parameters={{
            design: config(designConfig),
        }}
    >
        {Template.bind({})}
    </Story>
</Canvas>

## Example

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

## Props

<Props of={Alert} />