import type { Meta, StoryObj } from '@storybook/react';
import ToastContainerExample from './ToastContainerExample';
/**
We use [react-toastify](https://fkhadra.github.io/react-toastify/introduction) for our Toasts, and from Local Components we export a wrapper around their `toast` function and `ToastContainer` component.
This is done to limit the interface to better suit our specific designs.

## ToastContainer

Local will use only one instance of `ToastContainer` wrapping the whole app, though a multi-container approach is possible and would require further implementation.
See the [react-toastify docs](https://fkhadra.github.io/react-toastify/multi-containers) for more information on multi-container toasts.
## toast()

To trigger a Toast, import `toast` from Local Components (NOT `react-toastify`!) and call the function with an appropriate `options` object to customize.
You may specify `style`, `className`, `toastId`, `autoClose`, `content` and `type` properties, think React props but as an arg object.

`autoClose` is a number specifying the length in ms after which to close the toast.

`content` must be a valid React child - i.e. a string, component, or JSX. Note that in lieu of greater abstraction, all Toast content must be passed and styled from outside of the component.
Although many toasts may want a text button to the right (think "undo" or "Learn more"), keeping components more flexible often serves us well in the future.

View the code in `ToastContainerExample.tsx` for detailed examples of how to implement different kinds of toasts, shown below.

## Accessibility

The default role for a Toast is `alert`, but you may specify a different role such as `status`, if needed. See the [react-toastify docs](https://fkhadra.github.io/react-toastify/accessibility/) for more information.
Please note that links and buttons should not be used within toasts with an `alert` role. See the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role) for to learn more.

If buttons and links are used within toasts, please consider that focus does not and should not shift to the toast. Since it may take some time to navigate to the links, consider not auto-closing the toast.

# Interactive Example
*/
declare const meta: Meta<typeof ToastContainerExample>;
export default meta;
type Story = StoryObj<typeof ToastContainerExample>;
export declare const ToastContainerInteractive: Story;
//# sourceMappingURL=ToastContainer.stories.d.ts.map