Upgrade to NHS.UK frontend v10.2

[colinrotherham]

This PR upgrades the React components to NHS.UK frontend v10.2

Smaller (and inline) buttons are now included but I've included the upgrade guide content below too

---

Use the password input component to help users accessibly enter passwords

The password input component from NHS.UK frontend v10.2 allows users to choose:

• whether their passwords are visible or not
• to enter their passwords in plain text

This helps users use longer and more complex passwords without needing to remember what they've already typed.

Smaller versions of buttons

You can now use smaller versions of buttons by adding the small prop.

Add inline buttons to text inputs and select menus

You can now add inline buttons to text inputs and select menus using the formGroupProps.afterInput prop.

<TextInput
  formGroupProps={{
    afterInput: () => (
      <Button secondary small>
        Search
      </Button>
    ),
  }},
/>

Add a 'code' prop for text inputs that accept codes and sequences

We've added a new code prop for the text input component. This improves readability of text inputs that receive codes and sequences (like NHS numbers, security codes or booking references).

  <TextInput
    label="What is your NHS number?"
    labelProps={{ isPageHeading: true, size: 'l' }}
    inputMode="numeric"
    spellCheck="false"
    width="10"
+   code
  />

Add a 'divider' between select options

Newer browsers support using <hr> (horizontal rule) elements inside a <select> element to help visually break up options for better readability.

We've added a new <Select.Divider /> child component for select menus to support this feature. For example:

  <Select>
    <Select.Option value="first-name-ascending">First name (A to Z)</Select.Option>
    <Select.Option value="first-name-descending">First name (Z to A)</Select.Option>
+   <Select.Divider />
    <Select.Option value="last-name-ascending">Last name (A to Z)</Select.Option>
    <Select.Option value="last-name-descending">Last name (Z to A)</Select.Option>
  </Select>

[colinrotherham]

Rebased with main now #305 has merged

[mikeathan-nhs]

A potential issue in the Do List, the <ul> is missing an explicit role="list".
eg <ul class="nhsuk-list nhsuk-list--tick" role="list">

In the NHS service manual examples include this explicitly. The explicit role="list" ensures screen readers still identify them as lists for assistive technology users.

Also worth noting: a new Task List component has been added in the latest nhsuk-frontend library, which may be worth reviewing to see if it needs implementing.

[colinrotherham]

Thanks @mikeathan-nhs

A potential issue in the Do List, the <ul> is missing an explicit role="list".
eg <ul class="nhsuk-list nhsuk-list--tick" role="list">

Thanks for flagging this.

Like with #316 (comment), do you want it including?

It would be great if someone could implement #68 (comment) using our NHS.UK frontend fixtures

Also worth noting: a new Task List component has been added in the latest nhsuk-frontend library, which may be worth reviewing to see if it needs implementing.

Yeah this was missed from NHS.UK frontend v9.1.0 in previous updates to this library

I'm not viewing it as a blocker for the v6.x beta releases but would be great to see it contributed

[mikeathan-nhs]

Thanks @mikeathan-nhs

A potential issue in the Do List, the <ul> is missing an explicit role="list".
eg <ul class="nhsuk-list nhsuk-list--tick" role="list">

Thanks for flagging this.

Like with #316 (comment), do you want it including?

It would be great if someone could implement #68 (comment) using our NHS.UK frontend fixtures

Also worth noting: a new Task List component has been added in the latest nhsuk-frontend library, which may be worth reviewing to see if it needs implementing.

Yeah this was missed from NHS.UK frontend v9.1.0 in previous updates to this library

I'm not viewing it as a blocker for the v6.x beta releases but would be great to see it contributed

Regarding role="list", it could be included in this PR for completeness, or addressed in a follow-up.

[sonarqubecloud]

Quality Gate passed

Issues
4 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.2% Duplication on New Code

See analysis details on SonarQube Cloud

[colinrotherham]

The missing role="list" has been added in a334d5c

Ready for review again @mikeathan-nhs

Thanks

[mikeathan-nhs]

The work in this branch is matching the behaviour and layout as defined in the service manual and nhsuk-frontend 10.0 work.