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

@@ -18,14 +18,15 @@ export default meta;
 type Story = StoryObj<typeof CharacterCount>;
 
 export const Standard: Story = {
-  render: () => (
+  render: (args) => (
     <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}
     />
   ),
 };
@@ -36,14 +37,15 @@ export const Standard: Story = {
  * Use the `countType` prop to vary this behaviour.
  */
 export const WordCountLimit: Story = {
-  render: () => (
+  render: (args) => (
     <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}
     />
   ),
 };
@@ -54,7 +56,7 @@ 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: () => (
+  render: (args) => (
     <CharacterCount
       label="Can you provide more detail?"
       labelProps={{ isPageHeading: true, size: 'l' }}
@@ -63,6 +65,7 @@ export const MessageThreshold: Story = {
       maxLength={112}
       threshold={75}
       rows={5}
+      {...args}
     />
   ),
 };

stories/Form Elements/Checkboxes.stories.tsx

@@ -53,6 +53,7 @@ export const Standard: Story = {
         idPrefix={args.idPrefix}
         name="nationality"
         id="nationality"
+        {...args}
       >
         <Checkboxes.Item value="british">British</Checkboxes.Item>
         <Checkboxes.Item value="irish">Irish</Checkboxes.Item>
@@ -68,6 +69,7 @@ export const WithHintText: Story = {
       <Checkboxes
         legend="How do you want to sign in?"
         legendProps={{ isPageHeading: true, size: 'l' }}
+        {...args}
       >
         <Checkboxes.Item
           id="government-gateway"
@@ -94,7 +96,7 @@ export const WithHintText: Story = {
 export const WithDisabledItem: Story = {
   render: (args) => (
     <form>
-      <Checkboxes id="colours" name="colours">
+      <Checkboxes id="colours" name="colours" {...args}>
         <Checkboxes.Item value="red">Red</Checkboxes.Item>
         <Checkboxes.Item value="green">Green</Checkboxes.Item>
         <Checkboxes.Item value="red" disabled>
@@ -114,6 +116,7 @@ export const WithConditionalContent: Story = {
         hint="Select all that apply"
         id="waste"
         name="waste"
+        {...args}
       >
         <Checkboxes.Item conditional={<p>This includes rocks and earth.</p>} value="mines">
           Waste from mines or quarries
@@ -132,6 +135,7 @@ export const WithExclusiveNoneOption: Story = {
         hint="Select all the symptoms you have"
         id="symptoms"
         name="symptoms"
+        {...args}
       >
         <Checkboxes.Item value="sore-throat">Sore throat</Checkboxes.Item>
         <Checkboxes.Item value="runny-nose">Runny nose</Checkboxes.Item>
@@ -158,6 +162,7 @@ export const WithError: Story = {
           error={error}
           id="waste"
           name="waste"
+          {...args}
         >
           <Checkboxes.Item value="animal">Waste from animal carcasses</Checkboxes.Item>
           <Checkboxes.Item value="mines">Waste from mines or quarries</Checkboxes.Item>
@@ -175,7 +180,7 @@ export const WithError: Story = {
 };
 
 export const NoIDSupplied: Story = {
-  render: function NoIDSuppliedRender() {
+  render: function NoIDSuppliedRender(args) {
     const checkbox1Ref = useRef<HTMLInputElement>(null);
     const checkbox2Ref = useRef<HTMLInputElement>(null);
     const checkbox3Ref = useRef<HTMLInputElement>(null);
@@ -248,7 +253,7 @@ export const NoIDSupplied: Story = {
           </li>
         </ul>
         <h5>Component</h5>
-        <Checkboxes>
+        <Checkboxes {...args}>
           <Checkboxes.Item ref={checkbox1Ref}>Box 1</Checkboxes.Item>
           <Checkboxes.Item ref={checkbox2Ref}>Box 2</Checkboxes.Item>
           <Checkboxes.Item ref={checkbox3Ref}>Box 3</Checkboxes.Item>
@@ -259,7 +264,7 @@ export const NoIDSupplied: Story = {
 };
 
 export const NameSupplied: Story = {
-  render: function NameSuppliedRender() {
+  render: function NameSuppliedRender(args) {
     const checkbox1Ref = useRef<HTMLInputElement>(null);
     const checkbox2Ref = useRef<HTMLInputElement>(null);
     const checkbox3Ref = useRef<HTMLInputElement>(null);
@@ -332,7 +337,7 @@ export const NameSupplied: Story = {
           </li>
         </ul>
         <h5>Component</h5>
-        <Checkboxes name="name-supplied">
+        <Checkboxes name="name-supplied" {...args}>
           <Checkboxes.Item ref={checkbox1Ref}>Box 1</Checkboxes.Item>
           <Checkboxes.Item ref={checkbox2Ref}>Box 2</Checkboxes.Item>
           <Checkboxes.Item ref={checkbox3Ref}>Box 3</Checkboxes.Item>
@@ -343,7 +348,7 @@ export const NameSupplied: Story = {
 };
 
 export const IDPrefixSupplied: Story = {
-  render: function IDPrefixSuppliedRender() {
+  render: function IDPrefixSuppliedRender(args) {
     const checkbox1Ref = useRef<HTMLInputElement>(null);
     const checkbox2Ref = useRef<HTMLInputElement>(null);
     const checkbox3Ref = useRef<HTMLInputElement>(null);
@@ -417,7 +422,7 @@ export const IDPrefixSupplied: Story = {
           </li>
         </ul>
         <h5>Component</h5>
-        <Checkboxes idPrefix="idprefix">
+        <Checkboxes idPrefix="idprefix" {...args}>
           <Checkboxes.Item ref={checkbox1Ref}>Box 1</Checkboxes.Item>
           <Checkboxes.Item ref={checkbox2Ref}>Box 2</Checkboxes.Item>
           <Checkboxes.Item ref={checkbox3Ref}>Box 3</Checkboxes.Item>
@@ -428,7 +433,7 @@ export const IDPrefixSupplied: Story = {
 };
 
 export const IDPrefixAndNameSupplied: Story = {
-  render: function IDPrefixAndNameSuppliedRender() {
+  render: function IDPrefixAndNameSuppliedRender(args) {
     const checkbox1Ref = useRef<HTMLInputElement>(null);
     const checkbox2Ref = useRef<HTMLInputElement>(null);
     const checkbox3Ref = useRef<HTMLInputElement>(null);
@@ -502,7 +507,7 @@ export const IDPrefixAndNameSupplied: Story = {
           </li>
         </ul>
         <h5>Component</h5>
-        <Checkboxes idPrefix="idprefix" name="testname">
+        <Checkboxes idPrefix="idprefix" name="testname" {...args}>
           <Checkboxes.Item ref={checkbox1Ref}>Box 1</Checkboxes.Item>
           <Checkboxes.Item ref={checkbox2Ref}>Box 2</Checkboxes.Item>
           <Checkboxes.Item ref={checkbox3Ref}>Box 3</Checkboxes.Item>
@@ -513,7 +518,7 @@ export const IDPrefixAndNameSupplied: Story = {
 };
 
 export const OnChangeAndOnInputHandlers: Story = {
-  render: function OnChangeAndOnInputHandlersRender() {
+  render: function OnChangeAndOnInputHandlersRender(args) {
     const [changeEventLog, setChangeEventLog] = useState<Array<string>>([]);
     const [inputEventLog, setInputEventLog] = useState<Array<string>>([]);
     const [currentValue, setCurrentValue] = useState<Array<string>>([]);
@@ -548,7 +553,7 @@ export const OnChangeAndOnInputHandlers: Story = {
           <li>The value is passed through</li>
         </ul>
         <h5>Component</h5>
-        <Checkboxes onChange={handleChange} onInput={handleInput}>
+        <Checkboxes onChange={handleChange} onInput={handleInput} {...args}>
           <Checkboxes.Item value="1">Box 1</Checkboxes.Item>
           <Checkboxes.Item value="2">Box 2</Checkboxes.Item>
           <Checkboxes.Item value="3">Box 3</Checkboxes.Item>