From dc8ae12671a4f567eb942d274314d294f0a95b0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Mon, 11 May 2026 20:18:47 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20Fix=20code=20examples=20for=20No?=
 =?UTF-8?q?ticeBar=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NoticeBar.stories.ts | 80 ++++++++++++++++-------------
 1 file changed, 43 insertions(+), 37 deletions(-)

diff --git a/src/components/NoticeBar.stories.ts b/src/components/NoticeBar.stories.ts
index 1f59c2f..d9ba9e9 100644
--- a/src/components/NoticeBar.stories.ts
+++ b/src/components/NoticeBar.stories.ts
@@ -11,65 +11,71 @@ const meta: Meta<typeof NoticeBar> = {
   component: NoticeBar,
   // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
+  argTypes: {
+    type: { control: 'select', options: Object.values(NoticeBarTypes) },
+    default: { control: 'text' },
+  },
   args: {
     default: 'Hello World!',
+    type: NoticeBarTypes.Info,
   },
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Info: Story = {
+export const Standard: Story = {
   args: {
     default: 'You have 10,000 new emails.',
-    type: NoticeBarTypes.Info,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: '<notice-bar>You have 10,000 new emails.</notice-bar>',
+      },
+    },
   },
 };
 
-export const InfoWithCTA: Story = {
-  args: {
-    default: 'You have 10,000 new emails.',
-    type: NoticeBarTypes.Info,
-  },
-  render: (args) => ({
+export const CTAControls: Story = {
+  render: () => ({
     components: { NoticeBar, PrimaryButton, LinkButton },
-    setup() {
-      return { args };
-    },
     template: `
-      <NoticeBar>
-        {{ args.default }}
+      <notice-bar>
+        This form is dirty.
 
         <template #cta>
-          <button
-            style="border:none;background-color:inherit;color: var(--colour-ti-secondary);text-decoration:underline;cursor:pointer;"
-          >
-            Revert changes
-          </button>
-          <PrimaryButton size="small">Save changes</PrimaryButton>
+          <link-button>Revert changes</link-button>
+          <primary-button size="small">Save changes</primary-button>
         </template>
-      </NoticeBar>
+      </notice-bar>
     `,
   }),
-};
-
-export const Success: Story = {
-  args: {
-    default: 'You have 10,000 new emails.',
-    type: NoticeBarTypes.Success,
-  },
-};
-
-export const Warning: Story = {
-  args: {
-    default: 'You have 10,000 new emails.',
-    type: NoticeBarTypes.Warning,
+  parameters: {
+    docs: {
+      source: {
+        code: '<notice-bar>\n  This form is dirty.\n\n  <template #cta>\n    <link-button>Revert changes</link-button>\n    <primary-button size="small">Save changes</primary-button>\n  </template>\n</notice-bar>',
+      },
+    },
   },
 };
 
-export const Critical: Story = {
-  args: {
-    default: 'You have 10,000 new emails.',
-    type: NoticeBarTypes.Critical,
+export const Type: Story = {
+  render: () => ({
+    components: { NoticeBar, PrimaryButton, LinkButton },
+    template: `<div style="display:flex;flex-direction:column;gap:1rem">
+        <notice-bar type="info">You have unread emails.</notice-bar>
+        <notice-bar type="success">You have no new emails.</notice-bar>
+        <notice-bar type="warning">You have 10 new emails.</notice-bar>
+        <notice-bar type="critical">You have 10,000 new emails.</notice-bar>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: '<notice-bar type="info">You have unread emails.</notice-bar>\n<notice-bar type="success">You have no new emails.</notice-bar>\n<notice-bar type="warning">You have 10 new emails.</notice-bar>\n<notice-bar type="critical">You have 10,000 new emails.</notice-bar>',
+      },
+    },
   },
 };