[DO NOT MERGE] PP-15490 Upgrade govuk-frontend to v6

app/assets/sass/application.scss

@@ -1,15 +1,15 @@
-@import "govuk-frontend/dist/govuk/all";
-@import "govuk-country-and-territory-autocomplete/location-autocomplete";
+@use "govuk-frontend/dist/govuk" as *;
+@use "govuk-country-and-territory-autocomplete/location-autocomplete";
 
-@import "modules/3ds";
-@import "modules/accepted-cards";
-@import "modules/accessible-autocomplete";
-@import "modules/cvc";
-@import "modules/expiry-date-separator";
-@import "modules/input-confirm";
-@import "modules/summary-panel";
-@import "modules/web-payments";
-@import "modules/text-align";
-@import "modules/borders";
-@import "modules/divider";
-@import "modules/test_payment_banner";
+@use "modules/3ds" as *;
+@use "modules/accepted-cards";
+@use "modules/accessible-autocomplete";
+@use "modules/cvc";
+@use "modules/expiry-date-separator";
+@use "modules/input-confirm";
+@use "modules/summary-panel";
+@use "modules/web-payments";
+@use "modules/text-align";
+@use "modules/borders";
+@use "modules/divider";
+@use "modules/test_payment_banner";

app/assets/sass/base/_custom-branding.scss

@@ -1,5 +1,5 @@
-@import "colours";
-@import "conditionals";
+@use "colours";
+@use "conditionals";
 
 // CUSTOM BRANDING
 // Use the variables below to control the style

app/assets/sass/modules/_accepted-cards.scss

@@ -1,3 +1,6 @@
+@use 'sass:list';
+@use "govuk-frontend/dist/govuk" as *;
+
 .accepted-cards {
   display: block;
   width: 100%;
@@ -22,21 +25,21 @@
   }
 
   $cards: visa master-card american-express jcb diners-club discover maestro visa-electron unionpay;
-  @for $i from 1 through length($cards) {
+  @for $i from 1 through list.length($cards) {
     // sass-lint:disable space-around-operator
     $x-pos: 12.5 * ($i - 1);
 
-    .#{nth($cards, $i)} {
+    .#{list.nth($cards, $i)} {
       background-position: #{$x-pos + "%"} 100%;
     }
 
-    &.field-empty .#{nth($cards, $i)},
-    .#{nth($cards, $i)}.selected {
+    &.field-empty .#{list.nth($cards, $i)},
+    .#{list.nth($cards, $i)}.selected {
       background-position: #{$x-pos + "%"} 0%;
     }
   }
 
   &-hint {
-    color: $govuk-secondary-text-colour;
+    color: govuk-functional-colour(secondary-text);
   }
 }

app/assets/sass/modules/_accessible-autocomplete.scss

