From 604f80de2089815d26679d47916578be6744d048 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= 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"; - + # 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"; + + + +# 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: + + + +Info: + + + +Warning: + + + +Error: + + + +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.