Add panel component and confirmation pages pattern

CHANGELOG.md

@@ -1,5 +1,11 @@
 # NHS digital service manual Changelog
 
+## 7.5.0 - TBC February 2025
+
+:new: **New features**
+- Add new panel component and confirmation page pattern
+- Update mention of WCAG 2.2 in guidance about PDFs
+
 ## 7.4.0 - 21 January 2025
 
 :wrench: **Maintenance**

app/views/content/how-to-write-good-questions-for-forms/write-the-supporting-content-for-your-form.njk

@@ -138,7 +138,7 @@
   <p>Consider how you can reassure users they have completed the form and help them understand what to do next.</p>
   <p>You could try:</p>
   <ul>
-    <li>a confirmation page, like the <a href="https://design-system.service.gov.uk/patterns/confirmation-pages/">GOV.UK confirmation page pattern</a> (we are developing <a href="https://github.com/nhsuk/nhsuk-service-manual-backlog/issues/144">an NHS confirmation page pattern for the service manual in GitHub)</a></li>
+    <li>a <a href="/design-system/patterns/confirmation-page">confirmation page</a></li>
     <li>a <a href="/design-system/components/summary-list">summary list</a> to summarise users' responses and let them check their answers, as in <a href="https://design-system.service.gov.uk/patterns/check-answers/">the GOV.UK check answers pattern</a></li>
     <li><a href="/content/how-to-write-good-questions-for-forms/think-of-the-form-as-a-conversation#pause-to-allow-users-to-reflect">pausing to allow users to reflect, for example, for a declaration</a> or "signature"</li>
   </ul>

app/views/content/pdfs-and-other-non-html-documents.njk

@@ -1,7 +1,7 @@
 {% set pageTitle = "PDFs and other non-HTML documents" %}
 {% set pageSection = "Content guide" %}
 {% set pageDescription = "HTML is the code for creating web pages. We avoid all non-HTML documents, including PDFs." %}
-{% set dateUpdated = "February 2022" %}
+{% set dateUpdated = "February 2025" %}
 {% set backlog_issue_id = "161" %}
 
 {% extends "includes/app-layout.njk" %}
@@ -42,8 +42,8 @@
   </ul>
 
   <h3>Make PDFs accessible</h3>
-  <p>If you have to create a new PDF, it must meet WCAG 2.1 to level AA.</p>
-  <p>If you create your PDF correctly and save it in PDF/A (archiving) format, it can meet WCAG 2.1 AA. (Follow the <a href="https://www.gov.uk/guidance/publishing-accessible-documents">GOV.UK guidance on publishing accessible documents</a>.)</p>
+  <p>If you have to create a new PDF, it must meet WCAG 2.2 to level AA.</p>
+  <p>If you create your PDF correctly and save it in PDF/A (archiving) format, it can meet WCAG 2.2 AA. (Follow the <a href="https://www.gov.uk/guidance/publishing-accessible-documents">GOV.UK guidance on publishing accessible documents</a>.)</p>
   <p>PDFs must have</p>
   <ul>
     <li>a logical structure based on tags and headings</li>

app/views/design-system/components/panel/default/index.njk

@@ -0,0 +1,6 @@
+{% from 'panel/macro.njk' import panel %}
+
+{{ panel({
+  titleText: "Application complete",
+  html: "Confirmation has been sent to you by email"
+}) }}

app/views/design-system/components/panel/index.njk

@@ -0,0 +1,47 @@
+{% set pageTitle = "Panel" %}
+{% set pageSection = "Design system" %}
+{% set subSection = "Components" %}
+{% set pageDescription = "Use a panel to highlight that users have done something successfully." %}
+{% set theme = "Content presentation" %}
+{% set dateUpdated = "February 2025" %}
+{% set backlog_issue_id = "537" %}
+
+{% extends "includes/app-layout.njk" %}
+
+{% block breadcrumb %}
+  {% include "design-system/components/_breadcrumb.njk" %}
+{% endblock %}
+
+{% block bodyContent %}
+
+  {{ designExample({
+    group: "components",
+    item: "panel",
+    type: "default"
+  }) }}
+
+  <h2 id="when-to-use">When to use a panel</h2>
+  <p>Use the panel component to display important information when a transaction has been completed.</p>
+  <p>In most cases, the panel component is used on <a href="/design-system/patterns/confirmation-page">confirmation pages</a>, to tell the user they have successfully completed the transaction.</p>
+
+  <h2 id="when-not-to-use">When not to use a panel</h2>
+  <p>Never use the panel component to highlight important information in body content. Instead consider using:</p>
+  <ul>
+    <li><a href="/design-system/components/inset-text">inset text</a></li>
+    <li><a href="/design-system/components/warning-callout">warning callout</a></li>
+    <li><a href="/design-system/patterns/help-users-decide-when-and-where-to-get-care">the pattern to help users decide when and where to get care (care cards)</a></li>
+  </ul>
+
+  <h2 id="how-to-use">How to use a panel</h2>
+  <p>A panel is made up of:</p>
+  <ul>
+    <li>a heading that confirms what has happened</li>
+    <li>description text, which is optional</li>
+  </ul>
+
+  <h3 id="how-to-write-panel-text">How to write panel text</h3>
+  <p>Keep your panel text brief. It only needs to summarise what has happened. For example, "Application complete".</p>
+  <p>Use short words and phrases to make sure highlighted information is easy to read at different screen sizes. Shorter text is less likely to wrap around the panel, which can happen when using the zoom function on mobiles.</p>
+  <p>If you need to give detailed information, or more context, use the description text under the heading text.</p>
+
+{% endblock %}

