Skip to content

Commit fc471ce

Browse files
nicki-nhsnicki-nhs
authored
CCM 9212: Fix styling on letter template (#414)
1 parent b5c7dba commit fc471ce

File tree

3 files changed

+87
-44
lines changed

3 files changed

+87
-44
lines changed

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

Lines changed: 52 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ exports[`Client-side validation triggers 1`] = `
8989
Upload a letter template
9090
</h1>
9191
<div
92-
class="nhsuk-form-group--error"
92+
class="nhsuk-form-group--error nhsuk-u-margin-bottom-6 nhsuk-u-padding-top-2 nhsuk-u-padding-bottom-2"
9393
>
9494
<label
9595
class="nhsuk-label nhsuk-label--s"
@@ -146,7 +146,7 @@ exports[`Client-side validation triggers 1`] = `
146146
</div>
147147
</details>
148148
<div
149-
class="nhsuk-form-group nhsuk-form-group--error"
149+
class="nhsuk-form-group nhsuk-form-group--error nhsuk-u-margin-bottom-0"
150150
>
151151
<span
152152
class="nhsuk-error-message"
@@ -169,10 +169,10 @@ exports[`Client-side validation triggers 1`] = `
169169
</div>
170170
</div>
171171
<div
172-
class="nhsuk-form-group"
172+
class="nhsuk-form-group nhsuk-u-margin-bottom-6 nhsuk-u-padding-top-2 nhsuk-u-padding-bottom-2"
173173
>
174174
<label
175-
class="nhsuk-label"
175+
class="nhsuk-label nhsuk-label--s"
176176
for="letterTemplateLetterType"
177177
id="letterTemplateLetterType--label"
178178
>
@@ -218,10 +218,10 @@ exports[`Client-side validation triggers 1`] = `
218218
</select>
219219
</div>
220220
<div
221-
class="nhsuk-form-group"
221+
class="nhsuk-form-group nhsuk-u-margin-bottom-6 nhsuk-u-padding-top-2 nhsuk-u-padding-bottom-2"
222222
>
223223
<label
224-
class="nhsuk-label"
224+
class="nhsuk-label nhsuk-label--s"
225225
for="letterTemplateLanguage"
226226
id="letterTemplateLanguage--label"
227227
>
@@ -387,7 +387,7 @@ exports[`Client-side validation triggers 1`] = `
387387
</select>
388388
</div>
389389
<div
390-
class="nhsuk-form-group--error"
390+
class="nhsuk-form-group--error nhsuk-u-margin-bottom-6 nhsuk-u-padding-top-2 nhsuk-u-padding-bottom-2"
391391
>
392392
<label
393393
class="nhsuk-label nhsuk-label--s"
@@ -411,7 +411,7 @@ exports[`Client-side validation triggers 1`] = `
411411
</a>
412412
</p>
413413
<div
414-
class="nhsuk-form-group nhsuk-form-group--error"
414+
class="nhsuk-form-group nhsuk-u-margin-bottom-0 nhsuk-form-group--error"
415415
>
416416
<span
417417
class="nhsuk-error-message"
@@ -433,7 +433,9 @@ exports[`Client-side validation triggers 1`] = `
433433
/>
434434
</div>
435435
</div>
436-
<div>
436+
<div
437+
class="nhsuk-u-margin-bottom-6 nhsuk-u-padding-top-2 nhsuk-u-padding-bottom-2"
438+
>
437439
<label
438440
class="nhsuk-label nhsuk-label--s"
439441
for="letterTemplateCsv"
@@ -456,7 +458,7 @@ exports[`Client-side validation triggers 1`] = `
456458
</a>
457459
</p>
458460
<div
459-
class="nhsuk-form-group"
461+
class="nhsuk-form-group nhsuk-u-margin-bottom-0"
460462
>
461463
<input
462464
accept="text/csv"
@@ -586,7 +588,7 @@ exports[`renders page one error 1`] = `
586588
Upload a letter template
587589
</h1>
588590
<div
589-
class="nhsuk-form-group--error"
591+
class="nhsuk-form-group--error nhsuk-u-margin-bottom-6 nhsuk-u-padding-top-2 nhsuk-u-padding-bottom-2"
590592
>
591593
<label
592594
class="nhsuk-label nhsuk-label--s"
@@ -643,7 +645,7 @@ exports[`renders page one error 1`] = `
643645
</div>
644646
</details>
645647
<div
646-
class="nhsuk-form-group nhsuk-form-group--error"
648+
class="nhsuk-form-group nhsuk-form-group--error nhsuk-u-margin-bottom-0"
647649
>
648650
<span
649651
class="nhsuk-error-message"
@@ -667,10 +669,10 @@ exports[`renders page one error 1`] = `
667669
</div>
668670
</div>
669671
<div
670-
class="nhsuk-form-group"
672+
class="nhsuk-form-group nhsuk-u-margin-bottom-6 nhsuk-u-padding-top-2 nhsuk-u-padding-bottom-2"
671673
>
672674
<label
673-
class="nhsuk-label"
675+
class="nhsuk-label nhsuk-label--s"
674676
for="letterTemplateLetterType"
675677
id="letterTemplateLetterType--label"
676678
>
@@ -717,10 +719,10 @@ exports[`renders page one error 1`] = `
717719
</select>
718720
</div>
719721
<div
720-
class="nhsuk-form-group"
722+
class="nhsuk-form-group nhsuk-u-margin-bottom-6 nhsuk-u-padding-top-2 nhsuk-u-padding-bottom-2"
721723
>
722724
<label
723-
class="nhsuk-label"
725+
class="nhsuk-label nhsuk-label--s"
724726
for="letterTemplateLanguage"
725727
id="letterTemplateLanguage--label"
726728
>
@@ -886,7 +888,9 @@ exports[`renders page one error 1`] = `
886888
</option>
887889
</select>
888890
</div>
889-
<div>
891+
<div
892+
class="nhsuk-u-margin-bottom-6 nhsuk-u-padding-top-2 nhsuk-u-padding-bottom-2"
893+
>
890894
<label
891895
class="nhsuk-label nhsuk-label--s"
892896
for="letterTemplatePdf"
@@ -909,7 +913,7 @@ exports[`renders page one error 1`] = `
909913
</a>
910914
</p>
911915
<div
912-
class="nhsuk-form-group"
916+
class="nhsuk-form-group nhsuk-u-margin-bottom-0"
913917
>
914918
<input
915919
accept="application/pdf"
@@ -921,7 +925,9 @@ exports[`renders page one error 1`] = `
921925
/>
922926
</div>
923927
</div>
924-
<div>
928+
<div
929+
class="nhsuk-u-margin-bottom-6 nhsuk-u-padding-top-2 nhsuk-u-padding-bottom-2"
930+
>
925931
<label
926932
class="nhsuk-label nhsuk-label--s"
927933
for="letterTemplateCsv"
@@ -944,7 +950,7 @@ exports[`renders page one error 1`] = `
944950
</a>
945951
</p>
946952
<div
947-
class="nhsuk-form-group"
953+
class="nhsuk-form-group nhsuk-u-margin-bottom-0"
948954
>
949955
<input
950956
accept="text/csv"
@@ -1092,7 +1098,7 @@ exports[`renders page with multiple errors 1`] = `
10921098
Upload a letter template
10931099
</h1>
10941100
<div
1095-
class="nhsuk-form-group--error"
1101+
class="nhsuk-form-group--error nhsuk-u-margin-bottom-6 nhsuk-u-padding-top-2 nhsuk-u-padding-bottom-2"
10961102
>
10971103
<label
10981104
class="nhsuk-label nhsuk-label--s"
@@ -1149,7 +1155,7 @@ exports[`renders page with multiple errors 1`] = `
11491155
</div>
11501156
</details>
11511157
<div
1152-
class="nhsuk-form-group nhsuk-form-group--error"
1158+
class="nhsuk-form-group nhsuk-form-group--error nhsuk-u-margin-bottom-0"
11531159
>
11541160
<span
11551161
class="nhsuk-error-message"
@@ -1173,10 +1179,10 @@ exports[`renders page with multiple errors 1`] = `
11731179
</div>
11741180
</div>
11751181
<div
1176-
class="nhsuk-form-group"
1182+
class="nhsuk-form-group nhsuk-u-margin-bottom-6 nhsuk-u-padding-top-2 nhsuk-u-padding-bottom-2"
11771183
>
11781184
<label
1179-
class="nhsuk-label"
1185+
class="nhsuk-label nhsuk-label--s"
11801186
for="letterTemplateLetterType"
11811187
id="letterTemplateLetterType--label"
11821188
>
@@ -1222,10 +1228,10 @@ exports[`renders page with multiple errors 1`] = `
12221228
</select>
12231229
</div>
12241230
<div
1225-
class="nhsuk-form-group"
1231+
class="nhsuk-form-group nhsuk-u-margin-bottom-6 nhsuk-u-padding-top-2 nhsuk-u-padding-bottom-2"
12261232
>
12271233
<label
1228-
class="nhsuk-label"
1234+
class="nhsuk-label nhsuk-label--s"
12291235
for="letterTemplateLanguage"
12301236
id="letterTemplateLanguage--label"
12311237
>
@@ -1391,7 +1397,7 @@ exports[`renders page with multiple errors 1`] = `
13911397
</select>
13921398
</div>
13931399
<div
1394-
class="nhsuk-form-group--error"
1400+
class="nhsuk-form-group--error nhsuk-u-margin-bottom-6 nhsuk-u-padding-top-2 nhsuk-u-padding-bottom-2"
13951401
>
13961402
<label
13971403
class="nhsuk-label nhsuk-label--s"
@@ -1415,7 +1421,7 @@ exports[`renders page with multiple errors 1`] = `
14151421
</a>
14161422
</p>
14171423
<div
1418-
class="nhsuk-form-group nhsuk-form-group--error"
1424+
class="nhsuk-form-group nhsuk-u-margin-bottom-0 nhsuk-form-group--error"
14191425
>
14201426
<span
14211427
class="nhsuk-error-message"
@@ -1438,7 +1444,7 @@ exports[`renders page with multiple errors 1`] = `
14381444
</div>
14391445
</div>
14401446
<div
1441-
class="nhsuk-form-group--error"
1447+
class="nhsuk-form-group--error nhsuk-u-margin-bottom-6 nhsuk-u-padding-top-2 nhsuk-u-padding-bottom-2"
14421448
>
14431449
<label
14441450
class="nhsuk-label nhsuk-label--s"
@@ -1462,7 +1468,7 @@ exports[`renders page with multiple errors 1`] = `
14621468
</a>
14631469
</p>
14641470
<div
1465-
class="nhsuk-form-group nhsuk-form-group--error"
1471+
class="nhsuk-form-group nhsuk-u-margin-bottom-0 nhsuk-form-group--error"
14661472
>
14671473
<span
14681474
class="nhsuk-error-message"
@@ -1556,7 +1562,9 @@ exports[`renders page with preloaded field values 1`] = `
15561562
>
15571563
Upload a letter template
15581564
</h1>
1559-
<div>
1565+
<div
1566+
class="nhsuk-u-margin-bottom-6 nhsuk-u-padding-top-2 nhsuk-u-padding-bottom-2"
1567+
>
15601568
<label
15611569
class="nhsuk-label nhsuk-label--s"
15621570
for="letterTemplateName"
@@ -1612,7 +1620,7 @@ exports[`renders page with preloaded field values 1`] = `
16121620
</div>
16131621
</details>
16141622
<div
1615-
class="nhsuk-form-group"
1623+
class="nhsuk-form-group nhsuk-u-margin-bottom-0"
16161624
>
16171625
<input
16181626
class="nhsuk-input"
@@ -1624,10 +1632,10 @@ exports[`renders page with preloaded field values 1`] = `
16241632
</div>
16251633
</div>
16261634
<div
1627-
class="nhsuk-form-group"
1635+
class="nhsuk-form-group nhsuk-u-margin-bottom-6 nhsuk-u-padding-top-2 nhsuk-u-padding-bottom-2"
16281636
>
16291637
<label
1630-
class="nhsuk-label"
1638+
class="nhsuk-label nhsuk-label--s"
16311639
for="letterTemplateLetterType"
16321640
id="letterTemplateLetterType--label"
16331641
>
@@ -1674,10 +1682,10 @@ exports[`renders page with preloaded field values 1`] = `
16741682
</select>
16751683
</div>
16761684
<div
1677-
class="nhsuk-form-group"
1685+
class="nhsuk-form-group nhsuk-u-margin-bottom-6 nhsuk-u-padding-top-2 nhsuk-u-padding-bottom-2"
16781686
>
16791687
<label
1680-
class="nhsuk-label"
1688+
class="nhsuk-label nhsuk-label--s"
16811689
for="letterTemplateLanguage"
16821690
id="letterTemplateLanguage--label"
16831691
>
@@ -1843,7 +1851,9 @@ exports[`renders page with preloaded field values 1`] = `
18431851
</option>
18441852
</select>
18451853
</div>
1846-
<div>
1854+
<div
1855+
class="nhsuk-u-margin-bottom-6 nhsuk-u-padding-top-2 nhsuk-u-padding-bottom-2"
1856+
>
18471857
<label
18481858
class="nhsuk-label nhsuk-label--s"
18491859
for="letterTemplatePdf"
@@ -1866,7 +1876,7 @@ exports[`renders page with preloaded field values 1`] = `
18661876
</a>
18671877
</p>
18681878
<div
1869-
class="nhsuk-form-group"
1879+
class="nhsuk-form-group nhsuk-u-margin-bottom-0"
18701880
>
18711881
<input
18721882
accept="application/pdf"
@@ -1878,7 +1888,9 @@ exports[`renders page with preloaded field values 1`] = `
18781888
/>
18791889
</div>
18801890
</div>
1881-
<div>
1891+
<div
1892+
class="nhsuk-u-margin-bottom-6 nhsuk-u-padding-top-2 nhsuk-u-padding-bottom-2"
1893+
>
18821894
<label
18831895
class="nhsuk-label nhsuk-label--s"
18841896
for="letterTemplateCsv"
@@ -1901,7 +1913,7 @@ exports[`renders page with preloaded field values 1`] = `
19011913
</a>
19021914
</p>
19031915
<div
1904-
class="nhsuk-form-group"
1916+
class="nhsuk-form-group nhsuk-u-margin-bottom-0"
19051917
>
19061918
<input
19071919
accept="text/csv"

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const FileUpload: React.FC<FileUploadProps> = ({
1717
}) => {
1818
return (
1919
<div
20-
className={classNames('nhsuk-form-group', {
20+
className={classNames('nhsuk-form-group', 'nhsuk-u-margin-bottom-0', {
2121
'nhsuk-form-group--error': error,
2222
})}
2323
{...rest}

0 commit comments

Comments
 (0)