PP-12020 Upgrade to design system v5

- Add the changes from the DSv5 release notes - https://github.com/alphagov/govuk-frontend/releases/tag/v5.0.0
- Most changes were updates to ensure compatibility with the update tag component - https://design-system.service.gov.uk/components/tag/
  - Which requires all text to be in sentence case - i.e. the first letter needs to be in
    uppercase.
- These changes have been checked using Percy.

app/assets/js/components/add-service-spinner.js

@@ -14,6 +14,5 @@
 
     document.getElementById('submit-button').setAttribute('disabled', true)
     document.getElementById('submit-button').setAttribute('aria-disabled', true)
-    document.getElementById('submit-button').setAttribute('class', 'govuk-button govuk-button--disabled')
   }
 })()

app/assets/js/components/request-psp-test-account-spinner.js

@@ -13,6 +13,5 @@
 
     document.getElementById('submit-button').setAttribute('disabled', true)
     document.getElementById('submit-button').setAttribute('aria-disabled', true)
-    document.getElementById('submit-button').setAttribute('class', 'govuk-button govuk-button--disabled')
   }
 })()

app/assets/sass/application.scss

@@ -1,7 +1,7 @@
 // We set all our pages wider in selfservice because it helps people viewing the list of transactions
 $govuk-page-width: 1200px;
 
-@import "govuk-frontend/govuk/all";
+@import "govuk-frontend/dist/govuk/all";
 @import "accessible-autocomplete";
 
 @import "components/cookie-message";

app/assets/sass/components/navigation.scss

@@ -13,6 +13,7 @@
 .service-info--tag {
   display: inline-block;
   margin-left: 5px;
+  max-width: none;
 }
 
 .service-info {

app/assets/sass/components/print-button.scss

@@ -2,7 +2,7 @@
   display: none;
 }
 
-.js-enabled {
+.govuk-frontend-supported {
   .print-button-wrapper {
     display: block;
   }

app/assets/sass/components/request-to-go-live.scss

@@ -18,17 +18,6 @@
     display: inline-block;
     width: 30px;
   }
-  .status {
-    background-color: govuk-colour("blue");
-    color: govuk-colour("white");
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    font-size: 14px;
-    font-weight: bold;
-    padding: 0 5px;
-    margin-left: govuk-spacing(1);
-    vertical-align: middle;
-  }
   .waiting {
     background-color: govuk-colour("dark-grey");
   }

app/views/agreements/macro/status.njk

@@ -5,10 +5,10 @@
 "INACTIVE": "govuk-tag--yellow"
 } %}
 {% set statusTextMap = {
-"CREATED": "needs payment details",
-"ACTIVE": "active",
-"CANCELLED": "cancelled",
-"INACTIVE": "inactive"
+"CREATED": "Needs payment details",
+"ACTIVE": "Active",
+"CANCELLED": "Cancelled",
+"INACTIVE": "Inactive"
 } %}
 
 {% macro agreementStatusTag(status) %}

app/views/api-keys/create.njk

@@ -51,7 +51,7 @@
       <div class="govuk-warning-text govuk-!-margin-bottom-0">
         <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
         <strong class="govuk-warning-text__text">
-          <span class="govuk-warning-text__assistive">Warning</span>
+          <span class="govuk-visually-hidden">Warning</span>
           <h2 class="govuk-heading-m">Store your API key securely</h2>
         </strong>
 

app/views/includes/phase-banner.njk

@@ -21,7 +21,7 @@
         {% if paymentProvider === 'sandbox' %}
           Test
         {% else %}
-          {{ paymentProvider }} Test
+          {{ paymentProvider | capitalize }} test
         {% endif %}
       {% else %}
         Live
@@ -33,7 +33,7 @@
       - switch psp
       {% endif %}
     {% endset %}
-    <strong class="service-info--tag govuk-tag {{ tagModifierClass }}">{{ tagText }}</strong>
+    <strong class="govuk-tag service-info--tag {{ tagModifierClass }}">{{ tagText }}</strong>
   {% endif %}
 {% endset %}
 

app/views/includes/scripts.njk

@@ -1 +1 @@
-<script src="{{ js_path }}"></script>
+<script type="module" src="{{ js_path }}"></script>

app/views/payouts/list.njk

@@ -8,7 +8,7 @@ Payments to your bank account - GOV.UK Pay
 {% block beforeContent %}
   {% set pageTitleBreadcrumbWithTag %}
       <span>Payments to your bank account</span>
