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.