Skip to content

Commit ab401d0

Browse files
ClareJonesBJSSClareJonesBJSS
committed
Fix select summary link and error styling
1 parent 3cbd8db commit ab401d0

17 files changed

Lines changed: 109 additions & 56 deletions

File tree

‎frontend/src/__tests__/app/edit-template-name/[templateId]/__snapshots__/page.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -266,7 +266,7 @@ exports[`valid template renders errors when blank form is submitted and error st
266266
Enter a template name
267267
</span>
268268
<input
269-
class="nhsuk-input nhsuk-u-margin-bottom-2"
269+
class="nhsuk-input nhsuk-input--error nhsuk-u-margin-bottom-2"
270270
id="name"
271271
name="name"
272272
type="text"

‎frontend/src/__tests__/app/upload-british-sign-language-letter-template/__snapshots__/page.test.tsx.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -391,7 +391,7 @@ exports[`client has multiple campaign ids renders errors when blank form is subm
391391
Enter a template name
392392
</span>
393393
<input
394-
class="nhsuk-input nhsuk-u-margin-bottom-2"
394+
class="nhsuk-input nhsuk-input--error nhsuk-u-margin-bottom-2"
395395
id="name"
396396
name="name"
397397
type="text"
@@ -467,7 +467,7 @@ exports[`client has multiple campaign ids renders errors when blank form is subm
467467
</span>
468468
<input
469469
accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
470-
class="file-upload nhsuk-input"
470+
class="file-upload nhsuk-input nhsuk-input--error"
471471
id="file"
472472
name="file"
473473
type="file"
@@ -925,7 +925,7 @@ exports[`client has one campaign id renders errors when blank form is submitted
925925
Enter a template name
926926
</span>
927927
<input
928-
class="nhsuk-input nhsuk-u-margin-bottom-2"
928+
class="nhsuk-input nhsuk-input--error nhsuk-u-margin-bottom-2"
929929
id="name"
930930
name="name"
931931
type="text"
@@ -985,7 +985,7 @@ exports[`client has one campaign id renders errors when blank form is submitted
985985
</span>
986986
<input
987987
accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
988-
class="file-upload nhsuk-input"
988+
class="file-upload nhsuk-input nhsuk-input--error"
989989
id="file"
990990
name="file"
991991
type="file"

‎frontend/src/__tests__/app/upload-large-print-letter-template/__snapshots__/page.test.tsx.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -391,7 +391,7 @@ exports[`client has multiple campaign ids renders errors when blank form is subm
391391
Enter a template name
392392
</span>
393393
<input
394-
class="nhsuk-input nhsuk-u-margin-bottom-2"
394+
class="nhsuk-input nhsuk-input--error nhsuk-u-margin-bottom-2"
395395
id="name"
396396
name="name"
397397
type="text"
@@ -467,7 +467,7 @@ exports[`client has multiple campaign ids renders errors when blank form is subm
467467
</span>
468468
<input
469469
accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
470-
class="file-upload nhsuk-input"
470+
class="file-upload nhsuk-input nhsuk-input--error"
471471
id="file"
472472
name="file"
473473
type="file"
@@ -925,7 +925,7 @@ exports[`client has one campaign id renders errors when blank form is submitted
925925
Enter a template name
926926
</span>
927927
<input
928-
class="nhsuk-input nhsuk-u-margin-bottom-2"
928+
class="nhsuk-input nhsuk-input--error nhsuk-u-margin-bottom-2"
929929
id="name"
930930
name="name"
931931
type="text"
@@ -985,7 +985,7 @@ exports[`client has one campaign id renders errors when blank form is submitted
985985
</span>
986986
<input
987987
accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
988-
class="file-upload nhsuk-input"
988+
class="file-upload nhsuk-input nhsuk-input--error"
989989
id="file"
990990
name="file"
991991
type="file"

‎frontend/src/__tests__/app/upload-other-language-letter-template/__snapshots__/page.test.tsx.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -562,7 +562,7 @@ exports[`client has multiple campaign ids renders errors when blank form is subm
562562
Enter a template name
563563
</span>
564564
<input
565-
class="nhsuk-input nhsuk-u-margin-bottom-2"
565+
class="nhsuk-input nhsuk-input--error nhsuk-u-margin-bottom-2"
566566
id="name"
567567
name="name"
568568
type="text"
@@ -812,7 +812,7 @@ exports[`client has multiple campaign ids renders errors when blank form is subm
812812
</span>
813813
<input
814814
accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
815-
class="file-upload nhsuk-input"
815+
class="file-upload nhsuk-input nhsuk-input--error"
816816
id="file"
817817
name="file"
818818
type="file"
@@ -1441,7 +1441,7 @@ exports[`client has one campaign id renders errors when blank form is submitted
14411441
Enter a template name
14421442
</span>
14431443
<input
1444-
class="nhsuk-input nhsuk-u-margin-bottom-2"
1444+
class="nhsuk-input nhsuk-input--error nhsuk-u-margin-bottom-2"
14451445
id="name"
14461446
name="name"
14471447
type="text"
@@ -1675,7 +1675,7 @@ exports[`client has one campaign id renders errors when blank form is submitted
16751675
</span>
16761676
<input
16771677
accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
1678-
class="file-upload nhsuk-input"
1678+
class="file-upload nhsuk-input nhsuk-input--error"
16791679
id="file"
16801680
name="file"
16811681
type="file"

‎frontend/src/__tests__/app/upload-standard-english-letter-template/__snapshots__/page.test.tsx.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -391,7 +391,7 @@ exports[`client has multiple campaign ids renders errors when blank form is subm
391391
Enter a template name
392392
</span>
393393
<input
394-
class="nhsuk-input nhsuk-u-margin-bottom-2"
394+
class="nhsuk-input nhsuk-input--error nhsuk-u-margin-bottom-2"
395395
id="name"
396396
name="name"
397397
type="text"
@@ -467,7 +467,7 @@ exports[`client has multiple campaign ids renders errors when blank form is subm
467467
</span>
468468
<input
469469
accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
470-
class="file-upload nhsuk-input"
470+
class="file-upload nhsuk-input nhsuk-input--error"
471471
id="file"
472472
name="file"
473473
type="file"
@@ -925,7 +925,7 @@ exports[`client has one campaign id renders errors when blank form is submitted
925925
Enter a template name
926926
</span>
927927
<input
928-
class="nhsuk-input nhsuk-u-margin-bottom-2"
928+
class="nhsuk-input nhsuk-input--error nhsuk-u-margin-bottom-2"
929929
id="name"
930930
name="name"
931931
type="text"
@@ -985,7 +985,7 @@ exports[`client has one campaign id renders errors when blank form is submitted
985985
</span>
986986
<input
987987
accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
988-
class="file-upload nhsuk-input"
988+
class="file-upload nhsuk-input nhsuk-input--error"
989989
id="file"
990990
name="file"
991991
type="file"

‎frontend/src/__tests__/components/forms/LetterTemplateForm/__snapshots__/LetterTemplateForm.test.tsx.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -421,7 +421,7 @@ exports[`Client-side validation triggers - valid form - with errors 1`] = `
421421
</span>
422422
<input
423423
accept="application/pdf"
424-
class="file-upload nhsuk-input"
424+
class="file-upload nhsuk-input nhsuk-input--error"
425425
data-testid="file-selector-letterTemplatePdf"
426426
id="letterTemplatePdf"
427427
name="letterTemplatePdf"
@@ -2725,7 +2725,7 @@ exports[`renders page with multiple errors 1`] = `
27252725
</span>
27262726
<input
27272727
accept="application/pdf"
2728-
class="file-upload nhsuk-input"
2728+
class="file-upload nhsuk-input nhsuk-input--error"
27292729
data-testid="file-selector-letterTemplatePdf"
27302730
id="letterTemplatePdf"
27312731
name="letterTemplatePdf"
@@ -2772,7 +2772,7 @@ exports[`renders page with multiple errors 1`] = `
27722772
</span>
27732773
<input
27742774
accept="text/csv"
2775-
class="file-upload nhsuk-input"
2775+
class="file-upload nhsuk-input nhsuk-input--error"
27762776
data-testid="file-selector-letterTemplateCsv"
27772777
id="letterTemplateCsv"
27782778
name="letterTemplateCsv"

‎frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -278,7 +278,9 @@ describe('LetterRenderForm', () => {
278278
errorState: {
279279
formErrors: [],
280280
fieldErrors: {
281-
systemPersonalisationPackId: ['Choose example recipient'],
281+
'system-personalisation-pack-id-shortFormRender': [
282+
'Choose example recipient',
283+
],
282284
},
283285
},
284286
});
@@ -308,7 +310,9 @@ describe('LetterRenderForm', () => {
308310
errorState: {
309311
formErrors: [],
310312
fieldErrors: {
311-
systemPersonalisationPackId: ['Choose example recipient'],
313+
'system-personalisation-pack-id-longFormRender': [
314+
'Choose example recipient',
315+
],
312316
},
313317
},
314318
});
@@ -410,7 +414,9 @@ describe('LetterRenderForm', () => {
410414
errorState: {
411415
formErrors: [],
412416
fieldErrors: {
413-
systemPersonalisationPackId: ['Choose example recipient'],
417+
'system-personalisation-pack-id-shortFormRender': [
418+
'Choose example recipient',
419+
],
414420
},
415421
},
416422
});

‎frontend/src/__tests__/components/molecules/LetterRender/LetterRenderTab.test.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -537,7 +537,9 @@ describe('LetterRenderTab', () => {
537537
errorState: {
538538
formErrors: [],
539539
fieldErrors: {
540-
systemPersonalisationPackId: ['Select an example recipient'],
540+
'system-personalisation-pack-id-shortFormRender': [
541+
'Select an example recipient',
542+
],
541543
},
542544
},
543545
})

‎frontend/src/__tests__/components/molecules/LetterRender/server-action.test.ts‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -146,10 +146,12 @@ describe('updateLetterPreview', () => {
146146
const result = await updateLetterPreview({}, formData);
147147

148148
expect(result.errorState?.fieldErrors).toHaveProperty(
149-
'systemPersonalisationPackId'
149+
'system-personalisation-pack-id-shortFormRender'
150150
);
151151
expect(
152-
result.errorState?.fieldErrors?.systemPersonalisationPackId
152+
result.errorState?.fieldErrors?.[
153+
'system-personalisation-pack-id-shortFormRender'
154+
]
153155
).toContain('Choose example recipient');
154156
expect(result.fields?.systemPersonalisationPackId).toBe('');
155157
});
@@ -163,7 +165,7 @@ describe('updateLetterPreview', () => {
163165
const result = await updateLetterPreview({}, formData);
164166

165167
expect(result.errorState?.fieldErrors).toHaveProperty(
166-
'systemPersonalisationPackId'
168+
'system-personalisation-pack-id-shortFormRender'
167169
);
168170
});
169171

@@ -175,14 +177,14 @@ describe('updateLetterPreview', () => {
175177
const result = await updateLetterPreview({}, formData);
176178

177179
expect(result.errorState?.fieldErrors).toHaveProperty(
178-
'systemPersonalisationPackId'
180+
'system-personalisation-pack-id-shortFormRender'
179181
);
180182
expect(result.fields?.systemPersonalisationPackId).toBe(
181183
'invalid-recipient-id'
182184
);
183185
});
184186

185-
it('error key for recipient is the same regardless of tab', async () => {
187+
it('error key for recipient includes the tab value', async () => {
186188
const formData = buildFormData({
187189
systemPersonalisationPackId: '',
188190
tab: 'longFormRender',
@@ -191,7 +193,10 @@ describe('updateLetterPreview', () => {
191193
const result = await updateLetterPreview({}, formData);
192194

193195
expect(result.errorState?.fieldErrors).toHaveProperty(
194-
'systemPersonalisationPackId'
196+
'system-personalisation-pack-id-longFormRender'
197+
);
198+
expect(result.errorState?.fieldErrors).not.toHaveProperty(
199+
'system-personalisation-pack-id-shortFormRender'
195200
);
196201
});
197202

@@ -204,7 +209,7 @@ describe('updateLetterPreview', () => {
204209
const result = await updateLetterPreview({}, formData);
205210

206211
expect(result.errorState?.fieldErrors).toHaveProperty(
207-
'systemPersonalisationPackId'
212+
'system-personalisation-pack-id-shortFormRender'
208213
);
209214
expect(result.fields?.systemPersonalisationPackId).toBe('long-1');
210215
});
@@ -253,7 +258,7 @@ describe('updateLetterPreview', () => {
253258
const result = await updateLetterPreview({}, formData);
254259

255260
expect(result.errorState?.fieldErrors).toHaveProperty(
256-
'systemPersonalisationPackId'
261+
'system-personalisation-pack-id-shortFormRender'
257262
);
258263
expect(result.errorState?.fieldErrors).toHaveProperty(
259264
'custom-appointmentDate-shortFormRender'

‎frontend/src/components/atoms/FileUpload/FileUpload.tsx‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,32 @@ import classNames from 'classnames';
22
import { ErrorMessage, HintText, Label } from 'nhsuk-react-components';
33
import React, { HTMLProps } from 'react';
44
import styles from './FileUpload.module.scss';
5+
import { useNHSNotifyForm } from '@providers/form-provider';
56

67
interface FileUploadProps extends HTMLProps<HTMLDivElement> {
8+
id: string;
79
error?: string;
810
hint?: string;
911
}
1012

1113
export function FileUploadInput({
1214
className,
15+
id,
1316
...props
14-
}: Omit<HTMLProps<HTMLInputElement>, 'type'>) {
17+
}: Omit<HTMLProps<HTMLInputElement>, 'type'> & { id: string; name: string }) {
18+
const [state] = useNHSNotifyForm();
19+
20+
const error = Boolean(state.errorState?.fieldErrors?.[id]?.length);
21+
1522
return (
1623
<input
17-
className={classNames(styles['file-upload'], 'nhsuk-input', className)}
24+
className={classNames(
25+
styles['file-upload'],
26+
'nhsuk-input',
27+
{ 'nhsuk-input--error': error },
28+
className
29+
)}
30+
id={id}
1831
type='file'
1932
{...props}
2033
/>

0 commit comments

Comments
 (0)