Upgrade to NHS.UK frontend v9.6.3

[colinrotherham]

This PR upgrades to NHS.UK frontend v9.6.3 and removes the following CommonJS workarounds:

import CharacterCountJs from '@resources/character-count';
import CheckboxJs from '@resources/checkboxes';
import HeaderJs from '@resources/header';
import TabsJs from '@resources/tabs';

Made possible since this issue was resolved:

• Component JS files are only available in ESM syntax nhsuk/nhsuk-frontend#937

[edwardhorsford]

To confirm - this updates the library and some js - but potentially not HTML changes that have happened since the previous releases?

[colinrotherham]

To confirm - this updates the library and some js - but potentially not HTML changes that have happened since the previous releases?

Yeah this draft is still missing feature changes such as:

• Hero component headingClasses and headingLevel
• Panel component (new)
• Task list component (new)
• Skip link behaviour

[frankieroberto]

To confirm - this updates the library and some js - but potentially not HTML changes that have happened since the previous releases?

Yeah this draft is still missing feature changes such as:

• Hero component headingClasses and headingLevel
• Panel component (new)
• Task list component (new)
• Skip link behaviour

Shall we stick those as individual items in the backlog? I don't think that not having the Panel and Task list components blocks this PR from potentially being released?

[edwardhorsford]

I was only commenting vs what the PR title states. I might suggest clarifying in the title specifically what's being updated (and the others could be opened as issues?)

[colinrotherham]

Thanks @mattclaffey-nhs appreciate it

We've had a few more releases since v9.4.1, let me bring this PR up to date

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

[colinrotherham]

This PR is now up to date (library wise, not components or features)

You'll notice I've included changes to prevent duplicate calls to NHS.UK frontend init functions,

So I’d like to concentrate testing on these new checks:

if (isInitialised || !moduleRef.current?.parentElement) {
  return;
}

This change suppresses useEffect() once a component is rendered into its parent

Side effect: React components will run NHS.UK frontend JavaScript once only

That’s a good thing for us but will it cause issues for services that dynamically insert new menu items etc?

If it’s a problem, we might need a way to “rebuild” things

const header = new Header()

E.g. If a re-render was required by React but the component was already mounted

Rebuild the header menu

header.navigationItems = moduleRef.current.querySelectorAll(
  '.nhsuk-header__navigation-item'
)

header.setupNavigation()
header.updateNavigation()

But that’s not possible until NHS.UK frontend v10 where both new Header() and initHeader() are supported

[mattclaffey-nhs]

Hey @colinrotherham can you teams me when this is merged? We have a ticket ready to go with upgrading advice and guidance with the latest. Thanks! :)

[colinrotherham]

@mattclaffey-nhs We're currently waiting on another team to run npm link and test their service on this branch

Would be a huge help if you could do the same?

[mattclaffey-nhs]

@colinrotherham I pulled this up on a feature branch and had no issues but it might be worth having this be upgraded on a bigger platform as we only use about 3 components for now.

[colinrotherham]

@mattclaffey-nhs Would you (even temporarily) be able to try each of these?

• Character count
• Checkboxes
• Header
• Tabs

[mattclaffey-nhs]

Yeah, I can put them all on a page and give you access to viewing / testing them with a next app.

[mattclaffey-nhs]

Here is a feature branch url that I have prototyped to be able to test the components that have been changed - https://feature-nhs-react-94-test.advice-poc.ers.nhs.uk/nhs-react-components most components in the list won't work as it's purely another side quest I have been working on but you can see if anything is broken with the current pr.

[colinrotherham]

Superseded by the NHS.UK frontend v10.0.0 upgrade in:

• Upgrade to NHS.UK frontend v9.6.3 #263