review update

Author: Peter-Hudson-G

package-lock.json

@@ -1,3 +1,4 @@
+import React from 'react';
 import classNames from 'classnames';
 import { type ComponentPropsWithoutRef, type FC } from 'react';
 
@@ -11,7 +12,7 @@ export const ErrorMessage: FC<ErrorMessageProps> = ({
   children,
   ...rest
 }) => {
-  if (!children || typeof children !== 'string') {
+  if (!children || (typeof children !== 'string' && !React.isValidElement(children) && !Array.isArray(children))) {
     return null;
   }
 

src/components/form-elements/error-message/ErrorMessage.tsx

@@ -25,4 +25,9 @@ describe('ErrorMessage', () => {
 
     expect(container.querySelector('.nhsuk-u-visually-hidden')).toBeFalsy();
   });
+
+  it('contains HTML', () => {
+    const { container } = render(<ErrorMessage>Error<span>this errored</span></ErrorMessage>);
+    expect(container.innerHTML).toMatch(`Error<span>this errored</span>`);
+  })
 });

src/components/form-elements/error-message/__tests__/ErrorMessage.test.tsx

@@ -1,5 +1,7 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
+exports[`ErrorMessage contains HTML: ErrorMessage 1`] = `<div />`;
+
 exports[`ErrorMessage matches snapshot: ErrorMessage 1`] = `
 <div>
   <span

src/components/form-elements/error-message/__tests__/__snapshots__/ErrorMessage.test.tsx.snap

@@ -53,4 +53,11 @@ describe('Label', () => {
 
     expect(container.querySelector('label')).toBeNull();
   });
+
+  it('renders with HTML', () => {
+    const { container } = render(<Label>Text<span>and text within HTML</span></Label>);
+
+    expect(container.querySelector('label')?.innerHTML).toMatch('Text<span>and text within HTML</span>')
+    
+  });
 });

src/components/form-elements/label/__tests__/Label.test.tsx

@@ -43,4 +43,11 @@ describe('Legend', () => {
 
     expect(container.querySelector('legend')).toBeNull();
   });
+
+ it('renders with HTML', () => {
+   const { container } = render(<Legend>Text<span>and text within HTML</span></Legend>);
+  
+      expect(container.querySelector('legend')?.innerHTML).toMatch('Text<span>and text within HTML</span>')
+      
+    });
 });

src/components/form-elements/legend/__tests__/Legend.test.tsx

@@ -45,3 +45,8 @@ export const EmptyVisuallyHiddenText: Story = {
   args: { visuallyHiddenText: '' },
   argTypes: { visuallyHiddenText: { control: false } },
 };
+
+export const HTML: Story = {
+  args: { children: <>Enter your full name (or call <span className="nhsuk-u-nowrap">999 123 4567</span>)</>},
+  argTypes: { visuallyHiddenText: { control: false } },
+}

stories/Form Elements/ErrorMessage.stories.tsx

@@ -34,7 +34,7 @@ export default meta;
 type Story = StoryObj<typeof Fieldset>;
 
 export const Standard: Story = {
-  render: (args) => (
+  render: () => (
     <Fieldset>
       <Fieldset.Legend size="l">What is your address?</Fieldset.Legend>
       <TextInput
@@ -68,7 +68,7 @@ export const Standard: Story = {
 };
 
 export const WithLegendAsAPageHeading: Story = {
-  render: (args) => (
+  render: () => (
     <Fieldset>
       <Fieldset.Legend isPageHeading>What is your address?</Fieldset.Legend>
     </Fieldset>
@@ -77,7 +77,7 @@ export const WithLegendAsAPageHeading: Story = {
 
 export const WithCustomLegendSizeS: Story = {
   name: 'With Bold Text (S)',
-  render: (args) => (
+  render: () => (
     <Fieldset>
       <Fieldset.Legend size="s">What is your address?</Fieldset.Legend>
     </Fieldset>
@@ -86,7 +86,7 @@ export const WithCustomLegendSizeS: Story = {
 
 export const WithCustomLegendSizeM: Story = {
   name: 'With Custom Size (M)',
-  render: (args) => (
+  render: () => (
     <Fieldset>
       <Fieldset.Legend size="m">What is your address?</Fieldset.Legend>
     </Fieldset>
@@ -95,7 +95,7 @@ export const WithCustomLegendSizeM: Story = {
 
 export const WithCustomLegendSizeL: Story = {
   name: 'With Custom Size (L)',
-  render: (args) => (
+  render: () => (
     <Fieldset>
       <Fieldset.Legend size="l">What is your address?</Fieldset.Legend>
     </Fieldset>
@@ -104,9 +104,18 @@ export const WithCustomLegendSizeL: Story = {
 
 export const WithCustomLegendSizeXL: Story = {
   name: 'With Custom Size (XL)',
-  render: (args) => (
+  render: () => (
     <Fieldset>
       <Fieldset.Legend size="xl">What is your address?</Fieldset.Legend>
     </Fieldset>
   ),
 };
+
+export const WithHTML: Story = {
+  name: 'With HTML',
+  render: () => (
+    <Fieldset>
+      <Fieldset.Legend>What is your address? <strong>small note: this is your home address</strong></Fieldset.Legend>
+    </Fieldset>
+  ),
+};

stories/Form Elements/Fieldset.stories.tsx

@@ -51,3 +51,10 @@ export const WithCustomSizeXL: Story = {
     size: 'xl',
   },
 };
+
+export const WithHTML: Story = {
+  name: 'With HTML',
+  args: {
+    children: <>This has <span>a span HTML element</span></>,
+  },
+};