@govuk-one-login/frontend-ui 1.0.2 → 1.2.0

package/README.md

@@ -27,7 +27,7 @@ app.set(
  'view engine',
  configureNunjucks(app, [
     // ... other view paths ...
-    path.resolve('node_modules/@govuk-one-login/frontend-ui'),
+    path.resolve('node_modules/@govuk-one-login/frontend-ui')
   ]),
 );
 ```
@@ -44,20 +44,25 @@ const frontendUi = require("@govuk-one-login/frontend-ui");
 
 nunjucksEnv.addGlobal("addLanguageParam", frontendUi.addLanguageParam);
 nunjucksEnv.addGlobal("contactUsUrl", frontendUi.contactUsUrl);
+nunjucksEnv.addGlobal("May_2025_Rebrand", process.env.May_2025_Rebrand == "true");
 ```
 Typescript:
 ```typescript
 import {contactUsUrl, addLanguageParam } from "@govuk-one-login/frontend-ui";
 nunjucksEnv.addGlobal("addLanguageParam", addLanguageParam);
 nunjucksEnv.addGlobal("contactUsUrl", contactUsUrl);
+nunjucksEnv.addGlobal("May_2025_Rebrand", process.env.May_2025_Rebrand == "true");
 ```
 
+In order to use the `May_2025_Rebrand` variable you will need to create or add to your `.env` file the following `May_2025_Rebrand=`[true/false]
+
 ### 4. Load Translations and Configure Middleware
 
 In your `app.js`, import necessary functions and load translations after initializing i18next (Identity teams may need to use the bypass function as their i18n setup is different):
 
 ```javascript
 const {
+setBaseTranslations
  setFrontendUiTranslations,
  frontendUiMiddleware,
 } = require('@govuk-one-login/frontend-ui');
@@ -74,8 +79,6 @@ i18next
       ),
     },
     (err) => {
-      // Load Frontend UI translations after i18next initialization and pass current instance of i18next
-      setFrontendUiTranslations(i18next); 
 
       if (err) {
         console.error('i18next init failed:', err);
@@ -84,6 +87,9 @@ i18next
   );
 
 // Apply the middleware
+setBaseTranslations(i18next);
+setFrontendUiTranslations(i18next); 
+app.use(i18nextMiddleware.handle(i18next));
 app.use(frontendUiMiddleware);
 
 // For Identity teams a language setting bypass may be required, first import the bypass function and then configure router to use the new function at the top of your router.use functions
@@ -116,19 +122,39 @@ or
 ```
 
 ### 6. Import all.css
-Import the css into your service in the `package.json` via the `build-sass` script
+Import the css into your service in the `package.json` via the `build-sass` script.
+```
+sass --no-source-map ../../node_modules/@govuk-one-login/frontend-ui/build/all.css [WhereYouStoreStyleSheets]/frontendUi.css --style compressed"
+```
+
+You will also need to add the following in order to ensure that the assets all load properly across the basefiles
 ```
-sass --no-source-map node_modules/@govuk-one-login/frontend-ui/build/all.css *destination*/frontend-ui.css --style compressed"
+"cp -R ../../node_modules/@govuk-one-login/frontend-ui/build/frontendUiAssets [OneLevelAboveWhereYouStoreStyleSheets/SameFolderAsStyleSheets]/"
 ```
 
-include a link to this in your template file
+include a link to this in your template file, this has been done in the created basefiles already
 ```html
 {% block head %}
      '''
-    <link href="/stylesheets/frontend-ui.css" rel="stylesheet">
+  <link rel="stylesheet" href="/[WhereYouStoreStyleSheets]/frontendUi.css"/>
 {% endblock %}
 ```
 
+Or alternatively you can import the frontend-ui all.css directly into your exisiting css file if you are having a 'flickering' issue
+``` scss
+$govuk-assets-path: "/public/";
+$hmpo-summary-list: false;
+
+@import "../../../node_modules/govuk-frontend/govuk/all";
+@import "../../../node_modules/hmpo-components/all";
+@import "../../../node_modules/@govuk-one-login/frontend-language-toggle/stylesheet/styles";
+@import "../../../node_modules/accessible-autocomplete/dist/accessible-autocomplete.min";
+@import "components/button-spinner";
+@import "components/country-picker";
+
+@import "../../../node_modules/@govuk-one-login/frontend-ui/build/all.css"; // <--- HERE>
+
+```
 
 ### 7. Add Component to Template
 

