docs: add new story

src/components/notification/notification.stories.ts

@@ -81,6 +81,29 @@ const trigger = (args: Args): TemplateResult => html`
   </sbb-button>
 `;
 
+const simpleNotification = (
+  disabelAnimation: boolean,
+  type: string,
+  title: string,
+): TemplateResult => html`
+  <sbb-notification
+    type="${type}"
+    title-content="${title}"
+    disable-animation
+    style="margin-block-end: var(--sbb-spacing-fixed-4x);"
+    ${ref(
+      (notification?: Element) =>
+        (notification as SbbNotificationElement)?.addEventListener(
+          SbbNotificationElement.events.didOpen,
+          () => ((notification as SbbNotificationElement).disableAnimation = disabelAnimation),
+          { once: true },
+        ),
+    )}
+  >
+    This is a ${type} notification.
+  </sbb-notification>
+`;
+
 const pageContent = (): TemplateResult => html`
   <p style="margin: 0;">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
@@ -111,6 +134,31 @@ const DefaultTemplate = (args: Args): TemplateResult => html`
   </sbb-notification>
 `;
 
+const MultipleNotificationsTemplate = (args: Args): TemplateResult => html`
+  <sbb-notification
+    ${sbbSpread({ ...args, ['disable-animation']: true })}
+    style="margin-block-end: var(--sbb-spacing-fixed-4x);"
+    ${ref(
+      (notification?: Element) =>
+        (notification as SbbNotificationElement)?.addEventListener(
+          SbbNotificationElement.events.didOpen,
+          () =>
+            ((notification as SbbNotificationElement).disableAnimation = args['disable-animation']),
+          { once: true },
+        ),
+    )}
+  >
+    The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy
+    dog.&nbsp;<sbb-link href="/" variant="block"> Link one</sbb-link>
+    <sbb-link href="/" variant="inline"> Link two</sbb-link>
+    <sbb-link href="/" variant="inline"> Link three</sbb-link>
+  </sbb-notification>
+
+  ${simpleNotification(args['disable-animation'], 'success', 'Success')}
+  ${simpleNotification(args['disable-animation'], 'warn', 'Warn')}
+  ${simpleNotification(args['disable-animation'], 'error', 'Error')}
+`;
+
 const SlottedTitleTemplate = (args: Args): TemplateResult => html`
   <sbb-notification
     ${sbbSpread({ ...args, ['disable-animation']: true })}
@@ -181,6 +229,12 @@ export const SlottedTitle: StoryObj = {
   args: { ...basicArgs, 'title-content': undefined },
 };
 
+export const MultipleNotifications: StoryObj = {
+  render: MultipleNotificationsTemplate,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs },
+};
+
 // We set the height of the div in Chromatic to avoid cropped snapshots
 const meta: Meta = {
   decorators: [