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

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

@@ -0,0 +1,135 @@
+{% extends "govuk/template.njk" %}
+{% from "common/ga4-opl/macro.njk" import ga4OnPageLoad %}
+{% from "frontend-ui/build/components/cookie-banner/macro.njk" import frontendUiCookieBanner %}
+{% from "frontend-ui/build/components/header/macro.njk" import frontendUiHeader%}
+{% from "frontend-ui/build/components/phase-banner/macro.njk" import frontendUiPhaseBanner %}
+{% from "frontend-ui/build/components/language-select/macro.njk" import frontendUiLanguageSelect %}
+{% from "frontend-ui/build/components/footer/macro.njk" import frontendUiFooter %}
+
+{% if May_2025_Rebrand %}
+{%set htmlClasses = 'govuk-template--rebranded'%}
+{% endif %}
+
+
+{% block head %}
+  {# Dynatrace RUM snippet #}
+  {% if dynatraceRumUrl %}
+    <script src="{{ dynatraceRumUrl }}" crossorigin="anonymous" nonce="{{ scriptNonce }}"></script>
+  {% endif %}
+  <link href="/public/style.css" rel="stylesheet">
+  <link rel="stylesheet" href="/public/frontendUi.css"/>
+
+{% endblock %}
+
+{% block pageTitle %}
+  {%- if error or errors %} 
+    {{ 'general.errorTitlePrefix' | translate }} - 
+  {%- endif -%}
+  {%- if pageTitleName -%}
+    {{ pageTitleName }}
+    {%- if not hideTitleProductName %} - {% endif -%}
+  {% endif -%}
+  {{ 'general.serviceNameTitle' | translate if not hideTitleProductName }}
+{%- endblock %}
+
+{% block bodyStart %}
+  {% block cookieBanner %}
+    {{ frontendUiCookieBanner({
+      translations: translations.translation.cookieBanner
+    }) }}
+  {% endblock %}
+{% endblock %}
+{% block header %}
+     {{ frontendUiHeader({
+      translations: translations.translation.header,
+      homepageUrl: "https://www.gov.uk",
+      signOutLink: accountSignOut
+    }) }}
+{% endblock %}
+
+{% block main %}
+  <div class="govuk-width-container {{ containerClasses }}">
+    {{ frontendUiPhaseBanner({
+      translations: translations.translation.phaseBanner,
+      url: currentUrl,
+      contactUrl: ("[supportUrl]", authFrontEndUrl + "/contact-us-questions?theme=suggestions_feedback")
+    }) if not hidePhaseBanner }}
+
+    {% if showLanguageToggle %}
+      {{ frontendUiLanguageSelect({
+        translations: translations.translation.languageSelect,
+        url: currentUrl,
+        activeLanguage: htmlLang
+      }) }}
+    {% endif %}
+
+    {% block backLinkBlock %}
+      {% if backLink %}
+        <a href="{{ backLink }}" class="govuk-back-link js-back-link">
+          {{ backLinkText }}
+          {{ 'general.back' | translate if not backLinkText }}
+        </a>
+      {% endif %}
+    {% endblock %}
+
+    {% block beforeContent %}{% endblock %}
+
+    <main class="govuk-main-wrapper {{ mainClasses }}" id="main-content" {% if mainLang %} lang="{{ mainLang }}" {% endif %}>
+      {% block content %}{% endblock %}
+    </main>
+  </div>
+
+  {% block feedback %}{% endblock %}
+{% endblock %}
+
+{% block footer %}
+  {{ frontendUiFooter({
+    translations: translations.translation.footer
+  }) }}
+{% endblock %}
+
+{% block bodyEnd %}
+  {% block scripts %}{% endblock %}
+
+  <script type="module" src="/public/scripts/govuk-frontend.min.js" {% if scriptNonce %} nonce="{{ scriptNonce }}"{% endif %}></script>
+
+  <script type="module" {% if scriptNonce %} nonce="{{ scriptNonce }}"{% endif %}>
+    import { initAll } from '/public/scripts/govuk-frontend.min.js';
+    initAll();
+  </script>
+
+  <script type="text/javascript" src="/public/scripts/analytics.js" nonce="{{ scriptNonce }}"></script>
+
+  <script type="text/javascript" nonce="{{ scriptNonce }}">
+    {% if backLinkJS %}
+      var backLink = document.querySelector('.js-back-link');
+      if (backLink) {
+        backLink.addEventListener('click', function(e) {
+          var referrer = new URL(document.referrer).hostname;
+          if (referrer === document.location.hostname && window.history.length > 2) {
+            event.preventDefault();
+            window.history.back();
+          }
+        });
+      }
+    {% endif %}
+  </script>
+
+  <script type="text/javascript" {% if scriptNonce %} nonce="{{ scriptNonce }}"{% endif %}>
+    if (window.DI) {
+      window.DI.appInit({
+        ga4ContainerId: "{{ ga4ContainerId }}"
+      }, {
+        enableGa4Tracking: {{ isGa4Enabled }},
+        cookieDomain: "{{ analyticsCookieDomain }}",
+        isDataSensitive: true,
+        enablePageViewTracking: true,
+        enableFormResponseTracking: true,
+        enableFormChangeTracking: true,
+        enableFormErrorTracking: true,
+        enableNavigationTracking: true,
+        enableSelectContentTracking: {{ isSelectContentTrackingEnabled }}
+      });
+    }
+  </script>
+{% endblock %}

package/build/components/bases/identity/identity-base-form.njk

@@ -6,6 +6,10 @@
 {% from "frontend-ui/build/components/footer/macro.njk" import frontendUiFooter %}
 {% from "frontend-ui/build/components/language-select/macro.njk" import frontendUiLanguageSelect %}
 
+{% if May_2025_Rebrand %}
+{%set htmlClasses = 'govuk-template--rebranded'%}
+{% endif %}
+
 {%- block pageTitle %}
     {{- (translate("govuk.error", { default: "Error" }) + ": ") if errorlist.length }}{{ hmpoTitle | safe }}{{ " – " + govukServiceName | safe if govukServiceName !== " " }} – GOV.UK One Login
 {%- endblock %}
@@ -18,7 +22,7 @@
   )}}
   {% endblock %}
 