-      <strong class="service-info--tag govuk-tag govuk-tag--grey">{{ "LIVE" if filterLiveAccounts else "TEST" }}</strong>
+      <strong class="govuk-tag govuk-tag--grey service-info--tag">{{ "Live" if filterLiveAccounts else "Test" }}</strong>
   {% endset %}
   {{ breadcrumbs([
     { text: "My services", href: routes.serviceSwitcher.index },
@@ -20,7 +20,7 @@ Payments to your bank account - GOV.UK Pay
 <div class="govuk-grid-column-full">
   <h1 class="govuk-heading-l">
     Payments to your bank account
-    <strong class="govuk-tag govuk-tag--grey">{{ "LIVE" if filterLiveAccounts else "TEST" }}</strong>
+    <strong class="govuk-tag govuk-tag--grey">{{ "Live" if filterLiveAccounts else "Test" }}</strong>
   </h1>
 </div>
 <div class="govuk-grid-column-two-thirds govuk-!-margin-bottom-0">

app/views/request-to-go-live/index.njk

@@ -1,4 +1,5 @@
 {% extends "../layout.njk" %}
+{%- from "govuk/components/tag/macro.njk" import govukTag -%}
 
 {% block pageTitle %}
   Request a live account - {{ currentService.name }} - GOV.UK Pay
@@ -32,7 +33,7 @@
         <div class="govuk-warning-text">
           <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
           <strong class="govuk-warning-text__text">
-            <span class="govuk-warning-text__assistive">Warning</span>
+            <span class="govuk-visually-hidden">Warning</span>
               All users with admin permissions can submit this information.  You can <a href="{{formatServicePathsFor(routes.service.teamMembers.index, currentService.externalId)}}" class="govuk-link">manage your users</a> here.
           </strong>
         </div>
@@ -91,19 +92,28 @@
         <ol class="govuk-list govuk-list--number">
           <li>Add your organisation’s name and address. These details will appear on your payment pages.
             {% if enteredOrganisationAddress %}
-              <span class="status">Completed</span>
-              {% elif enteredOrganisationName %}
-              <span class="status">In Progress</span>
+              {{ govukTag({
+                text: "Completed"
+              }) }}
+            {% elif enteredOrganisationName %}
+              {{ govukTag({
+                text: "In progress",
+                classes: "govuk-tag--grey"
+              }) }} 
             {% endif %}
           </li>
           <li>Tell us which payment service provider you will use.
             {% if chosenHowToProcessPayments %}
-              <span class="status">Completed</span>
+              {{ govukTag({
+                text: "Completed"
+              }) }}
             {% endif %}
           </li>
           <li>Read and accept our legal terms.
             {% if agreedToTerms %}
-              <span class="status">Completed</span>
+              {{ govukTag({
+                text: "Completed"
+              }) }}
             {% endif %}
           </li>
         </ol>

app/views/services/_service-section.njk

@@ -7,7 +7,7 @@
       {{ service.name }}
       {% if service.isWorldpayTestService %}
         {{govukTag({
-          text: "WORLDPAY TEST SERVICE",
+          text: "Worldpay test service",
           classes: "govuk-tag--grey"
         })}}
       {% endif %}

app/views/services/_service-switch.njk

@@ -15,7 +15,7 @@
       {% endif %}
     </button>
     {% if account.provider_switch_enabled and service.isAdminUser %}
-      <strong class="service-info--tag govuk-tag govuk-tag--blue">switch PSP</strong>
+      <strong class="govuk-tag govuk-tag--blue service-info--tag">switch PSP</strong>
     {% endif %}
   </form>
 </li>

app/views/simplified-account/settings/stripe-details/bank-account/index.njk

@@ -77,7 +77,6 @@
     document.getElementById('bank-account').addEventListener('submit', function () {
       submitButton.setAttribute('disabled', 'true')
       submitButton.setAttribute('aria-disabled', 'true')
-      submitButton.setAttribute('class', 'govuk-button govuk-button--disabled')
       submitButton.textContent = "Saving..."
     })
 

app/views/switch-psp/switch-psp.njk

@@ -22,11 +22,11 @@
     </span>
 
     {% if not item.enabled and not item.complete %}
-    <strong class="govuk-tag app-task-list__tag govuk-tag--grey" id="{{ label }}-status">cannot start yet</strong>
+    <strong class="govuk-tag app-task-list__tag govuk-tag--grey" id="{{ label }}-status">Cannot start yet</strong>
     {% elif item.enabled and not item.complete %}
-    <strong class="govuk-tag app-task-list__tag govuk-tag--grey" id="{{ label }}-status">not started</strong>
+    <strong class="govuk-tag app-task-list__tag govuk-tag--grey" id="{{ label }}-status">Not started</strong>
     {% elif item.complete %}
-    <strong class="govuk-tag app-task-list__tag" id="{{ label }}-status">completed</strong>
+    <strong class="govuk-tag app-task-list__tag" id="{{ label }}-status">Completed</strong>
     {% endif %}
   </li>
 {% endmacro %}

app/views/transaction-detail/index.njk

@@ -12,7 +12,7 @@
   {% if contextIsAllServiceTransactions %}
     {% set pageTitleBreadcrumbWithTag %}
       <span>Transactions for all services</span>
-      <strong class="service-info--tag govuk-tag govuk-tag--grey">{{ "LIVE" if live else "TEST" }}</strong>
+      <strong class="govuk-tag govuk-tag--grey service-info--tag">{{ "Live" if live else "Test" }}</strong>
     {% endset %}
     {{ breadcrumbs([
       { text: "My services", href: routes.serviceSwitcher.index },

app/views/transactions/filter.njk

@@ -270,7 +270,7 @@
     {% endif %}
     <div class="govuk-grid-column-full">
       <div class="govuk-grid-column-one-half">
-        <details class="govuk-details" data-module="govuk-details" {{ detailsElementOpenHtml }}>
+        <details class="govuk-details" {{ detailsElementOpenHtml }}>
           <summary class="govuk-details__summary">
             <span class="govuk-details__summary-text">
               Advanced filters

app/views/transactions/index.njk

@@ -30,7 +30,7 @@
   {% if allServiceTransactions %}
     {% set pageTitleBreadcrumbWithTag %}
       <span>Transactions for all services</span>
-      <strong class="service-info--tag govuk-tag govuk-tag--grey">{{ "LIVE" if filterLiveAccounts else "TEST" }}</strong>
+      <strong class="govuk-tag govuk-tag--grey service-info--tag ">{{ "Live" if filterLiveAccounts else "Test" }}</strong>
     {% endset %}
     {{ breadcrumbs([
       { text: "My services", href: routes.serviceSwitcher.index },
@@ -62,7 +62,7 @@
   <h1 class="govuk-heading-l">
     {% if allServiceTransactions %}
        Transactions for all services
-       <strong class="govuk-tag govuk-tag--grey">{{ "LIVE" if filterLiveAccounts else "TEST" }}</strong>
+       <strong class="govuk-tag govuk-tag--grey">{{ "Live" if filterLiveAccounts else "Test" }}</strong>
     {% else %}
        Transactions
     {% endif %}

app/views/transactions/paginator.njk

@@ -6,7 +6,7 @@
       <input type="hidden" name="page" value="{{paginationLink.pageNumber}}"/>
       <input type="hidden" name="pageSize" value="{{filters.pageSize}}"/>
 
-      <button class="pagination {{paginationLink.pageName}} {% if paginationLink.activePage %}active{% endif %} {% if paginationLink.disabled %}govuk-button--disabled {% endif %}" {% if paginationLink.disabled %} disabled="disabled" {% endif %} type="submit">
+      <button class="pagination {{paginationLink.pageName}} {% if paginationLink.activePage %}active{% endif %}" {% if paginationLink.disabled %} disabled {% endif %} type="submit">
           <span class="govuk-visually-hidden">Results page </span>{{paginationLink.pageName}}
       </button>
     </form>

app/views/webhooks/_paginator.njk

@@ -6,7 +6,7 @@
       <input type="hidden" name="page" value="{{paginationLink.pageNumber}}"/>
       <input type="hidden" name="status" value="{{status}}"/>
 
-      <button class="pagination {{paginationLink.pageName}} {% if paginationLink.activePage %}active{% endif %} {% if paginationLink.disabled %}govuk-button--disabled {% endif %}" {% if paginationLink.disabled %} disabled="disabled" {% endif %}  type="submit">
+      <button class="pagination {{paginationLink.pageName}} {% if paginationLink.activePage %}active{% endif %}" {% if paginationLink.disabled %} disabled {% endif %}  type="submit">
         <span class="govuk-visually-hidden">Results page </span>{{paginationLink.pageName}}
       </button>
     </form>

app/views/webhooks/message.njk

@@ -54,7 +54,7 @@
   }) }}
 
   <div class="govuk-body">
-    <details class="govuk-details" data-module="govuk-details">
+    <details class="govuk-details" >
       <summary class="govuk-details__summary">
         <span class="govuk-details__summary-text">{{ messageType }} event body</span>
       </summary>

app/views/your-psp/_stripe.njk

@@ -14,11 +14,11 @@
 		<div class="govuk-grid-column-one-third">
 			<span>
 				{% if not item.enabled and not item.completed %}
-					<strong class="govuk-tag govuk-tag--grey" id="{{ id }}-status">cannot start yet</strong>
+					<strong class="govuk-tag govuk-tag--grey" id="{{ id }}-status">Cannot start yet</strong>
 				{% elif item.enabled and not item.completed %}
-						<strong class="govuk-tag govuk-tag--grey" id="{{ id }}-status">not started</strong>
+						<strong class="govuk-tag govuk-tag--grey" id="{{ id }}-status">Not started</strong>
 				{% elif item.completed %}
-						<strong class="govuk-tag" id="{{ id }}-status">completed</strong>
+						<strong class="govuk-tag" id="{{ id }}-status">Completed</strong>
 				{% endif %}
 			</span>
 		</div>

package.json

@@ -91,7 +91,7 @@
     "express": "4.21.1",
     "express-validator": "^7.2.0",
     "google-libphonenumber": "3.2.33",
-    "govuk-frontend": "^4.8.0",
+    "govuk-frontend": "^5.7.1",
     "http-proxy": "1.18.x",
     "https-proxy-agent": "5.0.1",
     "joi": "17.12.1",

server.js

@@ -70,7 +70,7 @@ function initialiseGlobalMiddleware (app) {
   if (process.env.DISABLE_REQUEST_LOGGING !== 'true') {
     app.use(/\/((?!public|favicon.ico).)*/, loggingMiddleware())
   }
-  app.use(favicon('node_modules/govuk-frontend/govuk/assets/images/favicon.ico'))
+  app.use(favicon('node_modules/govuk-frontend/dist/govuk/assets/images/favicon.ico'))
   app.use(staticify.middleware)
 
   app.use(function (req, res, next) {
@@ -98,7 +98,7 @@ function initialiseTemplateEngine (app) {
   // Configure nunjucks
   // see https://mozilla.github.io/nunjucks/api.html#configure
   const nunjucksEnvironment = nunjucks.configure([
-    'node_modules/govuk-frontend/',
+    'node_modules/govuk-frontend/dist/',
     'app/views'
   ], {
     express: app, // the express app that nunjucks should install to
@@ -131,7 +131,7 @@ function initialiseTemplateEngine (app) {
 
 function initialisePublic (app) {
   app.use('/public', express.static('public'))
-  app.use('/', express.static('node_modules/govuk-frontend/govuk'))
+  app.use('/', express.static('node_modules/govuk-frontend/dist/govuk'))
 }
 
 function initialiseRoutes (app) {

test/cypress/integration/agreements/agreement.cy.js

@@ -65,7 +65,7 @@ describe('Agreement detail page', () => {
     cy.get('[data-cy=agreement-detail]').find('dt').eq(1).contains('Reference')
     cy.get('[data-cy=agreement-detail]').find('dd').eq(1).contains('valid-reference')
     cy.get('[data-cy=agreement-detail]').find('dt').eq(2).contains('Status')
-    cy.get('[data-cy=agreement-detail]').find('dd').eq(2).contains('active')
+    cy.get('[data-cy=agreement-detail]').find('dd').eq(2).contains('Active')
     cy.get('[data-cy=agreement-detail]').find('dt').eq(3).contains('Description')
     cy.get('[data-cy=agreement-detail]').find('dd').eq(3).contains("Reason shown to paying user for taking agreement <script>console.log('AGREEMENT')</script>")
     cy.get('[data-cy=agreement-detail]').find('dt').eq(4).contains('Date created')

test/cypress/integration/all-service-transactions/all-service-transactions-no-autosearch.cy.js

@@ -79,7 +79,7 @@ describe('All service transactions without automatic search', () => {
     cy.get('.govuk-breadcrumbs').within(() => {
       cy.get('.govuk-breadcrumbs__list-item').should('have.length', 2)
       cy.get('.govuk-breadcrumbs__list-item').eq(1).contains('Transactions for all services')
-      cy.get('.govuk-breadcrumbs__list-item').eq(1).find('.govuk-tag').should('have.text', 'LIVE')
+      cy.get('.govuk-breadcrumbs__list-item').eq(1).find('.govuk-tag').should('have.text', 'Live')
     })
 
     cy.get('.transactions-list--row').should('have.length', 0)
@@ -92,7 +92,7 @@ describe('All service transactions without automatic search', () => {
     cy.get('.govuk-breadcrumbs').within(() => {
       cy.get('.govuk-breadcrumbs__list-item').should('have.length', 2)
       cy.get('.govuk-breadcrumbs__list-item').eq(1).contains('Transactions for all services')
-      cy.get('.govuk-breadcrumbs__list-item').eq(1).find('.govuk-tag').should('have.text', 'TEST')
+      cy.get('.govuk-breadcrumbs__list-item').eq(1).find('.govuk-tag').should('have.text', 'Test')
     })
 
     cy.get('.transactions-list--row').should('have.length', 2)