Skip to content

Commit 50c45c6

Browse files
Peter-Hudson-GPeter-Hudson-G
committed
review updates
1 parent cbb8830 commit 50c45c6

File tree

6 files changed

+242
-1
lines changed

6 files changed

+242
-1
lines changed

‎src/components/form-elements/checkboxes/__tests__/Checkboxes.test.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { render } from '@testing-library/react';
12
import { createRef } from 'react';
23
import { Checkboxes } from '..';
34
import { renderClient, renderServer } from '#util/components';
@@ -110,4 +111,61 @@ describe('Checkboxes', () => {
110111

111112
expect(inputEl?.dataset).toHaveProperty('checkboxExclusive', 'true');
112113
});
114+
115+
it('allows HTML on the Checkboxes props', async () => {
116+
const { container } = await render(
117+
<Checkboxes
118+
id="example"
119+
name="example"
120+
hint={
121+
<>
122+
This is the main hint <span className="nhsuk-caption-xl"> and contains HTML</span>
123+
</>
124+
}
125+
error={
126+
<>
127+
This is an error <span className="nhsuk-caption-m"> and this error contains HTML</span>
128+
</>
129+
}
130+
>
131+
<Checkboxes.Item
132+
value="animal"
133+
hint={
134+
<>
135+
This is informative <span className="nhsuk-caption-l"> and contains HTML</span>
136+
</>
137+
}
138+
>
139+
Waste from animal carcasses
140+
</Checkboxes.Item>
141+
<Checkboxes.Item value="mines">Waste from mines or quarries</Checkboxes.Item>
142+
<Checkboxes.Item value="farm">Farm or agricultural waste</Checkboxes.Item>
143+
<Checkboxes.Item value="none" id="none" exclusive>
144+
None
145+
</Checkboxes.Item>
146+
</Checkboxes>,
147+
);
148+
149+
const hintEl = container.querySelector('#example-1--hint');
150+
expect(hintEl).toBeDefined();
151+
expect(hintEl?.innerHTML).toMatch(
152+
`This is informative <span class="nhsuk-caption-l"> and contains HTML</span>`,
153+
);
154+
155+
const mainHintEl = container.querySelector('#example--hint');
156+
expect(mainHintEl).toBeDefined();
157+
expect(mainHintEl?.innerHTML).toMatch(
158+
`This is the main hint <span class="nhsuk-caption-xl"> and contains HTML</span>`,
159+
);
160+
161+
const hintElSpan = container.querySelector('.nhsuk-caption-xl');
162+
expect(hintElSpan).toHaveTextContent('and contains HTML');
163+
expect(hintEl).toBeDefined();
164+
expect(hintEl?.innerHTML).toMatch(
165+
`This is informative <span class="nhsuk-caption-l"> and contains HTML</span>`,
166+
);
167+
const errorEl = container.querySelector('#example--error-message');
168+
expect(errorEl).toBeDefined();
169+
expect(errorEl).toHaveTextContent('and this error contains HTML');
170+
});
113171
});

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,4 +65,25 @@ describe('Label', () => {
6565
'Text<span>and text within HTML</span>',
6666
);
6767
});
68+
69+
it.each<NHSUKSize>(['s', 'm', 'l', 'xl'])(
70+
'renders with HTML and contains page heading with custom size %s',
71+
(size) => {
72+
const { container } = render(
73+
<Label isPageHeading size={size}>
74+
Text <span className={`nhsuk-caption-${size}`}>and text within HTML</span>
75+
</Label>,
76+
);
77+
78+
const headingEl = container.querySelector('.nhsuk-label-wrapper');
79+
const labelEl = headingEl?.querySelector('.nhsuk-label');
80+
81+
expect(headingEl?.tagName).toBe('H1');
82+
expect(labelEl).toHaveTextContent('Text and text within HTML');
83+
expect(labelEl?.innerHTML).toMatch(
84+
`Text <span class="nhsuk-caption-${size}">and text within HTML</span>`,
85+
);
86+
expect(labelEl).toHaveClass(`nhsuk-label--${size}`);
87+
},
88+
);
6889
});

‎src/util/types/FormTypes.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export interface FormElementProps {
1212
'legendProps'?: LegendProps;
1313
'label'?: string;
1414
'labelProps'?: LabelProps;
15-
'error'?: string;
15+
'error'?: React.ReactNode;
1616
'errorProps'?: ErrorMessageProps;
1717
'hint'?: React.ReactNode;
1818
'hintProps'?: HintTextProps;

‎stories/Form Elements/Checkboxes.stories.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,40 @@ export const WithHintText: Story = {
8888
),
8989
};
9090

