📝(react) add Toast doc

With various examples and how-to guides.

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	|