Skip to content

Commit 3459395

Browse files
harrim91harrim91
authored
Merge pull request #305 from NHSDigital/feature/CCM-8594_csp-remove-inline-styles
CCM-8594: remove inline styling
2 parents 603ec7d + 6c6b008 commit 3459395

File tree

15 files changed

+123
-75
lines changed

15 files changed

+123
-75
lines changed

‎frontend/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"@aws-amplify/adapter-nextjs": "^1.4.3",
2222
"@aws-amplify/ui-react": "^6.9.1",
2323
"@aws-sdk/client-ses": "^3.637.0",
24+
"clsx": "^2.1.1",
2425
"aws-amplify": "^6.12.3",
2526
"date-fns": "^4.1.0",
2627
"jsonwebtoken": "^9.0.2",

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -574,7 +574,7 @@ exports[`renders page one error 1`] = `
574574
More about emails
575575
</h2>
576576
<ul
577-
style="list-style-type: none; padding: 0px;"
577+
class="channel-guidance__list"
578578
>
579579
<li
580580
class="nhsuk-u-margin-bottom-3"
@@ -1220,7 +1220,7 @@ exports[`renders page with multiple errors 1`] = `
12201220
More about emails
12211221
</h2>
12221222
<ul
1223-
style="list-style-type: none; padding: 0px;"
1223+
class="channel-guidance__list"
12241224
>
12251225
<li
12261226
class="nhsuk-u-margin-bottom-3"
@@ -1789,7 +1789,7 @@ exports[`renders page with preloaded field values 1`] = `
17891789
More about emails
17901790
</h2>
17911791
<ul
1792-
style="list-style-type: none; padding: 0px;"
1792+
class="channel-guidance__list"
17931793
>
17941794
<li
17951795
class="nhsuk-u-margin-bottom-3"
@@ -2336,7 +2336,7 @@ exports[`renders page without back link for initial state with id 1`] = `
23362336
More about emails
23372337
</h2>
23382338
<ul
2339-
style="list-style-type: none; padding: 0px;"
2339+
class="channel-guidance__list"
23402340
>
23412341
<li
23422342
class="nhsuk-u-margin-bottom-3"

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

Lines changed: 45 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -143,12 +143,15 @@ exports[`renders page 1`] = `
143143
template-message
144144
</textarea>
145145
</div>
146-
<p
147-
id="character-count"
148-
style=""
146+
<div
147+
class=""
149148
>
150-
16 of 5000 characters
151-
</p>
149+
<p
150+
id="character-count"
151+
>
152+
16 of 5000 characters
153+
</p>
154+
</div>
152155
<button
153156
aria-disabled="false"
154157
class="nhsuk-button"
@@ -414,7 +417,7 @@ exports[`renders page 1`] = `
414417
More about NHS App messages
415418
</h2>
416419
<ul
417-
style="list-style-type: none; padding: 0px;"
420+
class="channel-guidance__list"
418421
>
419422
<li
420423
class="nhsuk-u-margin-bottom-3"
@@ -641,12 +644,15 @@ exports[`renders page one error 1`] = `
641644
rows="10"
642645
/>
643646
</div>
644-
<p
645-
id="character-count"
646-
style=""
647+
<div
648+
class=""
647649
>
648-
0 of 5000 characters
649-
</p>
650+
<p
651+
id="character-count"
652+
>
653+
0 of 5000 characters
654+
</p>
655+
</div>
650656
<button
651657
aria-disabled="false"
652658
class="nhsuk-button"
@@ -912,7 +918,7 @@ exports[`renders page one error 1`] = `
912918
More about NHS App messages
913919
</h2>
914920
<ul
915-
style="list-style-type: none; padding: 0px;"
921+
class="channel-guidance__list"
916922
>
917923
<li
918924
class="nhsuk-u-margin-bottom-3"
@@ -1153,12 +1159,15 @@ exports[`renders page with multiple errors 1`] = `
11531159
rows="10"
11541160
/>
11551161
</div>
1156-
<p
1157-
id="character-count"
1158-
style=""
1162+
<div
1163+
class=""
11591164
>
1160-
0 of 5000 characters
1161-
</p>
1165+
<p
1166+
id="character-count"
1167+
>
1168+
0 of 5000 characters
1169+
</p>
1170+
</div>
11621171
<button
11631172
aria-disabled="false"
11641173
class="nhsuk-button"
@@ -1424,7 +1433,7 @@ exports[`renders page with multiple errors 1`] = `
14241433
More about NHS App messages
14251434
</h2>
14261435
<ul
1427-
style="list-style-type: none; padding: 0px;"
1436+
class="channel-guidance__list"
14281437
>
14291438
<li
14301439
class="nhsuk-u-margin-bottom-3"
@@ -1609,12 +1618,15 @@ exports[`renders page with preloaded field values 1`] = `
16091618
template-message
16101619
</textarea>
16111620
</div>
1612-
<p
1613-
id="character-count"
1614-
style=""
1621+
<div
1622+
class=""
16151623
>
1616-
16 of 5000 characters
1617-
</p>
1624+
<p
1625+
id="character-count"
1626+
>
1627+
16 of 5000 characters
1628+
</p>
1629+
</div>
16181630
<button
16191631
aria-disabled="false"
16201632
class="nhsuk-button"
@@ -1880,7 +1892,7 @@ exports[`renders page with preloaded field values 1`] = `
18801892
More about NHS App messages
18811893
</h2>
18821894
<ul
1883-
style="list-style-type: none; padding: 0px;"
1895+
class="channel-guidance__list"
18841896
>
18851897
<li
18861898
class="nhsuk-u-margin-bottom-3"
@@ -2043,12 +2055,15 @@ exports[`renders page without back link for initial state with id 1`] = `
20432055
template-message
20442056
</textarea>
20452057
</div>
2046-
<p
2047-
id="character-count"
2048-
style=""
2058+
<div
2059+
class=""
20492060
>
2050-
16 of 5000 characters
2051-
</p>
2061+
<p
2062+
id="character-count"
2063+
>
2064+
16 of 5000 characters
2065+
</p>
2066+
</div>
20522067
<button
20532068
aria-disabled="false"
20542069
class="nhsuk-button"
@@ -2314,7 +2329,7 @@ exports[`renders page without back link for initial state with id 1`] = `
23142329
More about NHS App messages
23152330
</h2>
23162331
<ul
2317-
style="list-style-type: none; padding: 0px;"
2332+
class="channel-guidance__list"
23182333
>
23192334
<li
23202335
class="nhsuk-u-margin-bottom-3"

