Codex rebrand

package.json

@@ -63,7 +63,7 @@
     "express-session": "^1.18.1",
     "git-rev-sync": "^3.0.2",
     "glob": "^11.0.0",
-    "govuk-frontend": "^5.0.0",
+    "govuk-frontend": "5.11.1",
     "helmet": "^8.0.0",
     "ioredis": "^5.3.0",
     "jquery": "^3.5.1",

src/main/app.ts

@@ -16,8 +16,8 @@
 import config from 'config';
 import {AutoSuggest} from './modules/autosuggest/AutoSuggest';
 
 const { setupDev } = require('./development');
 const { setupTest } = require('./test');
 
 const env = process.env.NODE_ENV || 'development';
 const developmentMode = env === 'development';
@@ -31,12 +31,20 @@
 };
 
 app.use(compression());
-app.use(favicon(path.join(__dirname, '/public/assets/images/favicon.ico')));
+app.use(favicon(path.join(__dirname, '/public/assets/rebrand/images/favicon.ico')));
 app.use(express.static(path.join(__dirname, 'public'), options));
 
 app.use(express.json());
 app.use(express.urlencoded({ extended: false }));
 
+app.use((req, res, next) => {
+  const host = req.get('host');
+  if (host) {
+    res.locals.serviceBaseUrl = `${req.protocol}://${host}`;
+  }
+  next();
+});
+
 
 
 LaunchDarklyClient.initialise();
@@ -65,7 +73,7 @@
 });
 
 globSync(__dirname + '/routes/**/*.+(ts|js)')
   .map(filename => require(filename))
   .forEach(route => route.default(app));
 
 // returning "not found" page for requests with paths not resolved by the router

src/main/modules/nunjucks/index.ts

