import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import Alert, { alertTypes } from '../Alert';

<Meta title="Atoms/Alert" component={Alert} />


# Alert
<br />

## `Alerts` are used to display notifications to the user.
<br />

### Success
<Canvas>
    <Story name="Success">
        <Alert alertMessage="Yay success" type={alertTypes.SUCCESS_ALERT} />
    </Story>
</Canvas>

### Error
<Canvas>
    <Story name="Error">
        <Alert alertMessage="Oh no, error" type={alertTypes.ERROR_ALERT} />
    </Story>
</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} />
