Update nhsuk frontend to version 9 (#111)

This updates the prototype to use [version 9.0.0 of NHSUK Frontend](https://github.com/nhsuk/nhsuk-frontend/releases/tag/v9.0.0) and applies these breaking changes: * add the `macros` path to the Nunjucks configuration so that the new `nhsukAttributes` helper macro is included * merge `outerContent` and `beforeContent` blocks in the template to a single `beforeContent` block just before `<main>` but within `<div class="nhsuk-width-container">` * updates all the back links to be within the `beforeContent` block instead of `outerContent` * removes all the margin override classes from back links, as this is now applied by default The heading sizes (eg `xl` and `l` and `m`) are unchanged, as this can be reviewed separately.
NHSDigital · Sep 23, 2024 · 5a60652 · 5a60652
1 parent 569e807
commit 5a60652
Show file tree

Hide file tree

Showing 41 changed files with 83 additions and 130 deletions.
diff --git a/app.js b/app.js
@@ -52,6 +52,7 @@ app.use(cookieParser());
 const appViews = [
   path.join(__dirname, 'app/views/'),
   path.join(__dirname, 'node_modules/nhsuk-frontend/packages/components'),
+  path.join(__dirname, 'node_modules/nhsuk-frontend/packages/macros'),
   path.join(__dirname, 'docs/views/'),
   path.join(__dirname, 'lib/prototype-admin/'),
 ];
@@ -179,6 +180,7 @@ if (useDocumentation || onlyDocumentation === 'true') {
   const docViews = [
     path.join(__dirname, 'docs/views/'),
     path.join(__dirname, 'node_modules/nhsuk-frontend/packages/components'),
+    path.join(__dirname, 'node_modules/nhsuk-frontend/packages/macros'),
   ];
 
   nunjucksAppEnv = nunjucks.configure(docViews, {

diff --git a/app/views/index.html b/app/views/index.html
@@ -15,16 +15,11 @@
   NHS Record a vaccination prototypes
 {% endblock %}
 
-<!-- For adding a breadcrumb -->
-<!-- Code examples can be found at https://service-manual.nhs.uk/design-system/components/breadcrumbs -->
+<!-- For adding a breadcrumb or back link -->
+-->
 {% block beforeContent %}
 {% endblock %}
 
-<!-- For adding a back link -->
-<!-- Code examples can be found at https://service-manual.nhs.uk/design-system/components/back-link -->
-{% block outerContent %}
-{% endblock %}
-
 
 <!-- For adding page content -->
 <!-- Page layout code can be found at https://service-manual.nhs.uk/design-system/styles/layout -->

diff --git a/app/views/page-example.html b/app/views/page-example.html
@@ -11,7 +11,7 @@
   Content page example - NHS.UK prototype kit
 {% endblock %}
 
-<!-- For adding a breadcrumb -->
+<!-- For adding a breadcrumb or back link -->
 <!-- Code examples can be found at https://service-manual.nhs.uk/design-system/components/breadcrumbs -->
 {% block beforeContent %}
   {{ breadcrumb({
@@ -20,10 +20,6 @@
   }) }}
 {% endblock %}
 
-<!-- For adding a back link -->
-<!-- Code examples can be found at https://service-manual.nhs.uk/design-system/components/back-link -->
-{% block outerContent %}
-{% endblock %}
 
 <!-- For adding page content -->
 <!-- Page layout code can be found at https://service-manual.nhs.uk/design-system/styles/layout -->

diff --git a/app/views/regions/v1/add-another-email-check.html b/app/views/regions/v1/add-another-email-check.html
@@ -8,11 +8,10 @@
   {% include "includes/header-logged-in-region.html" %}
 {% endblock %}
 
-{% block outerContent %}
+{% block beforeContent %}
   {{ backLink({
     href: "/regions/v1/organisations/" + organisation.code + "/add-email",
-    text: "Back",
-    classes: "nhsuk-u-margin-top-4"
+    text: "Back"
   }) }}
 {% endblock %}
 

diff --git a/app/views/regions/v1/add-another-email.html b/app/views/regions/v1/add-another-email.html
@@ -8,11 +8,10 @@
   {% include "includes/header-logged-in-region.html" %}
 {% endblock %}
 
-{% block outerContent %}
+{% block beforeContent %}
   {{ backLink({
     href: "/regions/v1/organisations/" + organisation.code,
-    text: "Back",
-    classes: "nhsuk-u-margin-top-4"
+    text: "Back"
   }) }}
 {% endblock %}
 

diff --git a/app/views/regions/v1/add-email.html b/app/views/regions/v1/add-email.html
@@ -8,11 +8,10 @@
   {% include "includes/header-logged-in-region.html" %}
 {% endblock %}
 
-{% block outerContent %}
+{% block beforeContent %}
   {{ backLink({
     href: "/regions/v1/organisation-details",
-    text: "Back",
-    classes: "nhsuk-u-margin-top-4"
+    text: "Back"
   }) }}
 {% endblock %}
 

diff --git a/app/views/regions/v1/add-organisation.html b/app/views/regions/v1/add-organisation.html
@@ -8,11 +8,10 @@
   {% include "includes/header-logged-in-region.html" %}
 {% endblock %}
 
-{% block outerContent %}
+{% block beforeContent %}
   {{ backLink({
     href: "/regions/v1",
-    text: "Back",
-    classes: "nhsuk-u-margin-top-4"
+    text: "Back"
   }) }}
 {% endblock %}
 

diff --git a/app/views/regions/v1/check-and-send.html b/app/views/regions/v1/check-and-send.html
@@ -10,11 +10,10 @@
 
 {% set organisation = {name: organisation.name } %}
 
-{% block outerContent %}
+{% block beforeContent %}
   {{ backLink({
     href: "/regions/v1/add-email",
-    text: "Back",
-    classes: "nhsuk-u-margin-top-4"
+    text: "Back"
   }) }}
 {% endblock %}
 

diff --git a/app/views/regions/v1/organisation-details.html b/app/views/regions/v1/organisation-details.html
@@ -8,11 +8,10 @@
   {% include "includes/header-logged-in-region.html" %}
 {% endblock %}
 
-{% block outerContent %}
+{% block beforeContent %}
   {{ backLink({
     href: "/regions/v1/add-organisation",
-    text: "Back",
-    classes: "nhsuk-u-margin-top-4"
+    text: "Back"
   }) }}
 {% endblock %}
 

diff --git a/app/views/regions/v1/organisation.html b/app/views/regions/v1/organisation.html
@@ -8,11 +8,10 @@
   {% include "includes/header-logged-in-region.html" %}
 {% endblock %}
 
-{% block outerContent %}
+{% block beforeContent %}
   {{ backLink({
     href: "/regions/v1",
-    text: "Back to all organisations",
-    classes: "nhsuk-u-margin-top-4"
+    text: "Back to all organisations"
   }) }}
 {% endblock %}
 

diff --git a/app/views/regions/v1/uninvite.html b/app/views/regions/v1/uninvite.html
@@ -8,11 +8,10 @@
   {% include "includes/header-logged-in-region.html" %}
 {% endblock %}
 
-{% block outerContent %}
+{% block beforeContent %}
   {{ backLink({
     href: "/regions/v1/organisations/" + organisation.code,
-    text: "Back",
-    classes: "nhsuk-u-margin-top-4"
+    text: "Back"
   }) }}
 {% endblock %}
 

diff --git a/app/views/reports/check.html b/app/views/reports/check.html
@@ -8,11 +8,10 @@
 
 {% set organisation = {name: data.nhsTrusts[data.organisationCode]} %}
 
-{% block outerContent %}
+{% block beforeContent %}
   {{ backLink({
     href: "/reports/choose-data",
-    text: "Back",
-    classes: "nhsuk-u-margin-top-4"
+    text: "Back"
   }) }}
 {% endblock %}
 

diff --git a/app/views/reports/choose-data.html b/app/views/reports/choose-data.html
@@ -7,11 +7,10 @@
 {% set currentSection = "reports" %}
 
 
-{% block outerContent %}
+{% block beforeContent %}
   {{ backLink({
     href: "/reports/choose-site",
-    text: "Back",
-    classes: "nhsuk-u-margin-top-4"
+    text: "Back"
   }) }}
 {% endblock %}
 

diff --git a/app/views/reports/choose-dates.html b/app/views/reports/choose-dates.html
@@ -6,11 +6,10 @@
 
 {% set currentSection = "reports" %}
 
-{% block outerContent %}
+{% block beforeContent %}
   {{ backLink({
     href: "/reports",
-    text: "Back",
-    classes: "nhsuk-u-margin-top-4"
+    text: "Back"
   }) }}
 {% endblock %}
 

diff --git a/app/views/reports/choose-site.html b/app/views/reports/choose-site.html
@@ -6,11 +6,10 @@
 
 {% set currentSection = "reports" %}
 
-{% block outerContent %}
+{% block beforeContent %}
   {{ backLink({
     href: "/reports/choose-vaccines",
-    text: "Back",
-    classes: "nhsuk-u-margin-top-4"
+    text: "Back"
   }) }}
 {% endblock %}
 

diff --git a/app/views/reports/choose-vaccines.html b/app/views/reports/choose-vaccines.html
@@ -7,11 +7,10 @@
 {% set currentSection = "reports" %}
 
 
-{% block outerContent %}
+{% block beforeContent %}
   {{ backLink({
     href: "/reports/choose-dates",
-    text: "Back",
-    classes: "nhsuk-u-margin-top-4"
+    text: "Back"
   }) }}
 {% endblock %}
 

diff --git a/app/views/reports/download.html b/app/views/reports/download.html
@@ -7,11 +7,10 @@
 {% set currentSection = "reports" %}
 
 
-{% block outerContent %}
+{% block beforeContent %}
   {{ backLink({
     href: "/reports/check",
-    text: "Back",
-    classes: "nhsuk-u-margin-top-4"
+    text: "Back"
   }) }}
 {% endblock %}
 

diff --git a/app/views/support/region.html b/app/views/support/region.html
@@ -4,11 +4,10 @@
   {{ region.name }}
 {% endblock %}
 
-{% block outerContent %}
+{% block beforeContent %}
   {{ backLink({
     href: "/support",
-    text: "Back",
-    classes: "nhsuk-u-margin-top-4"
+    text: "Back"
   }) }}
 {% endblock %}
 

diff --git a/app/views/user-admin/add-user.html b/app/views/user-admin/add-user.html
@@ -6,11 +6,10 @@
 
 {% set currentSection = "manage-users" %}
 
-{% block outerContent %}
+{% block beforeContent %}
   {{ backLink({
     href: "/user-admin",
-    text: "Back",
-    classes: "nhsuk-u-margin-top-4"
+    text: "Back"
   }) }}
 {% endblock %}
 

diff --git a/app/views/user-admin/change.html b/app/views/user-admin/change.html
@@ -6,11 +6,10 @@
 
 {% set currentSection = "manage-users" %}
 
-{% block outerContent %}
+{% block beforeContent %}
   {{ backLink({
     href: "/user-admin",
-    text: "Back",
-    classes: "nhsuk-u-margin-top-4"
+    text: "Back"
   }) }}
 {% endblock %}
 

diff --git a/app/views/user-admin/check.html b/app/views/user-admin/check.html
@@ -8,11 +8,10 @@
 
 {% set organisation = {name: data.nhsTrusts[data.organisationCode]} %}
 
-{% block outerContent %}
+{% block beforeContent %}
   {{ backLink({
     href: "/user-admin/add-user",
-    text: "Back",
-    classes: "nhsuk-u-margin-top-4"
+    text: "Back"
   }) }}
 {% endblock %}
 

diff --git a/app/views/user-admin/deactivate.html b/app/views/user-admin/deactivate.html
@@ -6,11 +6,10 @@
 
 {% set currentSection = "manage-users" %}
 
-{% block outerContent %}
+{% block beforeContent %}
   {{ backLink({
     href: "/user-admin/users/" + user.id + "/change-role",
-    text: "Back",
-    classes: "nhsuk-u-margin-top-4"
+    text: "Back"
   }) }}
 {% endblock %}
 

diff --git a/app/views/user-admin/deactivated.html b/app/views/user-admin/deactivated.html
@@ -6,11 +6,10 @@
 
 {% set currentSection = "manage-users" %}
 
-{% block outerContent %}
+{% block beforeContent %}
   {{ backLink({
     href: "/user-admin",
-    text: "Back to Manage users",
-    classes: "nhsuk-u-margin-top-4"
+    text: "Back to Manage users"4"
   }) }}
 {% endblock %}
 

diff --git a/app/views/user-admin/reactivate.html b/app/views/user-admin/reactivate.html
@@ -6,11 +6,10 @@
 
 {% set currentSection = "manage-users" %}
 
-{% block outerContent %}
+{% block beforeContent %}
   {{ backLink({
     href: "/user-admin/deactivated",
-    text: "Back",
-    classes: "nhsuk-u-margin-top-4"
+    text: "Back"
   }) }}
 {% endblock %}
 

diff --git a/app/views/user-onboarding/v1/cis2-setup.html b/app/views/user-onboarding/v1/cis2-setup.html
@@ -4,11 +4,10 @@
   Manage users and permissions
 {% endblock %}
 
-{% block outerContent %}
+{% block beforeContent %}
   {{ backLink({
     href: "/user-onboarding/v1/setup",
-    text: "Back",
-    classes: "nhsuk-u-margin-top-4 nhsuk-u-margin-bottom-0"
+    text: "Back"
   }) }}
 {% endblock %}
 

diff --git a/app/views/user-onboarding/v1/okta-setup.html b/app/views/user-onboarding/v1/okta-setup.html
@@ -4,11 +4,10 @@
   Manage users and permissions
 {% endblock %}
 
-{% block outerContent %}
+{% block beforeContent %}
   {{ backLink({
     href: "/user-onboarding/v1/cis2-alternative",
-    text: "Back",
-    classes: "nhsuk-u-margin-top-4 nhsuk-u-margin-bottom-0"
+    text: "Back"
   }) }}
 {% endblock %}
 

diff --git a/app/views/user-profile/v1/email.html b/app/views/user-profile/v1/email.html
@@ -6,11 +6,10 @@
 
 {% set currentSection = "user-profile" %}
 
-{% block outerContent %}
+{% block beforeContent %}
   {{ backLink({
     text: "Back",
-    href: "/user-profile/v1",
-    classes: "nhsuk-u-margin-top-4 nhsuk-u-margin-bottom-0"
+    href: "/user-profile/v1"
 
   }) }}
 {% endblock %}