Always pass args to storybook examples

Author: colinrotherham

stories/Content Presentation/DoAndDontList.stories.tsx

@@ -45,8 +45,11 @@ export default meta;
 type Story = StoryObj<typeof DoAndDontList>;
 
 export const Do: Story = {
+  args: {
+    listType: 'do',
+  },
   render: (args) => (
-    <DoAndDontList listType="do">
+    <DoAndDontList {...args}>
       <DoAndDontList.Item>
         cover blisters that are likely to burst with a soft plaster or dressing
       </DoAndDontList.Item>
@@ -59,8 +62,11 @@ export const Do: Story = {
 };
 
 export const Dont: Story = {
+  args: {
+    listType: 'dont',
+  },
   render: (args) => (
-    <DoAndDontList listType="dont">
+    <DoAndDontList {...args}>
       <DoAndDontList.Item>burst a blister yourself</DoAndDontList.Item>
       <DoAndDontList.Item>peel the skin off a burst blister</DoAndDontList.Item>
       <DoAndDontList.Item>pick at the edges of the remaining skin</DoAndDontList.Item>
@@ -90,8 +96,11 @@ export const Dont: Story = {
  * | JSX       | The JSX will be rendered, such as `<span>`  |
  */
 export const CustomPrefixText: Story = {
-  render: () => (
-    <DoAndDontList listType="dont">
+  args: {
+    listType: 'dont',
+  },
+  render: (args) => (
+    <DoAndDontList {...args}>
       <DoAndDontList.Item prefixText="You must not">burst a blister yourself</DoAndDontList.Item>
       <DoAndDontList.Item prefixText={undefined}>
         peel the skin off a burst blister

stories/Content Presentation/NotificationBanner.stories.tsx

@@ -41,8 +41,8 @@ type Story = StoryObj<typeof NotificationBanner>;
 
 export const StandardPanel: Story = {
   args: {},
-  render: () => (
-    <NotificationBanner>
+  render: (args) => (
+    <NotificationBanner {...args}>
       <NotificationBanner.Heading>
         The service will be unavailable from 8pm to 9pm on Thursday 1 January 2025.
       </NotificationBanner.Heading>
@@ -51,9 +51,11 @@ export const StandardPanel: Story = {
 };
 
 export const SuccessPanel: Story = {
-  args: {},
-  render: () => (
-    <NotificationBanner success>
+  args: {
+    success: true,
+  },
+  render: (args) => (
+    <NotificationBanner {...args}>
       <NotificationBanner.Heading>Patient record updated</NotificationBanner.Heading>
       <p>
         Contact{' '}
@@ -66,8 +68,8 @@ export const SuccessPanel: Story = {
 
 export const StandardPanelWithLink: Story = {
   args: {},
-  render: () => (
-    <NotificationBanner>
+  render: (args) => (
+    <NotificationBanner {...args}>
       <NotificationBanner.Heading>
         You have 7 days left to send your application.{' '}
         <NotificationBanner.Link href="#">View application</NotificationBanner.Link>.
@@ -80,8 +82,8 @@ export const StandardPanelWithCustomTitle: Story = {
   args: {
     title: 'Important Message',
   },
-  render: () => (
-    <NotificationBanner>
+  render: (args) => (
+    <NotificationBanner {...args}>
       <NotificationBanner.Heading>Upcoming maintenance</NotificationBanner.Heading>
       <p>The service will be unavailable from 8pm to 9pm on Thursday 1 January 2025.</p>
     </NotificationBanner>
@@ -90,8 +92,8 @@ export const StandardPanelWithCustomTitle: Story = {
 
 export const StandardPanelWithCustomTitleElement: Story = {
   args: {},
-  render: () => (
-    <NotificationBanner>
+  render: (args) => (
+    <NotificationBanner {...args}>
       <NotificationBanner.Title>
         Maintenance <time dateTime="2025-01-01">January 1</time>
       </NotificationBanner.Title>
@@ -103,8 +105,8 @@ export const StandardPanelWithCustomTitleElement: Story = {
 
 export const StandardPanelWithList: Story = {
   args: {},
-  render: () => (
-    <NotificationBanner>
+  render: (args) => (
+    <NotificationBanner {...args}>
       <NotificationBanner.Heading>4 files uploaded</NotificationBanner.Heading>
       <ul>
         <li>
@@ -126,8 +128,8 @@ export const StandardPanelWithList: Story = {
 
 export const StandardPanelWithLotsOfContent: Story = {
   args: {},
-  render: () => (
-    <NotificationBanner>
+  render: (args) => (
+    <NotificationBanner {...args}>
       <NotificationBanner.Heading>
         Check if you need to apply the reverse charge to this application
       </NotificationBanner.Heading>

stories/Content Presentation/Panel.stories.tsx

@@ -9,17 +9,17 @@ export default meta;
 type Story = StoryObj<typeof Panel>;
 
 export const StandardPanel: Story = {
-  render: () => (
-    <Panel>
+  render: (args) => (
+    <Panel {...args}>
       <Panel.Title>Booking complete</Panel.Title>
       We have sent you a confirmation email
     </Panel>
   ),
 };
 
 export const PanelWithCustomHeadingLevel: Story = {
-  render: () => (
-    <Panel>
+  render: (args) => (
+    <Panel {...args}>
       <Panel.Title headingLevel="h2">Booking complete</Panel.Title>
       We have sent you a confirmation email
     </Panel>

stories/Content Presentation/Tabs.stories.tsx

@@ -18,8 +18,8 @@ export default meta;
 type Story = StoryObj<typeof Tabs>;
 
 export const Standard: Story = {
-  render: () => (
-    <Tabs>
+  render: (args) => (
+    <Tabs {...args}>
       <Tabs.Title>Contents</Tabs.Title>
       <Tabs.List>
         <Tabs.ListItem id="past-day">Past day</Tabs.ListItem>
@@ -48,8 +48,8 @@ export const Standard: Story = {
  * It also displays if the user has JavaScript disabled.
  */
 export const DifferentAccessibleHeading: Story = {
-  render: () => (
-    <Tabs>
+  render: (args) => (
+    <Tabs {...args}>
       <Tabs.Title headingLevel="h1">Tabs title</Tabs.Title>
       <Tabs.List>
         <Tabs.ListItem id="past-day-2">Past day</Tabs.ListItem>

stories/Content Presentation/Tag.stories.tsx

@@ -11,7 +11,7 @@ type Story = StoryObj<typeof Tag>;
 export const StandardTag: Story = { args: { children: 'Standard' } };
 
 export const AllColours: Story = {
-  render: (args) => (
+  render: () => (
     <div className="tag-wrapper">
       <Tag modifier="white">Started</Tag>
       <Tag modifier="grey">Not started</Tag>

stories/Content Presentation/WarningCallout.stories.tsx

@@ -10,7 +10,7 @@ type Story = StoryObj<typeof WarningCallout>;
 
 export const StandardWarningCallout: Story = {
   render: (args) => (
-    <WarningCallout>
+    <WarningCallout {...args}>
       <WarningCallout.Heading>Important</WarningCallout.Heading>
       <p>
         For safety, tell your doctor or pharmacist if you&apos;re taking any other medicines,
@@ -24,7 +24,7 @@ export const StandardWarningCallout: Story = {
 
 export const WarningCalloutWithCustomHeading: Story = {
   render: (args) => (
-    <WarningCallout>
+    <WarningCallout {...args}>
       <WarningCallout.Heading>School, nursery or work</WarningCallout.Heading>
       <p>
         Stay away from school, nursery or work until all the spots have crusted over. This is
@@ -36,7 +36,7 @@ export const WarningCalloutWithCustomHeading: Story = {
 
 export const WarningCalloutWithCustomHeadingLevel: Story = {
   render: (args) => (
-    <WarningCallout>
+    <WarningCallout {...args}>
       <WarningCallout.Heading headingLevel="h4">School, nursery or work</WarningCallout.Heading>
       <p>
         Stay away from school, nursery or work until all the spots have crusted over. This is

stories/Form Elements/CharacterCount.stories.tsx

@@ -12,22 +12,22 @@ import { CharacterCount } from '#components';
 const meta: Meta<typeof CharacterCount> = {
   title: 'Form Elements/CharacterCount',
   component: CharacterCount,
+  args: {
+    label: 'Can you provide more detail?',
+    labelProps: { isPageHeading: true, size: 'l' },
+    hint: 'Do not include personal information like your name, date of birth or NHS number',
+    name: 'example',
+    rows: 5,
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof CharacterCount>;
 
 export const Standard: Story = {
-  render: () => (
-    <CharacterCount
-      label="Can you provide more detail?"
-      labelProps={{ isPageHeading: true, size: 'l' }}
-      hint="Do not include personal information like your name, date of birth or NHS number"
-      name="example"
-      maxLength={200}
-      rows={5}
-    />
-  ),
+  args: {
+    maxLength: 200,
+  },
 };
 
 /**
@@ -36,16 +36,9 @@ export const Standard: Story = {
  * Use the `countType` prop to vary this behaviour.
  */
 export const WordCountLimit: Story = {
-  render: () => (
-    <CharacterCount
-      label="Can you provide more detail?"
-      labelProps={{ isPageHeading: true, size: 'l' }}
-      hint="Do not include personal information like your name, date of birth or NHS number"
-      name="example"
-      maxWords={150}
-      rows={5}
-    />
-  ),
+  args: {
+    maxWords: 150,
+  },
 };
 
 /**
@@ -54,15 +47,8 @@ export const WordCountLimit: Story = {
  * Use the `threshold` prop to only show the count message when users have reached that percentage of the limit.
  */
 export const MessageThreshold: Story = {
-  render: () => (
-    <CharacterCount
-      label="Can you provide more detail?"
-      labelProps={{ isPageHeading: true, size: 'l' }}
-      hint="Do not include personal information like your name, date of birth or NHS number"
-      name="example"
-      maxLength={112}
-      threshold={75}
-      rows={5}
-    />
-  ),
+  args: {
+    maxLength: 112,
+    threshold: 75,
+  },
 };