From f143c716a1ba709566fa9d3622c39e2e3e01a2dd Mon Sep 17 00:00:00 2001 From: Kai Date: Fri, 1 Dec 2023 16:25:40 +0000 Subject: [PATCH 1/6] 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: () =>` --- stories/Components/Card.stories.tsx | 2 +- stories/Components/CareCard.stories.tsx | 30 ++++++++++++------- stories/Components/Checkboxes.stories.tsx | 16 +++++----- stories/Components/ContentsList.stories.tsx | 2 +- stories/Components/Details.stories.tsx | 2 +- stories/Components/DoDontList.stories.tsx | 4 +-- stories/Components/ErrorMessage.stories.tsx | 4 ++- stories/Components/ErrorSummary.stories.tsx | 2 +- stories/Components/Fieldset.stories.tsx | 4 +-- stories/Components/Footer.stories.tsx | 4 +-- stories/Components/Grid.stories.tsx | 2 +- stories/Components/Header.stories.tsx | 22 +++++++------- stories/Components/Hero.stories.tsx | 6 ++-- stories/Components/Hint.stories.tsx | 2 +- stories/Components/Icons.stories.tsx | 26 ++++++++-------- stories/Components/ListPanel.stories.tsx | 2 +- stories/Components/NavAZ.stories.tsx | 2 +- stories/Components/Pagination.stories.tsx | 2 +- stories/Components/Radios.stories.tsx | 14 ++++----- stories/Components/Select.stories.tsx | 4 +-- stories/Components/Table.stories.tsx | 6 ++-- stories/Components/Tag.stories.tsx | 2 +- stories/Components/WarningCallout.stories.tsx | 8 ++--- stories/Deprecated/Panel.stories.tsx | 8 ++--- stories/Deprecated/Promo.stories.tsx | 10 +++---- .../DateInput.stories.tsx | 12 ++++---- 26 files changed, 105 insertions(+), 93 deletions(-) diff --git a/stories/Components/Card.stories.tsx b/stories/Components/Card.stories.tsx index a00fa089..085d1ee5 100644 --- a/stories/Components/Card.stories.tsx +++ b/stories/Components/Card.stories.tsx @@ -12,7 +12,7 @@ export default meta; type Story = StoryObj; export const Standard: Story = { - render: () => ( + render: (args) => ( If you need help now but it's not an emergency diff --git a/stories/Components/CareCard.stories.tsx b/stories/Components/CareCard.stories.tsx index ced03815..9a0aed7e 100644 --- a/stories/Components/CareCard.stories.tsx +++ b/stories/Components/CareCard.stories.tsx @@ -48,10 +48,12 @@ const meta: Meta = { component: CareCard, }; export default meta; + type Story = StoryObj; export const NonUrgent: Story = { - render: (): JSX.Element => ( - + args: { type: 'non-urgent' }, + render: (args): JSX.Element => ( + Speak to a GP if:
    @@ -69,8 +71,9 @@ export const NonUrgent: Story = { }; export const Urgent: Story = { - render: () => ( - + args: { type: 'urgent' }, + render: (args) => ( + Ask for an urgent GP appointment if:
      @@ -94,8 +97,9 @@ export const Urgent: Story = { }; export const Immediate: Story = { - render: () => ( - + args: { type: 'immediate' }, + render: (args) => ( + Call 999 if you have sudden chest pain that:
        @@ -113,8 +117,11 @@ export const Immediate: Story = { }; export const WithoutVisuallyHiddenText: Story = { - render: () => ( - + args: { + type: 'non-urgent', + }, + render: (args) => ( + Speak to a GP if:
          @@ -135,8 +142,11 @@ export const WithoutVisuallyHiddenText: Story = { }; export const WithCustomVisuallyHiddenText: Story = { - render: () => ( - + args: { + type: 'non-urgent', + }, + render: (args) => ( + Speak to a GP if:
            diff --git a/stories/Components/Checkboxes.stories.tsx b/stories/Components/Checkboxes.stories.tsx index 6c7a2724..7b5e72a8 100644 --- a/stories/Components/Checkboxes.stories.tsx +++ b/stories/Components/Checkboxes.stories.tsx @@ -38,10 +38,11 @@ export default meta; type Story = StoryObj; export const Standard: Story = { - render: () => ( + render: (args) => (
            What is your nationality? ( + render: (args) => (
            How do you want to sign in? @@ -82,7 +83,7 @@ export const WithHintText: Story = { }; export const WithDisabledItem: Story = { - render: () => ( + render: (args) => ( Red Green @@ -94,7 +95,7 @@ export const WithDisabledItem: Story = { }; export const WithConditionalContent: Story = { - render: () => ( + render: (args) => (
            Which types of waste do you transport regularly? @@ -109,7 +110,7 @@ export const WithConditionalContent: Story = { }; export const WithLegendAsPageHeading: Story = { - render: () => ( + render: (args) => (
            Which types of waste do you transport regularly? @@ -124,7 +125,7 @@ export const WithLegendAsPageHeading: Story = { }; export const WithErrorBoolean: Story = { - render: function WithErrorBooleanRender() { + render: (args) => { const [errorToggle, setErrorToggle] = React.useState(true); return ( <> @@ -154,7 +155,7 @@ export const WithErrorBoolean: Story = { }; export const WithErrorString: Story = { - render: function WithErrorStringRender() { + render: (args) => { const [error, setError] = React.useState('Please select an option'); return ( <> @@ -176,6 +177,5 @@ export const WithErrorString: Story = { ); }, - name: 'With Error (String)', }; diff --git a/stories/Components/ContentsList.stories.tsx b/stories/Components/ContentsList.stories.tsx index 3e5038d1..b89014a5 100644 --- a/stories/Components/ContentsList.stories.tsx +++ b/stories/Components/ContentsList.stories.tsx @@ -49,7 +49,7 @@ export default meta; type Story = StoryObj; export const Standard: Story = { - render: () => ( + render: (args) => ( What is AMD? diff --git a/stories/Components/Details.stories.tsx b/stories/Components/Details.stories.tsx index c49316f5..19f323b1 100644 --- a/stories/Components/Details.stories.tsx +++ b/stories/Components/Details.stories.tsx @@ -125,7 +125,7 @@ export const Expander: Story = { }; export const ExpanderGroup: Story = { - render: () => ( + render: (args) => (
            How to measure your blood glucose levels diff --git a/stories/Components/DoDontList.stories.tsx b/stories/Components/DoDontList.stories.tsx index 254740ea..eb10fde7 100644 --- a/stories/Components/DoDontList.stories.tsx +++ b/stories/Components/DoDontList.stories.tsx @@ -41,7 +41,7 @@ export default meta; type Story = StoryObj; export const Do: Story = { - render: () => ( + render: (args) => ( cover blisters that are likely to burst with a soft plaster or dressing @@ -55,7 +55,7 @@ export const Do: Story = { }; export const Dont: Story = { - render: () => ( + render: (args) => ( do not burst a blister yourself do not peel the skin off a burst blister diff --git a/stories/Components/ErrorMessage.stories.tsx b/stories/Components/ErrorMessage.stories.tsx index 909d25eb..dce73116 100644 --- a/stories/Components/ErrorMessage.stories.tsx +++ b/stories/Components/ErrorMessage.stories.tsx @@ -32,7 +32,9 @@ const meta: Meta = { export default meta; type Story = StoryObj; -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 } }, diff --git a/stories/Components/ErrorSummary.stories.tsx b/stories/Components/ErrorSummary.stories.tsx index d9bc3264..499c9985 100644 --- a/stories/Components/ErrorSummary.stories.tsx +++ b/stories/Components/ErrorSummary.stories.tsx @@ -49,7 +49,7 @@ export default meta; type Story = StoryObj; export const Standard: Story = { - render: () => ( + render: (args) => ( There is a problem diff --git a/stories/Components/Fieldset.stories.tsx b/stories/Components/Fieldset.stories.tsx index 7b0fe9dd..d66b4e4c 100644 --- a/stories/Components/Fieldset.stories.tsx +++ b/stories/Components/Fieldset.stories.tsx @@ -40,7 +40,7 @@ type Story = StoryObj; export const Standard: Story = {}; export const AsAPageHeading: Story = { - render: () => ( + render: (args) => (
            What is your address?
            @@ -48,7 +48,7 @@ export const AsAPageHeading: Story = { }; export const WithCustomLegendSize: Story = { - render: () => ( + render: (args) => (
            What is your address?
            diff --git a/stories/Components/Footer.stories.tsx b/stories/Components/Footer.stories.tsx index a7cf222d..c2fa342f 100644 --- a/stories/Components/Footer.stories.tsx +++ b/stories/Components/Footer.stories.tsx @@ -10,7 +10,7 @@ export default meta; type Story = StoryObj; export const Standard: Story = { - render: () => ( + render: (args) => ( <>