package/build/all.css

@@ -1 +1 @@
-@media(max-width: 640px){.govuk-header__navigation-item{border-left:none !important}}.frontendUi_header_signOut-item{padding:5px 0px 5px 30px;border-left:1px solid #b1b4b6;margin-left:auto}.frontendUi_header__signOut{display:flex}.frontendUi-header__content{margin-left:auto}.govuk-tag{font-family:"GDS Transport",arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:700;font-size:14px;font-size:.875rem;line-height:1;display:inline-block;padding-top:5px;padding-right:8px;padding-bottom:4px;padding-left:8px;outline:2px solid rgba(0,0,0,0);outline-offset:-2px;color:#fff !important;background-color:#1d70b8 !important;letter-spacing:1px !important;text-decoration:none !important;text-transform:uppercase !important}/*! Copyright (c) 2011 by Margaret Calvert & Henrik Kubel. All rights reserved. The font has been customised for exclusive use on gov.uk. This cut is not commercially available. */@font-face{font-family:"GDS Transport";font-style:normal;font-weight:normal;src:url("/assets/fonts/light-94a07e06a1-v2.woff2") format("woff2"),url("/assets/fonts/light-f591b13f7d-v2.woff") format("woff");font-display:fallback}@font-face{font-family:"GDS Transport";font-style:normal;font-weight:bold;src:url("/assets/fonts/bold-b542beb274-v2.woff2") format("woff2"),url("/assets/fonts/bold-affa96571d-v2.woff") format("woff");font-display:fallback}@media print{.govuk-tag{font-family:sans-serif}}@media(min-width: 40.0625em){.govuk-tag{font-size:16px;font-size:1rem;line-height:1}}@media print{.govuk-tag{font-size:14pt;line-height:1}}.language-select{margin:15px 0 15px 0}.language-select__list{margin-top:1em;text-align:right}.language-select__list-item{display:inline-block}.language-select__list-item:first-child::after{content:"";display:inline-block;position:relative;top:.1875em;height:1em;border-right:.09375em solid #000}.language-select__list-item a,.language-select__list-item [aria-current]{padding:.3125em}@media screen and (max-width: 641px){.language-select__list{float:none;text-align:left;padding-bottom:10px;border-bottom:1px solid #b1b4b6}}
+@media(max-width: 640px){.govuk-header__navigation-item{border-left:none !important}.govuk-template--rebranded .govuk-header__navigation-list{padding-bottom:0px !important}.govuk-header__navigation-item{padding-top:5px !important}}.frontendUi_header_signOut-item{padding:5px 0px 5px 30px;border-left:1px solid #b1b4b6;margin-left:auto}.frontendUi_header_signOut-item--rebrand{border-left:none;padding:5px 0px 5px 30px;margin-left:auto;font-weight:700 !important}.frontendUi_header__signOut{display:flex;flex-wrap:wrap}.frontendUi-header__content{margin-left:auto}.govuk-header__navigation--signOut{padding:15px 0 15px !important}.govuk-template--rebranded .govuk-header__navigation{padding:15px 0 15px !important}@media(max-width: 640px){.govuk-header__navigation--signOut{padding:18px 0 8px !important}.govuk-template--rebranded .govuk-header__navigation{padding:18px 0 8px !important}}.govuk-template--rebranded .govuk-header__navigation-item a{font-weight:700 !important}.govuk-template--rebranded .govuk-header__navigation-item{padding-top:5px !important}@media(min-width: 20em)and (max-width: 48.0525em){.govuk-template--rebranded .govuk-header__navigation-list{padding-bottom:0px}}@media(max-width: 340px){.frontendUi-header__content{margin-left:unset}}.govuk-tag{font-family:"GDS Transport",arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:700;font-size:14px;font-size:.875rem;line-height:1;display:inline-block;padding-top:5px;padding-right:8px;padding-bottom:4px;padding-left:8px;outline:2px solid rgba(0,0,0,0);outline-offset:-2px;color:#fff !important;background-color:#1d70b8 !important;letter-spacing:1px !important;text-decoration:none !important;text-transform:uppercase !important}/*! Copyright (c) 2011 by Margaret Calvert & Henrik Kubel. All rights reserved. The font has been customised for exclusive use on gov.uk. This cut is not commercially available. */@font-face{font-family:"GDS Transport";font-style:normal;font-weight:normal;src:url("/assets/fonts/light-94a07e06a1-v2.woff2") format("woff2"),url("/assets/fonts/light-f591b13f7d-v2.woff") format("woff");font-display:fallback}@font-face{font-family:"GDS Transport";font-style:normal;font-weight:bold;src:url("/assets/fonts/bold-b542beb274-v2.woff2") format("woff2"),url("/assets/fonts/bold-affa96571d-v2.woff") format("woff");font-display:fallback}@media print{.govuk-tag{font-family:sans-serif}}@media(min-width: 40.0625em){.govuk-tag{font-size:16px;font-size:1rem;line-height:1}}@media print{.govuk-tag{font-size:14pt;line-height:1}}.language-select{margin:15px 0 15px 0}.language-select__list{margin-top:1em;text-align:right}.language-select__list-item{display:inline-block}.language-select__list-item:first-child::after{content:"";display:inline-block;position:relative;top:.1875em;height:1em;border-right:.09375em solid #000}.language-select__list-item a,.language-select__list-item [aria-current]{padding:.3125em}@media screen and (max-width: 641px){.language-select__list{float:none;text-align:left;padding-bottom:10px;border-bottom:1px solid #b1b4b6}}.spinner{width:80px;height:80px;border-radius:50%;border-width:12px;border-style:solid;border-color:#dee0e2;border-top-color:#005ea5;margin-bottom:govuk-spacing(3)}@media(forced-colors: active){.spinner{forced-color-adjust:none;border-top-color:rgba(0,0,0,0) !important}}@media not (prefers-reduced-motion){.spinner{-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}}@media(prefers-reduced-motion){.spinner{transform:rotate(0.125turn)}}.spinner__ready{border-color:#005ea5;-webkit-animation:none;animation:none}#spinner-container__error .spinner,#spinner-container__error .spinner-state-text{display:none}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.centre{margin-left:auto;margin-right:auto;text-align:center;display:block}.govuk-footer__copyright-logo::before{background-image:url("../frontendUiAssets/images/govuk-crest.svg"),url("/frontendUiAssets/images/govuk-crest.svg") !important}.govuk-footer__copyright-logo{background-image:url("../frontendUiAssets/images/govuk-crest.svg"),url("/frontendUiAssets/images/govuk-crest.svg") !important}

package/build/cjs/index-fe.cjs

@@ -0,0 +1,122 @@
+'use strict';
+
+const WaitInteractions = (() => {
+  const content = {
+    initial: {
+      spinnerState: "pending",
+    },
+    complete: { spinnerState: "completed" },
+  };
+
+  const state = {
+    spinnerState: content.initial.spinnerState,
+    done: false,
+    virtualDom: [],
+  };
+
+  const timers = {};
+
+  const createVirtualDom = () => {
+    const initialState = [
+      {
+        nodeName: "div",
+        id: "spinner",
+        classes: ["spinner", "spinner__pending", "centre", state.spinnerState],
+      },
+    ];
+
+    return initialState;
+  };
+
+  const vDomHasChanged = (currentVDom, nextVDom) => {
+    return JSON.stringify(currentVDom) !== JSON.stringify(nextVDom);
+  };
+
+  const updateDom = () => {
+    const vDomChanged = vDomHasChanged(state.virtualDom, createVirtualDom());
+    const container = document.getElementById("spinner-container");
+
+    if (vDomChanged) {
+      state.virtualDom = createVirtualDom();
+      const elements = state?.virtualDom?.map(convert);
+      container?.replaceChildren(...elements);
+    }
+
+    if (state.error) {
+      container?.classList.add("spinner-container__error");
+    }
+
+    if (state.done) {
+      clearInterval(timers.updateDomTimer);
+    }
+  };
+
+  const reflectCompletion = () => {
+    state.spinnerState = "spinner__ready";
+    state.spinnerStateText = content.complete.spinnerState;
+    state.done = true;
+  };
+
+  const reflectError = () => {
+    state.spinnerState = "spinner__failed";
+    state.done = true;
+    state.error = true;
+  };
+
+  const convert = (node) => {
+    const el = document.createElement(node.nodeName);
+    if (node.text) el.textContent = node.text;
+    if (node.innerHTML) el.innerHTML = node.innerHTML;
+    if (node.id) el.id = node.id;
+    if (node.classes) el.classList.add(...node.classes);
+    return el;
+  };
+
+  const notInErrorOrDoneState = () => {
+    return !(state.done || state.error);
+  };
+
+  const requestIDProcessingStatus = async () => {
+    const apiRoute =
+      document?.getElementById("spinner-container")?.dataset.apiRoute;
+    try {
+      const response = await fetch(apiRoute);
+
+      if (response.status !== 200) {
+        throw new Error(`Status code ${response.status} received`);
+      }
+
+      const data = await response.json();
+
+      if (data.status === "Clear to proceed") {
+        reflectCompletion();
+      } else if (notInErrorOrDoneState()) {
+        setTimeout(async () => {
+          await requestIDProcessingStatus();
+        }, 1000);
+      }
+    } catch (e) {
+      console.log(e);
+      reflectError();
+    }
+  };
+
+  return {
+    state: state,
+    init: () => {
+      timers.updateDomTimer = setInterval(updateDom, 2000);
+
+      timers.abortUnresponsiveRequest = setTimeout(() => {
+        reflectError();
+      }, 15000);
+
+      updateDom();
+
+      requestIDProcessingStatus().then(() => {
+        updateDom();
+      });
+    },
+  };
+})();
+
+exports.WaitInteractions = WaitInteractions;

package/build/cjs/index.cjs

@@ -1,5 +1,8 @@
 'use strict';
 
+var path = require('path');
+var fs = require('fs');
+
 var cookieBanner$1 = {
 	body1: "Rydym yn defnyddio rhai cwcis hanfodol i wneud i'r gwasanaeth hwn weithio.",
 	body2: "Hoffem osod cwcis ychwanegol er mwyn i ni allu cofio eich gosodiadau, deall sut mae pobl yn defnyddio'r gwasanaeth a gwneud gwelliannau.",
@@ -56,7 +59,8 @@ var footer$1 = {
 };
 var header$1 = {
 	signOut: "Allgofnodi",
-	ariaLabel: "GOV.UK One Login dewislen"
+	ariaLabel: "GOV.UK One Login dewislen",
+	signOutAriaLabel: "Allgofnodi"
 };
 var languageSelect$1 = {
 	ariaLabel: "Switcher iaith"
@@ -134,7 +138,8 @@ var footer = {
 };
 var header = {
 	signOut: "Sign Out",
-	ariaLabel: "GOV.UK One Login menu"
+	ariaLabel: "GOV.UK One Login menu",
+	signOutAriaLabel: "Sign out"
 };
 var languageSelect = {
 	ariaLabel: "Select language"
@@ -156,20 +161,24 @@ var translationEn = {
 	skipLink: skipLink
 };
 
+// Implementation
+function frontendUiMiddleware(req, res, next) {
+    res.locals.translations = req.i18n.store.data[req.i18n.language];
+    res.locals.basePath = process.cwd();
+    next();
+}
 const setFrontendUiTranslations = (instanceI18n) => {
     instanceI18n.addResourceBundle("en", "translation", translationEn, true, false);
     instanceI18n.addResourceBundle("cy", "translation", translationCy, true, false);
 };
-const frontendUiMiddleware = (req, res, next) => {
-    res.locals.translations = req.i18n.store.data[req.i18n.language];
-    next();
-};
 const frontendUiMiddlewareIdentityBypass = (req, res, next) => {
     const localTranslations = {
         en: translationEn,
-        cy: translationCy
+        cy: translationCy,
     };
-    res.locals.translations = localTranslations[req.i18n.language];
+    const language = req.i18n.language;
+    res.locals.translations = localTranslations[language] || {};
+    res.locals.basePath = process.cwd();
     next();
 };
 function addLanguageParam(language, url) {
@@ -187,9 +196,36 @@ function contactUsUrl(baseUrl, urlToAppend) {
     const searchParams = new URLSearchParams({ fromURL: urlToAppend });
     return `${baseUrl}?${searchParams.toString()}`;
 }
+const setBaseTranslations = (instanceI18n, filePath) => {
+    ["cy", "en"].forEach((locale) => {
+        instanceI18n.addResourceBundle(locale, "translation", getTranslationObject(locale, filePath));
+    });
+};
+const getTranslationObject = (locale, filepath) => {
+    const possiblePaths = [
+        path.resolve("locales", locale, "translation.json"),
+        path.resolve("src/locales", locale, "translation.json"),
+        path.resolve(filepath !== null && filepath !== void 0 ? filepath : "", locale, "translation.json"),
+    ];
+    for (const filePath of possiblePaths) {
+        if (fs.existsSync(filePath)) {
+            try {
+                const fileContent = fs.readFileSync(filePath, "utf8");
+                return JSON.parse(fileContent);
+            }
+            catch (error) {
+                console.error(`Error reading or parsing translation file at ${filePath}:`, error);
+            }
+        }
+    }
+    console.warn(`No translation file found for locale: ${locale}`);
+    return {}; // Return an empty object as a fallback
+};
 
 exports.addLanguageParam = addLanguageParam;
 exports.contactUsUrl = contactUsUrl;
 exports.frontendUiMiddleware = frontendUiMiddleware;
 exports.frontendUiMiddlewareIdentityBypass = frontendUiMiddlewareIdentityBypass;
+exports.getTranslationObject = getTranslationObject;
+exports.setBaseTranslations = setBaseTranslations;
 exports.setFrontendUiTranslations = setFrontendUiTranslations;

package/build/cjs/index.d.cts

@@ -0,0 +1,38 @@
+import i18next from "i18next";
+import { NextFunction, Request, Response } from "express";
+interface I18nData {
+    language: string;
+    store: {
+        data: {
+            [key: string]: unknown;
+        };
+    };
+}
+interface ExpressRequest extends Request {
+    i18n: I18nData;
+}
+interface ExpressResponse extends Response {
+    locals: {
+        translations: unknown;
+        basePath?: string;
+    };
+}
+interface PlainRequest {
+    i18n: I18nData;
+}
+interface PlainResponse {
+    locals: {
+        translations: unknown;
+        basePath?: string;
+    };
+}
+export declare function frontendUiMiddleware(req: ExpressRequest, res: ExpressResponse, next: NextFunction): void;
+export declare function frontendUiMiddleware(req: PlainRequest, res: PlainResponse, next: NextFunction): void;
+export declare const setFrontendUiTranslations: (instanceI18n: typeof i18next) => void;
+export declare const frontendUiMiddlewareIdentityBypass: (req: ExpressRequest, res: ExpressResponse, next: NextFunction) => void;
+export declare function addLanguageParam(language: string, url?: URL): string;
+export declare function contactUsUrl(baseUrl: string, urlToAppend: string): string | null;
+export declare const setBaseTranslations: (instanceI18n: typeof i18next, filePath?: string) => void;
+export declare const getTranslationObject: (locale: string, filepath?: string) => Record<string, unknown>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/build/cjs/index.d.ts

@@ -1,29 +1,38 @@
 import i18next from "i18next";
 import { NextFunction, Request, Response } from "express";
-export declare const setFrontendUiTranslations: (instanceI18n: typeof i18next) => void;
-export declare const frontendUiMiddleware: (req: Request & {
-    i18n: {
-        language: string;
-        store: {
-            data: {
-                [key: string]: unknown;
-            };
+interface I18nData {
+    language: string;
+    store: {
+        data: {
+            [key: string]: unknown;
         };
     };
-}, res: Response & {
+}
+interface ExpressRequest extends Request {
+    i18n: I18nData;
+}
+interface ExpressResponse extends Response {
     locals: {
         translations: unknown;
+        basePath?: string;
     };
-}, next: NextFunction) => void;
-export declare const frontendUiMiddlewareIdentityBypass: (req: Request & {
-    i18n: {
-        language: "en" | "cy";
-    };
-}, res: Response & {
+}
+interface PlainRequest {
+    i18n: I18nData;
+}
+interface PlainResponse {
     locals: {
         translations: unknown;
+        basePath?: string;
     };
-}, next: NextFunction) => void;
+}
+export declare function frontendUiMiddleware(req: ExpressRequest, res: ExpressResponse, next: NextFunction): void;
+export declare function frontendUiMiddleware(req: PlainRequest, res: PlainResponse, next: NextFunction): void;
+export declare const setFrontendUiTranslations: (instanceI18n: typeof i18next) => void;
+export declare const frontendUiMiddlewareIdentityBypass: (req: ExpressRequest, res: ExpressResponse, next: NextFunction) => void;
 export declare function addLanguageParam(language: string, url?: URL): string;
 export declare function contactUsUrl(baseUrl: string, urlToAppend: string): string | null;
+export declare const setBaseTranslations: (instanceI18n: typeof i18next, filePath?: string) => void;
+export declare const getTranslationObject: (locale: string, filepath?: string) => Record<string, unknown>;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/build/cjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,SAAS,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAI1D,eAAO,MAAM,yBAAyB,GAAI,cAAc,OAAO,OAAO,SAerE,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,KAAK,OAAO,GAAG;IACb,IAAI,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE;YAAE,IAAI,EAAE;gBAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;aAAE,CAAA;SAAE,CAAA;KAAE,CAAC;CACzE,EACD,KAAK,QAAQ,GAAG;IAAE,MAAM,EAAE;QAAE,YAAY,EAAE,OAAO,CAAA;KAAE,CAAA;CAAE,EACrD,MAAM,YAAY,SAInB,CAAC;AAEF,eAAO,MAAM,kCAAkC,GAC7C,KAAK,OAAO,GAAG;IACb,IAAI,EAAE;QACJ,QAAQ,EAAE,IAAI,GAAG,IAAI,CAAA;KACxB,CAAA;CAAC,EACF,KAAK,QAAQ,GAAG;IAAE,MAAM,EAAE;QAAE,YAAY,EAAE,OAAO,CAAA;KAAE,CAAA;CAAE,EACrD,MAAM,YAAY,SAQnB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,GAAG,UAU3D;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,iBAMhE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,SAAS,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAQ1D,UAAU,QAAQ;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE;QACL,IAAI,EAAE;YAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;SAAE,CAAC;KAClC,CAAC;CACH;AAED,UAAU,cAAe,SAAQ,OAAO;IACtC,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,UAAU,eAAgB,SAAQ,QAAQ;IACxC,MAAM,EAAE;QACN,YAAY,EAAE,OAAO,CAAC;QACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH;AAED,UAAU,YAAY;IACpB,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,UAAU,aAAa;IACrB,MAAM,EAAE;QACN,YAAY,EAAE,OAAO,CAAC;QACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH;AAGD,wBAAgB,oBAAoB,CAClC,GAAG,EAAE,cAAc,EACnB,GAAG,EAAE,eAAe,EACpB,IAAI,EAAE,YAAY,GACjB,IAAI,CAAC;AAER,wBAAgB,oBAAoB,CAClC,GAAG,EAAE,YAAY,EACjB,GAAG,EAAE,aAAa,EAClB,IAAI,EAAE,YAAY,GACjB,IAAI,CAAC;AAaR,eAAO,MAAM,yBAAyB,GAAI,cAAc,OAAO,OAAO,SAerE,CAAC;AAGF,eAAO,MAAM,kCAAkC,GAC7C,KAAK,cAAc,EACnB,KAAK,eAAe,EACpB,MAAM,YAAY,SAUnB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,GAAG,UAU3D;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,iBAMhE;AAED,eAAO,MAAM,mBAAmB,GAC9B,cAAc,OAAO,OAAO,EAC5B,WAAW,MAAM,SASlB,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,QAAQ,MAAM,EACd,WAAW,MAAM,KAChB,MAAM,CAAC,MAAM,EAAE,OAAO,CAuBxB,CAAC"}

package/build/components/_all.scss

@@ -1,3 +1,5 @@
 @use "./header";
 @use "./phase-banner";
 @use "./language-select";
+@use "./spinner";
+@use "./footer";

package/build/components/bases/auth/auth-base.njk

@@ -0,0 +1,137 @@
+{% extends "govuk/template.njk" %}
+
+{% from "frontend-ui/build/components/cookie-banner/macro.njk" import frontendUiCookieBanner %}
+{% from "frontend-ui/build/components/phase-banner/macro.njk" import frontendUiPhaseBanner %}
+{% from "frontend-ui/build/components/header/macro.njk" import frontendUiHeader %}
+{% from "frontend-ui/build/components/footer/macro.njk" import frontendUiFooter %}
+{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
+{% from "frontend-ui/build/components/language-select/macro.njk" import frontendUiLanguageSelect %}
+
+{% if May_2025_Rebrand %}
+{%set htmlClasses = 'govuk-template--rebranded'%}
+{% endif %}
+
+{% if strategicAppChannel == true %}
+  {% set htmlClasses = 'govuk-template__mobile' %}
+{% endif %}
+
+{% block head %}
+  <!--[if !IE 8]><!-->
+  <link href="/public/style.css" rel="stylesheet">
+  <link rel="stylesheet" href="/public/frontendUi.css"/>
+  <!--<![endif]-->
+
+  <!--[if IE 8]>
+  <link href="/govuk-frontend/all-ie8.css" rel="stylesheet">
+  <![endif]-->
+
+  <!--[if lt IE 9]>
+  <script src="/html5-shiv/html5shiv.js"></script>
+  <![endif]-->
+
+  {% block headMetaData %}{% endblock %}
+{% endblock %}
+
+{% block pageTitle %}
+  {% if error or errors %}
+    {{ 'general.errorTitlePrefix' | translate }} -
+  {% endif %}
+  {% if pageTitleName %}
+    {{ pageTitleName }} -
+  {% endif %}
+  {{ 'general.serviceNameTitle' | translate }}
+{% endblock %}
+
+{% block bodyStart %}
+  {% block cookieBanner %}
+    {{ frontendUiCookieBanner({
+      translations: translations.translation.cookieBanner
+    }) }}
+  {% endblock %}
+{% endblock %}
+
+{% set phaseBannerClasses = "test-banner" if showTestBanner %}
+
+{% block header %}
+    {{ frontendUiHeader({
+      translations: translations.translation.header,
+      homepageUrl: "https://www.gov.uk",
+      classes: phaseBannerClasses
+    }) }}
+{% endblock %}
+
+  {% if showTestBanner %}
+    {% set phaseBannerText = 'general.phaseBanner.testEnvironmentMessage' | translate %}
+  {% else %}
+    {% set phaseBannerText = 'phaseBanner.text' | translate %}
+  {% endif %}
+
+  {% if showTestBanner %}
+    {% set phaseBannerTag = 'general.phaseBanner.tag.test' | translate %}
+  {% else %}
+     {% set phaseBannerTag = 'general.phaseBanner.tag.beta' | translate %}
+  {% endif %}
+
+{% block main %}
+  <div class="govuk-width-container {{ containerClasses }}">
+      {{ frontendUiPhaseBanner({
+        translations: translations.translation.phaseBanner,
+        url: currentUrl,
+        contactUrl: contactUsLinkUrl,
+        tag: phaseBannerTag,
+        phaseBannerText: phaseBannerText
+      }) }}
+    {% block beforeContent %}{% endblock %}
+    {% if languageToggleEnabled %}
+      {{ frontendUiLanguageSelect({
+        translations: translations.translation.languageSelect,
+        url: currentUrl,
+        activeLanguage: htmlLang
+      }) }}
+    {% 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 }}">
+          {% block content %}{% endblock %}
+        </div>
+      </div>
+    </main>
+  </div>
+{% endblock %}
+
+{% block footer %}
+  {% if strategicAppChannel === true %}
+  {% else %}
+    {{ frontendUiFooter({
+      translations: translations.translation.footer
+    }) }}
+  {% endif %}
+{% endblock %}
+
+{% block bodyEnd %}
+  {% block scripts %}{% endblock %}
+  <script type="text/javascript" src="/public/scripts/dataLayerEvents.js"></script>
+  <script type="text/javascript" src="/public/scripts/application.js"></script>
+  <script type="text/javascript" src="/public/scripts/all.js"></script>
+  <script type="text/javascript" src="/public/scripts/analytics.js"></script>
+  <script type="text/javascript" {% if scriptNonce %} nonce="{{ scriptNonce }}"{% endif %}>
+    if (window.DI) {
+      if (window.DI.appInit) {
+        window.DI.appInit({
+          ga4ContainerId: "{{ga4ContainerId}}",
+          uaContainerId: "not used" // We don't use UA anymore, but it's a required param
+        }, {
+          isDataSensitive: false,
+          enableGa4Tracking: {{isGa4Enabled}},
+          cookieDomain: "{{analyticsCookieDomain}}"
+        });
+      }
+    }
+  </script>
+{% endblock %}