@@ -1,3 +1,5 @@
+@use "govuk-frontend/dist/govuk" as *;
+
 .autocomplete__input,
 .autocomplete__menu {
   @include govuk-font($size: 19);

app/assets/sass/modules/_borders.scss

@@ -1,3 +1,5 @@
+@use "govuk-frontend/dist/govuk" as *;
+
 .pay-\!-border-top {
-  border-top: 1px solid $govuk-border-colour;
+  border-top: 1px solid govuk-functional-colour(border);
 }

app/assets/sass/modules/_cvc.scss

@@ -1,3 +1,5 @@
+@use "govuk-frontend/dist/govuk" as *;
+
 .hidden {
   display: none;
 }
@@ -34,7 +36,7 @@ body:not(.js-enabled) {
   .either {
     @include govuk-font($size: 19);
     line-height: 37px!important;
-    color: $govuk-secondary-text-colour;
+    color: govuk-functional-colour(secondary-text);
     float: left;
     margin-right: govuk-spacing(3);
   }

app/assets/sass/modules/_expiry-date-separator.scss

@@ -1,3 +1,5 @@
+@use "govuk-frontend/dist/govuk" as *;
+
 .govuk-date-input__item--with-separator {
   position: relative;
   margin-right: govuk-spacing(7);

app/assets/sass/modules/_input-confirm.scss

@@ -1,3 +1,5 @@
+@use "govuk-frontend/dist/govuk" as *;
+
 .input-confirm {
   @include govuk-font($size: 19);
   margin-top: govuk-spacing(1) * -1;
@@ -12,7 +14,7 @@
 
   .input-confirmation {
     @include govuk-font($size: 24);
-    color: $govuk-text-colour;
+    color: govuk-functional-colour(text);
 
     .email-container & {
       word-break: break-all;

app/assets/sass/modules/_summary-panel.scss

@@ -1,7 +1,9 @@
+@use "govuk-frontend/dist/govuk" as *;
+
 .payment-summary {
-  border-top: 2px solid $govuk-brand-colour;
+  border-top: 2px solid govuk-functional-colour(brand);
   padding: govuk-spacing(3);
-  background-color: govuk-colour('light-grey');
+  background-color: govuk-colour('black', $variant: 'tint-95');
 
   .amount {
     display: block;

app/assets/sass/modules/_test_payment_banner.scss

@@ -1,3 +1,5 @@
+@use "govuk-frontend/dist/govuk" as *;
+
 .test-payment-banner {
   padding-top: govuk-spacing(2);
   @include govuk-media-query($until: tablet) {

app/assets/sass/modules/_text-align.scss

@@ -1,3 +1,5 @@
+@use "govuk-frontend/dist/govuk" as *;
+
 .govuk-text-align-center {
   text-align: center;
 }

app/assets/sass/modules/_web-payments.scss

@@ -1,3 +1,5 @@
+@use "govuk-frontend/dist/govuk" as *;
+
 .apple-pay-container{
   display: none;
 
@@ -38,7 +40,7 @@
   }
 
   &[disabled] {
-    background: $govuk-secondary-text-colour;
+    background: govuk-functional-colour(secondary-text);
   }
 
   //https://developer.apple.com/documentation/apple_pay_on_the_web/displaying_apple_pay_buttons

app/assets/sass/modules/divider.scss

@@ -1,3 +1,5 @@
+@use "govuk-frontend/dist/govuk" as *;
+
 .pay-divider {
   @include govuk-font($size: 19);
 
@@ -13,7 +15,7 @@
     top: 50%;
     width: 100%;
     display: block;
-    border-top: 1px solid $govuk-border-colour;
+    border-top: 1px solid govuk-functional-colour(border);
   }
 
   &--word {

app/views/includes/custom.njk

@@ -1,16 +1,18 @@
-<header class="govuk-header" role="banner" data-module="govuk-header" data-cy="header">
-  <div class="govuk-header__container govuk-width-container" data-cy="header-container" data-cy="header-container">
-    <div class="govuk-header__logo">
-      <span class="govuk-header__link--homepage" data-cy="custom-branding-image-container">
-        <span class="govuk-header__logotype">
-          <img src="{{ service.customBranding.imageUrl }}" class="govuk-header__logotype-crown custom-branding-image" alt="" data-cy="custom-branding-image">
+<header class="govuk-template__header">
+  <div class="govuk-header" role="banner" data-module="govuk-header" data-cy="header">
+    <div class="govuk-header__container govuk-width-container govuk-grid-row custom-header-container " data-cy="header-container" data-cy="header-container">
+      <div class="govuk-header__logo govuk-grid-column-one-third govuk-!-padding-0 pay-custom-header-logo">
+        <span class="govuk-header__homepage-link" data-cy="custom-branding-image-container">
+          <span class="govuk-header__logotype">
+            <img src="{{ service.customBranding.imageUrl }}" class="govuk-header__logotype-crown custom-branding-image" alt="" data-cy="custom-branding-image">
+          </span>
         </span>
-      </span>
-    </div>
-    <div class="govuk-header__content">
-      <span class="govuk-header__service-name" data-cy="service-name">
-        {{ serviceName }}
-      </span>
+      </div>
+      <div class="govuk-header__content govuk-grid-column-two-thirds pay-custom-header-content">
+        <span class="govuk-header__service-name pay-custom-service-name" data-cy="service-name">
+          {{ serviceName }}
+        </span>
+      </div>
     </div>
   </div>
 </header>

app/views/layout.njk

@@ -1,5 +1,6 @@
 {% extends "govuk/template.njk" %}
 {% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
+{% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
 
 {% set htmlLang = language %}
 
@@ -30,21 +31,29 @@
   {% else %}
     {{ govukHeader({
       homepageUrl: "https://www.gov.uk/",
-      serviceName: serviceName,
       attributes : {
         'data-cy': 'header'
       }
     }) }}
+
+    {{ govukServiceNavigation({
+      serviceName: serviceName,
+      attributes : {
+        'data-cy': 'service-navigation'
+      }
+    }) }}
   {% endif %}
 
   {% if isTestPayment %}
     <div class="govuk-width-container">
+    {% block headerEnd %}
       {{ govukPhaseBanner({
         tag: {
           text: "Test service"
         },
         html: 'This is a test payment service.'
       }) }}
+    {% endblock %}
     </div>
   {% endif %}
 {% endblock %}
@@ -53,8 +62,7 @@
   {# Run JavaScript at end of the <body>, to avoid blocking the initial render. #}
   {% include "includes/scripts.njk" %}
 {% endblock %}
-
-{% block footer %}
+{% block govukFooter %}
   {% if service and service.merchantDetails and service.merchantDetails.name %}
     {% set footerMetaText = 'Service provided by ' + service.merchantDetails.name %}
 

package.json

@@ -74,7 +74,7 @@
   "dependencies": {
     "@aws-crypto/decrypt-node": "^1.0.3",
     "@aws-crypto/raw-rsa-keyring-node": "^1.1.0",
-    "@govuk-pay/pay-js-commons": "^7.0.74",
+    "@govuk-pay/pay-js-commons": "govuk-pay/pay-js-commons#PP-15523-Update-custom-styles-for-govuk-frontend-v6-upgrade",
     "@govuk-pay/pay-js-metrics": "^2.0.7",
     "@sentry/node": "7.119.2",
     "cert-info": "^1.5.1",
@@ -84,7 +84,7 @@
     "credit-card-type": "6.3.x",
     "express": "^5.2.1",
     "gaap-analytics": "^3.1.0",
-    "govuk-frontend": "^5.10.2",
+    "govuk-frontend": "^6.0.0",
     "helmet": "^7.1.0",
     "hpagent": "^1.2.0",
     "i18n": "0.15.x",
@@ -141,7 +141,7 @@
     "nock": "13.3.4",
     "nodemon": "^3.0.1",
     "proxyquire": "~2.1.3",
-    "sass": "^1.69.3",
+    "sass": "^1.101.0",
     "sinon": "^22.0.0",
     "standard": "^16.0.x",
     "stylelint": "^15.10.3",

server.js

@@ -125,7 +125,6 @@ function initialiseTemplateEngine (app) {
   nunjucksEnvironment.addGlobal('css_path', NODE_ENV === 'production' ? staticify.getVersionedPath(CSS_PATH) : CSS_PATH)
   nunjucksEnvironment.addGlobal('js_path', NODE_ENV === 'production' ? staticify.getVersionedPath(JAVASCRIPT_PATH) : JAVASCRIPT_PATH)
   nunjucksEnvironment.addGlobal('isDevelopment', NODE_ENV !== 'production')
-  nunjucksEnvironment.addGlobal('govukRebrand', true)
 }
 
 function initialisePublic (app) {

test/cypress/integration/card/awaiting-auth.test.cy.js

@@ -36,9 +36,12 @@ describe('Awaiting auth', () => {
     cy.get('[data-cy=header]')
       .find('.govuk-header__container')
       .should('have.css', 'border-bottom-color', 'rgb(255, 255, 255)')
-    cy.get('[data-cy=header]')
-      .find('.govuk-header__service-name')
+    cy.get('[data-cy=service-navigation]')
+      .find('.govuk-service-navigation__text')
       .should('contain', 'service name')
+    cy.get('[data-cy=service-navigation]').should('have.css', 'background-color', 'rgb(244, 248, 251)')
+    cy.get('[data-cy=service-navigation]').should('have.css', 'color', 'rgb(11, 12, 12)')
+    cy.get('[data-cy=service-navigation]').should('have.css', 'border-bottom-color', 'rgb(142, 184, 220)')
 
     cy.task('clearStubs')
     cy.task('setupStubs', checkCardDetailsStubs)

test/cypress/integration/card/custom-branding.test.cy.js

@@ -37,6 +37,7 @@ describe('Custom branding', () => {
     cy.get('[data-cy=service-name]').should('have.css', 'color', 'rgb(0, 0, 0)')
     cy.get('[data-cy=custom-branding-image-container]').should('have.css', 'background-color', 'rgba(0, 0, 0, 0)')
     cy.get('[data-cy=custom-branding-image]').should('have.attr', 'src', '/public/images/custom/cypress-testing.svg')
+    cy.get('[data-cy=service-navigation]').should('not.exist')
   })
 
   it('Should setup custom branding correctly when purple background with white text', () => {
@@ -72,5 +73,6 @@ describe('Custom branding', () => {
     cy.get('[data-cy=service-name]').should('have.css', 'color', 'rgb(255, 255, 255)')
     cy.get('[data-cy=custom-branding-image-container]').should('have.css', 'background-color', 'rgba(0, 0, 0, 0)')
     cy.get('[data-cy=custom-branding-image]').should('have.attr', 'src', '/public/images/custom/cypress-testing.svg')
+    cy.get('[data-cy=service-navigation]').should('not.exist')
   })
 })