import { Meta, ArgTypes, Canvas } from "@storybook/addon-docs/blocks";
import { Alert } from "./Alert";
import * as AlertStories from "./Alert.stories";

<Meta of={AlertStories} />

# Alert

The `Alert` component is used for displaying information about recent user
actions. The component displays by default, using `variant="info"`. `Alert` may
be dismissed through conditional rendering or with `show={false}` prop.

## Install

```bash
yarn add @simplybusiness/mobius
```

## Usage

```js
import { Alert } from "@simplybusiness/mobius";
```

### Default

<Canvas of={AlertStories.Default} />

### With Header

<Canvas of={AlertStories.WithHeader} />

## Props

<ArgTypes of={Alert} />

## Component HTML Structure and Class names

The following HTML is rendered for a Alert:

```html
<div class="mobius-alert">{children}</div>
```