‎frontend/src/__tests__/components/forms/SmsTemplateForm/SmsTemplateForm.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ describe('CreateSmsTemplate component', () => {
116116

117117
await user.type(templateMessageBox, longMessage);
118118

119-
const characterCount = document.querySelector('#smsMessageCharacterCount');
119+
const characterCount = document.querySelector('#character-count');
120120

121121
if (!characterCount) {
122122
throw new Error('Template name box not found');

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

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -165,8 +165,7 @@ exports[`CreateSmsTemplate component renders page one error 1`] = `
165165
</textarea>
166166
</div>
167167
<div
168-
id="smsMessageCharacterCount"
169-
style=""
168+
class=""
170169
>
171170
<p
172171
class="nhsuk-u-margin-bottom-0"
@@ -326,7 +325,7 @@ exports[`CreateSmsTemplate component renders page one error 1`] = `
326325
More about text messages
327326
</h2>
328327
<ul
329-
style="list-style-type: none; padding: 0px;"
328+
class="channel-guidance__list"
330329
>
331330
<li
332331
class="nhsuk-u-margin-bottom-3"
@@ -511,8 +510,7 @@ exports[`CreateSmsTemplate component renders page with back link if initial stat
511510
</textarea>
512511
</div>
513512
<div
514-
id="smsMessageCharacterCount"
515-
style=""
513+
class=""
516514
>
517515
<p
518516
class="nhsuk-u-margin-bottom-0"
@@ -672,7 +670,7 @@ exports[`CreateSmsTemplate component renders page with back link if initial stat
672670
More about text messages
673671
</h2>
674672
<ul
675-
style="list-style-type: none; padding: 0px;"
673+
class="channel-guidance__list"
676674
>
677675
<li
678676
class="nhsuk-u-margin-bottom-3"
@@ -893,8 +891,7 @@ exports[`CreateSmsTemplate component renders page with multiple errors 1`] = `
893891
</textarea>
894892
</div>
895893
<div
896-
id="smsMessageCharacterCount"
897-
style=""
894+
class=""
898895
>
899896
<p
900897
class="nhsuk-u-margin-bottom-0"
@@ -1054,7 +1051,7 @@ exports[`CreateSmsTemplate component renders page with multiple errors 1`] = `
10541051
More about text messages
10551052
</h2>
10561053
<ul
1057-
style="list-style-type: none; padding: 0px;"
1054+
class="channel-guidance__list"
10581055
>
10591056
<li
10601057
class="nhsuk-u-margin-bottom-3"
@@ -1217,8 +1214,7 @@ exports[`CreateSmsTemplate component renders page with no back link if initial s
12171214
</textarea>
12181215
</div>
12191216
<div
1220-
id="smsMessageCharacterCount"
1221-
style=""
1217+
class=""
12221218
>
12231219
<p
12241220
class="nhsuk-u-margin-bottom-0"
@@ -1378,7 +1374,7 @@ exports[`CreateSmsTemplate component renders page with no back link if initial s
13781374
More about text messages
13791375
</h2>
13801376
<ul
1381-
style="list-style-type: none; padding: 0px;"
1377+
class="channel-guidance__list"
13821378
>
13831379
<li
13841380
class="nhsuk-u-margin-bottom-3"

‎frontend/src/__tests__/components/molecules/__snapshots__/ChannelGuidance.test.tsx.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ exports[`ChannelGuidance component should correctly render the component for tem
88
More about emails
99
</h2>
1010
<ul
11-
style="list-style-type: none; padding: 0px;"
11+
class="channel-guidance__list"
1212
>
1313
<li
1414
class="nhsuk-u-margin-bottom-3"
@@ -55,7 +55,7 @@ exports[`ChannelGuidance component should correctly render the component for tem
5555
More about letters
5656
</h2>
5757
<ul
58-
style="list-style-type: none; padding: 0px;"
58+
class="channel-guidance__list"
5959
/>
6060
</DocumentFragment>
6161
`;
@@ -68,7 +68,7 @@ exports[`ChannelGuidance component should correctly render the component for tem
6868
More about NHS App messages
6969
</h2>
7070
<ul
71-
style="list-style-type: none; padding: 0px;"
71+
class="channel-guidance__list"
7272
>
7373
<li
7474
class="nhsuk-u-margin-bottom-3"
@@ -115,7 +115,7 @@ exports[`ChannelGuidance component should correctly render the component for tem
115115
More about text messages
116116
</h2>
117117
<ul
118-
style="list-style-type: none; padding: 0px;"
118+
class="channel-guidance__list"
119119
>
120120
<li
121121
class="nhsuk-u-margin-bottom-3"

‎frontend/src/components/forms/NhsAppTemplateForm/NhsAppTemplateForm.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import {
2323
} from 'nhs-notify-web-template-management-utils';
2424
import { createNhsAppTemplatePageContent } from '@content/content';
2525
import { useTextInput } from '@hooks/use-text-input.hook';
26-
import { useJsEnabledStyle } from '@hooks/use-js-enabled-style.hook';
26+
import { JsEnabled } from '@hooks/js-enabled/JsEnabled';
2727
import { ChannelGuidance } from '@molecules/ChannelGuidance/ChannelGuidance';
2828
import { NHSNotifyMain } from '@atoms/NHSNotifyMain/NHSNotifyMain';
2929
import { NHSNotifyButton } from '@atoms/NHSNotifyButton/NHSNotifyButton';
@@ -98,10 +98,12 @@ export const NhsAppTemplateForm: FC<
9898
error={templateMessageError}
9999
errorProps={{ id: 'nhsAppTemplateMessage--error-message' }}
100100
/>
101-
<p style={useJsEnabledStyle()} id='character-count'>
102-
{nhsAppTemplateMessage.length}
103-
{characterCountText}
104-
</p>
101+
<JsEnabled>
102+
<p id='character-count'>
103+
{nhsAppTemplateMessage.length}
104+
{characterCountText}
105+
</p>
106+
</JsEnabled>
105107
<NHSNotifyButton id='create-nhs-app-template-submit-button'>
106108
{buttonText}
107109
</NHSNotifyButton>

‎frontend/src/components/forms/SmsTemplateForm/SmsTemplateForm.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22

3-
import { useJsEnabledStyle } from '@hooks/use-js-enabled-style.hook';
3+
import { JsEnabled } from '@hooks/js-enabled/JsEnabled';
44
import { useTextInput } from '@hooks/use-text-input.hook';
55
import { MessageFormatting } from '@molecules/MessageFormatting/MessageFormatting';
66
import { NHSNotifyFormWrapper } from '@molecules/NHSNotifyFormWrapper/NHSNotifyFormWrapper';
@@ -88,7 +88,7 @@ export const SmsTemplateForm: FC<
8888
error={templateMessageError}
8989
errorProps={{ id: 'smsTemplateMessage--error-message' }}
9090
/>
91-
<div style={useJsEnabledStyle()} id='smsMessageCharacterCount'>
91+
<JsEnabled>
9292
<p className='nhsuk-u-margin-bottom-0' id='character-count'>
9393
{smsTemplateMessage.length} characters
9494
</p>
@@ -99,7 +99,7 @@ export const SmsTemplateForm: FC<
9999
)}
100100
{content.smsCountText2}
101101
</p>
102-
</div>
102+
</JsEnabled>
103103
<p>
104104
<a
105105
href={content.smsPricingLink}

‎frontend/src/components/molecules/ChannelGuidance/ChannelGuidance.module.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.channel-guidance {
2+
&__list {
3+
list-style-type: none;
4+
padding: 0;
5+
}
6+
}

‎frontend/src/components/molecules/ChannelGuidance/ChannelGuidance.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { TemplateType } from 'nhs-notify-web-template-management-utils';
22
import { channelGuidanceContent } from '@content/content';
3+
import styles from './ChannelGuidance.module.scss';
34

45
export type ChannelGuidanceType = {
56
template: TemplateType;
@@ -12,7 +13,7 @@ export function ChannelGuidance({ template }: ChannelGuidanceType) {
1213
{channelGuidanceContent[template].heading}
1314
</h2>
1415

15-
<ul style={{ listStyleType: 'none', padding: 0 }}>
16+
<ul className={styles['channel-guidance__list']}>
1617
{channelGuidanceContent[template].guidanceLinks.map((guidanceLink) => (
1718
<li className='nhsuk-u-margin-bottom-3' key={guidanceLink.text}>
1819
<a

0 commit comments

Comments
 (0)