From 604f80de2089815d26679d47916578be6744d048 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Thu, 8 Aug 2024 14:12:28 +0200
Subject: [PATCH] :books: Add documentation for toast*

---
 .../src/app/main/ui/ds/buttons/buttons.mdx    |  2 +-
 .../ui/ds/notifications/notifications.mdx     | 43 +++++++++++++++++++
 2 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/app/main/ui/ds/notifications/notifications.mdx

diff --git a/frontend/src/app/main/ui/ds/buttons/buttons.mdx b/frontend/src/app/main/ui/ds/buttons/buttons.mdx
index 3bc00dc93..ebbfa61a7 100644
--- a/frontend/src/app/main/ui/ds/buttons/buttons.mdx
+++ b/frontend/src/app/main/ui/ds/buttons/buttons.mdx
@@ -2,7 +2,7 @@ import { Canvas, Meta } from '@storybook/blocks';
 import * as ButtonStories from "./button.stories";
 import * as IconButtonStories from "./icon_button.stories";
 
-<Meta title="Buttons/Buttons" />
+<Meta title="Buttons/Docs" />
 
 # Buttons
 
diff --git a/frontend/src/app/main/ui/ds/notifications/notifications.mdx b/frontend/src/app/main/ui/ds/notifications/notifications.mdx
new file mode 100644
index 000000000..6ea282a3e
--- /dev/null
+++ b/frontend/src/app/main/ui/ds/notifications/notifications.mdx
@@ -0,0 +1,43 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as ToastStories from "./toast.stories";
+
+<Meta title="Notifications/Docs" />
+
+# Notifications
+
+`toast*` and `context-notification` accept a `level` prop to indicate the type of message. If this prop is `nil`,
+the default variant will be shown:
+
+<Canvas of={ToastStories.Default} />
+
+Info:
+
+<Canvas of={ToastStories.Info} />
+
+Warning:
+
+<Canvas of={ToastStories.Warning} />
+
+Error:
+
+<Canvas of={ToastStories.Error} />
+
+Success:
+
+<Canvas of={ToastStories.Success} />
+
+## Toasts
+
+Toast notifications are temporary floating elements that provide information
+that requires user acknowledgement.
+
+### Usage guidelines (design)
+
+#### Where to use
+
+Displayed in the top right corner of the page, in absolute position.
+
+#### When to use
+
+When the notification is temporary and is related or affects the whole context
+of the page the user is viewing or interacting with.