PP-12322 - Upgrade to govuk-frontend V5

Co-authored by: @marcotranchino

Make changes as per the V5 release notes: https://github.com/alphagov/govuk-frontend/releases/tag/v5.0.0

Included doing the following:
- Update JS to work with ES6 format used by V5

Update the Percy config to ignore checking anything under:
- Assets/Govuk/Components/**

Author: iqbalgds

.percy.json

@@ -18,7 +18,8 @@
     "exclude": [
       "/contact/index.html",
       "/features/index.html",
-      "/payment-links/index.html"
+      "/payment-links/index.html",
+      "/Assets/Govuk/Components/**"
     ]
   },
   "upload": {

.secrets.baseline

@@ -75,6 +75,10 @@
     {
       "path": "detect_secrets.filters.allowlist.is_line_allowlisted"
     },
+    {
+      "path": "detect_secrets.filters.common.is_baseline_file",
+      "filename": ".secrets.baseline"
+    },
     {
       "path": "detect_secrets.filters.common.is_ignored_due_to_verification_policies",
       "min_level": 2
@@ -114,9 +118,9 @@
         "filename": "source/layouts/layout.html.erb",
         "hashed_secret": "e0cadc1a99504f3acead6e976b5773d8f34e1b94",
         "is_verified": false,
-        "line_number": 30
+        "line_number": 27
       }
     ]
   },
-  "generated_at": "2024-07-22T13:19:52Z"
+  "generated_at": "2025-04-07T21:09:15Z"
 }

config.rb

@@ -62,7 +62,7 @@ def tel_to(text, className)
   config.expose_middleman_helpers = true
 end
 
-sprockets.append_path File.join(root, "node_modules/govuk-frontend/")
+sprockets.append_path File.join(root, "node_modules/govuk-frontend/dist/")
 sprockets.append_path File.join(root, "node_modules/gaap-analytics/build")
 
 redirect "security.txt.html", to: "https://vdp.cabinetoffice.gov.uk/.well-known/security.txt"

package-lock.json

@@ -19,10 +19,10 @@
   "homepage": "https://www.payments.service.gov.uk",
   "dependencies": {
     "gaap-analytics": "^3.1.0",
-    "govuk-frontend": "^4.9.0"
+    "govuk-frontend": "^5.9.0"
   },
   "devDependencies": {
-    "@percy/cli": "^1.26.0",
+    "@percy/cli": "^1.30.9",
     "@prettier/plugin-ruby": "^1.0.0",
     "jest": "^29.6.0",
     "jest-environment-jsdom": "^29.6.0",

package.json

@@ -1,6 +1,6 @@
 window.GovUkPay = window.GovUkPay || {}
 window.GovUkPay.Analytics = (function () {
-  LoadGoogleAnalytics = function () {
+  const LoadGoogleAnalytics = function () {
     var gtagScript = document.createElement('script')
     gtagScript.async = true
     gtagScript.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=G-XE9K05CFFE')

source/javascripts/analytics/analytics.js

@@ -2,7 +2,7 @@
 
 window.GovUkPay = window.GovUkPay || {}
 window.GovUkPay.InitAnalytics = (function () {
-  InitialiseAnalytics = function () {
+  const InitialiseAnalytics = function () {
     window.GovUkPay.Analytics.LoadGoogleAnalytics()
   }
 

source/javascripts/analytics/init.js

@@ -14,7 +14,7 @@ beforeAll(() => {
 describe('InitialiseAnalytics component', () => {
   describe('If initAnalytics has not yet been called', () => {
     beforeEach(() => {
-      InitialiseAnalytics()
+      window.GovUkPay.InitAnalytics.InitialiseAnalytics()
     })
 
     it('the Google Analytics libraries will have been loaded', () => {

source/javascripts/analytics/init.test.js

@@ -1,4 +1,4 @@
-//= require govuk/all.js
+//= require govuk/all.bundle.js
 //= require gaap-analytics.min.js
 //= require cookies.js
 //= require ./cookie-banner/cookie-banner.js

source/javascripts/application.js

@@ -4,14 +4,14 @@
 window.GovUkPay = window.GovUkPay || {}
 
 window.GovUkPay.CookieBanner = (function () {
-  $module = {}
-  COOKIE_NAME = 'govuk_pay_cookie_policy'
+  let $module = {}
+  const COOKIE_NAME = 'govuk_pay_cookie_policy'
 
-  setModule = function ($module) {
+  const setModule = function ($module) {
     $module = $module
   }
 
-  checkForBannerAndInit = function () {
+  const checkForBannerAndInit = function () {
     var $cookieBanner = document.querySelector('[data-module="pay-cookie-banner"]')
 
     if ($cookieBanner) {
@@ -20,37 +20,37 @@ window.GovUkPay.CookieBanner = (function () {
     }
   }
 
-  init = function ($module) {
+  const init = function ($module) {
     $module.cookieBanner = document.querySelector('.pay-cookie-banner')
     $module.cookieBannerConfirmationMessage = document.querySelector('.pay-cookie-banner__confirmation')
 
     setupCookieMessage()
   }
 
-  setupCookieMessage = function () {
-    this.$hideLink = $module.cookieBannerConfirmationMessage.querySelector('button[data-hide-cookie-banner]')
-    if (this.$hideLink) {
-      this.$hideLink.addEventListener('click', hideCookieMessage)
+  const setupCookieMessage = function () {
+    const $hideLink = $module.cookieBannerConfirmationMessage.querySelector('button[data-hide-cookie-banner]')
+    if ($hideLink) {
+      $hideLink.addEventListener('click', hideCookieMessage)
     }
 
-    this.$acceptCookiesLink = $module.cookieBanner.querySelector('button[data-accept-cookies=true]')
-    if (this.$acceptCookiesLink) {
-      this.$acceptCookiesLink.addEventListener('click', function () {
+    const $acceptCookiesLink = $module.cookieBanner.querySelector('button[data-accept-cookies=true]')
+    if ($acceptCookiesLink) {
+      $acceptCookiesLink.addEventListener('click', function () {
         setCookieConsent(true)
       })
     }
 
-    this.$rejectCookiesLink = $module.cookieBanner.querySelector('button[data-accept-cookies=false]')
-    if (this.$rejectCookiesLink) {
-      this.$rejectCookiesLink.addEventListener('click', function () {
+    const $rejectCookiesLink = $module.cookieBanner.querySelector('button[data-accept-cookies=false]')
+    if ($rejectCookiesLink) {
+      $rejectCookiesLink.addEventListener('click', function () {
         setCookieConsent(false)
       })
     }
 
-    this.showCookieMessage()
+    showCookieMessage()
   }
 
-  showCookieMessage = function () {
+  const showCookieMessage = function () {
     // Show the cookie banner if policy cookie not set
     var hasCookiesPolicy = window.GovUkPay.Cookie.getCookie(COOKIE_NAME)
 
@@ -67,7 +67,7 @@ window.GovUkPay.CookieBanner = (function () {
     }
   }
 
-  hideCookieMessage = function (event) {
+  const hideCookieMessage = function (event) {
     if ($module.cookieBannerConfirmationMessage) {
       $module.cookieBannerConfirmationMessage.style.display = 'none'
     }
@@ -77,7 +77,7 @@ window.GovUkPay.CookieBanner = (function () {
     }
   }
 
-  setCookieConsent = function (analyticsConsent) {
+  const setCookieConsent = function (analyticsConsent) {
     window.GovUkPay.Cookie.setConsentCookie({ analytics: analyticsConsent })
 
     showConfirmationMessage(analyticsConsent)
@@ -87,7 +87,7 @@ window.GovUkPay.CookieBanner = (function () {
     }
   }
 
-  showConfirmationMessage = function (analyticsConsent) {
+  const showConfirmationMessage = function (analyticsConsent) {
     var messagePrefix = analyticsConsent ? 'You’ve accepted analytics cookies. ' : 'You told us not to use analytics cookies. '
 
     var $cookieBannerMainContent = document.querySelector('.pay-cookie-banner__wrapper')