refactor(sbb-notification): use decorators

sbb-design-systems · Nov 27, 2023 · 8d49874 · 8d49874
1 parent 35928e3
commit 8d49874
Showing 1 changed file with 50 additions and 51 deletions.
diff --git a/src/components/notification/notification.stories.ts b/src/components/notification/notification.stories.ts
@@ -1,10 +1,11 @@
 import { withActions } from '@storybook/addon-actions/decorator';
 import type { InputType } from '@storybook/types';
-import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-components';
+import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components';
 import isChromatic from 'chromatic/isChromatic';
 import { html, TemplateResult } from 'lit';
 import { ref } from 'lit/directives/ref.js';
 
+import type { SbbButton } from '../button';
 import { sbbSpread } from '../core/dom';
 
 import { SbbNotification } from './notification';
@@ -51,7 +52,7 @@ const basicArgs: Args = {
   'disable-animation': isChromatic(),
 };
 
-const appendNotification = (args: Args): void => {
+const appendNotification = (event: Event, args: Args): void => {
   const newNotification = document.createElement('sbb-notification');
   newNotification.style.setProperty(
     '--sbb-notification-margin',
@@ -63,22 +64,33 @@ const appendNotification = (args: Args): void => {
   newNotification.disableAnimation = args['disable-animation'];
   newNotification.innerHTML =
     'Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.';
-  document.querySelector('.notification-container')?.append(newNotification);
+  (event.target as SbbButton).parentElement
+    .querySelector('.notification-container')
+    ?.append(newNotification);
 };
 
 const trigger = (args: Args): TemplateResult => html`
   <sbb-button
     size="m"
     variant="secondary"
-    style="margin-block-end: var(--sbb-spacing-fixed-4x);"
-    @click=${() => appendNotification(args)}
+    style="max-width: fit-content"
+    @click=${(event: Event) => appendNotification(event, args)}
     icon-name="circle-plus-small"
   >
     Add notification
   </sbb-button>
 `;
 
-const notification = (args: Args): TemplateResult => html`
+const pageContent = (): TemplateResult => html`
+  <p style="margin: 0;">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+    labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+    <sbb-link href="/" variant="inline"> link </sbb-link>
+    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </p>
+`;
+
+const DefaultTemplate = (args: Args): TemplateResult => html`
   <sbb-notification
     ${sbbSpread(args)}
     disable-animation
@@ -93,54 +105,32 @@ const notification = (args: Args): TemplateResult => html`
     )}
   >
     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>
+    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>
 `;
 
-const pageContent = (): TemplateResult => html`
-  <p style="margin: 0;">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-    labore et dolore magna aliqua. Ut enim ad minim veniam, quis
-    <sbb-link href="/" variant="inline"> link </sbb-link>
-    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  </p>
-`;
-
-const DefaultTemplate = (args: Args): TemplateResult => html`
-  ${trigger(args)}
-  <div class="notification-container" style="display: flex; flex-direction: column;">
-    ${notification(args)}
-  </div>
-  ${pageContent()}
-`;
-
 const SlottedTitleTemplate = (args: Args): TemplateResult => html`
-  ${trigger(args)}
-  <div class="notification-container" style="display: flex; flex-direction: column;">
-    <sbb-notification
-      ${sbbSpread(args)}
-      disable-animation
-      style="margin-block-end: var(--sbb-spacing-fixed-4x);"
-      ${ref(
-        (notification?: Element) =>
-          (notification as SbbNotification)?.addEventListener(
-            SbbNotification.events.didOpen,
-            () => ((notification as SbbNotification).disableAnimation = args['disable-animation']),
-            { once: true },
-          ),
-      )}
-    >
-      <span slot="title">Slotted title</span>
-      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>
-  </div>
-  ${pageContent()}
+  <sbb-notification
+    ${sbbSpread(args)}
+    disable-animation
+    style="margin-block-end: var(--sbb-spacing-fixed-4x);"
+    ${ref(
+      (notification?: Element) =>
+        (notification as SbbNotification)?.addEventListener(
+          SbbNotification.events.didOpen,
+          () => ((notification as SbbNotification).disableAnimation = args['disable-animation']),
+          { once: true },
+        ),
+    )}
+  >
+    <span slot="title">Slotted title</span>
+    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>
 `;
 
 export const Info: StoryObj = {
@@ -193,7 +183,16 @@ export const SlottedTitle: StoryObj = {
 
 const meta: Meta = {
   decorators: [
-    (story) => html`<div style="padding: 2rem;">${story()}</div>`,
+    (story, context) =>
+      html`<div
+        style="padding: 2rem;display: flex;gap: var(--sbb-spacing-fixed-4x);flex-direction: column;"
+      >
+        ${trigger(context.args)}
+        <div class="notification-container" style="display: flex; flex-direction: column;">
+          ${story()}
+        </div>
+        ${pageContent()}
+      </div>`,
     withActions as Decorator,
   ],
   parameters: {