@@ -27,6 +27,7 @@ export class Nunjucks {
 
     env.addGlobal('nonce', app.locals.nonce);
     env.addGlobal('env', app.locals.ENV);
+    env.addGlobal('govukRebrand', true);
 
     if (app.locals.ENV === 'development') {
       env.addGlobal('idamEnabled', config.get('services.idam-api.enabled'));

src/main/modules/oidc/index.ts

@@ -23,6 +23,14 @@ export class OidcMiddleware {
     '/main-dev.css',
     '/assets/images/favicon.ico',
     '/assets/manifest.json',
+    '/assets/rebrand/images/favicon.ico',
+    '/assets/rebrand/images/favicon.svg',
+    '/assets/rebrand/images/govuk-icon-180.png',
+    '/assets/rebrand/images/govuk-icon-192.png',
+    '/assets/rebrand/images/govuk-icon-512.png',
+    '/assets/rebrand/images/govuk-icon-mask.svg',
+    '/assets/rebrand/images/govuk-opengraph-image.png',
+    '/assets/rebrand/manifest.json',
   ];
 
   private authService = new AuthService(config);

src/main/views/common/navigation.njk

@@ -1,29 +1,69 @@
-<div class="govuk-service-navigation">
-  <div class="govuk-width-container govuk-!-margin-left-4">
-  <div class="govuk-service-navigation__container">
-        <ul class="govuk-service-navigation__list">
-          {% if userRoles and 'cft-audit-investigator' in userRoles %}
-          <li class="govuk-service-navigation__item {% if caseSearchPage %}govuk-service-navigation__item--active{% endif %}">
-            <a class="govuk-service-navigation__link" href="/case-audit" {% if caseSearchPage %}aria-current="page" {% endif %}>Case audit</a>
+{% set hasAuditInvestigatorRole = userRoles and 'cft-audit-investigator' in userRoles %}
+{% set hasServiceLogsRole = userRoles and 'cft-service-logs' in userRoles %}
+{% set showChallengedAccess = hasAuditInvestigatorRole and challengedAccessEnabled %}
+
+<div class="govuk-service-navigation" data-module="govuk-service-navigation">
+  <div class="govuk-width-container">
+    <div class="govuk-service-navigation__container">
+      <nav aria-label="Service menu" class="govuk-service-navigation__wrapper">
+        <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="service-navigation" hidden>
+          Menu
+        </button>
+
+        <ul class="govuk-service-navigation__list" id="service-navigation">
+          {% if hasAuditInvestigatorRole %}
+          <li class="govuk-service-navigation__item{% if caseSearchPage %} govuk-service-navigation__item--active{% endif %}">
+            <a class="govuk-service-navigation__link" href="/case-audit"{% if caseSearchPage %} aria-current="true"{% endif %}>
+              {% if caseSearchPage %}
+              <strong class="govuk-service-navigation__active-fallback">Case audit</strong>
+              {% else %}
+              Case audit
+              {% endif %}
+            </a>
+          </li>
+          {% if showChallengedAccess %}
+          <li class="govuk-service-navigation__item{% if challengedSpecificAccessPage %} govuk-service-navigation__item--active{% endif %}">
+            <a class="govuk-service-navigation__link" href="/challenged-specific-access"{% if challengedSpecificAccessPage %} aria-current="true"{% endif %}>
+              {% if challengedSpecificAccessPage %}
+              <strong class="govuk-service-navigation__active-fallback">Challenged &amp; specific access</strong>
+              {% else %}
+              Challenged &amp; specific access
+              {% endif %}
+            </a>
           </li>
-          {% if challengedAccessEnabled %}
-            <li class="govuk-service-navigation__item {% if challengedSpecificAccessPage %}govuk-service-navigation__item--active{% endif %}">
-              <a class="govuk-service-navigation__link" href="/challenged-specific-access" {% if challengedSpecificAccessPage %}aria-current="page" {% endif %}>Challenged & specific access</a>
-            </li>
           {% endif %}
-          <li class="govuk-service-navigation__item {% if logonSearchPage %}govuk-service-navigation__item--active{% endif %}">
-            <a class="govuk-service-navigation__link" href="/logon-audit" {% if logonSearchPage %}aria-current="page" {% endif %}>Log ons audit</a>
+          <li class="govuk-service-navigation__item{% if logonSearchPage %} govuk-service-navigation__item--active{% endif %}">
+            <a class="govuk-service-navigation__link" href="/logon-audit"{% if logonSearchPage %} aria-current="true"{% endif %}>
+              {% if logonSearchPage %}
+              <strong class="govuk-service-navigation__active-fallback">Log ons audit</strong>
+              {% else %}
+              Log ons audit
+              {% endif %}
+            </a>
           </li>
-          <li class="govuk-service-navigation__item {% if userDeletionSearchPage %}govuk-service-navigation__item--active{% endif %}">
-            <a class="govuk-service-navigation__link" href="/user-deletion-audit" {% if userDeletionSearchPage %}aria-current="page" {% endif %}>Deleted users</a>
+          <li class="govuk-service-navigation__item{% if userDeletionSearchPage %} govuk-service-navigation__item--active{% endif %}">
+            <a class="govuk-service-navigation__link" href="/user-deletion-audit"{% if userDeletionSearchPage %} aria-current="true"{% endif %}>
+              {% if userDeletionSearchPage %}
+              <strong class="govuk-service-navigation__active-fallback">Deleted users</strong>
+              {% else %}
+              Deleted users
+              {% endif %}
+            </a>
           </li>
           {% endif %}
-          {% if userRoles and 'cft-service-logs' in userRoles %}
-          <li class="govuk-service-navigation__item {% if caseDeletionSearchPage %}govuk-service-navigation__item--active{% endif %}">
-            <a class="govuk-service-navigation__link" href="/case-deletion-audit" {% if caseDeletionSearchPage %}aria-current="page" {% endif %}>Case deletions</a>
+          {% if hasServiceLogsRole %}
+          <li class="govuk-service-navigation__item{% if caseDeletionSearchPage %} govuk-service-navigation__item--active{% endif %}">
+            <a class="govuk-service-navigation__link" href="/case-deletion-audit"{% if caseDeletionSearchPage %} aria-current="true"{% endif %}>
+              {% if caseDeletionSearchPage %}
+              <strong class="govuk-service-navigation__active-fallback">Case deletions</strong>
+              {% else %}
+              Case deletions
+              {% endif %}
+            </a>
           </li>
           {% endif %}
         </ul>
+      </nav>
     </div>
   </div>
 </div>

src/main/views/common/template.njk

@@ -7,6 +7,14 @@
 {% block pageTitle %}GOV.UK - Log and Audit{% endblock %}
 
 {% block head %}
+  <meta name="theme-color" content="#1d70b8">
+  <link rel="icon" sizes="48x48" href="/assets/rebrand/images/favicon.ico">
+  <link rel="icon" sizes="any" href="/assets/rebrand/images/favicon.svg" type="image/svg+xml">
+  <link rel="mask-icon" href="/assets/rebrand/images/govuk-icon-mask.svg" color="#1d70b8">
+  <link rel="apple-touch-icon" href="/assets/rebrand/images/govuk-icon-180.png">
+  <link rel="manifest" href="/assets/rebrand/manifest.json">
+  {% set ogImageUrl = (serviceBaseUrl ~ '/assets/rebrand/images/govuk-opengraph-image.png') if serviceBaseUrl else '/assets/rebrand/images/govuk-opengraph-image.png' %}
+  <meta property="og:image" content="{{ ogImageUrl }}">
   {% include "common/dynatrace/head.njk" %}
   {% include "common/webpack/css.njk" %}
   {% include "common/webpack/js.njk" %}
@@ -101,6 +109,7 @@
     homepageUrl: "/",
     serviceName: "Log and Audit",
     serviceUrl: "/",
+    rebrand: true,
     navigation: [
       {
         href: "/unset-role/cft-audit-investigator" if userRoles and 'cft-audit-investigator' in userRoles else "/set-role/cft-audit-investigator",
@@ -121,6 +130,7 @@
     homepageUrl: "/",
     serviceName: "Log and Audit",
     serviceUrl: "/",
+    rebrand: true,
     navigation: [
       {
         href: "/logout" if isLoggedIn else "/login",
@@ -138,13 +148,17 @@
     {% include "./timeout-dialog.njk" %}
   {% endblock %}
 
-{% include "./navigation.njk" %}
+{% endblock %}
 
+{% block main %}
+  {% include "./navigation.njk" %}
+  {{ super() }}
 {% endblock %}
 
 
 {% block footer %}
   {{ govukFooter({
+    rebrand: true,
     meta: {
       items: [
         {

src/test/a11y/a11y.ts

@@ -42,7 +42,7 @@ function runPally(url: string, cookies: string = ''): Promise<Results> {
   let filename = fullurl.replace(/https?:\/\//gi, '').replace(/[^a-zA-Z0-9.-]/g, '_');
 
   return pa11y(fullurl, {
-    hideElements: '.govuk-footer__licence-logo, .govuk-header__logotype-crown',
+    hideElements: '.govuk-footer__licence-logo, .govuk-footer__crown, .govuk-header__logotype',
     screenCapture: `${screenshotDir}/${filename}.png`,
     wait: 500,
     headers: {

webpack/govukFrontend.js

@@ -9,11 +9,13 @@ const components = path.resolve(root, 'components');
 const assets = path.resolve(root, 'assets');
 const images = path.resolve(assets, 'images');
 const fonts = path.resolve(assets, 'fonts');
+const rebrandAssets = path.resolve(assets, 'rebrand');
 
 const copyGovukTemplateAssets = new CopyWebpackPlugin({
   patterns: [
     { from: images, to: 'assets/images' },
     { from: fonts, to: 'assets/fonts' },
+    { from: rebrandAssets, to: 'assets/rebrand' },
     { from: `${assets}/manifest.json`, to: 'assets/manifest.json' },
   ],
 });

yarn.lock

@@ -10251,10 +10251,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"govuk-frontend@npm:^5.0.0":
-  version: 5.12.0
-  resolution: "govuk-frontend@npm:5.12.0"
-  checksum: 10/966974213fc243327217112d6113cc07957dbd55496e8e3beecac74dc92b243b0fa7d5368a17ea6e4f3dd7066f3cb969f5891f278b3aada0541c37dde5aa8054
+"govuk-frontend@npm:5.11.1":
+  version: 5.11.1
+  resolution: "govuk-frontend@npm:5.11.1"
+  checksum: 10/fc4916785a8bd87315eb2682ed581aca1a65aade9e3e7a4a2d979cd01fb7fdf8811357ba6677966a86f01411b3bfd5db006e38f58b01418da45e52f76a8f2040
   languageName: node
   linkType: hard
 
@@ -12320,7 +12320,7 @@ __metadata:
     git-rev-sync: "npm:^3.0.2"
     glob: "npm:^11.0.0"
     globals: "npm:^16.0.0"
-    govuk-frontend: "npm:^5.0.0"
+    govuk-frontend: "npm:5.11.1"
     helmet: "npm:^8.0.0"
     html-webpack-plugin: "npm:^5.3.2"
     html_codesniffer: "npm:^2.5.1"