app/views/design-system/components/panel/macro-options.json

@@ -0,0 +1,53 @@
+{
+    "params": [
+      {
+        "name": "titleText",
+        "type": "string",
+        "required": true,
+        "description": "If `titleHtml` is set, this is not required. Text to use within the panel. If `titleHtml` is provided, the `titleText` option will be ignored."
+      },
+      {
+        "name": "titleHtml",
+        "type": "string",
+        "required": false,
+        "description": "If `titleText` is set, this is not required. HTML to use within the panel. If `titleHtml` is provided, the `titleText` option will be ignored."
+      },
+      {
+        "name": "headingLevel",
+        "type": "integer",
+        "required": false,
+        "description": "Heading level, from `1` to `6`. Default is `1`."
+      },
+      {
+        "name": "text",
+        "type": "string",
+        "required": false,
+        "description": "If `html` is set, this is not required. Text to use within the panel content. If `html` is provided, the `text` option will be ignored."
+      },
+      {
+        "name": "html",
+        "type": "string",
+        "required": false,
+        "description": "If `text` is set, this is not required. Text to use within the panel content. If `text` is provided, the `html` option will be ignored."
+      },
+      {
+        "name": "caller",
+        "type": "nunjucks-block",
+        "required": false,
+        "description": "Not strictly a parameter but a Nunjucks code convention. Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire panel component in a `call` block."
+      },
+      {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Optional additional classes to add to the hint `div` tag. Separate each class with a space."
+      },
+      {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "Any extra HTML attributes (for example data attributes) to add to the input component."
+      }
+    ]
+  }
+

app/views/design-system/patterns/confirmation-page/default/index.njk

@@ -0,0 +1,44 @@
+{% extends "includes/design-example-wrapper-full-layout.njk" %}
+
+{% from 'panel/macro.njk' import panel %}
+{% from "summary-list/macro.njk" import summaryList %}
+
+{% block content %}
+    <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+
+            {{ panel({
+                titleText: "Booking complete",
+                html: "Confirmation has been sent to you by email"
+            }) }}
+
+            <h2 class="nhsuk-heading-m">Your appointment details</h2>
+
+                {{ summaryList({
+                classes: 'nhsuk-summary-list--no-border',
+                rows: [
+                    {
+                        key: {
+                            text: "Site location"
+                        },
+                        value: {
+                            html: "St Georges Pharmacy<br>46 St George's Rd,<br>Elephant and Castle,<br>London<br>SE1 6ET<br>
+                            <a href='#'>Map and directions (opens in a new tab)</a>"
+                        }
+                    },
+                    {
+                        key: {
+                            text: "Date and time"
+                        },
+                        value: {
+                            text: "Thursday 15 June at 9:10am"
+                        }
+                    }
+                ]
+                }) }}
+
+            <p><a href="#" class="nhsuk-link">Tell us about your experience using this service (opens in a new tab)</a></p>
+
+        </div>
+    </div>
+{% endblock %}

app/views/design-system/patterns/confirmation-page/index.njk

