Skip to content

Commit 448013d

Browse files
chris-elliott-nhsdchris-elliott-nhsd
committed
CCM-14758: Preview approved letter template
1 parent de0844d commit 448013d

20 files changed

Lines changed: 1214 additions & 79 deletions

File tree

‎frontend/src/__tests__/app/preview-approved-letter-template/__snapshots__/page.test.tsx.snap‎

Lines changed: 350 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,350 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`valid authoring letter template matches snapshot 1`] = `
4+
<DocumentFragment>
5+
<div
6+
class="nhsuk-width-container-fluid"
7+
>
8+
<div
9+
class="nhsuk-width-container"
10+
>
11+
<a
12+
class="nhsuk-back-link"
13+
data-testid="back-link-top"
14+
href="/message-templates"
15+
>
16+
Back to all templates
17+
</a>
18+
</div>
19+
<main
20+
class="nhsuk-main-wrapper"
21+
id="maincontent"
22+
role="main"
23+
>
24+
<div
25+
class="nhsuk-width-container"
26+
>
27+
<div
28+
class="nhsuk-grid-row"
29+
>
30+
<div
31+
class="nhsuk-grid-column-full"
32+
>
33+
<div
34+
class="nhsuk-u-reading-width"
35+
>
36+
<span
37+
class="nhsuk-caption-l"
38+
>
39+
Template
40+
</span>
41+
<h1
42+
class="preview__heading"
43+
data-testid="preview-message__heading"
44+
>
45+
authoring letter template name
46+
</h1>
47+
</div>
48+
<div
49+
class="nhsuk-width-container nhsuk-u-margin-bottom-6 nhsuk-body-m"
50+
>
51+
<dl
52+
class="nhsuk-summary-list nhsuk-u-margin-bottom-4 preview authoringLetterDetails"
53+
>
54+
<div
55+
class="nhsuk-summary-list__row"
56+
>
57+
<dt
58+
class="nhsuk-summary-list__key"
59+
>
60+
Template ID
61+
</dt>
62+
<dd
63+
class="nhsuk-summary-list__value monospace-font"
64+
data-testid="preview-template-id"
65+
>
66+
authoring-letter-template-id
67+
</dd>
68+
<dd
69+
class="nhsuk-summary-list__actions"
70+
/>
71+
</div>
72+
<div
73+
class="nhsuk-summary-list__row"
74+
>
75+
<dt
76+
class="nhsuk-summary-list__key"
77+
>
78+
Template type
79+
</dt>
80+
<dd
81+
class="nhsuk-summary-list__value"
82+
>
83+
Standard letter
84+
</dd>
85+
<dd
86+
class="nhsuk-summary-list__actions"
87+
/>
88+
</div>
89+
<div
90+
class="nhsuk-summary-list__row missing-value"
91+
id="campaign-id"
92+
>
93+
<dt
94+
class="nhsuk-summary-list__key"
95+
>
96+
Campaign
97+
</dt>
98+
<dd
99+
class="nhsuk-summary-list__value"
100+
/>
101+
<dd
102+
aria-hidden="true"
103+
class="nhsuk-summary-list__actions"
104+
/>
105+
</div>
106+
<div
107+
class="nhsuk-summary-list__row"
108+
>
109+
<dt
110+
class="nhsuk-summary-list__key"
111+
>
112+
Total pages
113+
</dt>
114+
<dd
115+
class="nhsuk-summary-list__value"
116+
>
117+
2
118+
</dd>
119+
<dd
120+
class="nhsuk-summary-list__actions"
121+
/>
122+
</div>
123+
<div
124+
class="nhsuk-summary-list__row"
125+
>
126+
<dt
127+
class="nhsuk-summary-list__key"
128+
>
129+
Sheets
130+
</dt>
131+
<dd
132+
class="nhsuk-summary-list__value"
133+
>
134+
1
135+
</dd>
136+
<dd
137+
class="nhsuk-summary-list__actions nhsuk-u-padding-right-4"
138+
>
139+
<a
140+
data-testid="sheets-action"
141+
href="https://notify.nhs.uk/pricing-and-commercial/letters"
142+
rel="noopener noreferrer"
143+
target="_blank"
144+
>
145+
Learn more
146+
<span
147+
class="nhsuk-u-visually-hidden"
148+
>
149+
about sheets
150+
</span>
151+
</a>
152+
</dd>
153+
</div>
154+
<div
155+
class="nhsuk-summary-list__row"
156+
>
157+
<dt
158+
class="nhsuk-summary-list__key"
159+
>
160+
Printing and postage
161+
</dt>
162+
<dd
163+
class="nhsuk-summary-list__value"
164+
>
165+
variant-123
166+
</dd>
167+
<dd
168+
aria-hidden="true"
169+
class="nhsuk-summary-list__actions"
170+
/>
171+
</div>
172+
<div
173+
class="nhsuk-summary-list__row"
174+
>
175+
<dt
176+
class="nhsuk-summary-list__key"
177+
>
178+
Status
179+
</dt>
180+
<dd
181+
class="nhsuk-summary-list__value"
182+
>
183+
<strong
184+
class="nhsuk-tag nhsuk-tag--green"
185+
data-status="proof-approved"
186+
data-testid="status-tag"
187+
>
188+
Approved
189+
</strong>
190+
</dd>
191+
<dd
192+
class="nhsuk-summary-list__actions nhsuk-u-padding-right-4"
193+
>
194+
<a
195+
data-testid="status-action"
196+
href="https://notify.nhs.uk/templates/what-template-statuses-mean"
197+
rel="noopener noreferrer"
198+
target="_blank"
199+
>
200+
Learn more
201+
<span
202+
class="nhsuk-u-visually-hidden"
203+
>
204+
about status
205+
</span>
206+
</a>
207+
</dd>
208+
</div>
209+
</dl>
210+
</div>
211+
</div>
212+
</div>
213+
</div>
214+
<section
215+
class="nhsuk-u-margin-top-6"
216+
>
217+
<h2
218+
class="nhsuk-heading-m"
219+
>
220+
Letter preview
221+
</h2>
222+
<p>
223+
Check how your personalisation fields will appear in your letter.
224+
</p>
225+
<div
226+
class="nhsuk-tabs nhsuk-u-margin-top-6"
227+
data-module="nhsuk-tabs"
228+
>
229+
<h2
230+
class="nhsuk-tabs__title"
231+
>
232+
Example personalisation data
233+
</h2>
234+
<ul
235+
class="nhsuk-tabs__list"
236+
role="tablist"
237+
>
238+
<li
239+
class="nhsuk-tabs__list-item nhsuk-tabs__list-item--selected"
240+
role="presentation"
241+
>
242+
<a
243+
aria-controls="tab-short"
244+
aria-selected="true"
245+
class="nhsuk-tabs__tab"
246+
href="#tab-short"
247+
id="tab_tab-short"
248+
role="tab"
249+
tabindex="0"
250+
>
251+
Short examples
252+
</a>
253+
</li>
254+
<li
255+
class="nhsuk-tabs__list-item"
256+
role="presentation"
257+
>
258+
<a
259+
aria-controls="tab-long"
260+
aria-selected="false"
261+
class="nhsuk-tabs__tab"
262+
href="#tab-long"
263+
id="tab_tab-long"
264+
role="tab"
265+
tabindex="-1"
266+
>
267+
Long examples
268+
</a>
269+
</li>
270+
</ul>
271+
<div
272+
aria-labelledby="tab_tab-short"
273+
class="nhsuk-tabs__panel"
274+
id="tab-short"
275+
role="tabpanel"
276+
>
277+
<div
278+
class="nhsuk-grid-row"
279+
>
280+
<div
281+
class="nhsuk-grid-column-one-third"
282+
>
283+
<h3
284+
class="nhsuk-heading-s"
285+
>
286+
PDS personalisation fields
287+
</h3>
288+
<label
289+
class="nhsuk-label nhsuk-label--s"
290+
>
291+
Example recipient
292+
</label>
293+
<div
294+
class="nhsuk-u-margin-bottom-4"
295+
/>
296+
</div>
297+
<div
298+
class="nhsuk-grid-column-two-thirds iframeColumn"
299+
>
300+
<iframe
301+
aria-label="PDF preview of letter template with short example personalisation data"
302+
src="/templates/files/undefined/renders/authoring-letter-template-id/render.pdf"
303+
title="Letter preview - short examples"
304+
/>
305+
</div>
306+
</div>
307+
</div>
308+
<div
309+
aria-labelledby="tab_tab-long"
310+
class="nhsuk-tabs__panel nhsuk-tabs__panel--hidden"
311+
id="tab-long"
312+
role="tabpanel"
313+
>
314+
<div
315+
class="nhsuk-grid-row"
316+
>
317+
<div
318+
class="nhsuk-grid-column-one-third"
319+
>
320+
<h3
321+
class="nhsuk-heading-s"
322+
>
323+
PDS personalisation fields
324+
</h3>
325+
<label
326+
class="nhsuk-label nhsuk-label--s"
327+
>
328+
Example recipient
329+
</label>
330+
<div
331+
class="nhsuk-u-margin-bottom-4"
332+
/>
333+
</div>
334+
<div
335+
class="nhsuk-grid-column-two-thirds iframeColumn"
336+
>
337+
<iframe
338+
aria-label="PDF preview of letter template with long example personalisation data"
339+
src="/templates/files/undefined/renders/authoring-letter-template-id/render.pdf"
340+
title="Letter preview - long examples"
341+
/>
342+
</div>
343+
</div>
344+
</div>
345+
</div>
346+
</section>
347+
</main>
348+
</div>
349+
</DocumentFragment>
350+
`;

0 commit comments

Comments
 (0)