Support HTML in legend, label and error props, prepare beta release

[Peter-Hudson-G]

This will hopefully fix that the hint text can be string as well as an element (which is supported).

[colinrotherham]

Thanks @Peter-Hudson-G 🙌

Good thinking. Would you mind doing the same for legend please?

To prevent accessibility issues, can you please add some tests (and new storybook examples) using phrasing content only? For example, adding <span class="nhsuk-u-nowrap"> within the hint text inner HTML:

Text only

You would have got these vaccinations at school, from your GP surgery or another healthcare provider

HTML content

This is a 10 digit number (like <span class="nhsuk-u-nowrap">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App

Then we can get this into the next beta release

[colinrotherham]

Looks like we need it for label, legend and error as well as hint

For consistency with NHS.UK frontend where both text and HTML are supported

[Peter-Hudson-G]

It's escalated a little bit from one file. Should hopefully now reflect what I interpenetrated your review meant @colinrotherham .

[colinrotherham]

Hi @Peter-Hudson-G

Hope you didn't mind but I've gone ahead and added legend and label support

I've also swapped ReactNode for ReactElement otherwise the following types were allowed:

  | number
  | bigint
  | boolean
  | Iterable<React.ReactNode>
  | React.ReactPortal
  | Promise<AwaitedReactNode>
  | null

I'm very aware that teams might have seen the new storybook examples as ready-to-use in production so I've only included heading caption examples. Full coverage for the other types can be found in tests though

Are you happy with the PR as is it now?

[Peter-Hudson-G]

Hi @colinrotherham , Looks good. I guess thinking about it the if(!hint) { return null } only works so far.

[colinrotherham]

Hi @colinrotherham , Looks good. I guess thinking about it the if(!hint) { return null } only works so far.

Do you have worries about that bit?

Once this PR is merged, error messages will match hint, label and legend behaviour:

nhsuk-react-components/src/components/form-elements/hint-text/HintText.tsx

Lines 7 to 9 in 71e9f13

	if (!children) {
	return null;
	}

nhsuk-react-components/src/components/form-elements/label/Label.tsx

Lines 20 to 22 in 71e9f13

	if (!children) {
	return null;
	}

nhsuk-react-components/src/components/form-elements/legend/Legend.tsx

Lines 22 to 24 in 71e9f13

	if (!children) {
	return null;
	}

[Peter-Hudson-G]

Not at all. If you're now fixing it to string or an element a boolean true or number won't sneak past. I came close to using the same thing, but just thought ReactNode covered both nicely.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

[colinrotherham]

Thanks @Peter-Hudson-G, this is now released in v6.0.0-beta.4

[Peter-Hudson-G]

Cheers @colinrotherham . My TypeScript is now happy.