@@ -0,0 +1,75 @@
+{% set pageTitle = "Confirmation page" %}
+{% set pageDescription = "Use a confirmation page to show users they have completed a task." %}
+{% set pageSection = "Design system" %}
+{% set subSection = "Patterns" %}
+{% set theme = "Pages" %}
+{% set dateUpdated = "February 2025" %}
+{% set backlog_issue_id = "144" %}
+
+{% extends "includes/app-layout.njk" %}
+
+{% block breadcrumb %}
+  {% include "design-system/patterns/_breadcrumb.njk" %}
+{% endblock %}
+
+{% block bodyContent %}
+
+  {{ designExample({
+    group: "patterns",
+    item: "confirmation-page",
+    type: "default",
+    fullpage: true,
+    showArguments: false
+  }) }}
+
+  <h2 id="when-to-use">When to use a confirmation page</h2>
+  <p>You should use a confirmation page at the end of a transactional journey.</p>
+
+  <h2 id="how-to-use">How to use a confirmation page</h2>
+  <p>Confirmation pages must include:</p>
+  <ul>
+	  <li>a <a href="/design-system/components/panel">green confirmation panel</a>, with a heading that confirms what the user has done</li>
+    <li>details about what will happen next and when</li>
+  </ul>
+  <p>You may also find a need to include:</p>
+  <ul>
+    <li>an application or reference number, if there is one – include this in the description text in the green panel</li>
+    <li>instructions about other steps the user needs to take</li>
+    <li>a summary of the details they have submitted</li>
+    <li>a way to give feedback about the service</li>
+    <li>links to more information or related services that may be helpful</li>
+  </ul>
+
+  <h3>Explain any reference numbers</h3>
+  <p>Tell people:</p>
+  <ul>
+    <li>what the reference number is</li>
+    <li>why they need it</li>
+    <li>if they should keep it (only show a number if people need to keep it)</li>
+  </ul>
+
+  <h2>How not to use a confirmation page</h2>
+  <p>Avoid including too many different components on a confirmation page. Research suggests they can overwhelm people.</p>
+
+  <h2>Accessibility</h2>
+  <p>If you add any interactive elements, make sure the panel or focus state are still accessible.</p>
+
+  <h2 id="research">Research</h2>
+  <p>In our research, people found the green panel at the top of the confirmation page reassuring. They quickly understood the key message. The left-aligned heading text tested well with people who had visual impairments and used screen readers.</p>
+  <p>We also tested the green panel with people who had colour blindness. They were able to read the text clearly. They were also able to recognise the shade of green and understood that this was a confirmation page.</p>
+  <p>Some people became confused about the next step when presented with several different components on a confirmation page. This was especially the case for people who used screen readers.</p>
+
+  <h3>Known gaps</h3>
+  <p>We need more evidence to understand whether people:</p>
+  <ul>
+    <li>find it helpful to save the information on confirmation pages</li>
+    <li>try to return to confirmation pages after completing their transaction</li>
+  </ul>
+  <p>In testing, we used a confirmation page at the end of a GP appointment booking journey. Some people said they would take a screenshot of the confirmation page on their phone. GOV.UK found that some users bookmark and return to confirmation pages.</p>
+  <p>Some people wanted more reassurance that there was nothing more for them to do before their appointment. It may be helpful to say this in the content, when relevant.</p>
+  <p>We are also looking for more evidence about the green panel at the top of confirmation pages. Particularly:</p>
+  <ul>
+    <li>any issues with colour contrast</li>
+    <li>suitability for people who use reverse colours or are sensitive to light</li>
+  </ul>
+{% endblock %}

app/views/includes/_side-nav.njk

@@ -104,6 +104,7 @@
   { title: "Expander", url: "/design-system/components/expander" },
   { title: "Images", url: "/design-system/components/images" },
   { title: "Inset text", url: "/design-system/components/inset-text" },
+  { title: "Panel", url: "/design-system/components/panel" },
   { title: "Review date", url: "/design-system/components/review-date" },
   { title: "Summary list", url: "/design-system/components/summary-list" },
   { title: "Table", url: "/design-system/components/table" },
@@ -141,6 +142,7 @@
 
 {% set pages = [
   { title: "A to Z page", url: "/design-system/patterns/a-to-z-page" },
+  { title: "Confirmation page", url: "/design-system/patterns/confirmation-page" },
   { title: "Mini-hub", url: "/design-system/patterns/mini-hub" },
   { title: "Start page", url: "/design-system/patterns/start-page" }
 ] %}

app/views/includes/layout.njk

@@ -28,6 +28,7 @@
 {%- from 'summary-list/macro.njk' import summaryList %}
 {%- from 'textarea/macro.njk' import textarea %}
 {%- from 'task-list/macro.njk' import taskList %}
+{%- from 'panel/macro.njk' import panel %}
 {%- from 'includes/design-example.njk' import designExample %}
 <!DOCTYPE html>
   <html lang="en">

app/views/index.njk

@@ -22,7 +22,7 @@
           <div class="nhsuk-card app-card--transparent nhsuk-u-margin-bottom-0 nhsuk-u-margin-top-0">
             <div class="nhsuk-card__content">
               <h2 class="nhsuk-card__heading nhsuk-heading-m"><a href="/whats-new">What's new</a></h2>
