From fde7c4a29c4edf5fb99d2dc626a19120c13bb78e Mon Sep 17 00:00:00 2001 From: Dave Hunter Date: Thu, 12 Sep 2024 15:28:03 +0100 Subject: [PATCH 01/16] add placeholder guidance for panel and confirmation pages guidance --- .../components/panel/default/index.njk | 0 .../design-system/components/panel/index.njk | 36 +++++++++++++++++++ .../components/panel/macro-options.json | 0 .../confirmation-pages/default/index.njk | 1 + .../patterns/confirmation-pages/index.njk | 25 +++++++++++++ app/views/includes/_side-nav.njk | 2 ++ app/views/site-map.njk | 3 +- 7 files changed, 66 insertions(+), 1 deletion(-) create mode 100644 app/views/design-system/components/panel/default/index.njk create mode 100644 app/views/design-system/components/panel/index.njk create mode 100644 app/views/design-system/components/panel/macro-options.json create mode 100644 app/views/design-system/patterns/confirmation-pages/default/index.njk create mode 100644 app/views/design-system/patterns/confirmation-pages/index.njk diff --git a/app/views/design-system/components/panel/default/index.njk b/app/views/design-system/components/panel/default/index.njk new file mode 100644 index 000000000..e69de29bb diff --git a/app/views/design-system/components/panel/index.njk b/app/views/design-system/components/panel/index.njk new file mode 100644 index 000000000..542d44839 --- /dev/null +++ b/app/views/design-system/components/panel/index.njk @@ -0,0 +1,36 @@ +{% 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 = "September 2024" %} +{% set backlog_issue_id = "0" %} + +{% extends "includes/app-layout.njk" %} + +{% block breadcrumb %} + {% include "design-system/components/_breadcrumb.njk" %} +{% endblock %} + +{% block bodyContent %} + + [add example here] + +

When to use a panel

+

Use the panel component to display important information when a transaction has been completed. +

In most cases, the panel component is used on confirmation pages, to tell the user they have successfully completed the transaction.

+ +

When not to use a panel

+

Never use the panel component to highlight important information within body content.

+ +

How to use a panel

+

There are 2 ways to use the panel component. You can use HTML or, if you are using Nunjucks or the NHS prototype kit, you can use the Nunjucks macro.

+ + [add example here] + +

How to write panel text

+

Keep your panel text brief, as it's only meant for a high-level explanation of what has happened. For example, 'Application complete'.

+

Aim to use short words and phrases to make sure highlighted information is easy to read at different screen sizes. For example, shorter amounts of information is less likely to wrap around the panel, which can happen when using the zoom function on mobiles.

+

If you need to give detailed information, or more context, use the description text under the heading text.

+ +{% endblock %} diff --git a/app/views/design-system/components/panel/macro-options.json b/app/views/design-system/components/panel/macro-options.json new file mode 100644 index 000000000..e69de29bb diff --git a/app/views/design-system/patterns/confirmation-pages/default/index.njk b/app/views/design-system/patterns/confirmation-pages/default/index.njk new file mode 100644 index 000000000..0cd2b18c9 --- /dev/null +++ b/app/views/design-system/patterns/confirmation-pages/default/index.njk @@ -0,0 +1 @@ +{% extends "includes/design-example-wrapper-full-layout.njk" %} \ No newline at end of file diff --git a/app/views/design-system/patterns/confirmation-pages/index.njk b/app/views/design-system/patterns/confirmation-pages/index.njk new file mode 100644 index 000000000..29ebdabf1 --- /dev/null +++ b/app/views/design-system/patterns/confirmation-pages/index.njk @@ -0,0 +1,25 @@ +{% set pageTitle = "Confirmation pages" %} +{% set pageDescription = "Use this pattern to let users know they've completed a transaction." %} +{% set pageSection = "Design system" %} +{% set subSection = "Patterns" %} +{% set theme = "Page types" %} +{% set dateUpdated = "September 2024" %} +{% set backlog_issue_id = "144" %} + +{% extends "includes/app-layout.njk" %} + +{% block breadcrumb %} + {% include "design-system/patterns/_breadcrumb.njk" %} +{% endblock %} + +{% block bodyContent %} + + [add example here] + +

When to use this pattern

+ +

How it works

+ +

Research on this pattern

