import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import Alert, { alertTypes } from '../Alert';
import * as AlertStories from './Alert.stories';

<Meta of={AlertStories} />

# Alert

<br />

## `Alerts` are used to display notifications to the user.

<br />

### Success

<Canvas>
  <Story of={AlertStories.Success} />
</Canvas>

### Error

<Canvas>
  <Story of={AlertStories.Error} />
</Canvas>

## Usage Example

```jsx
import Alert, { alertTypes } from '@appdirect/sfb-theme-components/src/atoms/alert/Alert';

<Alert
    isGlobal
    alertMessage={alert.message}
    type={alertTypes.SUCCESS_ALERT}   // alertTypes.SUCCESS_ALERT or alertTypes.ERROR_ALERT
    onClose={removeAlert}
/>

```

## Props

<ArgsTable of={Alert} />
