Fix code examples for NoticeBar component

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>',
+      },
+    },
   },
 };