CCMSPUI-411: Upgrade GOVUK Frontend to 5.7.1

README.md

@@ -153,12 +153,6 @@ Find more
 information [here](https://docs.github.com/en/enterprise-server@3.6/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
 for setting up presonal access tokens.
 
-## GDS templates
-
-These have been committed to the repo, but if you need these updated you can update
-the [templates](./templates.sh) script and rerun it.
-Update the version when necessary.
-
 ## M series Macbook/Colima development setup
 
 ### Prerequisites
@@ -239,7 +233,7 @@ To check the current Docker context, use:
 docker context show
 ```
 
-## Recreating frontend static resources
+## Recreating frontend static resources (GDS & MoJ templates)
 
 > **_INFORMATION:_**  When cloning this project for the first time, you do not need
 > to run gulp as the static resources should already be created within the project.

gulpfile.js

@@ -22,7 +22,8 @@ function copyGOVUKJavaScript() {
   .pipe(rename('all.js'))
   // Add spring context path to asset locations
   .pipe(replace('/assets/', '/civil/assets/'))
-  .pipe(gulp.dest('./src/main/resources/static/js/'), {overwrite: true} );
+  .pipe(gulp.dest('./src/main/resources/static/govuk-frontend/'),
+      {overwrite: true});
 }
 
 function copyGOVUKAssets(){
@@ -71,6 +72,7 @@ function compileCCMSStyleSheets(){
   // Will highlight errors in your CSS file incase they are missed
   .pipe(plumber())
   .pipe(sass({
+    includePaths: ['node_modules'],
     outputStyle: "compressed"
   }))
   .pipe(plumber.stop())

package.json

@@ -1,7 +1,7 @@
 {
   "devDependencies": {
     "@ministryofjustice/frontend": "^2.2.4",
-    "govuk-frontend": "^5.3.1",
+    "govuk-frontend": "^5.7.1",
     "gulp": "^5.0.0",
     "gulp-autoprefixer": "^9.0.0",
     "gulp-minify": "^3.1.0",

src/main/resources/scss/component/spinner.scss

@@ -1,7 +1,9 @@
+@use "node_modules/govuk-frontend/dist/govuk/settings/colours-palette";
+
 .loader {
     margin: auto;
     border: 12px solid #dee0e2;
-    border-top: 12px solid #1d70b8;
+    border-top: 12px solid map-get($govuk-colours, "blue");
     border-radius: 50%;
     width: 80px;
     height: 80px;
@@ -11,7 +13,7 @@
 .loader-small {
     margin: auto;
     border: 4px solid #dee0e2;
-    border-top: 4px solid #1d70b8;
+    border-top: 4px solid map-get($govuk-colours, "blue");
     border-radius: 50%;
     width: 20px;
     height: 20px;

src/main/resources/templates/application/assessments/assessment-get.html

@@ -27,7 +27,7 @@
 
 <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
 
-<header th:replace="~{partials/header :: header}"></header>
+<th:block th:replace="~{partials/header :: header}"></th:block>
 
 <div class="govuk-width-container">
   <div th:replace="~{partials/phase-banner :: phase-banner}"></div>
@@ -63,7 +63,7 @@ <h1 class="govuk-heading-l" th:text="${frameTitle}"></h1>
     var url = [[${submitReturnUrl}]];
     var el = document.getElementById("interview-wrapper");
     var resumeId = [[${resumeId}]];
-    var checkpoint = [[${checkpoint}]];;
+    var checkpoint = [[${checkpoint}]];
     var val = [[${params}]];
     var user = [[${username}]];
 

src/main/resources/templates/layout.html

@@ -7,7 +7,7 @@
 
 <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
 
-<header th:replace="~{partials/header :: header}"></header>
+<th:block th:replace="~{partials/header :: header}"></th:block>
 
 <div class="govuk-width-container">
     <div th:replace="~{partials/phase-banner :: phase-banner}"></div>

src/main/resources/templates/partials/header.html

@@ -1,4 +1,6 @@
-<header th:fragment="header" class="govuk-header" role="banner" data-module="govuk-header">
+<th:block th:fragment="header">
+    <header class="govuk-header govuk-header--full-width-border" role="banner"
+            data-module="govuk-header">
     <div class="govuk-header__container govuk-width-container">
         <div class="govuk-header__logo">
             <a href="#" class="govuk-header__link govuk-header__link--homepage">
@@ -14,31 +16,54 @@
             <a href="#" class="govuk-header__link govuk-header__service-name">
                 Client and Cost Management System
             </a>
-            <nav aria-label="Menu" class="govuk-header__navigation ">
-                <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide menu" hidden>Menu</button>
-                <ul id="navigation" class="govuk-header__navigation-list">
-                    <li class="govuk-header__navigation-item" th:classappend="${pageCategory == 'home'} ? 'govuk-header__navigation-item--active'">
-                        <a class="govuk-header__link" th:href="@{/home}">
-                            Home
-                        </a>
-                    </li>
-                    <li class="govuk-header__navigation-item" th:classappend="${pageCategory == 'cases'} ? 'govuk-header__navigation-item--active'">
-                        <a class="govuk-header__link" th:href="@{/application/search}">
-                            Cases and applications
-                        </a>
-                    </li>
-                    <li class="govuk-header__navigation-item" th:classappend="${pageCategory == 'actions'} ? 'govuk-header__navigation-item--active'">
-                        <a class="govuk-header__link" th:href="@{/notifications/search?notification_type=all}">
-                            Actions and notifications
-                        </a>
-                    </li>
-                    <li class="govuk-header__navigation-item">
-                        <a class="govuk-header__link" href="#TODO">
-                            Help
-                        </a>
-                    </li>
-                </ul>
-            </nav>
         </div>
     </div>
 </header>
+    <div class="govuk-service-navigation"
+         data-module="govuk-service-navigation">
+        <div class="govuk-width-container">
+            <div class="govuk-service-navigation__container">
+                <nav aria-label="Menu" class="govuk-service-navigation__wrapper">
+                    <button type="button"
+                            class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle"
+                            aria-controls="navigation" hidden>
+                        Menu
+                    </button>
+                    <ul class="govuk-service-navigation__list" id="navigation">
+                        <li class="govuk-service-navigation__item"
+                            th:classappend="${pageCategory == 'home'} ? 'govuk-service-navigation__item--active'">
+                            <a class="govuk-service-navigation__link" th:href="@{/home}"
+                               th:attr="aria-current=${pageCategory == 'home' ? 'true' : null}">
+                                Home
+                            </a>
+                        </li>
+                        <li class="govuk-service-navigation__item"
+                            th:classappend="${pageCategory == 'cases'} ? 'govuk-service-navigation__item--active'">
+                            <a class="govuk-service-navigation__link"
+                               th:href="@{/application/search}"
+                               th:attr="aria-current=${pageCategory == 'cases' ? 'true' : null}">
+                                <strong class="govuk-service-navigation__active-fallback">Cases and
+                                    applications</strong>
+                            </a>
+                        </li>
+                        <li class="govuk-service-navigation__item"
+                            th:classappend="${pageCategory == 'actions'} ? 'govuk-service-navigation__item--active'">
+                            <a class="govuk-service-navigation__link"
+                               th:href="@{/notifications/search(notification_type=all)}"
+                               th:attr="aria-current=${pageCategory == 'actions' ? 'true' : null}">
+                                Actions and notifications
+                            </a>
+                        </li>
+                        <li class="govuk-service-navigation__item"
+                            th:classappend="${pageCategory == 'help'} ? 'govuk-service-navigation__item--active'">
+                            <a class="govuk-service-navigation__link" href="#TODO"
+                               th:attr="aria-current=${pageCategory == 'help' ? 'true' : null}">
+                                Help
+                            </a>
+                        </li>
+                    </ul>
+                </nav>
+            </div>
+        </div>
+    </div>
+</th:block>

src/main/resources/templates/submissions/submissionInProgress.html

@@ -21,7 +21,7 @@
 
     <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
 
-    <header th:replace="~{partials/header :: header}"></header>
+  <th:block th:replace="~{partials/header :: header}"></th:block>
 
     <div class="govuk-width-container">
       <div th:replace="~{partials/phase-banner :: phase-banner}"></div>