Upgrade to NHS.UK frontend v10.4

app/assets/stylesheets/components/_card.scss

@@ -1,34 +1,84 @@
 @use "sass:color";
 @use "../vendor/nhsuk-frontend" as *;
 
+$_blue-background-colour: nhsuk-tint(nhsuk-colour("blue"), 80%);
+$_blue-border-colour: nhsuk-tint(nhsuk-colour("blue"), 50%);
+$_blue-border-hover-colour: nhsuk-shade(nhsuk-colour("blue"), 10%);
+$_blue-text-colour: nhsuk-shade(nhsuk-colour("blue"), 30%);
+
+$_green-background-colour: nhsuk-tint(nhsuk-colour("green"), 80%);
+$_green-border-colour: nhsuk-tint(nhsuk-colour("green"), 40%);
+$_green-border-hover-colour: nhsuk-shade(nhsuk-colour("green"), 10%);
+$_green-text-colour: nhsuk-shade(nhsuk-colour("green"), 40%);
+
+$_red-background-colour: nhsuk-tint(nhsuk-colour("red"), 80%);
+$_red-border-colour: nhsuk-tint(nhsuk-colour("red"), 50%);
+$_red-border-hover-colour: nhsuk-shade(nhsuk-colour("red"), 10%);
+$_red-text-colour: nhsuk-shade(nhsuk-colour("red"), 50%);
+
+$_orange-background-colour: nhsuk-tint(nhsuk-colour("warm-yellow"), 70%);
+$_orange-border-colour: nhsuk-tint(nhsuk-colour("warm-yellow"), 10%);
+$_orange-border-hover-colour: nhsuk-shade(nhsuk-colour("warm-yellow"), 10%);
+$_orange-text-colour: nhsuk-shade(nhsuk-colour("warm-yellow"), 70%);
+
 .app-card {
   &--blue {
-    border-color: nhsuk-tint(nhsuk-colour("blue"), 30%);
-    color: nhsuk-shade(nhsuk-colour("blue"), 30%);
-    background-color: nhsuk-tint(nhsuk-colour("blue"), 80%);
+    border-color: $_blue-border-colour;
+    color: $_blue-text-colour;
+    background-color: $_blue-background-colour;
+    box-shadow: 0 $nhsuk-card-border-bottom-width 0 $_blue-border-colour;
+
+    &.nhsuk-card--clickable:hover,
+    &.nhsuk-card--clickable:has(.nhsuk-card__heading a:hover),
+    &.nhsuk-card--clickable:has(.nhsuk-card__link:hover) {
+      border-color: $_blue-border-hover-colour;
+      box-shadow: 0 $nhsuk-card-border-bottom-width 0 $_blue-border-hover-colour;
+    }
 
-    &.nhsuk-card--clickable:active {
-      border-color: nhsuk-shade(nhsuk-colour("blue"), 30%);
+    &.nhsuk-card--clickable:active,
+    &.nhsuk-card--clickable:has(.nhsuk-card__heading a:active),
+    &.nhsuk-card--clickable:has(.nhsuk-card__link:active) {
+      box-shadow: none;
     }
   }
 
   &--green {
-    border-color: nhsuk-tint(nhsuk-colour("green"), 40%);
-    color: nhsuk-shade(nhsuk-colour("green"), 40%);
-    background-color: nhsuk-tint(nhsuk-colour("green"), 80%);
+    border-color: $_green-border-colour;
+    color: $_green-text-colour;
+    background-color: $_green-background-colour;
+    box-shadow: 0 $nhsuk-card-border-bottom-width 0 $_green-border-colour;
+
+    &.nhsuk-card--clickable:hover,
+    &.nhsuk-card--clickable:has(.nhsuk-card__heading a:hover),
+    &.nhsuk-card--clickable:has(.nhsuk-card__link:hover) {
+      border-color: $_green-border-hover-colour;
+      box-shadow: 0 $nhsuk-card-border-bottom-width 0 $_green-border-hover-colour;
+    }
 
-    &.nhsuk-card--clickable:active {
-      border-color: nhsuk-shade(nhsuk-colour("green"), 40%);
+    &.nhsuk-card--clickable:active,
+    &.nhsuk-card--clickable:has(.nhsuk-card__heading a:active),
+    &.nhsuk-card--clickable:has(.nhsuk-card__link:active) {
+      box-shadow: none;
     }
   }
 
   &--orange {
-    border-color: nhsuk-shade(nhsuk-colour("warm-yellow"), 10%);
-    color: nhsuk-shade(nhsuk-colour("warm-yellow"), 70%);
-    background-color: nhsuk-tint(nhsuk-colour("warm-yellow"), 70%);
+    border-color: $_orange-border-colour;
+    color: $_orange-text-colour;
+    background-color: $_orange-background-colour;
+    box-shadow: 0 $nhsuk-card-border-bottom-width 0 $_orange-border-colour;
+
+    &.nhsuk-card--clickable:hover,
+    &.nhsuk-card--clickable:has(.nhsuk-card__heading a:hover),
+    &.nhsuk-card--clickable:has(.nhsuk-card__link:hover) {
+      border-color: $_orange-border-hover-colour;
+      box-shadow: 0 $nhsuk-card-border-bottom-width 0 $_orange-border-hover-colour;
+    }
 
-    &.nhsuk-card--clickable:active {
-      border-color: nhsuk-shade(nhsuk-colour("warm-yellow"), 30%);
+    &.nhsuk-card--clickable:active,
+    &.nhsuk-card--clickable:has(.nhsuk-card__heading a:active),
+    &.nhsuk-card--clickable:has(.nhsuk-card__link:active) {
+      box-shadow: none;
     }
 
     blockquote {
@@ -37,12 +87,22 @@
   }
 
   &--red {
-    border-color: nhsuk-tint(nhsuk-colour("red"), 50%);
-    color: nhsuk-shade(nhsuk-colour("red"), 50%);
-    background-color: nhsuk-tint(nhsuk-colour("red"), 80%);
+    border-color: $_red-border-colour;
+    color: $_red-text-colour;
+    background-color: $_red-background-colour;
+    box-shadow: 0 $nhsuk-card-border-bottom-width 0 $_red-border-colour;
+
+    &.nhsuk-card--clickable:hover,
+    &.nhsuk-card--clickable:has(.nhsuk-card__heading a:hover),
+    &.nhsuk-card--clickable:has(.nhsuk-card__link:hover) {
+      border-color: $_red-border-hover-colour;
+      box-shadow: 0 $nhsuk-card-border-bottom-width 0 $_red-border-hover-colour;
+    }
 
-    &.nhsuk-card--clickable:active {
-      border-color: nhsuk-shade(nhsuk-colour("red"), 50%);
+    &.nhsuk-card--clickable:active,
+    &.nhsuk-card--clickable:has(.nhsuk-card__heading a:active),
+    &.nhsuk-card--clickable:has(.nhsuk-card__link:active) {
+      box-shadow: none;
     }
   }
 
@@ -71,6 +131,12 @@
   .nhsuk-card__content {
     @include nhsuk-responsive-padding(4);
   }
+
+  .nhsuk-button-group .nhsuk-button {
+    @include nhsuk-media-query($from: tablet) {
+      margin-bottom: 0;
+    }
+  }
 }
 
 // Align counts across cards

app/assets/stylesheets/components/_sticky-navigation.scss

@@ -40,6 +40,6 @@
   background: nhsuk-shade($nhsuk-brand-colour, 20%);
 
   .app-secondary-navigation {
-    box-shadow: 0 -1px 0 0 $nhsuk-secondary-border-colour;
+    box-shadow: 0 -1px 0 0 $nhsuk-reverse-border-colour;
   }
 }

app/filters.js

@@ -1,4 +1,4 @@
 import prototypeFilters from '@x-govuk/govuk-prototype-filters'
 import _ from 'lodash'
 
 import { ordinal } from './utils/number.js'
@@ -18,7 +18,7 @@
 export default (env) => {
   const filters = {}
 
   /**
    * Remove border from last summary row
    *
    * @param {Array} array - Summary rows
@@ -26,7 +26,7 @@
    */
   filters.removeLastSummaryBorder = function (array) {
     if (array && Array.isArray(array) && array.length > 0) {
-      array.at(-1).classes = 'nhsuk-summary-list__row--no-border'
+      array.at(-1).border = false
 
       return array
     }
@@ -139,7 +139,7 @@
    * Push item to array
    *
    * @param {Array} array - Array
    * @param {*} item - Item to push
    * @returns {Array} Updated array
    */
   filters.push = (array, item) => {
@@ -161,7 +161,7 @@
     return array.filter((item) => _.get(item, key) === value)
   }
 
   /**
    * Filter array where array includes value
    *
    * @param {Array} array - Array

app/globals.js

@@ -316,7 +316,7 @@ export default () => {
         : keyText
 
       summaryRows.push({
-        classes: undefined,
+        border: undefined,
         key: { text: keyText },
         value: { html },
         ...(edit && {
@@ -333,7 +333,7 @@ export default () => {
       })
     }
 
-    summaryRows.at(-1).classes = 'nhsuk-summary-list__row--no-border'
+    summaryRows.at(-1).border = false
 
     return summaryRows
   }
@@ -584,7 +584,7 @@ export default () => {
           : 'Not provided'
 
         summaryRows.push({
-          classes: '',
+          border: true,
           key: {
             text: label
           },
@@ -607,7 +607,7 @@ export default () => {
     }
 
     // Remove border from final row
-    summaryRows.at(-1).classes = 'nhsuk-summary-list__row--no-border'
+    summaryRows.at(-1).border = false
 
     return summaryRows
   }

app/views/_layouts/form.njk

@@ -12,8 +12,8 @@
 
       {% block afterForm %}
         {{ button({
-          classes: confirmButtonClasses,
-          html: confirmButtonText if confirmButtonText else __("form.continue")
+          html: confirmButtonText if confirmButtonText else __("form.continue"),
+          variant: confirmButtonVariant
         }) if not hideConfirmButton }}
       {% endblock %}
     </div>

app/views/_macros/add-another.njk

@@ -19,14 +19,16 @@
   {% endif %}
   <template id="add-button">
     {{ button({
-      classes: "app-add-another__add nhsuk-button--secondary",
-      text: "Add another " + params.name
+      classes: "app-add-another__add",
+      text: "Add another " + params.name,
+      variant: "secondary"
     }) | indent(4) }}
   </template>
   <template id="delete-button">
     {{ button({
-      classes: "app-add-another__delete app-button--secondary-warning nhsuk-button--small",
-      text: "Delete"
+      classes: "app-add-another__delete app-button--secondary-warning",
+      text: "Delete",
+      small: true
     }) | indent(4) }}
   </template>
 </app-add-another>

app/views/_macros/patient-search.njk

@@ -20,17 +20,19 @@
   {% set filterButtonGroup %}
     {{ appButtonGroup({
       buttons: [{
-        classes: "nhsuk-button--secondary nhsuk-button--small",
         text: __("search.confirm"),
+        small: true,
+        variant: "secondary",
         attributes: {
           formaction: params.formaction,
           formmethod: "post",
           role: "search"
         }
       }, {
-        classes: "nhsuk-button--secondary nhsuk-button--small",
         text: __("search.clear"),
-        href: params.clear or "/patients"
+        href: params.clear or "/patients",
+        small: true,
+        variant: "secondary"
       } if data.q or data.programme or data.yearGroup or data.dob or data.status or data.hasMissingNhsNumber]
     }) }}
   {% endset %}
@@ -51,25 +53,25 @@
     }) }}
 
     {{ checkboxes({
-      classes: "nhsuk-checkboxes--small",
       fieldset: {
         legend: {
           classes: "nhsuk-fieldset__legend--s",
           text: __("programme.label")
         }
       },
+      small: true,
       items: programmeItems,
       decorate: "programme_id"
     }) if programmeItems }}
 
     {{ checkboxes({
-      classes: "nhsuk-checkboxes--small",
       fieldset: {
         legend: {
           classes: "nhsuk-fieldset__legend--s",
           text: __("patient.clinicProgramme_ids.label")
         }
       },
+      small: true,
       items: [{
         text: 'Invited to clinic',
         value: 'true'
@@ -79,34 +81,34 @@
 
     {% for name, enums in params.checkboxFilters %}
       {{ checkboxes({
-        classes: "nhsuk-checkboxes--small",
         fieldset: {
           legend: {
             classes: "nhsuk-fieldset__legend--s",
             text: __("patientSession." + name + ".label")
           }
         },
+        small: true,
         items: checkboxFilterItems(enums, data[name]),
         decorate: name
       }) if enums }}
     {% endfor %}
 
     {% for name, enums in params.radioFilters %}
       {{ radios({
-        classes: "nhsuk-radios--small",
         fieldset: {
           legend: {
             classes: "nhsuk-fieldset__legend--s",
             text: __("patientSession." + name + ".label")
           }
         },
+        small: true,
         items: radioFilterItems(enums, data[name]),
         decorate: name
       }) if enums }}
     {% endfor %}
 
     {{ radios({
-      classes: "nhsuk-radios--small",
+      small: true,
       fieldset: {
         legend: {
           classes: "nhsuk-fieldset__legend--s",
@@ -123,7 +125,7 @@
         text: PatientStatus.Consent,
         conditional: {
           html: checkboxes({
-            classes: "nhsuk-checkboxes--small",
+            small: true,
             items: enumItems(PatientConsentStatus),
             decorate: "patientConsent"
           })
@@ -132,7 +134,7 @@
         text: PatientStatus.Refused,
         conditional: {
           html: checkboxes({
-            classes: "nhsuk-checkboxes--small",
+            small: true,
             items: enumItems(PatientRefusedStatus),
             decorate: "patientRefused"
           })
@@ -149,7 +151,7 @@
                 text: ProgrammeType.Flu + " vaccine type"
               }
             } if not session,
-            classes: "nhsuk-checkboxes--small",
+            small: true,
             items: enumItems(RecordVaccineCriteria),
             items: [{
               text: RecordVaccineCriteria.AlternativeFluInjectionOnly
@@ -166,7 +168,7 @@
                 text: ProgrammeType.MMR + " vaccine type"
               }
             } if not session,
-            classes: "nhsuk-checkboxes--small",
+            small: true,
             items: [{
               text: RecordVaccineCriteria.NoMMRPreference
             }, {
@@ -179,7 +181,7 @@
         text: PatientStatus.Deferred,
         conditional: {
           html: checkboxes({
-            classes: "nhsuk-checkboxes--small",
+            small: true,
             items: enumItems(PatientDeferredStatus),
             decorate: "patientDeferred"
           })
@@ -190,7 +192,7 @@
         text: PatientStatus.Vaccinated,
         conditional: {
           html: checkboxes({
-            classes: "nhsuk-checkboxes--small",
+            small: true,
             items: enumItems(PatientVaccinatedStatus),
             decorate: "patientVaccinated"
           })
@@ -200,13 +202,13 @@
     }) if not params.hideProgrammeStatuses }}
 
     {{ checkboxes({
-      classes: "nhsuk-checkboxes--small",
       fieldset: {
         legend: {
           classes: "nhsuk-fieldset__legend--s",
           text: __("patient.yearGroup.label")
         }
       },
+      small: true,
       items: yearGroupItems,
       decorate: "yearGroup"
     }) if yearGroupItems }}
@@ -223,13 +225,13 @@
       }) }}
 
       {{ checkboxes({
-        classes: "nhsuk-checkboxes--small",
         fieldset: {
           legend: {
             classes: "nhsuk-fieldset__legend--s",
             text: __("patient.search.showOnly")
           }
         },
+        small: true,
         items: [
           {
             value: "archived",