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',
                    'blank',
                ],
            },
            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: true,
        },
        width: {
            control: {
                type: 'number',
            },
            defaultValue: null,
        },
    }}
/>

# Alert

An alert is a component that is used to display a message to the user.
The type defines the color scheme of the alert and the icon that is displayed.
The `blank` type can be used to display an alert without an icon.
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="${'image' in args}" v-slot:image>${args.image}</template>
        <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="secondary" 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>
    <Story
        name="Blank with image"
        args={{
            type: 'blank',
            image: '<img src="https://picsum.photos/394/119" srcset="https://picsum.photos/792/238 2x" />',
            title: 'Successfully updated profile',
            actions:
                '<ButtonIcon icon="baserow-icon-twitter"></ButtonIcon><ButtonIcon icon="baserow-icon-reddit"></ButtonIcon><ButtonIcon icon="baserow-icon-facebook"></ButtonIcon><ButtonIcon icon="baserow-icon-linkedin"></ButtonIcon>',
            width: 396,
        }}
        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} />