diff --git a/src/components/navigation/action-link/README.md b/src/components/navigation/action-link/README.md index 0550c327b..2d434cc73 100644 --- a/src/components/navigation/action-link/README.md +++ b/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). diff --git a/stories/Content Presentation/Details.stories.tsx b/stories/Content Presentation/Details.stories.tsx index 4b4741637..2c9a1606e 100644 --- a/stories/Content Presentation/Details.stories.tsx +++ b/stories/Content Presentation/Details.stories.tsx @@ -4,43 +4,13 @@ import { Details } from '#components'; /** * This component can be found in the `nhsuk-frontend` repository here. * - * ## 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 ( - *
- * Where can I find my NHS number? - * - *

An NHS number is a 10 digit number, like 485 777 3456.

- *

- * You can find your NHS number on any document sent to you by the NHS. This may include: - *

- * - *

Ask your GP practice for help if you can't find your NHS number.

- * - *
- * ); - * } - * ``` */ const meta: Meta = { title: 'Content Presentation/Details', diff --git a/stories/Content Presentation/DoAndDontList.stories.tsx b/stories/Content Presentation/DoAndDontList.stories.tsx index a72d912f8..0089f79c1 100644 --- a/stories/Content Presentation/DoAndDontList.stories.tsx +++ b/stories/Content Presentation/DoAndDontList.stories.tsx @@ -4,38 +4,15 @@ import { DoAndDontList } from '#components'; /** * This component can be found in the `nhsuk-frontend` repository here. * - * ## 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 custom prefix text story for an example. - * - * ## Usage - * - * ### Standard - * - * ```jsx - * import { DoAndDontList } from "nhsuk-react-components"; - * - * const Element = () => { - * return ( - * - * - * cover blisters that are likely to burst with a soft plaster or dressing - * - * wash your hands before touching a burst blister - * - * allow the fluid in a burst blister to drain before covering it with a plaster or dressing - * - * - * ); - * } - * ``` */ const meta: Meta = { title: 'Content Presentation/DoAndDontList', @@ -45,8 +22,11 @@ export default meta; type Story = StoryObj; export const Do: Story = { + args: { + listType: 'do', + }, render: (args) => ( - + cover blisters that are likely to burst with a soft plaster or dressing @@ -59,8 +39,11 @@ export const Do: Story = { }; export const Dont: Story = { + args: { + listType: 'dont', + }, render: (args) => ( - + burst a blister yourself peel the skin off a burst blister pick at the edges of the remaining skin @@ -90,8 +73,11 @@ export const Dont: Story = { * | JSX | The JSX will be rendered, such as `` | */ export const CustomPrefixText: Story = { - render: () => ( - + args: { + listType: 'dont', + }, + render: (args) => ( + burst a blister yourself peel the skin off a burst blister diff --git a/stories/Content Presentation/NotificationBanner.stories.tsx b/stories/Content Presentation/NotificationBanner.stories.tsx index d247ba9df..d5d4bae25 100644 --- a/stories/Content Presentation/NotificationBanner.stories.tsx +++ b/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 here. * - * ## 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 ( - * - * Patient record updated - *

- * Contact example@department.nhs.uk if you think there's a problem. - *

- * - * ); - * } - * ``` */ const meta: Meta = { title: 'Content Presentation/Notification Banner', @@ -41,8 +22,8 @@ type Story = StoryObj; export const StandardPanel: Story = { args: {}, - render: () => ( - + render: (args) => ( + The service will be unavailable from 8pm to 9pm on Thursday 1 January 2025. @@ -51,9 +32,11 @@ export const StandardPanel: Story = { }; export const SuccessPanel: Story = { - args: {}, - render: () => ( - + args: { + success: true, + }, + render: (args) => ( + Patient record updated

Contact{' '} @@ -66,8 +49,8 @@ export const SuccessPanel: Story = { export const StandardPanelWithLink: Story = { args: {}, - render: () => ( - + render: (args) => ( + You have 7 days left to send your application.{' '} View application. @@ -80,8 +63,8 @@ export const StandardPanelWithCustomTitle: Story = { args: { title: 'Important Message', }, - render: () => ( - + render: (args) => ( + Upcoming maintenance

The service will be unavailable from 8pm to 9pm on Thursday 1 January 2025.

 @@ -90,8 +73,8 @@ export const StandardPanelWithCustomTitle: Story = { export const StandardPanelWithCustomTitleElement: Story = { args: {}, - render: () => ( - + render: (args) => ( + Maintenance @@ -103,8 +86,8 @@ export const StandardPanelWithCustomTitleElement: Story = { export const StandardPanelWithList: Story = { args: {}, - render: () => ( - + render: (args) => ( + 4 files uploaded
  • @@ -126,8 +109,8 @@ export const StandardPanelWithList: Story = { export const StandardPanelWithLotsOfContent: Story = { args: {}, - render: () => ( - + render: (args) => ( + Check if you need to apply the reverse charge to this application diff --git a/stories/Content Presentation/Panel.stories.tsx b/stories/Content Presentation/Panel.stories.tsx index d8f289cd7..2e5199472 100644 --- a/stories/Content Presentation/Panel.stories.tsx +++ b/stories/Content Presentation/Panel.stories.tsx @@ -9,8 +9,8 @@ export default meta; type Story = StoryObj; export const StandardPanel: Story = { - render: () => ( - + render: (args) => ( + Booking complete We have sent you a confirmation email @@ -18,8 +18,8 @@ export const StandardPanel: Story = { }; export const PanelWithCustomHeadingLevel: Story = { - render: () => ( - + render: (args) => ( + Booking complete We have sent you a confirmation email diff --git a/stories/Content Presentation/Tabs.stories.tsx b/stories/Content Presentation/Tabs.stories.tsx index 9f91fbbb0..01a66a613 100644 --- a/stories/Content Presentation/Tabs.stories.tsx +++ b/stories/Content Presentation/Tabs.stories.tsx @@ -18,8 +18,8 @@ export default meta; type Story = StoryObj; export const Standard: Story = { - render: () => ( - + render: (args) => ( + Contents Past day @@ -48,8 +48,8 @@ export const Standard: Story = { * It also displays if the user has JavaScript disabled. */ export const DifferentAccessibleHeading: Story = { - render: () => ( - + render: (args) => ( + Tabs title Past day diff --git a/stories/Content Presentation/Tag.stories.tsx b/stories/Content Presentation/Tag.stories.tsx index cbd3a0eca..2bf3cef5c 100644 --- a/stories/Content Presentation/Tag.stories.tsx +++ b/stories/Content Presentation/Tag.stories.tsx @@ -11,7 +11,7 @@ type Story = StoryObj; export const StandardTag: Story = { args: { children: 'Standard' } }; export const AllColours: Story = { - render: (args) => ( + render: () => (
    Started Not started diff --git a/stories/Content Presentation/WarningCallout.stories.tsx b/stories/Content Presentation/WarningCallout.stories.tsx index 97913c621..2f4210df5 100644 --- a/stories/Content Presentation/WarningCallout.stories.tsx +++ b/stories/Content Presentation/WarningCallout.stories.tsx @@ -10,7 +10,7 @@ type Story = StoryObj; export const StandardWarningCallout: Story = { render: (args) => ( - + Important

    For safety, tell your doctor or pharmacist if you're taking any other medicines, @@ -24,7 +24,7 @@ export const StandardWarningCallout: Story = { export const WarningCalloutWithCustomHeading: Story = { render: (args) => ( - + School, nursery or work

    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) => ( - + School, nursery or work

    Stay away from school, nursery or work until all the spots have crusted over. This is diff --git a/stories/Form Elements/Button.stories.tsx b/stories/Form Elements/Button.stories.tsx index caaa98f3f..0e6c64ca4 100644 --- a/stories/Form Elements/Button.stories.tsx +++ b/stories/Form Elements/Button.stories.tsx @@ -4,7 +4,7 @@ import { Button } from '#components'; /** * This component can be found in the `nhsuk-frontend` repository here. * - * ## Implementation Notes + * ## Implementation notes * * The `Button` component from `nhsuk-react-components` will either render a standard ` - * ); + * return ( + * + * ); * } * ``` * - * ### As a Link + * ### As a link * * ```jsx * import { Button } from "nhsuk-react-components"; * * const ButtonEl = () => ( - * + * * ); * * const ButtonEl2 = () => ( - * + * * ); * ``` */ diff --git a/stories/Form Elements/CharacterCount.stories.tsx b/stories/Form Elements/CharacterCount.stories.tsx index d11fa6156..6a5555e3c 100644 --- a/stories/Form Elements/CharacterCount.stories.tsx +++ b/stories/Form Elements/CharacterCount.stories.tsx @@ -12,40 +12,31 @@ import { CharacterCount } from '#components'; const meta: Meta = { 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; export const Standard: Story = { - render: () => ( - - ), + args: { + maxLength: 200, + }, }; /** * Sometimes, rather than counting the number of characters, it is useful to count the number of words instead. - * - * Use the `countType` prop to vary this behaviour. */ export const WordCountLimit: Story = { - render: () => ( - - ), + args: { + maxWords: 150, + }, }; /** @@ -54,15 +45,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: () => ( - - ), + args: { + maxLength: 112, + threshold: 75, + }, }; diff --git a/stories/Form Elements/Checkboxes.stories.tsx b/stories/Form Elements/Checkboxes.stories.tsx index 54ea1909c..7972b20c2 100644 --- a/stories/Form Elements/Checkboxes.stories.tsx +++ b/stories/Form Elements/Checkboxes.stories.tsx @@ -5,34 +5,22 @@ import { Checkboxes, TextInput } from '#components'; /** * This component can be found in the `nhsuk-frontend` repository here. * - * ## Implementation Notes + * ## Implementation notes * * For details on the new form design pattern, check the documentation for the `Form` component. * * The `Checkbox` component provides a `CheckboxesContext` context, which the `Checkboxes.Item` components use. When each box initially renders, it will attempt to assign itself an `id` by calling the `getBoxId` method in the context. This will assign each box a sequential ID using either the `idPrefix` or `name` supplied to the Checkbox. If neither are provided, the element will generate it's own unique identifier. - * - * ## Usage - * - * ### Standard - * - * ```jsx - * import { Checkboxes } from "nhsuk-react-components"; - * - * const Element = () => { - * return ( - * - * British - * Irish - * Citizen of another country - * - * ); - * } - * ``` */ const meta: Meta = { title: 'Form Elements/Checkboxes', component: Checkboxes, + args: { + legend: 'What is your nationality?', + legendProps: { isPageHeading: true, size: 'l' }, + hint: 'If you have more than 1 nationality, select all options that are relevant to you', + name: 'example', + }, }; export default meta; type Story = StoryObj; @@ -45,135 +33,95 @@ type CheckboxState = { export const Standard: Story = { render: (args) => ( -

    - - British - Irish - Citizen of another country - -
    + + British + Irish + Citizen of another country + ), }; export const WithHintText: Story = { + args: { + legend: 'How do you want to sign in?', + hint: undefined, + }, render: (args) => ( -
    - - - Sign in with Government Gateway - - - Sign in with NHS.UK login - - -
    + + + Sign in with Government Gateway + + + Sign in with NHS.UK login + + ), }; export const WithDisabledItem: Story = { render: (args) => ( -
    - - Red - Green - - Blue - - -
    + + British + Irish + + Citizen of another country + + ), }; export const WithConditionalContent: Story = { + args: { + legend: 'What types of waste do you transport regularly?', + hint: 'Select all that apply', + }, render: (args) => ( -
    - - This includes rocks and earth.

    } value="mines"> - Waste from mines or quarries -     -     -
    - ), -}; - -export const WithLegendAsPageHeading: Story = { - render: (args) => ( -
    - - Waste from animal carcasses - Waste from mines or quarries - Farm or agricultural waste - -
    + + This includes rocks and earth.

    } value="mines"> + Waste from mines or quarries +     +     ), }; export const WithExclusiveNoneOption: Story = { + args: { + legend: 'Do you have any of these symptoms?', + hint: 'Select all the symptoms you have', + }, render: (args) => ( -
    - - Sore throat - Runny nose - Muscle or joint pain - - - None - - -
    + + Sore throat + Runny nose + Muscle or joint pain + + + None + + ), }; export const WithError: Story = { + args: { + legend: 'What types of waste do you transport regularly?', + hint: 'Select all that apply', + }, render: (args) => { // eslint-disable-next-line react-hooks/rules-of-hooks const [error, setError] = useState('Please select an option'); return ( -
    - + <> + Waste from animal carcasses Waste from mines or quarries Farm or agricultural waste @@ -183,7 +131,7 @@ export const WithError: Story = { value={error} onChange={(e) => setError(e.currentTarget.value)} /> - + ); }, name: 'With Error (String)', @@ -228,7 +176,7 @@ export const NoIDSupplied: Story = { }, []); return ( -
    + <>

    Scenario: No ID Supplied

    Expected Behaviour
      @@ -268,7 +216,7 @@ export const NoIDSupplied: Story = { Box 2 Box 3 - + ); }, }; @@ -312,7 +260,7 @@ export const NameSupplied: Story = { }, []); return ( -
      + <>

      Scenario: Name Supplied

      Expected Behaviour
        @@ -352,7 +300,7 @@ export const NameSupplied: Story = { Box 2 Box 3 - + ); }, }; @@ -396,7 +344,7 @@ export const IDPrefixSupplied: Story = { }, []); return ( -
        + <>

        Scenario: ID Prefix Supplied

        Expected Behaviour
          @@ -437,7 +385,7 @@ export const IDPrefixSupplied: Story = { Box 2 Box 3 - + ); }, }; @@ -481,7 +429,7 @@ export const IDPrefixAndNameSupplied: Story = { }, []); return ( -
          + <>

          Scenario: ID Prefix and Name Supplied

          Expected Behaviour
            @@ -517,12 +465,12 @@ export const IDPrefixAndNameSupplied: Story = {
          Component
          - + Box 1 Box 2 Box 3 - + ); }, }; @@ -555,7 +503,7 @@ export const OnChangeAndOnInputHandlers: Story = { }; return ( -
          + <>

          Scenario: onChange and onInput handlers are bound without any other props

          Expected Behaviour
            @@ -583,7 +531,7 @@ export const OnChangeAndOnInputHandlers: Story = {
          • {event}
            • ))}
          -
          + ); }, }; diff --git a/stories/Form Elements/DateInput.stories.tsx b/stories/Form Elements/DateInput.stories.tsx index 516f13a32..674c18552 100644 --- a/stories/Form Elements/DateInput.stories.tsx +++ b/stories/Form Elements/DateInput.stories.tsx @@ -5,13 +5,18 @@ import { DateInput, type DateInputValue } from '#components'; const meta: Meta = { title: 'Form Elements/DateInput', component: DateInput, + args: { + legend: 'What is your date of birth?', + legendProps: { isPageHeading: true, size: 'l' }, + hint: 'For example, 15 3 1984', + }, }; export default meta; type Story = StoryObj; export const Standard: Story = { - render: () => ( -
          + render: (args) => ( + <>

          Scenario: onChange and onInput handlers are bound without any other props

          Expected Behaviour
            @@ -19,19 +24,14 @@ export const Standard: Story = {
          • The value is passed through
          Component
          - console.log(e.target.value)} - /> -
          + console.log(e.target.value)} {...args} /> + ), }; export const StandardWithError: Story = { - render: () => ( -
          + render: (args) => ( + <>

          Scenario: onChange and onInput handlers are bound without any other props

          Expected Behaviour
            @@ -40,119 +40,91 @@ export const StandardWithError: Story = {
          Component
          console.log(e.target.value)} + {...args} /> -
          Component with specific field errors
          +
          Component with specific field errors
          console.log(e.target.value)} + {...args} > -
          + ), }; export const PrePopulatedIndividualComponents: Story = { - render: () => { + render: (args) => { const defaultValue = { day: '20', month: '09', year: '1996' }; return ( -
          -
          Component
          - - - - - -
          + + + + + ); }, }; export const PrePopulatedWrapper: Story = { - render: () => { - const defaultValue = { day: '20', month: '09', year: '1996' }; - return ( -
          -
          Component
          - -
          - ); + args: { + defaultValue: { + day: '20', + month: '09', + year: '1996', + }, + }, + render: (args) => { + return ; }, }; export const ControlledElementIndividualComponents: Story = { - render: () => { - const value = { day: '20', month: '09', year: '1996' }; + args: { + value: { + day: '20', + month: '09', + year: '1996', + }, + }, + render: ({ value, ...args }) => { return ( -
          -
          Component
          - - - - - -
          + + + + + ); }, }; export const ControlledElementWrapper: Story = { - render: () => { - const value = { day: '20', month: '09', year: '1996' }; - return ( -
          -
          Component
          - -
          - ); + args: { + value: { + day: '20', + month: '09', + year: '1996', + }, + }, + render: (args) => { + return ; }, }; export const ChangeableControlledElement: Story = { - render: function ChangeableControlledElementRender() { + render: function ChangeableControlledElementRender(args) { const [value, setValue] = useState | undefined>({ day: '20', month: '09', year: '1996', }); - return ( - setValue(e.currentTarget.value)} - /> - ); + return setValue(e.currentTarget.value)} {...args} />; }, }; diff --git a/stories/Form Elements/ErrorMessage.stories.tsx b/stories/Form Elements/ErrorMessage.stories.tsx index a60c23d38..f72a05fdd 100644 --- a/stories/Form Elements/ErrorMessage.stories.tsx +++ b/stories/Form Elements/ErrorMessage.stories.tsx @@ -3,24 +3,6 @@ import { ErrorMessage } from '#components'; /** * This component can be found in the `nhsuk-frontend` repository here. - * - * ## Implementation Notes - * - * The `ErrorMessage` component has a default `visuallyHiddenText` of "Error: ". This can be overriden using `visuallyHiddenText`. - * - * ## Usage - * - * ### Standard - * - * ```jsx - * import { ErrorMessage } from "nhsuk-react-components"; - * - * const Element = () => { - * return ( - * Enter your full name - * ); - * } - * ``` */ const meta: Meta = { title: 'Form Elements/ErrorMessage', @@ -28,13 +10,19 @@ const meta: Meta = { args: { children: 'Enter your full name', }, + argTypes: { + visuallyHiddenText: { + control: 'text', + table: { + defaultValue: { summary: 'Error' }, + }, + }, + }, }; export default meta; type Story = StoryObj; -export const Standard: Story = { - argTypes: { visuallyHiddenText: { control: false } }, -}; +export const Standard: Story = {}; export const CustomVisuallyHiddenText: Story = { args: { visuallyHiddenText: 'Custom' }, diff --git a/stories/Form Elements/ErrorSummary.stories.tsx b/stories/Form Elements/ErrorSummary.stories.tsx index 16efba9b4..79002df37 100644 --- a/stories/Form Elements/ErrorSummary.stories.tsx +++ b/stories/Form Elements/ErrorSummary.stories.tsx @@ -4,35 +4,13 @@ import { ErrorSummary } from '#components'; /** * This component can be found in the `nhsuk-frontend` repository here. * - * ## Implementation Notes + * ## Implementation notes * * The `ErrorSummary` component has three subcomponents: * * - `ErrorSummary.Title` * - `ErrorSummary.List` * - `ErrorSummary.ListItem` - * - * ## Usage - * - * ### Standard - * - * ```jsx - * import { ErrorSummary } from "nhsuk-react-components"; - * - * const Element = () => { - * return ( - * - * There is a problem - *

          Describe the errors and how to correct them

          - * - * - * Date of birth must be in the past - * - * - *           - * ); - * } - * ``` */ const meta: Meta = { title: 'Form Elements/ErrorSummary', @@ -43,7 +21,7 @@ type Story = StoryObj; export const Standard: Story = { render: (args) => ( - + There is a problem Enter your full name @@ -54,7 +32,7 @@ export const Standard: Story = { export const WithDescription: Story = { render: (args) => ( - + There is a problem

          Describe the errors and how to correct them

          @@ -67,8 +45,11 @@ export const WithDescription: Story = { }; export const WithAutoFocusDisabled: Story = { + args: { + disableAutoFocus: true, + }, render: (args) => ( - + There is a problem diff --git a/stories/Form Elements/Fieldset.stories.tsx b/stories/Form Elements/Fieldset.stories.tsx index 9441b6c04..cb4e4c16d 100644 --- a/stories/Form Elements/Fieldset.stories.tsx +++ b/stories/Form Elements/Fieldset.stories.tsx @@ -3,28 +3,6 @@ import { Fieldset, TextInput } from '#components'; /** * This component can be found in the `nhsuk-frontend` repository here. - * - * ## Implementation Notes - * - * The `Fieldset` component has one subcomponent: `Fieldset.Legend`. - * - * The `Fieldset.Legend` component has one default prop: `headingLevel: 'h1'`. This can be overridden and any valid heading level can be used (i.e. `h1`, `h2`). - * - * ## Usage - * - * ### Standard - * - * ```jsx - * import { Fieldset } from "nhsuk-react-components"; - * - * const Element = () => { - * return ( - *
          - * What is your address? - *
          - * ); - * } - * ``` */ const meta: Meta = { title: 'Form Elements/Fieldset', @@ -35,8 +13,10 @@ type Story = StoryObj; export const Standard: Story = { render: (args) => ( -
          - What is your address? +
          + + What is your address? + ( -
          - What is your address? -
          - ), -}; - export const WithCustomLegendSizeS: Story = { name: 'With Bold Text (S)', render: (args) => ( -
          - What is your address? +
          + + What is your address? +
          ), }; @@ -87,8 +61,10 @@ export const WithCustomLegendSizeS: Story = { export const WithCustomLegendSizeM: Story = { name: 'With Custom Size (M)', render: (args) => ( -
          - What is your address? +
          + + What is your address? +
          ), }; @@ -96,8 +72,10 @@ export const WithCustomLegendSizeM: Story = { export const WithCustomLegendSizeL: Story = { name: 'With Custom Size (L)', render: (args) => ( -
          - What is your address? +
          + + What is your address? +
          ), }; @@ -105,8 +83,10 @@ export const WithCustomLegendSizeL: Story = { export const WithCustomLegendSizeXL: Story = { name: 'With Custom Size (XL)', render: (args) => ( -
          - What is your address? +
          + + What is your address? +
          ), }; diff --git a/stories/Form Elements/HintText.stories.tsx b/stories/Form Elements/HintText.stories.tsx index 3c0032623..995f4e0ee 100644 --- a/stories/Form Elements/HintText.stories.tsx +++ b/stories/Form Elements/HintText.stories.tsx @@ -9,10 +9,8 @@ export default meta; type Story = StoryObj; export const Standard: Story = { - render: (args) => ( - - It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 - 56 C’. - - ), + args: { + children: 'Do not include personal information like your name, date of birth or NHS number', + }, + render: (args) => , }; diff --git a/stories/Form Elements/Label.stories.tsx b/stories/Form Elements/Label.stories.tsx index bf8a793b6..a9a559ef9 100644 --- a/stories/Form Elements/Label.stories.tsx +++ b/stories/Form Elements/Label.stories.tsx @@ -7,7 +7,7 @@ const meta: Meta = { args: { children: 'National Insurance Number', size: undefined, - isPageHeading: false, + isPageHeading: true, }, argTypes: { size: { control: 'select', options: [undefined, 's', 'm', 'l', 'xl'] }, @@ -16,11 +16,9 @@ const meta: Meta = { export default meta; type Story = StoryObj; -export const Standard: Story = {}; - -export const AsPageHeading: Story = { +export const Standard: Story = { args: { - isPageHeading: true, + size: 'l', }, }; diff --git a/stories/Form Elements/Radios.stories.tsx b/stories/Form Elements/Radios.stories.tsx index 67c4dd632..e7b0dc3e6 100644 --- a/stories/Form Elements/Radios.stories.tsx +++ b/stories/Form Elements/Radios.stories.tsx @@ -5,21 +5,23 @@ import { Checkboxes, Radios, TextInput } from '#components'; const meta: Meta = { title: 'Form Elements/Radios', component: Radios, + args: { + legend: 'Have you changed your name?', + legendProps: { isPageHeading: true, size: 'l' }, + hint: 'This includes changing your last name or spelling your name differently', + }, }; export default meta; type Story = StoryObj; export const StandardRadios: Story = { + args: { + idPrefix: 'standard', + }, render: (args) => ( - + Yes - + No @@ -27,36 +29,14 @@ export const StandardRadios: Story = { }; export const InlineRadios: Story = { + args: { + idPrefix: 'inline', + inline: true, + }, render: (args) => ( - + Yes - - No - - - ), -}; - -export const DisabledRadios: Story = { - render: (args) => ( - - - Yes - - + No @@ -64,6 +44,11 @@ export const DisabledRadios: Story = { }; export const RadiosWithConditionalContent: Story = { + args: { + legend: 'Impairment requirement', + hint: 'Select relevant options', + idPrefix: 'conditional', + }, render: (args) => { const impairmentsForm = ( @@ -83,34 +68,24 @@ export const RadiosWithConditionalContent: Story = { ); return ( -
          - - - Patient requires an impairment to be added - - - Patient would prefer not to say - - -
          + + + Patient requires an impairment to be added + + Patient would prefer not to say + ); }, }; export const RadiosWithADivider: Story = { + args: { + legend: 'How do you want to sign in?', + hint: undefined, + idPrefix: 'divider', + }, render: (args) => ( - + Use Government Gateway Use NHS.UK login or @@ -120,22 +95,22 @@ export const RadiosWithADivider: Story = { }; export const RadiosWithHintsOnItems: Story = { + args: { + legend: 'How do you want to sign in?', + hint: undefined, + idPrefix: 'hints', + }, render: (args) => ( - + Use Government Gateway Use NHS.UK login @@ -143,32 +118,33 @@ export const RadiosWithHintsOnItems: Story = { ), }; -export const RadiosWithoutFieldset: Story = { +export const DisabledRadios: Story = { + args: { + idPrefix: 'disabled', + }, render: (args) => ( - - Red - Green - Blue + + + Yes + + + No + ), }; export const RadiosWithError: Story = { - render: function RadiosWithErrorRender() { + args: { + idPrefix: 'error', + }, + render: function RadiosWithErrorRender(args) { const [error, setError] = useState('Select yes if you have changed your name'); return ( <> - - - Yes - - + + Yes + No diff --git a/stories/Form Elements/Select.stories.tsx b/stories/Form Elements/Select.stories.tsx index bfb6ed244..ea9180daa 100644 --- a/stories/Form Elements/Select.stories.tsx +++ b/stories/Form Elements/Select.stories.tsx @@ -5,17 +5,22 @@ import { Select, TextInput } from '#components'; const meta: Meta = { title: 'Form Elements/Select', component: Select, + args: { + label: 'Label text goes here', + labelProps: { isPageHeading: true, size: 'l' }, + }, }; export default meta; type Story = StoryObj; export const Standard: Story = { + args: { + defaultValue: '2', + }, render: (args) => ( - NHS.UK frontend option 1 - - NHS.UK frontend option 2 - + NHS.UK frontend option 2 NHS.UK frontend option 3 @@ -24,8 +29,11 @@ export const Standard: Story = { }; export const SelectWithHintText: Story = { + args: { + hint: 'Hint text goes here', + }, render: (args) => ( - NHS.UK frontend option 1 NHS.UK frontend option 2 NHS.UK frontend option 3 @@ -34,11 +42,11 @@ export const SelectWithHintText: Story = { }; export const SelectWithError: Story = { - render: function SelectWithErrorRender() { + render: function SelectWithErrorRender(args) { const [error, setError] = useState('Error message goes here'); return ( <> - NHS.UK frontend option 1 NHS.UK frontend option 2 NHS.UK frontend option 3 @@ -51,17 +59,15 @@ export const SelectWithError: Story = { name: 'Select With Error (String)', }; -export const SelectWithErrorAndHintString: Story = { - render: function SelectWithErrorAndHintStringRender() { +export const SelectWithErrorAndHintText: Story = { + args: { + hint: 'Hint text goes here', + }, + render: function SelectWithErrorAndHintTextRender(args) { const [error, setError] = useState('Error message goes here'); return ( <> - NHS.UK frontend option 1 NHS.UK frontend option 2 NHS.UK frontend option 3 diff --git a/stories/Form Elements/TextInput.stories.tsx b/stories/Form Elements/TextInput.stories.tsx index 277c7c99c..9cc2228c9 100644 --- a/stories/Form Elements/TextInput.stories.tsx +++ b/stories/Form Elements/TextInput.stories.tsx @@ -8,6 +8,7 @@ const meta: Meta = { id: 'input-example', name: 'test-name', label: 'National Insurance number', + labelProps: { isPageHeading: true, size: 'l' }, }, argTypes: { ref: { table: { disable: true } }, @@ -24,24 +25,6 @@ export const WithHintText: Story = { }, }; -export const WithLabelAsPageHeading: Story = { - args: { - labelProps: { - isPageHeading: true, - size: 'l', - }, - hint: 'It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.', - }, - parameters: { - docs: { - description: { - story: - 'To be used when the input label should also be a page heading - such as when it is the main question on a page.', - }, - }, - }, -}; - export const WithError: Story = { args: { error: 'Error message goes here', diff --git a/stories/Form Elements/Textarea.stories.tsx b/stories/Form Elements/Textarea.stories.tsx index b61009d03..10077c826 100644 --- a/stories/Form Elements/Textarea.stories.tsx +++ b/stories/Form Elements/Textarea.stories.tsx @@ -6,6 +6,9 @@ const meta: Meta = { title: 'Form Elements/Textarea', component: Textarea, 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', id: 'example', name: 'example', rows: 5, @@ -14,46 +17,20 @@ const meta: Meta = { export default meta; type Story = StoryObj; -export const Standard: Story = { - args: { - label: 'Can you provide more detail?', - labelProps: { size: 'l' }, - hint: 'Do not include personal information, like your name, date of birth or NHS number', - }, -}; - -export const WithLabelAsPageHeading: Story = { - 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', - autoComplete: 'street-address', - }, -}; +export const Standard: Story = {}; export const TextareaWithAutoCompleteAttribute: Story = { args: { - label: 'Can you provide more detail?', - labelProps: { size: 'l' }, - hint: 'Do not include personal information, like your name, date of birth or NHS number', autoComplete: 'street-address', }, }; export const TextareaWithError: Story = { - render: function TextareaWithErrorRender() { + render: function TextareaWithErrorRender(args) { const [error, setError] = useState('You must provide an explanation'); return ( <> -