-  {% block frontendUiHeader %}
+  {% block govukHeader %}
     {{ frontendUiHeader({
       translations: translations.header,
       homepageUrl: "https://www.gov.uk"
@@ -78,5 +82,14 @@
         }
       );
     </script>
+
+    {% if deviceIntelligenceEnabled %}
+    <script type="module" src="/public/javascripts/deviceIntelligence.js"></script>
+    <script type="module" {% if cspNonce %} nonce="{{ cspNonce }}"{%  endif %}>
+      import { setFingerprintCookie } from "/public/javascripts/deviceIntelligence.js";
+      setFingerprintCookie("{{deviceIntelligenceDomain}}")
+    </script>
+    {% endif %}
+
   {% endblock %}
 {% endblock %}

package/build/components/bases/identity/identity-base-page.njk

@@ -6,20 +6,27 @@
 {% from "frontend-ui/build/components/footer/macro.njk" import frontendUiFooter %}
 {% from "frontend-ui/build/components/language-select/macro.njk" import frontendUiLanguageSelect %}
 
+{% if May_2025_Rebrand %}
+{%set htmlClasses = 'govuk-template--rebranded'%}
+{% endif %}
+
+{% block head %}
+  <link rel="stylesheet" href="/public/stylesheets/application.css"/>
+{% endblock %}
+
 {%- block pageTitle %}
   {{- (translate("govuk.error", { default: "Error" }) + ": ") if errorlist.length }}{{ hmpoTitle | safe }}{{ " – " + govukServiceName | safe if govukServiceName !== " " }} – GOV.UK One Login
 {%- endblock %}
 
 {% block header %}
-
-  {% block frontendUiCookieBanner %}
-          {{ frontendUiCookieBanner({
+  {% block cookieBanner %}
+      {{ frontendUiCookieBanner({
     translations: translations.cookieBanner
   }
   )}}
   {% endblock %}
 
-  {% block frontendUiHeader %}
+  {% block govukHeader %}
     {{ frontendUiHeader({
       translations: translations.header,
       homepageUrl: "https://www.gov.uk"

package/build/components/bases/ipv-core/ipv-core-base.njk

@@ -0,0 +1,154 @@
+{% 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 "frontend-ui/build/components/language-select/macro.njk" import frontendUiLanguageSelect %}
+{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
+{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
+{% from  basePath ~ "/views/shared/ga4/on-page-load-macro.njk" import ga4OnPageLoad %}
+{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
+
+{% if May_2025_Rebrand %}
+{%set htmlClasses = 'govuk-template--rebranded'%}
+{% endif %}
+
+{# Set language values for govuk/template.njk #}
+{% set htmlLang = currentLanguage %}
+{% set pageTitleLang = currentLanguage %}
+{% set mainLang = currentLanguage %}
+
+{% block head %}
+    {# Dynatrace RUM snippet #}
+    {% if dynatraceRumUrl %}
+    <script src='{{ dynatraceRumUrl }}' crossorigin="anonymous" nonce='{{ cspNonce }}'></script>
+    {% endif %}
+
+    <link href="/public/stylesheets/application.css" rel="stylesheet">
+
+  <link rel="stylesheet" href="/public/stylesheets/frontendUi.css"/>
+
+    {# For older browsers to allow them to recognise HTML5 elements such as `<header>` #}
+    <!--[if lt IE 9]>
+    <script nonce='{{ cspNonce }}' src="/html5-shiv/html5shiv.js"></script>
+    <![endif]-->
+
+    {% block headMetaData %}{% endblock %}
+
+{% endblock %}
+
+{% block pageTitle-%}
+    {%- if pageErrorState %}
+        {{ 'general.govuk.errorTitlePrefix' | translate }}
+    {% endif %}
+    {%- if pageTitleKey %}{{ pageTitleKey | translateWithContextOrFallback(context) }} – GOV.UK One Login{% endif %}
+{%- endblock %}
+
+{% block bodyStart %}
+      {% block cookieBanner %}
+      {{ frontendUiCookieBanner({
+    translations: translations.translation.cookieBanner
+  }
+  )}}
+
+
+  {%endblock%}
+{% endblock %}
+
+{% block header %}
+        {{ frontendUiHeader({
+      translations: translations.translation.header,
+      homepageUrl: "https://www.gov.uk",
+      signOutLink: logoutUrl
+    }) }}
+{% endblock %}
+
+{% block main %}
+    <div class="govuk-width-container {{ containerClasses }}">
+    {{ frontendUiPhaseBanner({
+      translations: translations.translation.phaseBanner,
+      url: currentUrl,
+      contactUrl: contactUsUrl
+    }) }}
+
+        {% block beforeContent %}{% endblock %}
+        {# {% if showLanguageToggle %} #}
+    {{ frontendUiLanguageSelect({
+      translations: translations.translation.languageSelect,
+      url: currentUrl,
+      activeLanguage: htmlLang
+    }) }}
+        {# {% endif %} #}
+        {% if showBack %}
+            {{ govukBackLink({
+                text: "general.govuk.backLink" | translate,
+                href: hrefBack
+            }) }}
+        {% endif %}
+        <main class="govuk-main-wrapper {{ mainClasses }}" id="main-content"{% if currentLanguage %} lang="{{ currentLanguage }}"{% endif %}>
+            <div class="govuk-grid-row">
+                {% if (displayBanner) %}
+                    {{ govukNotificationBanner({
+                        html: bannerMessage,
+                        type: bannerType
+                    }) }}
+                {% endif %}
+                <div class="govuk-grid-column-two-thirds {{ rowClasses }}">
+                   {% if errorState %}
+                        {{ govukErrorSummary({
+                            titleText: errorTitle | default('Error Summary'),
+                            errorList: [
+                                {
+                                    text: errorText | translate,
+                                    href: errorHref | default("#")
+                                }
+                            ]
+                        }) }}
+                    {% endif %}
+                    {% block content %}{% endblock %}
+                </div>
+            </div>
+        </main>
+    </div>
+{% endblock %}
+
+{% block footer %}
+      {{ frontendUiFooter({
+    translations: translations.translation.footer
+  }) }}
+{% endblock %}
+
+{% block bodyEnd %}
+    {% block scripts %}{% endblock %}
+    <script nonce='{{ cspNonce }}' src="/public/javascripts/application.js"></script>
+    <script type="module" nonce='{{ cspNonce }}' src="/public/javascripts/govuk-frontend.min.js"></script>
+    <script type="module" nonce='{{ cspNonce }}'>
+        import { initAll } from '/public/javascripts/govuk-frontend.min.js'
+        initAll()
+    </script>
+    {% if useDeviceIntelligence %}
+    <script type="module" nonce='{{ cspNonce }}' src="/public/javascripts/fingerprint.js"></script>
+    <script type="module" nonce='{{ cspNonce }}'>
+        import { setFingerprintCookie } from "/public/javascripts/fingerprint.js";
+        setFingerprintCookie('{{ serviceDomain }}')
+    </script>
+    {% endif %}
+    <script nonce='{{ cspNonce }}'>
+        window.DI = window.DI || {};
+        window.DI.httpStatusCode = {{ statusCode | d(200) }};
+        window.DI.journeyState = "{{ googleTagManagerPageId }}";
+        window.DI.appInit({
+            ga4ContainerId: "{{ ga4ContainerId }}",
+            uaContainerId: "{{ uaContainerId }}",
+        }, {
+        enableGa4Tracking: {{isGa4Enabled}},
+        enableUaTracking: {{isUaEnabled}},
+        cookieDomain: "{{analyticsCookieDomain}}"
+      });
+    </script>
+    {{ ga4OnPageLoad({
+        cspNonce: cspNonce,
+        isPageDynamic: isPageDynamic,
+        englishPageTitle: pageTitleKey | translateToEnglish }) }}
+
+{% endblock %}

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

@@ -0,0 +1,129 @@
+{% extends "govuk/template.njk" %}
+
+{% from "frontend-ui/build/components/phase-banner/macro.njk" import frontendUiPhaseBanner %}
+{% from "frontend-ui/build/components/cookie-banner/macro.njk" import frontendUiCookieBanner %}
+{% from "frontend-ui/build/components/header/macro.njk" import frontendUiHeader %}
+{% from "frontend-ui/build/components/footer/macro.njk" import frontendUiFooter %}
+{% from "frontend-ui/build/components/language-select/macro.njk" import frontendUiLanguageSelect %}
+{% from "ga4-opl/macro.njk" import ga4OnPageLoad %}
+
+{% if May_2025_Rebrand %}
+{%set htmlClasses = 'govuk-template--rebranded'%}
+{% endif %}
+
+{% if makeFullWidth %}
+  {% set columnWidth = "full" %}
+{% else %}
+  {% set columnWidth = 'two-thirds' %}
+{% endif %}
+
+
+{% block head %}
+    <link href="/stylesheets/application.css" rel="stylesheet">
+    <link href="/stylesheets/language-toggle.css" rel="stylesheet">
+    <link href="/stylesheets/frontend-ui.css" rel="stylesheet">
+    <meta name="robots" content="noindex">
+
+  <link rel="stylesheet" href="/stylesheets/frontendUi.css"/>
+{% endblock %}
+
+{% block pageTitle %}
+    {% if pageTitleName %}
+        {{ pageTitleName }}
+        -
+    {% endif %}
+    {{ 'general.serviceNameTitle' | translate }}
+{% endblock %}
+
+{% block bodyStart %}
+  {% block frontendUiCookieBanner %}
+    {{ frontendUiCookieBanner({
+    translations: translations.translation.cookieBanner
+  }
+  )}}
+  {% endblock %}
+{% endblock %}
+
+{% block header %}
+    {{ frontendUiHeader({
+      translations: translations.translation.header,
+      homepageUrl: "https://www.gov.uk"
+    }) }}
+{% endblock %}
+
+{% block main %}
+  <div class="govuk-width-container {{ containerClasses }}">
+    {% if doNotShowPhaseBanner %}
+    {% else %}
+    {{ frontendUiPhaseBanner({
+      translations: translations.translation.phaseBanner,
+      url: currentUrl,
+      contactUrl: 'https://home.dev.account.gov.uk/contact-gov-uk-one-login'
+    }) }}
+    {% endif %}
+
+    {% if showLanguageToggle %}
+     {{ frontendUiLanguageSelect({
+      translations: translations.translation.languageSelect,
+      url: currentUrl,
+      activeLanguage: htmlLang
+    }) }}
+    {% endif %}
+
+    {% if showBack %}
+      {{ govukBackLink({
+            text: "Back",
+            href: hrefBack
+        }) }}
+    {% endif %}
+    {% if showBackLinkHtml %}
+    <a href="#" id="back-button" class="govuk-back-link">{{'general.buttons.back' | translate}}</a>
+    {% endif %}
+    <main class="govuk-main-wrapper {{ mainClasses }} govuk-!-padding-top-2" id="main-content" role="main" >
+        <div class="govuk-grid-row">
+            <div class="govuk-grid-column-{{columnWidth}} {{ rowClasses }}">
+            {% block content %}{% endblock %}
+            </div>
+      </div>
+    </main>
+  </div>
+{% endblock %}
+
+{% block footer %}
+  {{ frontendUiFooter({
+    translations: translations.translation.footer
+  }) }}
+{% endblock %}
+
+{% block bodyEnd %}
+  <script type="text/javascript" src="/public/scripts/application.js"></script>
+  <script type="text/javascript" src="/public/scripts/analytics.js" nonce='{{scriptNonce}}'></script>
+  <script type="text/javascript" nonce='{{scriptNonce}}'>
+    window.DI = window.DI || {};
+    window.DI.taxonomy_level2 = '{{taxonomy_level2}}'
+  </script>
+  <script type="text/javascript" {% if scriptNonce %} nonce="{{ scriptNonce }}"{%  endif %}>
+    window
+      .DI
+      .appInit({
+        ga4ContainerId: "{{ga4ContainerId}}",
+        uaContainerId: "{{uaContainerId}}"
+      }, {
+        isDataSensitive: false,
+        disableGa4Tracking: {{isGa4Disabled}},
+        disableUaTracking: {{isUaDisabled}},
+        cookieDomain: "{{analyticsCookieDomain}}"
+      });
+  </script>
+  <script type="text/javascript" nonce='{{scriptNonce}}'>
+    if (document.getElementById('back-button')) 
+      document
+        .getElementById('back-button')
+        .addEventListener('click', (e) => {
+          e.preventDefault();
+          window
+            .history
+            .back()
+        })
+  </script>
+{% endblock %}

package/build/components/cookie-banner/template.njk

@@ -29,7 +29,7 @@
 {% endset %}
 
 {{ govukCookieBanner({
-  ariaLabel: 'cookieBanner.ariaLabel',
+  ariaLabel: cookieBanner.ariaLabel,
   name: "gov-uk-cookie-banner",
   messages: [
     {

package/build/components/footer/_index.scss

@@ -0,0 +1,8 @@
+.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/components/footer/template.njk

@@ -1,9 +1,12 @@
 {% set footer = params.translations %}
 
 {% from "govuk/components/footer/macro.njk" import govukFooter %}
-
-{{ govukFooter({
+    {{ govukFooter({
     meta: { items: footer.footerNavItems },
     contentLicence: { html: footer.contentLicence.html },
-    copyright: { text: footer.copyright.text }
-}) }}
+    copyright: { text: footer.copyright.text },
+    rebrand: May_2025_Rebrand,
+    attributes: {
+        "aria-label": "footer"
+    }
+    }) }}

package/build/components/header/_index.scss

@@ -2,6 +2,13 @@
     .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{
@@ -10,10 +17,57 @@
     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;
+}
 }