+ +{% endblock %} diff --git a/app/views/includes/_side-nav.njk b/app/views/includes/_side-nav.njk index 0d8191912..5a434c5dc 100644 --- a/app/views/includes/_side-nav.njk +++ b/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" } ] %} diff --git a/app/views/site-map.njk b/app/views/site-map.njk index 96091ec12..7c9ca40b2 100644 --- a/app/views/site-map.njk +++ b/app/views/site-map.njk @@ -97,6 +97,7 @@
  • Images
  • Inset text
  • Pagination
    • +
  • Panel
  • Radios
  • Review date
  • Select
    • @@ -114,9 +115,9 @@ From 4979e1ba5eec333ef1727415cf3b69fac79f5519 Mon Sep 17 00:00:00 2001 From: Sara Wilcox Date: Wed, 8 Jan 2025 11:15:28 +0000 Subject: [PATCH 02/16] Add content to confirmation page --- .../design-system/components/panel/index.njk | 12 ++--- .../patterns/confirmation-pages/index.njk | 51 ++++++++++++++++--- 2 files changed, 48 insertions(+), 15 deletions(-) diff --git a/app/views/design-system/components/panel/index.njk b/app/views/design-system/components/panel/index.njk index 542d44839..c7c3fafca 100644 --- a/app/views/design-system/components/panel/index.njk +++ b/app/views/design-system/components/panel/index.njk @@ -3,8 +3,8 @@ {% 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 = "September 2024" %} -{% set backlog_issue_id = "0" %} +{% set dateUpdated = "February 2025" %} +{% set backlog_issue_id = "537" %} {% extends "includes/app-layout.njk" %} @@ -24,13 +24,11 @@

    Never use the panel component to highlight important information within body content.

    How to use a panel

    -

    There are 2 ways to use the panel component. You can use HTML or, if you are using Nunjucks or the NHS prototype kit, you can use the Nunjucks macro.

    - - [add example here] +

    (Some info about heading and descriptive text?)

    How to write panel text

    -

    Keep your panel text brief, as it's only meant for a high-level explanation of what has happened. For example, 'Application complete'.

    -

    Aim to use short words and phrases to make sure highlighted information is easy to read at different screen sizes. For example, shorter amounts of information is less likely to wrap around the panel, which can happen when using the zoom function on mobiles.

    +

    Keep your panel text brief, as it's only meant for a high-level explanation of what has happened. For example, "Application complete".

    +

    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.

    If you need to give detailed information, or more context, use the description text under the heading text.

    {% endblock %} diff --git a/app/views/design-system/patterns/confirmation-pages/index.njk b/app/views/design-system/patterns/confirmation-pages/index.njk index 29ebdabf1..8c615256d 100644 --- a/app/views/design-system/patterns/confirmation-pages/index.njk +++ b/app/views/design-system/patterns/confirmation-pages/index.njk @@ -1,9 +1,9 @@ {% set pageTitle = "Confirmation pages" %} -{% set pageDescription = "Use this pattern to let users know they've completed a transaction." %} +{% 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 = "September 2024" %} +{% set dateUpdated = "February 2025" %} {% set backlog_issue_id = "144" %} {% extends "includes/app-layout.njk" %} @@ -16,10 +16,45 @@ [add example here] -

    When to use this pattern

    - -

    How it works

    - -

    Research on this pattern

    - +

    When to use a confirmation page

    +

    You should use a confirmation page at the end of a transactional journey.

    + +

    How to use a confirmation page

    +

    Confirmation pages must include:

    + +

    You may also find a need to include:

    + + +

    How not to use a confirmation page

    +

    Avoid including too many different components on a confirmation page. Research suggests they can overwhelm people.

    + +

    Accessibility

    +

    If you add any interactive elements, make sure the panel or focus state are still accessible.

    + +

    Research

    +

    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.

    +

    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.

    +

    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.

    + +

    Known gaps

    +

    We need more evidence to understand whether people:

    + +

    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.

    +

    We are also looking for more evidence about the green confirmation panel at the top of confirmation pages. Particularly:

    + {% endblock %} From e36e0bc340ebd918d859638c451853ee6634ac1c Mon Sep 17 00:00:00 2001 From: Ananda Maryon Date: Thu, 9 Jan 2025 09:55:05 +0000 Subject: [PATCH 03/16] update pattern title for new pattern sidenav --- app/views/design-system/patterns/confirmation-pages/index.njk | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/design-system/patterns/confirmation-pages/index.njk b/app/views/design-system/patterns/confirmation-pages/index.njk index 8c615256d..a254f38ef 100644 --- a/app/views/design-system/patterns/confirmation-pages/index.njk +++ b/app/views/design-system/patterns/confirmation-pages/index.njk @@ -2,7 +2,7 @@ {% 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 theme = "Pages" %} {% set dateUpdated = "February 2025" %} {% set backlog_issue_id = "144" %} From 7de35a68c7ca8c9f8e780ace2b57572032082513 Mon Sep 17 00:00:00 2001 From: Ananda Maryon Date: Tue, 14 Jan 2025 16:53:42 +0000 Subject: [PATCH 04/16] attempt to add examples, not working yet --- app/views/design-system/components/panel/default/index.njk | 6 ++++++ app/views/design-system/components/panel/index.njk | 7 ++++++- app/views/includes/layout.njk | 1 + package-lock.json | 6 +++--- package.json | 1 + 5 files changed, 17 insertions(+), 4 deletions(-) diff --git a/app/views/design-system/components/panel/default/index.njk b/app/views/design-system/components/panel/default/index.njk index e69de29bb..a5ecf0e25 100644 --- a/app/views/design-system/components/panel/default/index.njk +++ b/app/views/design-system/components/panel/default/index.njk @@ -0,0 +1,6 @@ +{% from 'panel/macro.njk' import panel %} + +{{ panel({ + titleText: "Application complete", + html: "Your reference number
    HDJ2123F" +}) }} \ No newline at end of file diff --git a/app/views/design-system/components/panel/index.njk b/app/views/design-system/components/panel/index.njk index c7c3fafca..311be25e1 100644 --- a/app/views/design-system/components/panel/index.njk +++ b/app/views/design-system/components/panel/index.njk @@ -14,7 +14,12 @@ {% block bodyContent %} - [add example here] +[Example goes here] + {# {{ designExample({ + group: "components", + item: "panel", + type: "default" + }) }} #}

    When to use a panel

    Use the panel component to display important information when a transaction has been completed. diff --git a/app/views/includes/layout.njk b/app/views/includes/layout.njk index f5865d816..b509fd11e 100755 --- a/app/views/includes/layout.njk +++ b/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 %} diff --git a/package-lock.json b/package-lock.json index b6b87ea62..c3c9dc569 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,7 +22,7 @@ "highlight.js": "^11.2.0", "js-beautify": "^1.14.0", "lunr": "^2.3.9", - "nhsuk-frontend": "^9.1.0", + "nhsuk-frontend": "github:nhsuk/nhsuk-frontend#pull/1012/head", "nunjucks": "^3.2.4" }, "devDependencies": { @@ -10684,8 +10684,8 @@ }, "node_modules/nhsuk-frontend": { "version": "9.1.0", - "resolved": "https://registry.npmjs.org/nhsuk-frontend/-/nhsuk-frontend-9.1.0.tgz", - "integrity": "sha512-z2hcZDUDz12hjBTWLasq5lfX+sv2jwZFkUdip8qL9fBQ6qykyQFQ8PjWuBBgQN03IU0wMkV3BBLbwBjFiSxREQ==", + "resolved": "git+ssh://git@github.com/nhsuk/nhsuk-frontend.git#f7e16e4fa8fa11e8f54b31460fcd7435d7832e54", + "license": "MIT", "engines": { "node": ">=20.0.0" } diff --git a/package.json b/package.json index e20938173..4bf591742 100644 --- a/package.json +++ b/package.json @@ -57,6 +57,7 @@ "js-beautify": "^1.14.0", "lunr": "^2.3.9", "nhsuk-frontend": "^9.1.0", + "nhsuk-frontend": "github:nhsuk/nhsuk-frontend#pull/1012/head", "nunjucks": "^3.2.4" }, "devDependencies": { From d05e31cbc0efe5a72d2e190abe7d12b24a73a72f Mon Sep 17 00:00:00 2001 From: Ananda Maryon Date: Tue, 14 Jan 2025 17:09:57 +0000 Subject: [PATCH 05/16] fix panel component example --- .../design-system/components/panel/index.njk | 5 +- .../components/panel/macro-options.json | 53 +++++++++++++++++++ 2 files changed, 55 insertions(+), 3 deletions(-) diff --git a/app/views/design-system/components/panel/index.njk b/app/views/design-system/components/panel/index.njk index 311be25e1..b417540f9 100644 --- a/app/views/design-system/components/panel/index.njk +++ b/app/views/design-system/components/panel/index.njk @@ -14,12 +14,11 @@ {% block bodyContent %} -[Example goes here] - {# {{ designExample({ + {{ designExample({ group: "components", item: "panel", type: "default" - }) }} #} + }) }}

    When to use a panel

    Use the panel component to display important information when a transaction has been completed. diff --git a/app/views/design-system/components/panel/macro-options.json b/app/views/design-system/components/panel/macro-options.json index e69de29bb..77a9a74c0 100644 --- a/app/views/design-system/components/panel/macro-options.json +++ b/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 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." + } + ] + } + \ No newline at end of file From 99edac4eee19843821059baae1df205adca1f06b Mon Sep 17 00:00:00 2001 From: Ananda Maryon Date: Wed, 15 Jan 2025 13:57:30 +0000 Subject: [PATCH 06/16] panel macro options tweaks --- .../components/panel/macro-options.json | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/app/views/design-system/components/panel/macro-options.json b/app/views/design-system/components/panel/macro-options.json index 77a9a74c0..dc80e2d5e 100644 --- a/app/views/design-system/components/panel/macro-options.json +++ b/app/views/design-system/components/panel/macro-options.json @@ -4,43 +4,43 @@ "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." + "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." + "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." + "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." + "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." + "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 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." + "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." + "description": "Optional additional classes to add to the hint `div` tag. Separate each class with a space." }, { "name": "attributes", From 9661718590c33690cd9bc093baf166f135b65e81 Mon Sep 17 00:00:00 2001 From: Ananda Maryon Date: Wed, 15 Jan 2025 14:32:13 +0000 Subject: [PATCH 07/16] adds confirmation page exmaple --- .../confirmation-pages/default/index.njk | 23 ++++++++++++++++++- .../patterns/confirmation-pages/index.njk | 8 ++++++- 2 files changed, 29 insertions(+), 2 deletions(-) diff --git a/app/views/design-system/patterns/confirmation-pages/default/index.njk b/app/views/design-system/patterns/confirmation-pages/default/index.njk index 0cd2b18c9..b6ff7e07b 100644 --- a/app/views/design-system/patterns/confirmation-pages/default/index.njk +++ b/app/views/design-system/patterns/confirmation-pages/default/index.njk @@ -1 +1,22 @@ -{% extends "includes/design-example-wrapper-full-layout.njk" %} \ No newline at end of file +{% extends "includes/design-example-wrapper-full-layout.njk" %} + +{% from 'panel/macro.njk' import panel %} + +{% block content %} +

    +
    + + {{ panel({ + titleText: "Application complete", + html: "Your reference number
    HDJ2123F" + }) }} + +

    We have sent you a confirmation email.

    +

    What happens next

    +

    We've sent your application to your chosen GP.

    +

    They will contact you either to confirm your registration, or to ask for more information.

    +

    What did you think of this service? (takes 30 seconds)

    + +
    +
    +{% endblock %} \ No newline at end of file diff --git a/app/views/design-system/patterns/confirmation-pages/index.njk b/app/views/design-system/patterns/confirmation-pages/index.njk index a254f38ef..046184910 100644 --- a/app/views/design-system/patterns/confirmation-pages/index.njk +++ b/app/views/design-system/patterns/confirmation-pages/index.njk @@ -14,7 +14,13 @@ {% block bodyContent %} - [add example here] + {{ designExample({ + group: "patterns", + item: "confirmation-pages", + type: "default", + fullpage: true, + showArguments: false + }) }}

    When to use a confirmation page

    You should use a confirmation page at the end of a transactional journey.

    From ee808f297a13999527ec603381c72421787bc1e2 Mon Sep 17 00:00:00 2001 From: Sara Wilcox Date: Thu, 23 Jan 2025 14:34:23 +0000 Subject: [PATCH 08/16] Tweak content in panel and confirmation page --- .../design-system/components/panel/index.njk | 15 ++++++++++++--- .../patterns/confirmation-pages/index.njk | 9 +++++---- 2 files changed, 17 insertions(+), 7 deletions(-) diff --git a/app/views/design-system/components/panel/index.njk b/app/views/design-system/components/panel/index.njk index b417540f9..332c963d1 100644 --- a/app/views/design-system/components/panel/index.njk +++ b/app/views/design-system/components/panel/index.njk @@ -21,14 +21,23 @@ }) }}

    When to use a panel

    -

    Use the panel component to display important information when a transaction has been completed. +

    Use the panel component to display important information when a transaction has been completed.

    In most cases, the panel component is used on confirmation pages, to tell the user they have successfully completed the transaction.

    When not to use a panel

    -

    Never use the panel component to highlight important information within body content.

    +

    Never use the panel component to highlight important information in body content. Instead consider using:

    +

    How to use a panel

    -

    (Some info about heading and descriptive text?)

    +

    A panel is made up of:

    +
      +
    • a heading that confirms what has happened
      • +
    • description text, which is optional
      • +

    How to write panel text

    Keep your panel text brief, as it's only meant for a high-level explanation of what has happened. For example, "Application complete".

    diff --git a/app/views/design-system/patterns/confirmation-pages/index.njk b/app/views/design-system/patterns/confirmation-pages/index.njk index 046184910..31560bac6 100644 --- a/app/views/design-system/patterns/confirmation-pages/index.njk +++ b/app/views/design-system/patterns/confirmation-pages/index.njk @@ -47,8 +47,8 @@

    If you add any interactive elements, make sure the panel or focus state are still accessible.

    Research

    -

    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.

    -

    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.

    +

    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.

    +

    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.

    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.

    Known gaps

    @@ -57,8 +57,9 @@
  • find it helpful to save the information on confirmation pages
  • try to return to confirmation pages after completing their transaction
    • -

    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.

    -

    We are also looking for more evidence about the green confirmation panel at the top of confirmation pages. Particularly:

    +

    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.

    +

    Some people expected to get further confirmation after this page, such as a text message or email. Some also 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.

    +

    We are also looking for more evidence about the green panel at the top of confirmation pages. Particularly:

    • any issues with colour contrast
    • suitability for people who use reverse colours or are sensitive to light
      • From 05a10be48542dec6b9cf717ef4feca659e72803e Mon Sep 17 00:00:00 2001 From: Ananda Maryon Date: Thu, 23 Jan 2025 15:21:21 +0000 Subject: [PATCH 09/16] update confirmation page example --- .../confirmation-pages/default/index.njk | 37 +++++++++++++++---- 1 file changed, 30 insertions(+), 7 deletions(-) diff --git a/app/views/design-system/patterns/confirmation-pages/default/index.njk b/app/views/design-system/patterns/confirmation-pages/default/index.njk index b6ff7e07b..057d56e3d 100644 --- a/app/views/design-system/patterns/confirmation-pages/default/index.njk +++ b/app/views/design-system/patterns/confirmation-pages/default/index.njk @@ -1,21 +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 %}
      {{ panel({ - titleText: "Application complete", - html: "Your reference number
      HDJ2123F" + titleText: "Booking complete", + html: "Your reference number
      1583033" }) }} -

      We have sent you a confirmation email.

      -

      What happens next

      -

      We've sent your application to your chosen GP.

      -

      They will contact you either to confirm your registration, or to ask for more information.

      -

      What did you think of this service? (takes 30 seconds)

      +

      Make a note of your booking reference number. You may need this if you need to cancel or reschedule your appointment.

      +

      Your appointment details

      + + {{ summaryList({ + classes: 'nhsuk-summary-list--no-border', + rows: [ + { + key: { + text: "Site location" + }, + value: { + html: "St Georges Pharmacy
      46 St George's Rd,
      Elephant and Castle,
      London
      SE1 6ET
      + Map and directions (opens in a new tab)" + } + }, + { + key: { + text: "Date and time" + }, + value: { + text: "Thursday 15 June at 9:10am" + } + } + ] + }) }} + +

      Tell us about your experience using this service (open in a new tab)

      From 1cbf2cc3245d10861f858e32040bd85d2d42e450 Mon Sep 17 00:00:00 2001 From: roshaanbajwa Date: Mon, 27 Jan 2025 12:02:45 +0000 Subject: [PATCH 10/16] Add seperate trigger for review envs --- azure-pipelines.yml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/azure-pipelines.yml b/azure-pipelines.yml index 896647b96..75c1e9bee 100644 --- a/azure-pipelines.yml +++ b/azure-pipelines.yml @@ -5,7 +5,9 @@ trigger: - master - ia-site - refs/tags/v* - - refs/heads/review/* + - refs/heads/review/1-* + - refs/heads/review/2-* + - refs/heads/review/3-* - refs/heads/dev/* - refs/heads/user/* paths: From bbef2a9bf9f0d834f77f10578d17382a004b682d Mon Sep 17 00:00:00 2001 From: David Hunter Date: Wed, 29 Jan 2025 10:39:55 +0000 Subject: [PATCH 11/16] add link to panel component in confirmation page guidance and update panel component theme to content presentation --- app/views/design-system/components/panel/index.njk | 2 +- app/views/design-system/patterns/confirmation-pages/index.njk | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/design-system/components/panel/index.njk b/app/views/design-system/components/panel/index.njk index 332c963d1..c3523d3ed 100644 --- a/app/views/design-system/components/panel/index.njk +++ b/app/views/design-system/components/panel/index.njk @@ -2,7 +2,7 @@ {% 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 theme = "Content presentation" %} {% set dateUpdated = "February 2025" %} {% set backlog_issue_id = "537" %} diff --git a/app/views/design-system/patterns/confirmation-pages/index.njk b/app/views/design-system/patterns/confirmation-pages/index.njk index 31560bac6..0a351fdb0 100644 --- a/app/views/design-system/patterns/confirmation-pages/index.njk +++ b/app/views/design-system/patterns/confirmation-pages/index.njk @@ -28,7 +28,7 @@

      How to use a confirmation page

      Confirmation pages must include:

        -
      • a green confirmation panel, with a heading that confirms what the user has done
        • +
      • a green confirmation panel, with a heading that confirms what the user has done
      • an application or reference number, if there is one
      • details about what will happen next and when
      From 4679876734e6278ded8e1c1dbc0a9d1cc7d85f06 Mon Sep 17 00:00:00 2001 From: Sara Wilcox Date: Thu, 30 Jan 2025 13:17:42 +0000 Subject: [PATCH 12/16] Rename confirmation page and update what's new and changelog --- CHANGELOG.md | 15 +++++ ...e-the-supporting-content-for-your-form.njk | 2 +- .../design-system/components/panel/index.njk | 2 +- .../default/index.njk | 2 +- .../index.njk | 4 +- app/views/includes/_side-nav.njk | 2 +- app/views/index.njk | 3 +- app/views/site-map.njk | 2 +- app/views/whats-new/index.njk | 34 ++--------- app/views/whats-new/updates.njk | 59 +++++++++++++++++++ 10 files changed, 87 insertions(+), 38 deletions(-) rename app/views/design-system/patterns/{confirmation-pages => confirmation-page}/default/index.njk (96%) rename app/views/design-system/patterns/{confirmation-pages => confirmation-page}/index.njk (97%) diff --git a/CHANGELOG.md b/CHANGELOG.md index fcf24b766..bc2abb358 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,20 @@ # NHS digital service manual Changelog +## 7.5.0 - TBC February 2025 + +:new: **New features** +- Add new panel component and confirmation page pattern + +## 7.4.0 - 21 January 2025 + +:wrench: **Maintenance** +- Removed an outdated link on the button component page +- Update example code in image component +- Remove same-page profession links from accessibility guidance +- Update page on Getting started with accessibility +- Change jump link IDs on A to Z page pattern and A to Z of NHS health writing to lower case +- Remove broken link on Select component page and add new research section + ## 7.3.0 - 17 December 2024 :wrench: **Maintenance** diff --git a/app/views/content/how-to-write-good-questions-for-forms/write-the-supporting-content-for-your-form.njk b/app/views/content/how-to-write-good-questions-for-forms/write-the-supporting-content-for-your-form.njk index 207db7d8b..dd1f42ea6 100644 --- a/app/views/content/how-to-write-good-questions-for-forms/write-the-supporting-content-for-your-form.njk +++ b/app/views/content/how-to-write-good-questions-for-forms/write-the-supporting-content-for-your-form.njk @@ -138,7 +138,7 @@

      Consider how you can reassure users they have completed the form and help them understand what to do next.

      You could try:

      diff --git a/app/views/design-system/components/panel/index.njk b/app/views/design-system/components/panel/index.njk index c3523d3ed..c92349e33 100644 --- a/app/views/design-system/components/panel/index.njk +++ b/app/views/design-system/components/panel/index.njk @@ -22,7 +22,7 @@

      When to use a panel

      Use the panel component to display important information when a transaction has been completed. -

      In most cases, the panel component is used on confirmation pages, to tell the user they have successfully completed the transaction.

      +

      In most cases, the panel component is used on confirmation pages, to tell the user they have successfully completed the transaction.

      When not to use a panel

      Never use the panel component to highlight important information in body content. Instead consider using:

      diff --git a/app/views/design-system/patterns/confirmation-pages/default/index.njk b/app/views/design-system/patterns/confirmation-page/default/index.njk similarity index 96% rename from app/views/design-system/patterns/confirmation-pages/default/index.njk rename to app/views/design-system/patterns/confirmation-page/default/index.njk index 057d56e3d..76f4e2084 100644 --- a/app/views/design-system/patterns/confirmation-pages/default/index.njk +++ b/app/views/design-system/patterns/confirmation-page/default/index.njk @@ -38,7 +38,7 @@ ] }) }} -

      Tell us about your experience using this service (open in a new tab)

      +

      Tell us about your experience using this service (opens in a new tab)

      diff --git a/app/views/design-system/patterns/confirmation-pages/index.njk b/app/views/design-system/patterns/confirmation-page/index.njk similarity index 97% rename from app/views/design-system/patterns/confirmation-pages/index.njk rename to app/views/design-system/patterns/confirmation-page/index.njk index 0a351fdb0..a2936eb75 100644 --- a/app/views/design-system/patterns/confirmation-pages/index.njk +++ b/app/views/design-system/patterns/confirmation-page/index.njk @@ -1,4 +1,4 @@ -{% set pageTitle = "Confirmation pages" %} +{% 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" %} @@ -16,7 +16,7 @@ {{ designExample({ group: "patterns", - item: "confirmation-pages", + item: "confirmation-page", type: "default", fullpage: true, showArguments: false diff --git a/app/views/includes/_side-nav.njk b/app/views/includes/_side-nav.njk index f487d10e3..754ee8f61 100644 --- a/app/views/includes/_side-nav.njk +++ b/app/views/includes/_side-nav.njk @@ -142,7 +142,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: "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" } ] %} diff --git a/app/views/index.njk b/app/views/index.njk index 88080d871..908783163 100755 --- a/app/views/index.njk +++ b/app/views/index.njk @@ -22,8 +22,7 @@

      What's new

      -

      Added a task list component and a pattern to help users complete multiple tasks.

      -

      New community resources page.

      +

      Added new panel component and confirmation page pattern

      diff --git a/app/views/site-map.njk b/app/views/site-map.njk index 8fd426cef..58a47bf35 100644 --- a/app/views/site-map.njk +++ b/app/views/site-map.njk @@ -117,7 +117,7 @@
    • Ask users for their NHS number
    • A to Z
    • Complete multiple tasks
      • -
    • Confirmation pages
      • +
    • Confirmation page
    • Help users decide when and where to get care (care cards)
    • Mini-hub
    • Reassure users that information is up-to-date
      • diff --git a/app/views/whats-new/index.njk b/app/views/whats-new/index.njk index fc59cf3d2..f1fdca7e9 100644 --- a/app/views/whats-new/index.njk +++ b/app/views/whats-new/index.njk @@ -9,9 +9,9 @@

      Latest updates

      -

      December 2024

      +

      February 2025

      - + @@ -19,40 +19,16 @@ - + - - -
      Updates to the service manual in December 2024Updates to the service manual in February 2025
      Section
      Design system -

      Replaced image in image component

      +

      Added new panel component and confirmation page pattern

      -

      November 2024

      - - - - - - - - - - - - - - - -
      Updates to the service manual in November 2024
      SectionUpdate
      Community and contribution -

      Added Community resources page to list resources based on the NHS design system.

      -
      Design system -

      Added a task list component and a pattern to help users complete multiple tasks

      -

      Changed side navigation in patterns

      -

      +

      See all updates

      Latest blog posts

      diff --git a/app/views/whats-new/updates.njk b/app/views/whats-new/updates.njk index 0332ab222..bd6cca930 100644 --- a/app/views/whats-new/updates.njk +++ b/app/views/whats-new/updates.njk @@ -10,6 +10,65 @@ {% block bodyContent %} +

      February 2025

      + + + + + + + + + + + + + + +
      Updates to the service manual in February 2025
      SectionUpdate
      Design system +

      Added new panel component and confirmation page pattern

      +
      + +

      January 2025

      + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Updates to the service manual in January 2025
      SectionUpdate
      Accessibility +

      Removed same-page profession links as they have caused confusion in testing

      +

      Updated page on Getting started with accessibility

      +
      Content guide +

      Changed jump link IDs on the A to Z of NHS health writing

      +
      Design system +

      Updated example code in image component

      +

      Removed broken link on Select component page and added new research section

      +

      Changed jump link IDs on A to Z page pattern to lower case

      +
      Design system +

      Updated example code in image component

      +
      +

      December 2024

      From 9783b91b185ef21e737e38dc3ea853f32e0356e6 Mon Sep 17 00:00:00 2001 From: Ananda Maryon Date: Tue, 4 Feb 2025 09:52:07 +0000 Subject: [PATCH 13/16] update panel and confirmation examples --- app/views/design-system/components/panel/default/index.njk | 2 +- .../design-system/patterns/confirmation-page/default/index.njk | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/app/views/design-system/components/panel/default/index.njk b/app/views/design-system/components/panel/default/index.njk index a5ecf0e25..f2db4ead5 100644 --- a/app/views/design-system/components/panel/default/index.njk +++ b/app/views/design-system/components/panel/default/index.njk @@ -2,5 +2,5 @@ {{ panel({ titleText: "Application complete", - html: "Your reference number
      HDJ2123F" + html: "Confirmation has been sent to you by text or email" }) }} \ No newline at end of file diff --git a/app/views/design-system/patterns/confirmation-page/default/index.njk b/app/views/design-system/patterns/confirmation-page/default/index.njk index 76f4e2084..6b641091d 100644 --- a/app/views/design-system/patterns/confirmation-page/default/index.njk +++ b/app/views/design-system/patterns/confirmation-page/default/index.njk @@ -9,10 +9,9 @@ {{ panel({ titleText: "Booking complete", - html: "Your reference number
      1583033" + html: "Confirmation of this booking has been sent to you by text or email" }) }} -

      Make a note of your booking reference number. You may need this if you need to cancel or reschedule your appointment.

      Your appointment details

      {{ summaryList({ From 978ed84d30f25bebfb77be21285ee38c0b550de3 Mon Sep 17 00:00:00 2001 From: Sara Wilcox Date: Tue, 4 Feb 2025 09:56:26 +0000 Subject: [PATCH 14/16] Change content re references in confirmation page and update PDF page to WCAG 2.2 --- CHANGELOG.md | 1 + .../content/pdfs-and-other-non-html-documents.njk | 6 +++--- app/views/design-system/components/panel/index.njk | 8 ++++---- .../design-system/patterns/confirmation-page/index.njk | 10 +++++++++- app/views/whats-new/index.njk | 6 ++++++ app/views/whats-new/updates.njk | 6 ++++++ 6 files changed, 29 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index bc2abb358..de8d5862c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ :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 diff --git a/app/views/content/pdfs-and-other-non-html-documents.njk b/app/views/content/pdfs-and-other-non-html-documents.njk index a8f500a17..e99d5a7ed 100644 --- a/app/views/content/pdfs-and-other-non-html-documents.njk +++ b/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 @@

      Make PDFs accessible

      -

      If you have to create a new PDF, it must meet WCAG 2.1 to level AA.

      -

      If you create your PDF correctly and save it in PDF/A (archiving) format, it can meet WCAG 2.1 AA. (Follow the GOV.UK guidance on publishing accessible documents.)

      +

      If you have to create a new PDF, it must meet WCAG 2.2 to level AA.

      +

      If you create your PDF correctly and save it in PDF/A (archiving) format, it can meet WCAG 2.2 AA. (Follow the GOV.UK guidance on publishing accessible documents.)

      PDFs must have

      • a logical structure based on tags and headings
        • diff --git a/app/views/design-system/components/panel/index.njk b/app/views/design-system/components/panel/index.njk index c92349e33..d8ab17e9e 100644 --- a/app/views/design-system/components/panel/index.njk +++ b/app/views/design-system/components/panel/index.njk @@ -1,7 +1,7 @@ {% 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 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" %} @@ -21,7 +21,7 @@ }) }}

        When to use a panel

        -

        Use the panel component to display important information when a transaction has been completed. +

        Use the panel component to display important information when a transaction has been completed.

        In most cases, the panel component is used on confirmation pages, to tell the user they have successfully completed the transaction.

        When not to use a panel

        @@ -40,8 +40,8 @@

      How to write panel text

      -

      Keep your panel text brief, as it's only meant for a high-level explanation of what has happened. For example, "Application complete".

      -

      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.

      +

      Keep your panel text brief. It only needs to summarise what has happened. For example, "Application complete".

      +

      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.

      If you need to give detailed information, or more context, use the description text under the heading text.

      {% endblock %} diff --git a/app/views/design-system/patterns/confirmation-page/index.njk b/app/views/design-system/patterns/confirmation-page/index.njk index a2936eb75..3ca661cbb 100644 --- a/app/views/design-system/patterns/confirmation-page/index.njk +++ b/app/views/design-system/patterns/confirmation-page/index.njk @@ -29,17 +29,25 @@

      Confirmation pages must include:

      • a green confirmation panel, with a heading that confirms what the user has done
        • -
      • an application or reference number, if there is one
      • details about what will happen next and when

      You may also find a need to include:

        +
      • an application or reference number, if there is one – include this in the description text in the green panel
      • instructions about other steps the user needs to take
      • a summary of the details they have submitted
      • a way to give feedback about the service
      • links to more information or related services that may be helpful
      +

      Explain any reference numbers

      +

      Tell people:

      +
        +
      • what the reference number is
        • +
      • why they need it
        • +
      • if they should keep it (only show a number if people need to keep it)
        • +
      +

      How not to use a confirmation page

      Avoid including too many different components on a confirmation page. Research suggests they can overwhelm people.

      diff --git a/app/views/whats-new/index.njk b/app/views/whats-new/index.njk index f1fdca7e9..bf3dbda04 100644 --- a/app/views/whats-new/index.njk +++ b/app/views/whats-new/index.njk @@ -19,6 +19,12 @@       + + + + + + + +
      Updates to the service manual in December 2024
      Content guide +

      Updated guidance on PDFs and other non-HTML documents to mention WCAG 2.2

      +
      Design system diff --git a/app/views/whats-new/updates.njk b/app/views/whats-new/updates.njk index bd6cca930..0182c17b1 100644 --- a/app/views/whats-new/updates.njk +++ b/app/views/whats-new/updates.njk @@ -20,6 +20,12 @@
      Content guide +

      Updated guidance on PDFs and other non-HTML documents to mention WCAG 2.2

      +
      Design system From 83b5fc04c74b32ae777172942a642e59e6cc05f4 Mon Sep 17 00:00:00 2001 From: Ananda Maryon Date: Tue, 4 Feb 2025 15:07:47 +0000 Subject: [PATCH 15/16] fix changelog --- CHANGELOG.md | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a268a58a2..de8d5862c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,16 +16,6 @@ - Change jump link IDs on A to Z page pattern and A to Z of NHS health writing to lower case - Remove broken link on Select component page and add new research section -## 7.4.0 - 21 January 2025 - -:wrench: **Maintenance** -- Removed an outdated link on the button component page -- Update example code in image component -- Remove same-page profession links from accessibility guidance -- Update page on Getting started with accessibility -- Change jump link IDs on A to Z page pattern and A to Z of NHS health writing to lower case -- Remove broken link on Select component page and add new research section - ## 7.3.0 - 17 December 2024 :wrench: **Maintenance** From fc628b4ba24d0e2b92f6fba61ab3b584acfab674 Mon Sep 17 00:00:00 2001 From: Ananda Maryon Date: Wed, 5 Feb 2025 12:02:30 +0000 Subject: [PATCH 16/16] tweak content and examples for panel and confirmation page --- app/views/design-system/components/panel/default/index.njk | 2 +- .../design-system/patterns/confirmation-page/default/index.njk | 2 +- app/views/design-system/patterns/confirmation-page/index.njk | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/views/design-system/components/panel/default/index.njk b/app/views/design-system/components/panel/default/index.njk index f2db4ead5..51b627cc4 100644 --- a/app/views/design-system/components/panel/default/index.njk +++ b/app/views/design-system/components/panel/default/index.njk @@ -2,5 +2,5 @@ {{ panel({ titleText: "Application complete", - html: "Confirmation has been sent to you by text or email" + html: "Confirmation has been sent to you by email" }) }} \ No newline at end of file diff --git a/app/views/design-system/patterns/confirmation-page/default/index.njk b/app/views/design-system/patterns/confirmation-page/default/index.njk index 6b641091d..52df25b69 100644 --- a/app/views/design-system/patterns/confirmation-page/default/index.njk +++ b/app/views/design-system/patterns/confirmation-page/default/index.njk @@ -9,7 +9,7 @@ {{ panel({ titleText: "Booking complete", - html: "Confirmation of this booking has been sent to you by text or email" + html: "Confirmation has been sent to you by email" }) }}

      Your appointment details

      diff --git a/app/views/design-system/patterns/confirmation-page/index.njk b/app/views/design-system/patterns/confirmation-page/index.njk index 3ca661cbb..b0eb35eee 100644 --- a/app/views/design-system/patterns/confirmation-page/index.njk +++ b/app/views/design-system/patterns/confirmation-page/index.njk @@ -66,7 +66,7 @@
    • try to return to confirmation pages after completing their transaction

      • 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.

      -

      Some people expected to get further confirmation after this page, such as a text message or email. Some also 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.

      +

      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.

      We are also looking for more evidence about the green panel at the top of confirmation pages. Particularly:

      • any issues with colour contrast