Make sure stories update when args change (#290)

* Use `defaultValue` and `defaultChecked` without change handlers

* Update form examples with `isPageHeading`

* Always pass args to storybook examples

* Remove out of date comment

* Remove unnecessary wrappers

* Remove implementation notes duplicated in args or examples

Author: colinrotherham

src/components/navigation/action-link/README.md

@@ -2,7 +2,7 @@
 
 This component can be found in the `nhsuk-frontend` repository [here](https://github.com/nhsuk/nhsuk-frontend/tree/main/packages/nhsuk-frontend/src/nhsuk/components/action-link).
 
-## Implementation Notes
+## Implementation notes
 
 The ActionLink component does not use the `nhsuk-frontend` "openInNewWindow" property, instead it allows the user to add the `target="_blank"` property (if desired).
 

stories/Content Presentation/Details.stories.tsx

@@ -4,43 +4,13 @@ import { Details } from '#components';
 /**
  * This component can be found in the `nhsuk-frontend` repository <a href="https://github.com/nhsuk/nhsuk-frontend/tree/main/packages/nhsuk-frontend/src/nhsuk/components/contents-list" target="_blank">here</a>.
  *
- * ## Implementation Notes
+ * ## Implementation notes
  *
  * The `Details` component has three subcomponents:
  *
  * - `Details.Summary`
  * - `Details.Text`
  * - `Details.ExpanderGroup`
- *
- * ## Usage
- *
- * ### Standard
- *
- * ```jsx
- * import { Details } from "nhsuk-react-components";
- *
- * const Element = () => {
- *     return (
- *         <Details>
- *             <Details.Summary>Where can I find my NHS number?</Details.Summary>
- *             <Details.Text>
- *                 <p>An NHS number is a 10 digit number, like 485 777 3456.</p>
- *                 <p>
- *                 You can find your NHS number on any document sent to you by the NHS. This may include:
- *                 </p>
- *                 <ul>
- *                     <li>prescriptions</li>
- *                     <li>test results</li>
- *                     <li>hospital referral letters</li>
- *                     <li>appointment letters</li>
- *                     <li>your NHS medical card</li>
- *                 </ul>
- *                 <p>Ask your GP practice for help if you can't find your NHS number.</p>
- *             </Details.Text>
- *         </Details>
- *     );
- * }
- * ```
  */
 const meta: Meta<typeof Details> = {
   title: 'Content Presentation/Details',

stories/Content Presentation/DoAndDontList.stories.tsx

@@ -4,38 +4,15 @@ import { DoAndDontList } from '#components';
 /**
  * This component can be found in the `nhsuk-frontend` repository <a href="https://github.com/nhsuk/nhsuk-frontend/tree/main/packages/nhsuk-frontend/src/nhsuk/components/do-dont-list" target="_blank" rel="noopener noreferrer">here</a>.
  *
- * ## Implementation Notes
+ * ## Implementation notes
  *
  * The `DoAndDontList` component has one subcomponent: `DoAndDontList.Item`.
  *
  * As long as a `listType` is supplied to the `DoAndDontList` component, all subcomponents will render as desired. If you require a `DoAndDontList.Item` to be different, a `listItemType` prop can be supplied to force the type.
  *
- *
  * The `DoAndDontList.Item` component can also accept a `prefixText` prop, which can be used to override the default prefix text.
  *
  * See the <b><a href="#custom-prefix-text" >custom prefix text</a></b> story for an example.
- *
- * ## Usage
- *
- * ### Standard
- *
- * ```jsx
- * import { DoAndDontList } from "nhsuk-react-components";
- *
- * const Element = () => {
- *     return (
- *         <DoAndDontList listType="do">
- *             <DoAndDontList.Item>
- *                 cover blisters that are likely to burst with a soft plaster or dressing
- *             </DoAndDontList.Item>
- *             <DoAndDontList.Item>wash your hands before touching a burst blister</DoAndDontList.Item>
- *             <DoAndDontList.Item>
- *                 allow the fluid in a burst blister to drain before covering it with a plaster or dressing
- *             </DoAndDontList.Item>
- *         </DoAndDontList>
- *     );
- * }
- * ```
  */
 const meta: Meta<typeof DoAndDontList> = {
   title: 'Content Presentation/DoAndDontList',
@@ -45,8 +22,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 +39,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 +73,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

@@ -5,32 +5,13 @@ import { NotificationBannerLink } from '#components/content-presentation/notific
 /**
  * This component can be found in the `nhsuk-frontend` repository <a href="https://github.com/nhsuk/nhsuk-frontend/tree/main/packages/nhsuk-frontend/src/nhsuk/components/notification-banner" target="_blank">here</a>.
  *
- * ## Implementation Notes
+ * ## Implementation notes
  *
  * The `NotificationBanner` component has three subcomponents:
  *
  * - `NotificationBanner.Title`
  * - `NotificationBanner.Heading`
  * - `NotificationBanner.Link`
- *
- * ## Usage
- *
- * ### Standard
- *
- * ```jsx
- * import { NotificationBanner } from "nhsuk-react-components";
- *
- * const Element = () => {
- *     return (
- *         <NotificationBanner>
- *             <NotificationBanner.Heading>Patient record updated</Details.Summary>
- *             <p>
- *                 Contact <NotificationBanner.Link href="#">example@department.nhs.uk</NotificationBanner.Link> if you think there&#39;s a problem.
- *             </p>
- *         </NotificationBanner>
- *     );
- * }
- * ```
  */
 const meta: Meta<typeof NotificationBanner> = {
   title: 'Content Presentation/Notification Banner',
@@ -41,8 +22,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 +32,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 +49,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 +63,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 +73,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 +86,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 +109,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/Button.stories.tsx

@@ -4,37 +4,37 @@ import { Button } from '#components';
 /**
  * This component can be found in the `nhsuk-frontend` repository <a href="https://github.com/nhsuk/nhsuk-frontend/tree/main/packages/components/button" target="_blank" rel="noopener noreferrer">here</a>.
  *
- * ## Implementation Notes
+ * ## Implementation notes
  *
  * The `Button` component from `nhsuk-react-components` will either render a standard `<button>` or `<a>` element depending on whether an `href` prop is supplied.
  *
  * If you want to use a specific component instead of the wrapper, you can supply the `as="a"` or `as="button"` props.
  *
  * ## Usage
  *
- * ### Standard
+ * ### As a button
  *
  * ```jsx
  * import { Button } from "nhsuk-react-components";
  *
  * const Element = () => {
- *     return (
- *         <Button>Button</Button>
- *     );
+ *   return (
+ *     <Button>Button</Button>
+ *   );
  * }
  * ```
  *
- * ### As a Link
+ * ### As a link
  *
  * ```jsx
  * import { Button } from "nhsuk-react-components";
  *
  * const ButtonEl = () => (
- *     <Button as="a">Anchor</Button>
+ *   <Button as="a">Anchor</Button>
  * );
  *
  * const ButtonEl2 = () => (
- *     <Button href="/link">Anchor</Button>
+ *   <Button href="/link">Anchor</Button>
  * );
  * ```
  */