Update storybook documentation inconsistencies (#183)

* Updates stories to have docs where the `Show Code` is exactly as needed to copy and paste. Adding an unused `args` parameter to the custom render function fixes the rendering to not include `render: () =>`

* Upgrade storybook version

* Adds .displayName to all dot notation components, as without this storybook strips the dot

* Disable no unused vars for stories files. this is required for storybook to render as we want.

* Correct lint rule, fix other lint issue of hook in story file

* Revert package bumps

Author: KaiSpencer

.eslintrc

@@ -32,6 +32,10 @@
         "jsx-a11y/anchor-has-content": 0,
         "jsx-a11y/alt-text": 0,
         "jsx-a11y/heading-has-content": 0,
-        "react-hooks/exhaustive-deps": 0
-    }
+        "react-hooks/exhaustive-deps": 0,
+    },
+    "overrides": [{
+        "files": ["*.stories.tsx"],
+        "rules": {"@typescript-eslint/no-unused-vars":"off"}
+    }]
 }

stories/Components/Breadcrumb.stories.tsx

@@ -44,6 +44,9 @@ const meta: Meta<typeof Breadcrumb> = {
 export default meta;
 type Story = StoryObj<typeof Breadcrumb>;
 
+Breadcrumb.Item.displayName = 'Breadcrumb.Item';
+Breadcrumb.Back.displayName = 'Breadcrumb.Back';
+
 export const Standard: Story = {};
 
 export const OverrideAriaLabel: Story = {

stories/Components/Card.stories.tsx

@@ -11,8 +11,16 @@ const meta: Meta<typeof Card> = {
 export default meta;
 type Story = StoryObj<typeof Card>;
 
+Card.Content.displayName = 'Card.Content';
+Card.Heading.displayName = 'Card.Heading';
+Card.Description.displayName = 'Card.Description';
+Card.Link.displayName = 'Card.Link';
+Card.Image.displayName = 'Card.Image';
+Card.Group.displayName = 'Card.Group';
+Card.GroupItem.displayName = 'Card.GroupItem';
+
 export const Standard: Story = {
-  render: () => (
+  render: (args) => (
     <Card>
       <Card.Content>
         <Card.Heading>If you need help now but it&apos;s not an emergency</Card.Heading>

stories/Components/CareCard.stories.tsx

@@ -48,10 +48,15 @@ const meta: Meta<typeof CareCard> = {
   component: CareCard,
 };
 export default meta;
+
+CareCard.Heading.displayName = 'CareCard.Heading';
+CareCard.Content.displayName = 'CareCard.Content';
+
 type Story = StoryObj<typeof CareCard>;
 export const NonUrgent: Story = {
-  render: (): JSX.Element => (
-    <CareCard type="non-urgent">
+  args: { type: 'non-urgent' },
+  render: (args): JSX.Element => (
+    <CareCard type={args.type}>
       <CareCard.Heading>Speak to a GP if:</CareCard.Heading>
       <CareCard.Content>
         <ul>
@@ -69,8 +74,9 @@ export const NonUrgent: Story = {
 };
 
 export const Urgent: Story = {
-  render: () => (
-    <CareCard type="urgent">
+  args: { type: 'urgent' },
+  render: (args) => (
+    <CareCard type={args.type}>
       <CareCard.Heading>Ask for an urgent GP appointment if:</CareCard.Heading>
       <CareCard.Content>
         <ul>
@@ -94,8 +100,9 @@ export const Urgent: Story = {
 };
 
 export const Immediate: Story = {
-  render: () => (
-    <CareCard type="immediate">
+  args: { type: 'immediate' },
+  render: (args) => (
+    <CareCard type={args.type}>
       <CareCard.Heading>Call 999 if you have sudden chest pain that:</CareCard.Heading>
       <CareCard.Content>
         <ul>
@@ -113,8 +120,11 @@ export const Immediate: Story = {
 };
 
 export const WithoutVisuallyHiddenText: Story = {
-  render: () => (
-    <CareCard type="non-urgent">
+  args: {
+    type: 'non-urgent',
+  },
+  render: (args) => (
+    <CareCard type={args.type}>
       <CareCard.Heading visuallyHiddenText={false}>Speak to a GP if:</CareCard.Heading>
       <CareCard.Content>
         <ul>
@@ -135,8 +145,11 @@ export const WithoutVisuallyHiddenText: Story = {
 };
 
 export const WithCustomVisuallyHiddenText: Story = {
-  render: () => (
-    <CareCard type="non-urgent">
+  args: {
+    type: 'non-urgent',
+  },
+  render: (args) => (
+    <CareCard type={args.type}>
       <CareCard.Heading visuallyHiddenText="Custom Hidden Text">Speak to a GP if:</CareCard.Heading>
       <CareCard.Content>
         <ul>

stories/Components/Checkboxes.stories.tsx

@@ -37,11 +37,14 @@ const meta: Meta<typeof Checkboxes> = {
 export default meta;
 type Story = StoryObj<typeof Checkboxes>;
 
+Checkboxes.Box.displayName = 'Checkboxes.Box';
+
 export const Standard: Story = {
-  render: () => (
+  render: (args) => (
     <Fieldset aria-describedby="nationality--hint">
       <Fieldset.Legend>What is your nationality?</Fieldset.Legend>
       <Checkboxes
+        idPrefix={args.idPrefix}
         name="nationality"
         id="nationality"
         hint="If you have more than 1 nationality, select all options that are relevant to you."
@@ -55,7 +58,7 @@ export const Standard: Story = {
 };
 
 export const WithHintText: Story = {
-  render: () => (
+  render: (args) => (
     <Fieldset>
       <Fieldset.Legend isPageHeading>How do you want to sign in?</Fieldset.Legend>
       <Checkboxes>
@@ -82,7 +85,7 @@ export const WithHintText: Story = {
 };
 
 export const WithDisabledItem: Story = {
-  render: () => (
+  render: (args) => (
     <Checkboxes id="colours" name="colours">
       <Checkboxes.Box value="red">Red</Checkboxes.Box>
       <Checkboxes.Box value="green">Green</Checkboxes.Box>
@@ -94,7 +97,7 @@ export const WithDisabledItem: Story = {
 };
 
 export const WithConditionalContent: Story = {
-  render: () => (
+  render: (args) => (
     <Fieldset aria-describedby="waste--hint">
       <Fieldset.Legend isPageHeading>
         Which types of waste do you transport regularly?
@@ -109,7 +112,7 @@ export const WithConditionalContent: Story = {
 };
 
 export const WithLegendAsPageHeading: Story = {
-  render: () => (
+  render: (args) => (
     <Fieldset aria-describedby="waste--hint">
       <Fieldset.Legend isPageHeading>
         Which types of waste do you transport regularly?
@@ -124,7 +127,8 @@ export const WithLegendAsPageHeading: Story = {
 };
 
 export const WithErrorBoolean: Story = {
-  render: function WithErrorBooleanRender() {
+  render: (args) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [errorToggle, setErrorToggle] = React.useState(true);
     return (
       <>
@@ -154,7 +158,8 @@ export const WithErrorBoolean: Story = {
 };
 
 export const WithErrorString: Story = {
-  render: function WithErrorStringRender() {
+  render: (args) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [error, setError] = React.useState('Please select an option');
     return (
       <>
@@ -176,6 +181,5 @@ export const WithErrorString: Story = {
       </>
     );
   },
-
   name: 'With Error (String)',
 };

stories/Components/ContentsList.stories.tsx

@@ -48,8 +48,10 @@ const meta: Meta<typeof ContentsList> = {
 export default meta;
 type Story = StoryObj<typeof ContentsList>;
 
+ContentsList.Item.displayName = 'ContentsList.Item';
+
 export const Standard: Story = {
-  render: () => (
+  render: (args) => (
     <ContentsList aria-label="Pages in this guide">
       <ContentsList.Item current aria-current="page">
         What is AMD?

stories/Components/Details.stories.tsx

@@ -50,6 +50,10 @@ const meta: Meta<typeof Details> = {
 export default meta;
 type Story = StoryObj<typeof Details>;
 
+Details.Summary.displayName = 'Details.Summary';
+Details.Text.displayName = 'Details.Text';
+Details.ExpanderGroup.displayName = 'Details.ExpanderGroup';
+
 export const Standard: Story = {
   argTypes: { expander: { table: { disable: true } } },
   render: ({ expander }) => (
@@ -125,7 +129,7 @@ export const Expander: Story = {
 };
 
 export const ExpanderGroup: Story = {
-  render: () => (
+  render: (args) => (
     <Details.ExpanderGroup>
       <Details expander>
         <Details.Summary>How to measure your blood glucose levels</Details.Summary>

stories/Components/DoDontList.stories.tsx

@@ -45,8 +45,10 @@ const meta: Meta<typeof DoDontList> = {
 export default meta;
 type Story = StoryObj<typeof DoDontList>;
 
+DoDontList.Item.displayName = 'DoDontList.Item';
+
 export const Do: Story = {
-  render: () => (
+  render: (args) => (
     <DoDontList listType="do">
       <DoDontList.Item>
         cover blisters that are likely to burst with a soft plaster or dressing
@@ -60,7 +62,7 @@ export const Do: Story = {
 };
 
 export const Dont: Story = {
-  render: () => (
+  render: (args) => (
     <DoDontList listType="dont">
       <DoDontList.Item>burst a blister yourself</DoDontList.Item>
       <DoDontList.Item>peel the skin off a burst blister</DoDontList.Item>

stories/Components/ErrorMessage.stories.tsx

@@ -32,7 +32,9 @@ const meta: Meta<typeof ErrorMessage> = {
 export default meta;
 type Story = StoryObj<typeof ErrorMessage>;
 
-export const Standard: Story = { argTypes: { visuallyHiddenText: { control: false } } };
+export const Standard: Story = {
+  argTypes: { visuallyHiddenText: { control: false } },
+};
 export const NoVisuallyHiddenText: Story = {
   args: { visuallyHiddenText: false },
   argTypes: { visuallyHiddenText: { control: false } },

stories/Components/ErrorSummary.stories.tsx

@@ -48,8 +48,13 @@ const meta: Meta<typeof ErrorSummary> = {
 export default meta;
 type Story = StoryObj<typeof ErrorSummary>;
 
+ErrorSummary.Title.displayName = 'ErrorSummary.Title';
+ErrorSummary.Body.displayName = 'ErrorSummary.Body';
+ErrorSummary.List.displayName = 'ErrorSummary.List';
+ErrorSummary.Item.displayName = 'ErrorSummary.Item';
+
 export const Standard: Story = {
-  render: () => (
+  render: (args) => (
     <ErrorSummary aria-labelledby="error-summary-title" role="alert" tabIndex={-1}>
       <ErrorSummary.Title id="error-summary-title">There is a problem</ErrorSummary.Title>
       <ErrorSummary.Body>