-              <p class="nhsuk-card__description">Minor updates and fixes.</p>
+              <p class="nhsuk-card__description">Added new <a href="/design-system/components/panel">panel component</a> and <a href="/design-system/patterns/confirmation-page">confirmation page pattern</a></p>
             </div>
           </div>
         </div>

app/views/site-map.njk

@@ -97,6 +97,7 @@
             <li><a href="/design-system/components/images">Images</a></li>
             <li><a href="/design-system/components/inset-text">Inset text</a></li>
             <li><a href="/design-system/components/pagination">Pagination</a></li>
+            <li><a href="/design-system/components/panel">Panel</a></li>
             <li><a href="/design-system/components/radios">Radios</a></li>
             <li><a href="/design-system/components/review-date">Review date</a></li>
             <li><a href="/design-system/components/select">Select</a></li>
@@ -116,9 +117,9 @@
             <li><a href="/design-system/patterns/ask-for-nhs-numbers">Ask users for their NHS number</a></li>
             <li><a href="/design-system/patterns/a-to-z-page">A to Z</a></li>
             <li><a href="/design-system/patterns/complete-multiple-tasks">Complete multiple tasks</a></li>
+            <li><a href="/design-system/patterns/confirmation-page">Confirmation page</a></li>
             <li><a href="/design-system/patterns/help-users-decide-when-and-where-to-get-care">Help users decide when and where to get care (care cards)</a></li>
             <li><a href="/design-system/patterns/mini-hub">Mini-hub</a></li>
-            <li><a href="/design-system/patterns/start-page">Start page</a></li>
             <li><a href="/design-system/patterns/know-that-a-page-is-up-to-date">Reassure users that information is up-to-date</a></li>
             <li><a href="/design-system/patterns/start-page">Start page</a></li>
           </ul>

app/views/whats-new/index.njk

@@ -9,41 +9,33 @@
 
   <h2>Latest updates</h2>
 
-  <h3>January 2025</h3>
+  <h3>February 2025</h3>
   <table class="nhsuk-table">
-    <caption class="nhsuk-table__caption nhsuk-u-visually-hidden">Updates to the service manual in January 2025</caption>
+    <caption class="nhsuk-table__caption nhsuk-u-visually-hidden">Updates to the service manual in February 2025</caption>
     <thead class="nhsuk-table__head">
       <tr class="nhsuk-table__row">
         <th class="nhsuk-table__header" scope="col" style="width: 25%;">Section</th>
         <th class="nhsuk-table__header" scope="col">Update</th>
       </tr>
     </thead>
     <tbody class="nhsuk-table__body">
-  <tr>
-    <td class="nhsuk-table__cell">Accessibility</td>
-    <td class="nhsuk-table__cell">
-    <p>Removed same-page profession links as they have caused confusion in testing</p>
-    <p>Updated page on <a href="/accessibility/getting-started">Getting started with accessibility</a></p>
-    </td>
-  </tr>
-  <tr>
-    <td class="nhsuk-table__cell">Content guide</td>
-    <td class="nhsuk-table__cell">
-    <p>Changed jump link IDs on the <a href="/content/a-to-z-of-nhs-health-writing">A to Z of NHS health writing</a></p>
-    </td>
-  </tr>
-  <tr>
-    <td class="nhsuk-table__cell">Design system</td>
-    <td class="nhsuk-table__cell">
-    <p>Updated example code in <a href="/design-system/components/images">image component</a></p>
-    <p>Removed broken link on <a href="design-system/components/select">Select component page</a> and added new research section</p>
-    <p>Changed jump link IDs on <a href="/design-system/patterns/a-to-z-page">A to Z page pattern</a> to lower case</p>
-    </td>
-  </tr>
+      <tr>
+      <td class="nhsuk-table__cell">Content guide</td>
+      <td class="nhsuk-table__cell">
+      <p>Updated guidance on <a href="/content/pdfs-and-other-non-html-documents">PDFs and other non-HTML documents</a> to mention WCAG 2.2</p>
+      </td>
+      </tr>
+      <tr>
+      <td class="nhsuk-table__cell">Design system</td>
+      <td class="nhsuk-table__cell">
+      <p>Added new <a href="/design-system/components/panel">panel component</a> and <a href="/design-system/patterns/confirmation-page">confirmation page pattern</a></p>
+      </td>
+      </tr>
     </tbody>
   </table>
 
 
+
   <p><a href="/whats-new/updates">See all updates</a></p>
 
   <h2>Latest blog posts</h2>