DFC-429 Add language toggle feature

.env.sample

@@ -7,4 +7,5 @@ UNIVERSAL_ANALYTICS_GTM_CONTAINER_ID="GTM-XXXXXXX"
 GOOGLE_ANALYTICS_4_GTM_CONTAINER_ID="GTM-XXXXXXX"
 GA4_DISABLED="false"
 UA_DISABLED="true"
-ANALYTICS_COOKIE_DOMAIN=""
+ANALYTICS_COOKIE_DOMAIN=""
+LANGUAGE_TOGGLE=0

infrastructure/template.yaml

@@ -167,6 +167,8 @@ Resources:
                 - IsProd
                 - https://auth.account.gov.uk
                 - !Sub https://auth.${Environment}.account.gov.uk
+            - Name: LANGUAGE_TOGGLE
+              Value: 0
           Secrets:
             - Name: API_KEY
               ValueFrom: !Sub arn:aws:secretsmanager:${AWS::Region}:${AWS::AccountId}:secret:/${Environment}/frontend-api-key

package.json

@@ -44,6 +44,7 @@
   },
   "dependencies": {
     "@govuk-one-login/frontend-analytics": "1.0.3",
+    "@govuk-one-login/frontend-language-toggle": "1.1.0",
     "axios": "^1.6.8",
     "cookie-parser": "^1.4.6",
     "express": "^4.19.2",

src/app.ts

@@ -11,6 +11,7 @@ import { proveIdentityCallbackRouter } from "./components/prove-identity-callbac
 import { noCacheMiddleware } from "./middleware/no-cache-middleware";
 import { getSessionIdMiddleware } from "./middleware/session-middleware";
 import { setGTM } from "./middleware/analytics-middleware";
+import { languageToggleMiddleware } from "./middleware/language-toggle-middleware";
 import { serverErrorHandler } from "./handlers/internal-server-error-handler";
 import { errorPageGet } from "./components/errors/error-controller";
 import { PATH_NAMES } from "./app.constants";
@@ -21,6 +22,7 @@ import { loggerMiddleware } from "./utils/logger";
 const APP_VIEWS = [
   path.join(__dirname, "components"),
   path.resolve("node_modules/govuk-frontend/"),
+  path.resolve("node_modules/@govuk-one-login/"),
 ];
 
 async function createApp(): Promise<express.Application> {
@@ -57,6 +59,9 @@ async function createApp(): Promise<express.Application> {
 
   router.use(getSessionIdMiddleware);
   router.use(setGTM);
+
+  router.use(languageToggleMiddleware);
+
   router.use(proveIdentityCallbackRouter);
   router.get(PATH_NAMES.UNAVAILABLE_PERMANENT, permanentlyLockedController);
   router.get(PATH_NAMES.UNAVAILABLE_TEMPORARY, suspendedPageController);

src/assets/scss/application.scss

@@ -18,6 +18,8 @@ $govuk-assets-path: "/orch-frontend/assets/" !default;
 @import "components/skip-link/skip-link";
 @import "components/summary-list/summary-list";
 
+@import "../../../node_modules/@govuk-one-login/frontend-language-toggle/stylesheet/styles";
+
 .interrupt-screen {
   background-color: #1d70b8;
   padding: 30px;
@@ -149,4 +151,4 @@ $govuk-assets-path: "/orch-frontend/assets/" !default;
   padding-left: 15px;
   margin-bottom: 30px;
   margin-top: 30px;
-}
+}

src/components/common/layout/base.njk

@@ -3,6 +3,7 @@
 {% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
 {% from "govuk/components/back-link/macro.njk" import govukBackLink %}
 {% from "ga4-opl/macro.njk" import ga4OnPageLoad %}
+{% from "frontend-language-toggle/macro.njk" import languageSelect %}
 {% set assetPath="/orch-frontend/assets" %}
 {% block head %}
 
@@ -61,12 +62,32 @@
           html: phaseBannerText
         }) }}
 	      {% block beforeContent %}{% endblock %}
-	      {% if showBack %}
-	        {{ govukBackLink({
-                text: "general.back" | translate,
-                href: hrefBack
-            }) }}
-          {% endif %}
+        {% if showLanguageToggle %}
+          {{ languageSelect({
+            ariaLabel: 'general.base.languageToggle.ariaLabel' | translate,
+            url: currentUrl,
+            activeLanguage: htmlLang,
+            class: "govuk-!-margin-bottom-1",
+            languages: [
+            { 
+              code: 'en',
+              text: 'English',
+              visuallyHidden: 'Change to English'
+            },
+            {
+              code:'cy',
+              text: 'Cymraeg',
+              visuallyHidden: 'Newid yr iaith ir Gymraeg'
+            }]
+          })
+        }}
+        {% endif %}
+        {% if showBack %}
+          {{ govukBackLink({
+            text: "general.back" | translate,
+            href: hrefBack
+          }) }}
+        {% endif %} 
 	      <main class="govuk-main-wrapper {{ mainClasses }}" id="main-content" role="main"{% if mainLang %} lang="{{ mainLang }}"{% endif %}>
           <div class="govuk-grid-row">
             <div class="govuk-grid-column-two-thirds {{ rowClasses }}">

src/config/templating.ts

@@ -2,6 +2,7 @@ import express from "express";
 import i18next, { DefaultNamespace, TFunction } from "i18next";
 import * as nunjucks from "nunjucks";
 import { Environment } from "nunjucks";
+const addLanguageParam = require("@govuk-one-login/frontend-language-toggle/build/cjs/language-param-setter.cjs"); // import addLanguageParam (commonJS)
 
 export function configureNunjucks(
   app: express.Application,
@@ -20,5 +21,7 @@ export function configureNunjucks(
     return translate(key, options);
   });
 
+  nunjucksEnv.addGlobal("addLanguageParam", addLanguageParam);
+
   return nunjucksEnv;
 }

src/locales/cy/translation.json

@@ -54,6 +54,9 @@
     "header": {
       "homepageHref": "https://www.gov.uk/"
     },
+    "languageToggle": {
+      "ariaLabel": "Dewis iaith"
+    },
     "footer": {
       "accessibilityStatement": {
         "pageTitle": "Datganiad hygyrchedd",

src/locales/en/translation.json

@@ -54,6 +54,9 @@
     "header": {
       "homepageHref": "https://www.gov.uk/"
     },
+    "languageToggle": {
+      "ariaLabel": "Choose Language"
+    },
     "footer": {
       "accessibilityStatement": {
         "pageTitle": "Accessibility statement",

src/middleware/language-toggle-middleware.ts

@@ -0,0 +1,17 @@
+import { NextFunction, Request, Response } from "express";
+import dotenv from "dotenv";
+
+dotenv.config();
+
+export function languageToggleMiddleware(
+  req: Request,
+  res: Response,
+  next: NextFunction
+): void {
+  res.locals.htmlLang = req.i18n.language;
+  res.locals.showLanguageToggle = process.env.LANGUAGE_TOGGLE === "1";
+  res.locals.currentUrl = new URL(
+    req.protocol + "://" + req.get("host") + req.originalUrl
+  );
+  next();
+}