Upgrade nhsuk frontend version to v9.0.1

CHANGELOG.md

@@ -1,5 +1,12 @@
 # NHS.UK prototype kit Changelog
 
+## Unreleased
+
+:new: **New features**
+
+- Update to NHS.UK frontend v9.0.0 - see [version 9.0.0 release notes](https://github.com/nhsuk/nhsuk-frontend/releases/tag/v9.0.0) for details on the breaking changes
+- Drop `outerContent` block and use `beforeContent` block for both breadcrumbs and back links
+
 ## 4.12.0 - 15 August 2024
 
 :wrench:

app.js

@@ -51,9 +51,10 @@ app.use(cookieParser());
 // Nunjucks configuration for application
 const appViews = [
   path.join(__dirname, 'app/views/'),
-  path.join(__dirname, 'node_modules/nhsuk-frontend/packages/components'),
   path.join(__dirname, 'docs/views/'),
   path.join(__dirname, 'lib/prototype-admin/'),
+  path.join(__dirname, 'node_modules/nhsuk-frontend/packages/components'),
+  path.join(__dirname, 'node_modules/nhsuk-frontend/packages/macros'),
 ];
 
 const nunjucksConfig = {
@@ -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, {

app/views/index.html

@@ -15,15 +15,11 @@
   NHS.UK prototype kit
 {% 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 -->
+<!-- Code examples can be found at https://service-manual.nhs.uk/design-system/components/breadcrumbs and https://service-manual.nhs.uk/design-system/components/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 -->

app/views/page-example.html

@@ -11,20 +11,15 @@
   Content page example - NHS.UK prototype kit
 {% 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 -->
+<!-- Code examples can be found at https://service-manual.nhs.uk/design-system/components/breadcrumbs or https://service-manual.nhs.uk/design-system/components/back-link -->
 {% block beforeContent %}
   {{ breadcrumb({
     href: "/",
     text: "Home"
   }) }}
 {% 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 -->
 {% block content %}

docs/views/index.html

@@ -1,6 +1,7 @@
 {% extends 'layout.html' %}
 
-{% block beforeContent %}
+{% block header %}
+  {{ header({}) }}
   {{ hero({
     "heading": "NHS.UK prototype kit",
     "text": "Rapidly create HTML prototypes of NHS.UK services."

docs/views/template.html

@@ -90,11 +90,9 @@
         {{ header({}) }}
       {% endblock %}
 
-      {% block beforeContent %}{% endblock %}
-
       {% block main %}
         <div class="nhsuk-width-container {{ containerClasses }}">
-          {% block outerContent %}{% endblock %}
+          {% block beforeContent %}{% endblock %}
           <main class="nhsuk-main-wrapper {{ mainClasses }}" id="maincontent" role="main">
             {% block content %}{% endblock %}
           </main>

docs/views/templates/blank-transactional.html

@@ -7,13 +7,9 @@
 {% endblock %}
 
 {% block beforeContent %}
-{% endblock %}
-
-{% block outerContent %}
   {{ backLink({
     "href": "/templates/start-page",
-    "text": "Back",
-    "classes": "nhsuk-u-margin-top-4 nhsuk-u-margin-bottom-0"
+    "text": "Back"
   }) }}
 {% endblock %}
 

docs/views/templates/check-your-answers.html

@@ -6,15 +6,22 @@
   Check your answers template - NHS.UK prototype kit
 {% endblock %}
 
+{% block beforeContent %}
+  {{ backLink({
+    "href": "/templates/start-page",
+    "text": "Back"
+  }) }}
+{% endblock %}
+
 {% block content %}
   <div class="nhsuk-grid-row">
     <div class="nhsuk-grid-column-two-thirds">
 
-      <h1 class="nhsuk-u-margin-top-4">
+      <h1 class="nhsuk-heading-l">
         Check your answers before sending your application
       </h1>
 
-      <h2>
+      <h2 class="nhsuk-heading-m">
         Personal details
       </h2>
 
@@ -91,7 +98,7 @@ <h2>
         ]
       }) }}
 
-      <h2>
+      <h2 class="nhsuk-heading-m">
         Medical details
       </h2>
 
@@ -134,8 +141,8 @@ <h2>
         ]
       }) }}
 
-      <h2>
-        Now send you application
+      <h2 class="nhsuk-heading-m">
+        Now send your application
       </h2>
 
       <p>

docs/views/templates/question-page.html

@@ -6,11 +6,10 @@
   Question page
 {% endblock %}
 
-{% block outerContent %}
+{% block beforeContent %}
   {{ backLink({
     "href": "/templates/start-page",
-    "text": "Back",
-    "classes": "nhsuk-u-margin-top-4 nhsuk-u-margin-bottom-0"
+    "text": "Back"
   }) }}
 {% endblock %}
 

package.json

@@ -32,7 +32,7 @@
     "gulp-rename": "^2.0.0",
     "gulp-sass": "^5.1.0",
     "lodash": "^4.17.21",
-    "nhsuk-frontend": "^8.3.0",
+    "nhsuk-frontend": "^9.0.0",
     "nunjucks": "^3.2.4",
     "path": "^0.12.7",
     "sass": "^1.78.0"