Add panel component and confirmation pages pattern

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

@@ -0,0 +1,34 @@
+{% set pageTitle = "Panel" %}
+{% set pageSection = "Design system" %}
+{% set subSection = "Components" %}
+{% set pageDescription = "The panel component is a visible container used on confirmation or results pages to highlight important content." %}
+{% set theme = "Navigation" %}
+{% 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 %}
+
+  [add example here]
+
+  <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>In most cases, the panel component is used on <a href="/design-system/patterns/confirmation-pages">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 within body content.</p>
+
+  <h2 id="how-to-use">How to use a panel</h2>
+  <p>(Some info about heading and descriptive text?)</p>
+
+  <h3 id="how-to-write-panel-text">How to write panel text</h3>
+  <p>Keep your panel text brief, as it's only meant for a high-level explanation of 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. A shorter amount of information 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/patterns/confirmation-pages/default/index.njk

@@ -0,0 +1 @@
+{% extends "includes/design-example-wrapper-full-layout.njk" %}

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

@@ -0,0 +1,60 @@
+{% set pageTitle = "Confirmation pages" %}
+{% set pageDescription = "Use a confirmation page to show users they have completed a task." %}
+{% set pageSection = "Design system" %}
+{% set subSection = "Patterns" %}
+{% set theme = "Page types" %}
+{% 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 %}
+
+  [add example here]
+
+  <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 green confirmation panel, with a heading that confirms what the user has done</li>
+	  <li>an application or reference number, if there is one</li>
+    <li>details about what will happen next and when</li>
+  </ul>
+  <p>You may also find a need to include:</p>
+  <ul>
+    <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>
+
+  <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 to be 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 have also tested the green panel with participants who had colour blindness. They were able to read the text clearly. They understood what the colour is intended to signal.</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 our testing, some participants said they would take a screenshot of the confirmation page on their phone. GOV.UK have found that some users bookmark and return to error pages.</p> 
+  <p>We are also looking for more evidence about the green confirmation 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" },
@@ -135,6 +136,7 @@
 
 {% set pages = [
   { title: "A to Z page", url: "/design-system/patterns/a-to-z-page" },
+  { title: "Confirmation pages", url: "/design-system/patterns/confirmation-pages" },
   { title: "Mini-hub", url: "/design-system/patterns/mini-hub" },
   { title: "Start page", url: "/design-system/patterns/start-page" }
 ] %}

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>
@@ -114,9 +115,9 @@
           <ul class="nhsuk-u-nested-list">
             <li><a href="/design-system/patterns/ask-users-for-their-nhs-number">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/confirmation-pages">Confirmation pages</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/reassure-users-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>