PP-12021 Upgrade to DS v5

- Going up to v5.6. - Updated the code as per the release notes from the design system: https://github.com/alphagov/govuk-frontend/releases - Remove the cookie banner code & analytics code - This is old and no longer required. - To get it working with DSv5 would have required work on the JS. - Decided to just remove it.
alphagov · Sep 17, 2024 · d181733 · d181733
1 parent e9f4c9a
commit d181733
Show file tree

Hide file tree

Showing 18 changed files with 30 additions and 163 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -128,7 +128,7 @@ module.exports = function (grunt) {
     dist: {
       src: ['public/javascripts/application.js',
         'node_modules/promise-polyfill/dist/polyfill.min.js',
-        'node_modules/govuk-frontend/govuk/all.js',
+        'node_modules/govuk-frontend/dist/govuk/all.bundle.js',
         'app/assets/javascripts/modules/*.js'],
       dest: 'public/javascripts/application.js'
     }

diff --git a/app/assets/javascripts/browsered/helpers.js b/app/assets/javascripts/browsered/helpers.js
@@ -25,7 +25,7 @@ const initialiseAddressCountryAutocomplete = () => {
 
 const toggleButton = (button) => {
   if (button) {
-    button[button.getAttribute('disabled') ? 'removeAttribute' : 'setAttribute']('disabled', 'disabled')
+    button[button.hasAttribute('disabled') ? 'removeAttribute' : 'setAttribute']('disabled', 'disabled')
   }
 }
 

diff --git a/app/assets/javascripts/browsered/web-payments/helpers.js b/app/assets/javascripts/browsered/web-payments/helpers.js
@@ -24,7 +24,7 @@ const clearErrorSummary = () => {
 
 const toggleWaiting = (paymentMethodSubmitId) => {
   const button = document.getElementById(paymentMethodSubmitId)
-  button[button.getAttribute('disabled') ? 'removeAttribute' : 'setAttribute']('disabled', 'disabled')
+  button[button.hasAttribute('disabled') ? 'removeAttribute' : 'setAttribute']('disabled', 'disabled')
   document.getElementById('spinner').classList.toggle('hidden')
 }
 

diff --git a/app/assets/javascripts/modules/analytics-track-click.js b/app/assets/javascripts/modules/analytics-track-click.js
diff --git a/app/assets/javascripts/modules/cookie-banner.js b/app/assets/javascripts/modules/cookie-banner.js
diff --git a/app/assets/javascripts/modules/form-card-type.js b/app/assets/javascripts/modules/form-card-type.js
@@ -1,4 +1,4 @@
-var showCardType = function() {
+window.showCardType = function() {
   var form = document.getElementById('card-details')
   var acceptedCards = form.querySelector('.accepted-cards')
   var cardInput = form.querySelector('#card-no')

diff --git a/app/assets/sass/application.scss b/app/assets/sass/application.scss
@@ -1,11 +1,10 @@
-@import "govuk-frontend/govuk/all";
+@import "govuk-frontend/dist/govuk/all";
 @import "govuk-country-and-territory-autocomplete/location-autocomplete";
 
 @import "modules/3ds";
 @import "modules/accepted-cards";
 @import "modules/accessible-autocomplete";
 @import "modules/button-reset";
-@import "modules/cookie-message";
 @import "modules/cvc";
 @import "modules/expiry-date-separator";
 @import "modules/input-confirm";

diff --git a/app/assets/sass/modules/cookie-message.scss b/app/assets/sass/modules/cookie-message.scss
diff --git a/app/middleware/csp.js b/app/middleware/csp.js
@@ -12,7 +12,7 @@ const allowUnsafeEvalScripts = process.env.CSP_ALLOW_UNSAFE_EVAL_SCRIPTS === 'tr
 const frontendUrl = process.env.FRONTEND_URL || ''
 // Script responsible for setting 'js-enabled' class, extends GOV.UK frontend `layout` which we have no control over
 // and never changes
-const govUkFrontendLayoutJsEnabledScriptHash = '\'sha256-+6WnXIl4mbFTCARd8N3COQmT3bJJmo32N8q8ZSQAIcU=\''
+const govUkFrontendLayoutJsEnabledScriptHash = '\'sha256-GUQ5ad8JK5KmEWmROf3LZd9ge94daqNvd8xy9YS1iDw=\''
 
 const CSP_NONE = ['\'none\'']
 const CSP_SELF = ['\'self\'']

diff --git a/app/views/includes/cookie-message.njk b/app/views/includes/cookie-message.njk
diff --git a/app/views/includes/custom.njk b/app/views/includes/custom.njk
@@ -8,7 +8,7 @@
       </span>
     </div>
     <div class="govuk-header__content">
-      <span class="govuk-header__link--service-name">
+      <span class="govuk-header__service-name">
         {{ serviceName }}
       </span>
     </div>

diff --git a/app/views/includes/scripts.njk b/app/views/includes/scripts.njk
@@ -54,7 +54,6 @@
       confirmationForm.addEventListener('submit', function () {
         confirmButton.setAttribute('disabled', 'disabled')
       })
-      analyticsTrackConfirmClick().init('{{analytics.analyticsId}}', '{{analytics.type}}', '{{analytics.paymentProvider}}', '{{analytics.amount}}', '{{hitPage}}')
     }
     {% if allowGooglePay%}
       window.googlePayGatewayMerchantID = '{{ googlePayGatewayMerchantID }}'
@@ -67,4 +66,4 @@
     {% endif %}
   })
 </script>
-<script src="{{ js_path }}"></script>
+<script type="module" src="{{ js_path }}"></script>
diff --git a/app/views/layout.njk b/app/views/layout.njk
@@ -31,33 +31,23 @@
       <div class="govuk-header__container govuk-width-container">
         <div class="govuk-header__logo">
           <a href="https://www.gov.uk/" class="govuk-header__link govuk-header__link--homepage">
-            <span class="govuk-header__logotype">
-              <!--[if gt IE 8]><!-->
               <svg
-                aria-hidden="true"
                 focusable="false"
-                class="govuk-header__logotype-crown"
+                role="img"
+                class="govuk-header__logotype"
                 xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 32 30"
+                viewBox="0 0 148 30"
                 height="30"
-                width="32"
+                width="148"
+                aria-label="GOV.UK"
               >
-                <path
-                  fill="currentColor" fill-rule="evenodd"
-                  d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8"></path>
+                <title>GOV.UK</title>
+                <path d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8m28.3-11.6c0 .9.1 1.7.3 2.5.2.8.6 1.5 1 2.2.5.6 1 1.1 1.7 1.5.7.4 1.5.6 2.5.6.9 0 1.7-.1 2.3-.4s1.1-.7 1.5-1.1c.4-.4.6-.9.8-1.5.1-.5.2-1 .2-1.5v-.2h-5.3v-3.2h9.4V28H55v-2.5c-.3.4-.6.8-1 1.1-.4.3-.8.6-1.3.9-.5.2-1 .4-1.6.6s-1.2.2-1.8.2c-1.5 0-2.9-.3-4-.8-1.2-.6-2.2-1.3-3-2.3-.8-1-1.4-2.1-1.8-3.4-.3-1.4-.5-2.8-.5-4.3s.2-2.9.7-4.2c.5-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.6 2.6-.8 4.1-.8 1 0 1.9.1 2.8.3.9.2 1.7.6 2.4 1s1.4.9 1.9 1.5c.6.6 1 1.3 1.4 2l-3.7 2.1c-.2-.4-.5-.9-.8-1.2-.3-.4-.6-.7-1-1-.4-.3-.8-.5-1.3-.7-.5-.2-1.1-.2-1.7-.2-1 0-1.8.2-2.5.6-.7.4-1.3.9-1.7 1.5-.5.6-.8 1.4-1 2.2-.3.8-.4 1.9-.4 2.7zM71.5 6.8c1.5 0 2.9.3 4.2.8 1.2.6 2.3 1.3 3.1 2.3.9 1 1.5 2.1 2 3.4s.7 2.7.7 4.2-.2 2.9-.7 4.2c-.4 1.3-1.1 2.4-2 3.4-.9 1-1.9 1.7-3.1 2.3-1.2.6-2.6.8-4.2.8s-2.9-.3-4.2-.8c-1.2-.6-2.3-1.3-3.1-2.3-.9-1-1.5-2.1-2-3.4-.4-1.3-.7-2.7-.7-4.2s.2-2.9.7-4.2c.4-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.5 2.6-.8 4.2-.8zm0 17.6c.9 0 1.7-.2 2.4-.5s1.3-.8 1.7-1.4c.5-.6.8-1.3 1.1-2.2.2-.8.4-1.7.4-2.7v-.1c0-1-.1-1.9-.4-2.7-.2-.8-.6-1.6-1.1-2.2-.5-.6-1.1-1.1-1.7-1.4-.7-.3-1.5-.5-2.4-.5s-1.7.2-2.4.5-1.3.8-1.7 1.4c-.5.6-.8 1.3-1.1 2.2-.2.8-.4 1.7-.4 2.7v.1c0 1 .1 1.9.4 2.7.2.8.6 1.6 1.1 2.2.5.6 1.1 1.1 1.7 1.4.6.3 1.4.5 2.4.5zM88.9 28 83 7h4.7l4 15.7h.1l4-15.7h4.7l-5.9 21h-5.7zm28.8-3.6c.6 0 1.2-.1 1.7-.3.5-.2 1-.4 1.4-.8.4-.4.7-.8.9-1.4.2-.6.3-1.2.3-2v-13h4.1v13.6c0 1.2-.2 2.2-.6 3.1s-1 1.7-1.8 2.4c-.7.7-1.6 1.2-2.7 1.5-1 .4-2.2.5-3.4.5-1.2 0-2.4-.2-3.4-.5-1-.4-1.9-.9-2.7-1.5-.8-.7-1.3-1.5-1.8-2.4-.4-.9-.6-2-.6-3.1V6.9h4.2v13c0 .8.1 1.4.3 2 .2.6.5 1 .9 1.4.4.4.8.6 1.4.8.6.2 1.1.3 1.8.3zm13-17.4h4.2v9.1l7.4-9.1h5.2l-7.2 8.4L148 28h-4.9l-5.5-9.4-2.7 3V28h-4.2V7zm-27.6 16.1c-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.7-1.2 2.7-2.7-1.2-2.7-2.7-2.7z"></path>
               </svg>
-              <!--<![endif]-->
-              <!--[if IE 8]>
-              <img src="/assets/images/govuk-logotype-tudor-crown.png" class="govuk-header__logotype-crown-fallback-image" width="32" height="30" alt="">
-              <![endif]-->
-              <span class="govuk-header__logotype-text">
-                GOV.UK
-              </span>
-            </span>
           </a>
         </div>
         <div class="govuk-header__content">
-          <span class="govuk-header__link--service-name">
+          <span class="govuk-header__service-name">
             {{serviceName}}
           </span>
         </div>
@@ -66,10 +56,6 @@
   {% endif %}
 {% endblock %}
 
-{% block bodyStart %}
-  {% include "includes/cookie-message.njk" %}
-{% endblock %}
-
 {% block bodyEnd %}
   {# Run JavaScript at end of the <body>, to avoid blocking the initial render. #}
   {% include "includes/scripts.njk" %}

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -85,7 +85,7 @@
     "express": "4.19.x",
     "express-rate-limit": "^7.1.4",
     "gaap-analytics": "^3.1.0",
-    "govuk-frontend": "^4.8.0",
+    "govuk-frontend": "^5.6.0",
     "helmet": "^7.1.0",
     "hpagent": "^1.2.0",
     "i18n": "0.15.x",

diff --git a/server.js b/server.js
@@ -45,7 +45,7 @@ const publicCaching = { maxAge: oneYear }
 
 // Define app views
 const APP_VIEWS = [
-  path.join(__dirname, 'node_modules/govuk-frontend/'),
+  path.join(__dirname, 'node_modules/govuk-frontend/dist/'),
   path.join(__dirname, '/app/views')
 ]
 
@@ -58,7 +58,7 @@ function initialiseGlobalMiddleware (app) {
   app.set('settings', { getVersionedPath: staticify.getVersionedPath })
 
   app.use(/\/((?!images|public|stylesheets|javascripts).)*/, loggingMiddleware())
-  app.use(favicon(path.join(__dirname, '/node_modules/govuk-frontend/govuk/assets/images', 'favicon.ico')))
+  app.use(favicon(path.join(__dirname, '/node_modules/govuk-frontend/dist/govuk/assets/images', 'favicon.ico')))
   app.use(staticify.middleware)
 
   app.use(function (req, res, next) {
@@ -140,9 +140,9 @@ function initialisePublic (app) {
   app.use('/stylesheets', express.static(path.join(__dirname, '/public/assets/stylesheets'), publicCaching))
 
   if (process.env.NGINX_CACHING_ENABLED === 'true') {
-    app.use('/', express.static(path.join(__dirname, '/node_modules/govuk-frontend/govuk/'), publicCaching))
+    app.use('/', express.static(path.join(__dirname, '/node_modules/govuk-frontend/dist/govuk/'), publicCaching))
   } else {
-    app.use('/', express.static(path.join(__dirname, '/node_modules/govuk-frontend/govuk/')))
+    app.use('/', express.static(path.join(__dirname, '/node_modules/govuk-frontend/dist/govuk/')))
   }
 
   app.use('/public', express.static(path.join(__dirname, '/node_modules/@govuk-pay/pay-js-commons/')))

diff --git a/test/integration/charge-status.ft.test.js b/test/integration/charge-status.ft.test.js
@@ -96,7 +96,6 @@ describe('chargeTests', function () {
             expect($('#card-details #csrf').attr('value')).to.not.be.empty // eslint-disable-line
             expect($('#amount').text()).to.eql('£23.45')
             expect($('#payment-description').text()).to.contain('Payment Description')
-            expect($('#govuk-script-analytics')[0].children[0].data).to.contains(`init('${gatewayAccount.analyticsId}', '${gatewayAccount.type}', 'sandbox', '23.45', '')`)
             expect($('#card-details').attr('action')).to.eql(frontendCardDetailsPostPath)
           })
           .end(done)

diff --git a/test/test-helpers/html-assertions.js b/test/test-helpers/html-assertions.js
@@ -5,7 +5,7 @@ const nunjucks = require('nunjucks')
 const lodash = require('lodash')
 
 // Global initialisation
-const views = ['./app/views', './node_modules/govuk-frontend']
+const views = ['./app/views', './node_modules/govuk-frontend/dist']
 const environment = nunjucks.configure(views)
 const strings = require('./../../locales/en.json')