91+
export const WithHintHTML: Story = {
92+
render: () => (
93+
<form>
94+
<Checkboxes legend="How do you want to sign in?" legendProps={{ size: 'l' }}>
95+
<Checkboxes.Item
96+
id="government-gateway"
97+
name="gateway"
98+
type="checkbox"
99+
value="gov-gateway"
100+
hint={
101+
<>
102+
You’ll have a user ID if you’ve registered for{' '}
103+
<span className="nhsuk-caption-l">
104+
{' '}
105+
Self Assessment or filed a tax return online before.
106+
</span>
107+
</>
108+
}
109+
>
110+
Sign in with Government Gateway
111+
</Checkboxes.Item>
112+
<Checkboxes.Item
113+
id="nhsuk-login"
114+
name="verify"
115+
value="nhsuk-verify"
116+
hint="You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
117+
>
118+
Sign in with NHS.UK login
119+
</Checkboxes.Item>
120+
</Checkboxes>
121+
</form>
122+
),
123+
};
124+
91125
export const WithDisabledItem: Story = {
92126
render: (args) => (
93127
<form>
@@ -189,6 +223,33 @@ export const WithError: Story = {
189223
name: 'With Error (String)',
190224
};
191225

226+
export const WithHTMLError: Story = {
227+
render: () => {
228+
const error = (
229+
<>
230+
Please<span className="nhsuk-u-nowrap"> select an option below</span>
231+
</>
232+
);
233+
return (
234+
<form>
235+
<Checkboxes
236+
legend="Which types of waste do you transport regularly?"
237+
legendProps={{ size: 'l' }}
238+
hint="Select all that apply"
239+
error={error}
240+
id="waste"
241+
name="waste"
242+
>
243+
<Checkboxes.Item value="animal">Waste from animal carcasses</Checkboxes.Item>
244+
<Checkboxes.Item value="mines">Waste from mines or quarries</Checkboxes.Item>
245+
<Checkboxes.Item value="farm">Farm or agricultural waste</Checkboxes.Item>
246+
</Checkboxes>
247+
</form>
248+
);
249+
},
250+
name: 'With Error (HTML)',
251+
};
252+
192253
export const NoIDSupplied: Story = {
193254
render: function NoIDSuppliedRender() {
194255
const checkbox1Ref = useRef<HTMLInputElement>(null);

‎stories/Form Elements/Radios.stories.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,46 @@ export const RadiosWithHintsOnItems: Story = {
143143
),
144144
};
145145

146+
export const RadiosWithHTMLHintsOnItems: Story = {
147+
render: () => (
148+
<Radios
149+
legend="How do you want to sign in?"
150+
legendProps={{ size: 'l' }}
151+
name="example"
152+
id="example-with-hints"
153+
>
154+
<Radios.Item
155+
value="government-gateway"
156+
hint={
157+
<>
158+
You&#39;ll{' '}
159+
<span className="nhsuk-u-nowrap">
160+
have a user ID if you've registered for self-assessment or filed a tax return online
161+
before.
162+
</span>
163+
</>
164+
}
165+
>
166+
Use Government Gateway
167+
</Radios.Item>
168+
<Radios.Item
169+
value="nhsuk-login"
170+
hint={
171+
<>
172+
You’ll have an{' '}
173+
<span className="nhsuk-u-nowrap">
174+
account if you’ve already proved your identity with either Barclays, CitizenSafe,
175+
Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.
176+
</span>
177+
</>
178+
}
179+
>
180+
Use NHS.UK login
181+
</Radios.Item>
182+
</Radios>
183+
),
184+
};
185+
146186
export const RadiosWithoutFieldset: Story = {
147187
render: (args) => (
148188
<Radios name="colours" id="colours">
@@ -179,3 +219,33 @@ export const RadiosWithError: Story = {
179219

180220
name: 'Radios With Error (String)',
181221
};
222+
223+
export const RadiosWithErrorHtml: Story = {
224+
render: function RadiosWithErrorHtmlRender() {
225+
const error = (
226+
<>
227+
Select <span className="nhsuk-u-nowrap">yes if you have changed your name</span>
228+
</>
229+
);
230+
return (
231+
<>
232+
<Radios
233+
legend="Have you changed your name?"
234+
legendProps={{ size: 'l' }}
235+
hint="This includes changing your last name or spelling your name differently"
236+
name="example-with-err-string"
237+
error={error}
238+
>
239+
<Radios.Item id="example-1" value="yes">
240+
Yes
241+
</Radios.Item>
242+
<Radios.Item id="example-2" value="no" checked>
243+
No
244+
</Radios.Item>
245+
</Radios>
246+
</>
247+
);
248+
},
249+
250+
name: 'Radios With Error (HTML)',
251+
};

‎stories/Form Elements/Select.stories.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,20 @@ export const SelectWithHintText: Story = {
3333
),
3434
};
3535

36+
export const SelectWithHintHTML: Story = {
37+
render: () => (
38+
<Select
39+
label="Label text goes here"
40+
labelProps={{ size: 'l' }}
41+
hint={<span className="nhsuk-u-nowrap">HTML hint text goes here</span>}
42+
>
43+
<Select.Option value="1">NHS.UK frontend option 1</Select.Option>
44+
<Select.Option value="2">NHS.UK frontend option 2</Select.Option>
45+
<Select.Option value="3">NHS.UK frontend option 3</Select.Option>
46+
</Select>
47+
),
48+
};
49+
3650
export const SelectWithError: Story = {
3751
render: function SelectWithErrorRender() {
3852
const [error, setError] = useState<string>('Error message goes here');
@@ -51,6 +65,23 @@ export const SelectWithError: Story = {
5165
name: 'Select With Error (String)',
5266
};
5367

68+
export const SelectWithHTMLError: Story = {
69+
render: function SelectWithErrorRender() {
70+
const error = <span className="nhsuk-u-nowrap">HTML error message goes here</span>;
71+
return (
72+
<>
73+
<Select label="Label text goes here" labelProps={{ size: 'l' }} error={error}>
74+
<Select.Option value="1">NHS.UK frontend option 1</Select.Option>
75+
<Select.Option value="2">NHS.UK frontend option 2</Select.Option>
76+
<Select.Option value="3">NHS.UK frontend option 3</Select.Option>
77+
</Select>
78+
</>
79+
);
80+
},
81+
82+
name: 'Select With Error (HTML)',
83+
};
84+
5485
export const SelectWithErrorAndHintString: Story = {
5586
render: function SelectWithErrorAndHintStringRender() {
5687
const [error, setError] = useState<string>('Error message goes here');

0 commit comments

Comments
 (0)