import { Meta, Canvas, Source, Primary, Controls, Title, Description } from "@storybook/addon-docs";

import * as stories from "./toast.stories";

<Meta of={stories} />

```ts
import { ToastService } from "@bitwarden/components";
```

<Title />

<Primary />
<Controls />

### Variants

<Canvas of={stories.Variants} />

### Long content

<Canvas of={stories.LongContent} />

## Displaying a toast

Toasts are triggered via the `ToastService`, which must be called from a frontend Angular context.

```
toastService.showToast({
  variant: 'success',
  message: 'Hi I'm a toast,
});
```

The following options are accepted:

| Option    | Description                                   |
| --------- | --------------------------------------------- |
| `variant` | `"success" \| "error" \| "info" \| "warning"` |
| `title`   | Optional title `string`                       |
| `message` | Main toast content. Required `string`         |

<Canvas of={stories.Service} />

### Toast container

`bit-toast-container` should be added to the app root of consuming clients to ensure toasts are
properly announced to screenreaders.

```
<other app file html here>
<bit-toast-container></bit-toast-container>
```

### Accessibility

In addition to the accessibility provided by the `bit-toast-container` component, the toast itself
will apply `aria-alert="true"` if the toast is of type `error`.
