📝(react) add Toast doc

With various examples and how-to guides.

packages/react/src/components/Toast/DocUtils.tsx

@@ -0,0 +1,30 @@
+import { ReactNode } from "react";
+import { ToastType } from ":/components/Toast/ToastProvider";
+import { ButtonProps } from ":/components/Button";
+
+/**
+ * This function is used for doc purpose only.
+ */
+export const toast = ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  message,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  type,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  options,
+}: {
+  /** Message displayed inside the toast */
+  message: string;
+  /** Type of the toast */
+  type?: ToastType;
+  /** Various options */
+  options?: {
+    duration: number;
+    icon?: ReactNode;
+    primaryLabel?: string;
+    primaryOnClick?: ButtonProps["onClick"];
+    primaryProps?: ButtonProps;
+  };
+}) => {
+  return {};
+};

packages/react/src/components/Toast/index.mdx

@@ -0,0 +1,97 @@
+import { Canvas, Meta, Story, Source, ArgTypes } from '@storybook/blocks';
+import * as Stories from './index.stories';
+import { toast } from './DocUtils';
+import { ToastProvider } from './ToastProvider';
+import { Toast } from './index';
+
+<Meta of={Stories}/>
+
+# Toast
+
+Cunningham provides a powerful Toast component for displaying any kind of information for a defined amount of time.
+
+<Canvas of={Stories.Demo} sourceState="none"/>
+
+## Usage
+
+Toasts are really simple to use, you need to wrap your app inside `CunninghamProvider`.
+
+<Source
+  language='tsx'
+  dark
+  format={false}
+  code={`
+import { CunninghamProvider } from "@openfun/cunningham-react";
+
+const App = () => (
+  <CunninghamProvider>
+    <InnerApp />
+  </CunninghamProvider>
+);
+  `}
+/>
+
+And then simply use the `toast` function from `useToastProvider` hook.
+
+<Source
+  language='tsx'
+  dark
+  format={false}
+  code={`
+const InnerApp = () => {
+  const { toast } = useToastProvider();
+
+  return (
+    <button onClick={() => toast("Hello world!")}>
+      Create toast
+    </button>
+  );
+};
+`}/>
+
+You can also customize the appearance of the toast with the `toast` function. See the API.
+
+<ArgTypes of={toast} />
+
+## Type
+
+Toast can be of different types, each type has a different color and icon.
+
+<Canvas of={Stories.Info} />
+<Canvas of={Stories.Success} />
+<Canvas of={Stories.Warning} />
+<Canvas of={Stories.Error} />
+<Canvas of={Stories.Neutral} />
+
+## Actions
+
+You can quickly add an action to your toast by passing `primaryLabel` and `primaryOnClick` props to the `toast` function.
+
+<Canvas of={Stories.InfoWithButton} />
+
+## Customize
+
+You can customize the appearance of the toast by passing `actions` when calling `toast` function.
+
+<Canvas of={Stories.InfoCustom} />
+
+## Props
+
+These are the props of `Toast` component which you might not need to create by yourself as the `toast` function does all
+the heavy lifting for you.
+
+<ArgTypes of={Toast} />
+
+## Design tokens
+
+Here a the custom design tokens defined by the Toast.
+
+| Token        	| Description                 	|
+|---------------	|-----------------------------	|
+| slide-in-duration 	| Time the toast takes to slide in 	|
+| slide-out-duration 	| Time the toast takes to slide out	|
+| background-color 	| Default background color 	|
+| color 	| Color of the content	|
+| font-weight 	| Font weight of the content 	|
+| icon-size 	| Size of the left icon	|
+| progress-bar-height 	| Height of the progress bar	|