Skip to content

Commit 8ba0329

Browse files
alexnuttallalexnuttall
committed
fix styling
1 parent c2c75e4 commit 8ba0329

File tree

5 files changed

+213
-110
lines changed

5 files changed

+213
-110
lines changed

‎frontend/src/__tests__/app/create-and-submit-templates/__snapshots__/page.test.tsx.snap‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,84 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`matches the snapshot 1`] = `
4+
<div>
5+
<main
6+
class="nhsuk-main-wrapper"
7+
id="maincontent"
8+
role="main"
9+
>
10+
<div
11+
class="nhsuk-grid-row"
12+
data-testid="page-content-wrapper"
13+
>
14+
<div
15+
class="nhsuk-grid-column-two-thirds"
16+
>
17+
<h1
18+
class="nhsuk-heading-xl"
19+
data-testid="page-heading"
20+
>
21+
Create and submit a template to NHS Notify
22+
</h1>
23+
<p>
24+
Use this tool to create and submit templates you want to send as messages using NHS Notify.
25+
</p>
26+
<p>
27+
You can create templates for:
28+
</p>
29+
<ul
30+
class="nhsuk-list nhsuk-list--bullet"
31+
>
32+
<li>
33+
NHS App messages
34+
</li>
35+
<li>
36+
emails
37+
</li>
38+
<li>
39+
text messages (SMS)
40+
</li>
41+
<li>
42+
letters
43+
</li>
44+
</ul>
45+
<p>
46+
When you submit a template, it will be used by NHS Notify to set up the messages you want to send.
47+
</p>
48+
<h2
49+
class="nhsuk-heading-l"
50+
data-testid="page-sub-heading"
51+
>
52+
Before you start
53+
</h2>
54+
<p>
55+
Only use this tool if your message content has been signed off by the relevant stakeholders in your team.
56+
</p>
57+
<p>
58+
You can save a template as a draft and edit it later.
59+
</p>
60+
<p>
61+
If you want to change a submitted template, you must create a new template to replace it.
62+
</p>
63+
<p>
64+
You can access this tool by signing in with your Care Identity.
65+
</p>
66+
<a
67+
aria-disabled="false"
68+
class="nhsuk-button"
69+
draggable="false"
70+
href="/templates/message-templates"
71+
role="button"
72+
>
73+
Start now
74+
</a>
75+
</div>
76+
</div>
77+
</main>
78+
</div>
79+
`;
80+
81+
exports[`matches the snapshot with letters feature flag disabled 1`] = `
482
<div>
583
<main
684
class="nhsuk-main-wrapper"

‎frontend/src/__tests__/app/create-and-submit-templates/page.test.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,25 @@
11
import { render } from '@testing-library/react';
22
import HomePage from '@app/create-and-submit-templates/page';
33

4+
const OLD_ENV = { ...process.env };
5+
6+
beforeEach(() => {
7+
jest.resetAllMocks();
8+
process.env.NEXT_PUBLIC_ENABLE_LETTERS = 'true';
9+
});
10+
11+
afterAll(() => {
12+
process.env = OLD_ENV;
13+
});
14+
415
it('matches the snapshot', () => {
516
const { container } = render(<HomePage />);
617
expect(container).toMatchSnapshot();
718
});
19+
20+
it('matches the snapshot with letters feature flag disabled', () => {
21+
process.env.NEXT_PUBLIC_ENABLE_LETTERS = 'false';
22+
23+
const { container } = render(<HomePage />);
24+
expect(container).toMatchSnapshot();
25+
});

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

Lines changed: 76 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -7,77 +7,84 @@ exports[`RequestProof component should render 1`] = `
77
id="maincontent"
88
role="main"
99
>
10-
<h1
11-
class="nhsuk-heading-l nhsuk-u-margin-bottom-0"
12-
id="request-proof"
10+
<div
11+
class="nhsuk-grid-row"
1312
>
14-
Request a proof of 'template-name'
15-
</h1>
16-
<h2
17-
class="nhsuk-heading-xs nhsuk-u-margin-bottom-1"
18-
>
19-
Before you request a proof of this template
20-
</h2>
21-
<p>
22-
You should only request a proof of the final version of a template you’ve created. This means that your template:
23-
</p>
24-
<ul>
25-
<li>
26-
is approved by the relevant stakeholders in your team
27-
</li>
28-
<li>
29-
does not have any spelling errors
30-
</li>
31-
<li>
32-
is formatted correctly
33-
</li>
34-
</ul>
35-
<p>
36-
If your template uses personalisation, check that you’ve uploaded your example personalisation data.
37-
</p>
38-
<p>
39-
It can take 5 to 10 working days to get a proof of your template.
40-
</p>
41-
<form
42-
action="javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')"
43-
>
44-
<input
45-
name="form-id"
46-
readonly=""
47-
type="hidden"
48-
value="submit-template-form"
49-
/>
50-
<input
51-
name="csrf_token"
52-
readonly=""
53-
type="hidden"
54-
value="no_token"
55-
/>
56-
<input
57-
name="templateId"
58-
readonly=""
59-
type="hidden"
60-
value="template-id"
61-
/>
62-
<a
63-
aria-disabled="false"
64-
class="nhsuk-button nhsuk-button--secondary nhsuk-u-margin-right-3"
65-
draggable="false"
66-
href="/templates/example/template-id"
67-
id="go-back-button"
68-
role="button"
69-
>
70-
Go back
71-
</a>
72-
<button
73-
aria-disabled="false"
74-
class="nhsuk-button"
75-
id="request-proof-button"
76-
type="submit"
13+
<div
14+
class="nhsuk-grid-column-two-thirds"
7715
>
78-
Request a proof
79-
</button>
80-
</form>
16+
<h1
17+
id="request-proof"
18+
>
19+
Request a proof of 'template-name'
20+
</h1>
21+
<h2
22+
class="nhsuk-heading-m"
23+
>
24+
Before you request a proof of this template
25+
</h2>
26+
<p>
27+
You should only request a proof of the final version of a template you’ve created. This means that your template:
28+
</p>
29+
<ul>
30+
<li>
31+
is approved by the relevant stakeholders in your team
32+
</li>
33+
<li>
34+
does not have any spelling errors
35+
</li>
36+
<li>
37+
is formatted correctly
38+
</li>
39+
</ul>
40+
<p>
41+
If your template uses personalisation, check that you’ve uploaded your example personalisation data.
42+
</p>
43+
<p>
44+
It can take 5 to 10 working days to get a proof of your template.
45+
</p>
46+
<form
47+
action="javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')"
48+
>
49+
<input
50+
name="form-id"
51+
readonly=""
52+
type="hidden"
53+
value="request-proof-form"
54+
/>
55+
<input
56+
name="csrf_token"
57+
readonly=""
58+
type="hidden"
59+
value="no_token"
60+
/>
61+
<input
62+
name="templateId"
63+
readonly=""
64+
type="hidden"
65+
value="template-id"
66+
/>
67+
<a
68+
aria-disabled="false"
69+
class="nhsuk-button nhsuk-button--secondary nhsuk-u-margin-right-3"
70+
draggable="false"
71+
href="/templates/example/template-id"
72+
id="go-back-button"
73+
role="button"
74+
>
75+
Go back
76+
</a>
77+
<button
78+
aria-disabled="false"
79+
class="nhsuk-button"
80+
id="request-proof-button"
81+
type="submit"
82+
>
83+
Request a proof
84+
</button>
85+
</form>
86+
</div>
87+
</div>
8188
</main>
8289
</DocumentFragment>
8390
`;

‎frontend/src/app/create-and-submit-templates/page.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@ export const metadata: Metadata = {
1010
};
1111

1212
export default function HomePage() {
13+
const channelList =
14+
process.env.NEXT_PUBLIC_ENABLE_LETTERS === 'true'
15+
? [...homePageContent.list, { key: 'template-4', item: 'letters' }]
16+
: homePageContent.list;
17+
1318
return (
1419
<NHSNotifyMain>
1520
<div className='nhsuk-grid-row' data-testid='page-content-wrapper'>
@@ -22,7 +27,7 @@ export default function HomePage() {
2227
<p>{homePageContent.text2}</p>
2328

2429
<ul className='nhsuk-list nhsuk-list--bullet'>
25-
{homePageContent.list.map(({ key, item }) => (
30+
{channelList.map(({ key, item }) => (
2631
<li key={key}>{item}</li>
2732
))}
2833
</ul>

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

Lines changed: 35 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
import { ConfirmCancelProps } from 'nhs-notify-web-template-management-utils';
44
import content from '@content/content';
55
import { NHSNotifyMain } from '@atoms/NHSNotifyMain/NHSNotifyMain';
6-
import concatClassNames from '@utils/concat-class-names';
76
import { NHSNotifyFormWrapper } from '@molecules/NHSNotifyFormWrapper/NHSNotifyFormWrapper';
87
import { NHSNotifyButton } from '@atoms/NHSNotifyButton/NHSNotifyButton';
98
import { getBasePath } from '@utils/get-base-path';
@@ -31,45 +30,41 @@ export function RequestProof({
3130

3231
return (
3332
<NHSNotifyMain>
34-
<h1
35-
id='request-proof'
36-
className={concatClassNames(
37-
'nhsuk-heading-l',
38-
'nhsuk-u-margin-bottom-0'
39-
)}
40-
>
41-
Request a proof of &apos;{templateName}&apos;
42-
</h1>
43-
<h2
44-
className={concatClassNames(
45-
'nhsuk-heading-xs',
46-
'nhsuk-u-margin-bottom-1'
47-
)}
48-
>
49-
{subHeading}
50-
</h2>
51-
<p>{requirementsIntro}</p>
52-
<ul>
53-
{requirementsList.map((text, i) => (
54-
<li key={i}>{text}</li>
55-
))}
56-
</ul>
57-
<p>{checkTestData}</p>
58-
<p>{waitTime}</p>
59-
<NHSNotifyFormWrapper formId='submit-template-form' action={action}>
60-
<input type='hidden' name='templateId' value={templateId} readOnly />
61-
<NHSNotifyButton
62-
secondary
63-
id='go-back-button'
64-
className='nhsuk-u-margin-right-3'
65-
href={goBackHref}
66-
>
67-
{buttons.back}
68-
</NHSNotifyButton>
69-
<NHSNotifyButton id='request-proof-button'>
70-
{buttons.confirm}
71-
</NHSNotifyButton>
72-
</NHSNotifyFormWrapper>
33+
<div className='nhsuk-grid-row'>
34+
<div className='nhsuk-grid-column-two-thirds'>
35+
<h1 id='request-proof'>
36+
Request a proof of &apos;{templateName}&apos;
37+
</h1>
38+
<h2 className='nhsuk-heading-m'>{subHeading}</h2>
39+
<p>{requirementsIntro}</p>
40+
<ul>
41+
{requirementsList.map((text, i) => (
42+
<li key={i}>{text}</li>
43+
))}
44+
</ul>
45+
<p>{checkTestData}</p>
46+
<p>{waitTime}</p>
47+
<NHSNotifyFormWrapper formId='request-proof-form' action={action}>
48+
<input
49+
type='hidden'
50+
name='templateId'
51+
value={templateId}
52+
readOnly
53+
/>
54+
<NHSNotifyButton
55+
secondary
56+
id='go-back-button'
57+
className='nhsuk-u-margin-right-3'
58+
href={goBackHref}
59+
>
60+
{buttons.back}
61+
</NHSNotifyButton>
62+
<NHSNotifyButton id='request-proof-button'>
63+
{buttons.confirm}
64+
</NHSNotifyButton>
65+
</NHSNotifyFormWrapper>
66+
</div>
67+
</div>
7368
</NHSNotifyMain>
7469
);
7570
}

0 commit comments

Comments
 (0)