@govuk-one-login/frontend-ui 4.1.4 → 4.2.0

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

@@ -0,0 +1,195 @@
+{% if MAY_2025_REBRAND_ENABLED %}
+  {% set govukRebrand = true %}
+{% endif %}
+
+{% 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 "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
+{% from "ga4-opl/macro.njk" import ga4OnPageLoad %}
+
+{% 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">
+  <meta name="robots" content="noindex">
+
+{% 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: supportFormLink,
+      noAppend: true
+    }) }}
+    {% 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 }}">
+          {% if (displayBanner) %}
+            {{ govukNotificationBanner({
+                        html: bannerMessage,
+                        type: bannerType,
+                        titleText: bannerTitleText
+                    }) }}
+          {% endif %}
+          {% block content %}{% endblock %}
+        </div>
+      </div>
+    </main>
+  </div>
+{% endblock %}
+
+{% block footer %}
+  {{ frontendUiFooter({
+        translations: {
+          footerNavItems: [
+            {
+              href: 'general.base.footer.accessibility.link' | translate | safe,
+              text: 'general.base.footer.accessibility.linkText' | translate
+            },
+            {
+              href: 'general.cookieBanner.viewCookiesLink' | translate,
+              text: 'general.base.footer.cookies' | translate
+            },
+            {
+              href: 'general.base.footer.termsAndConditions.link' | translate,
+              text: 'general.base.footer.termsAndConditions.linkText' | translate,
+              attributes: { "data-pw": "terms-and-conditions-link" }
+            },
+            {
+              href: 'general.base.footer.privacy.link' | translate | safe,
+              text: 'general.base.footer.privacy.linkText' | translate,
+              attributes: { "data-pw": "privacy-notice-link" }
+            },
+            {
+              href: supportFormLink,
+              text: 'general.base.footer.support.linkText' | translate,
+              attributes: {
+                target: "_blank",
+                rel: "noopener noreferrer",
+                "data-pw": "footer-support-form-link"
+              }
+            }
+          ],
+          contentLicence: {
+              html: 'general.base.footer.contentLicence.linkText' | translate | safe
+          },
+          copyright: {
+              text: 'general.base.footer.copyright.linkText' | translate
+          }
+        }
+    }) }}
+{% endblock %}
+
+{% block bodyEnd %}
+  <script type="module" nonce='{{ scriptNonce }}' src="/public/scripts/govuk-frontend.min.js"></script>
+  <script type="module" nonce='{{ scriptNonce }}'>
+    import {initAll} from '/public/scripts/govuk-frontend.min.js'
+    initAll()
+  </script>
+  <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 %}>
+    {% if analyticsDataSensitive is defined and isPageDataSensitive is defined %}
+      window
+        .DI
+        .appInit({
+          ga4ContainerId: "{{ga4ContainerId}}",
+        }, {
+          isDataSensitive: {{ analyticsDataSensitive | default(true) }},
+          isPageDataSensitive: {{ isPageDataSensitive | default(true) }},
+          enableGa4Tracking: {{ isGa4Enabled | default(false) }},
+          cookieDomain: "{{analyticsCookieDomain}}"
+        });
+    {% else %}
+      console.log("Using deprecated GA4 v2 config. Please add analyticsDataSensitive and isPageDataSensitive flags to your nunjucks environment to enable GA4 v4. This will be removed in a future version.");
+      window
+        .DI
+        .appInit({
+          ga4ContainerId: "{{ga4ContainerId}}",
+          uaContainerId: "{{uaContainerId}}"
+        }, {
+          isDataSensitive: false,
+          disableGa4Tracking: {{isGa4Disabled}},
+          disableUaTracking: {{isUaDisabled}},
+          cookieDomain: "{{analyticsCookieDomain}}"
+        });
+    {% endif %}
+  </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>
+
+  <script type="module" nonce="{{scriptNonce}}">
+    import {setFingerprintCookie} from "/public/scripts/index.js";
+    await setFingerprintCookie("{{analyticsCookieDomain}}");
+  </script>
+{% endblock %}

package/build/components/cookie-banner/cookie-banner.yaml

@@ -0,0 +1,6 @@
+params:
+  - name: translations
+    type: string
+    required: true
+    description: translations from middleware 
+

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

@@ -0,0 +1 @@
+{% macro frontendUiCookieBanner(params) %} {%- include "./template.njk" -%} {% endmacro %}

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

@@ -0,0 +1,106 @@
+{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
+
+{% set lng = params.activeLanguage %}
+{% set cookieBanner = params.translations %}
+
+{% set html %}
+<p class="govuk-body">{{ cookieBanner.body1 }}</p>
+<p class="govuk-body">{{ cookieBanner.body2 }}</p>
+{% endset %}
+
+{% set acceptHtml %}
+  <p class="govuk-body">
+    {{ cookieBanner.cookieBannerAccept.body1 }}
+    <a class="govuk-link" href="https://signin.account.gov.uk/cookies">
+      {{ cookieBanner.changeCookiePreferencesLink }}
+    </a> 
+    {{ cookieBanner.cookieBannerAccept.body2 }}
+  </p>
+{% endset %}
+
+{% set rejectedHtml %}
+  <p class="govuk-body">
+    {{ cookieBanner.cookieBannerReject.body1 }}
+    <a class="govuk-link" href="https://signin.account.gov.uk/cookies">
+      {{ cookieBanner.changeCookiePreferencesLink }}
+    </a> 
+    {{ cookieBanner.cookieBannerReject.body2 }}
+  </p>
+{% endset %}
+
+{{ govukCookieBanner({
+  ariaLabel: cookieBanner.ariaLabel,
+  name: "gov-uk-cookie-banner",
+  messages: [
+    {
+      headingText: cookieBanner.headingText,
+      html: html,
+      attributes: {
+        "id": "cookies-banner-main"
+      },
+      actions: [
+        {
+          text: cookieBanner.acceptAdditionalCookies,
+          type: "button",
+          name: "cookiesAccept",
+          value: "accept",
+          attributes: {
+            "aria-label": cookieBanner.acceptAdditionalCookies
+          }
+        },
+        {
+          text: cookieBanner.rejectAdditionalCookies,
+          type: "button",
+          name: "cookiesReject",
+          value: "reject",
+          attributes: {
+            "aria-label": cookieBanner.rejectAdditionalCookies
+          }
+        },
+        {
+          text: cookieBanner.viewCookies,
+          href: "https://signin.account.gov.uk/cookies",
+          attributes: {
+            "aria-label": cookieBanner.viewCookies
+          }
+        }
+      ]
+    },
+    {
+      html: acceptHtml,
+      attributes: {
+        "id": "cookies-accepted"
+      },
+      actions: [
+        {
+          text: cookieBanner.hideCookieMessage,
+          href: "#",
+          type: "button",
+          classes:"cookie-hide-button",
+          attributes: {
+            "aria-label": cookieBanner.hideCookieMessage
+          }
+        }
+      ],
+      hidden: true
+    },
+    {
+      html: rejectedHtml,
+      attributes: {
+        "id": "cookies-rejected"
+      },
+      actions: [
+        {
+          text: cookieBanner.hideCookieMessage,
+          href: "#",
+          type: "button",
+          classes:"cookie-hide-button",
+          attributes: {
+            "aria-label": cookieBanner.hideCookieMessage
+          }
+        }
+      ],
+      hidden: true
+    }
+  ],  hidden: false
+}) }}

package/build/components/footer/_index.scss

@@ -0,0 +1,28 @@
+@media (max-width: 256px) {
+
+  .govuk-footer__crown{
+    max-width: 100%;
+    max-height: auto;
+  }
+}
+
+.govuk-footer{
+    padding-top: 25px;
+    padding-bottom: 15px;
+    border-top: 1px solid #b1b4b6;
+    color: #0b0c0c;
+    background: #f3f2f1;
+}
+
+.govuk-template--rebranded .govuk-footer {
+    border-top: 10px solid #1d70b8;
+    background: #f4f8fb;
+}
+
+.govuk-footer__copyright-logo::before {
+  background: rgb(110,119,122,255);
+}
+
+.govuk-template--rebranded .govuk-footer__copyright-logo::before{
+  background: currentcolor
+}

package/build/components/footer/footer.yaml

@@ -0,0 +1,5 @@
+params:
+  - name: translations
+    type: string
+    required: true
+    description: translations from middleware 

package/build/components/footer/macro.njk

@@ -0,0 +1 @@
+{% macro frontendUiFooter(params) %} {%- include "./template.njk" -%} {% endmacro %}

package/build/components/footer/template.njk

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

package/build/components/header/README.md

@@ -0,0 +1,34 @@
+# Header
+
+###### For translations to work you __must__ pass in the `header: translations` varible
+```html
+{% block header %}
+{{ frontendUiHeader
+  ({
+    header: translations
+  })
+  }}
+{% endblock %}
+```
+
+###### In order to remove the linking capability of the header logo and text include the `isEmbeddedMobileApp = true` variable within your repos basefile when you are calling the header
+```html
+{% block header %}
+{{ frontendUiHeader
+  ({
+    isEmbeddedMobileApp = true
+  })
+  }}
+{% endblock %}
+```
+
+###### To enable the sign out functionality of the heade include the `signOutLink` variable within your repos basefile when calling the header
+```html
+{% block header %}
+  {{ frontendUiHeader
+  ({
+    signOutLink: 'https://signin.account.gov.uk/signed-out'
+  })
+  }}
+{% endblock %}
+```

package/build/components/header/_index.scss

@@ -0,0 +1,102 @@
+@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: 8px !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 0px;
+  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: 323px) {
+
+.govuk-header__logo{
+  padding-right: 5px;
+}
+
+.frontendUi_header_signOut-item
+{
+  padding-left: 0px;
+}
+}
+
+@media (max-width: 261px) {
+
+      .frontendUi-header__content {
+    margin-left: unset;
+}
+
+
+
+
+.govuk-template--rebranded .govuk-header__navigation {
+        padding: 0px 0 8px !important;
+    }
+
+  .govuk-header__logotype{
+    max-width: 100%;
+    max-height: auto;
+  }
+
+  .govuk-template--rebranded .govuk-header__logo{
+  padding-top: 5% !important;
+  padding-bottom: 5% !important;
+}
+}

package/build/components/header/header.yaml

@@ -0,0 +1,16 @@
+params:
+  - name: translations
+    type: string
+    required: true
+    description: translations from middleware 
+  - name: isEmbeddedMobileApp
+    type: boolean
+    required: false
+    description: disables the gov.uk link in the header
+  - name: signOutLink
+    type: string
+    required: false
+    description: where the signout button will direct the user
+
+    
+

package/build/components/header/macro.njk

@@ -0,0 +1,3 @@
+{% macro frontendUiHeader(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

package/build/components/header/template.njk

@@ -0,0 +1,39 @@
+{% from "../macros/logo.njk" import govukLogo %}
+{% set header = params.translations %}
+
+{%if MAY_2025_REBRAND_ENABLED%}
+{%- set _rebrand = params.rebrand | default(govukRebrand() if govukRebrand is callable else govukRebrand) -%}
+{% endif %}
+  <header class="govuk-header {%- if params.classes %} {{ params.classes }}{% endif %}" data-module="govuk-header">
+    <div class="frontendUi_header__signOut govuk-header__container {{ params.containerClasses | default("govuk-width-container", true) }}">
+      <div class="govuk-header__logo">
+        {% if params.isEmbeddedMobileApp %}
+          <span class="govuk-header__link govuk-header__link--homepage" style="pointer-events: none;">
+          {% else %}
+            <a href="{{ params.homepageUrl | default('https://www.gov.uk/') }}" class="govuk-header__link govuk-header__link--homepage">
+            {% endif %}
+        {{ govukLogo({
+          classes: "govuk-header__logotype",
+          ariaLabelText: "GOV.UK",
+          useTudorCrown: params.useTudorCrown,
+          rebrand: MAY_2025_REBRAND_ENABLED
+        }) | trim | indent(8) }}
+            {% if not params.isEmbeddedMobileApp %}
+            </a>
+          {% endif %}
+        </div>
+        {% if params.signOutLink %}
+          <div class="frontendUi-header__content govuk-header__content">
+            <nav aria-label="{{header.ariaLabel}}" class="govuk-header__navigation {{ govuk-header__navigation--signOut if params.MAY_2025_REBRAND_ENABLED }}">
+              <ul id="navigation" class="frontendUi_header__signOut govuk-header__navigation-list">
+                <li class="{{ 'frontendUi_header_signOut-item--rebrand' if MAY_2025_REBRAND_ENABLED }} {{'frontendUi_header_signOut-item' if not MAY_2025_REBRAND_ENABLED}} govuk-header__navigation-item{{ ' govuk-header__navigation-item--active' if item.active }}">
+                  <a aria-label="{{header.signOutAriaLabel}}" class="govuk-header__link" href="{{params.signOutLink}}">
+                    {{header.signOut}}
+                  </a>
+                </li>
+              </ul>
+            </nav>
+          </div>
+        {% endif %}
+      </div>
+    </header>

package/build/components/language-select/_index.scss

@@ -0,0 +1,35 @@
+.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: 0.1875em;
+    height: 1em;
+    border-right: 0.09375em solid black;
+  }
+  
+  .language-select__list-item a,
+  .language-select__list-item [aria-current] {
+    padding: 0.3125em;
+  }
+  
+  @media screen and (max-width: 641px) {
+    .language-select__list {
+      float: none;
+      text-align: left;
+      padding-bottom: 10px;
+      border-bottom: 1px solid #b1b4b6;
+    }
+  }

package/build/components/language-select/language-select.yaml

@@ -0,0 +1,43 @@
+params:
+  - name: translations
+    type: string
+    required: true
+    description: translations from middleware 
+  - name: activeLanguage
+    type: string
+    required: true
+    description: currently selected language
+  - name: currentUrl
+    type: string
+    required: true
+    description: current url to be used to append langauge variable
+  - name: ariaLabel
+    type: string
+    required: false
+    description: aria label for the nav tag
+  - name: class
+    type: string
+    required: false
+    description: css class you can add
+  - name: languages
+    type: array
+    required: false
+    description: array of languages object
+    params:
+      - name: language
+        type: object
+        required: false
+        description: language object
+        params:
+          - name: code
+            type: string
+            required: true
+            description: language code
+          - name: text
+            type: string
+            required: true
+            description: language text
+          - name: visuallyHidden
+            type: string
+            required: false
+            description: language text

package/build/components/language-select/macro.njk

@@ -0,0 +1,2 @@
+{% macro frontendUiLanguageSelect(params) %} {%- include "./template.njk" -%} {% endmacro
+%}

package/build/components/language-select/template.njk

@@ -0,0 +1,38 @@
+{% set languageSelect = params.translations %}
+{% if params.languages %}
+{% set languages = params.languages %}
+{% else %}
+{% set languages = [
+{ code: "en", text: "English", visuallyHidden: "Change to English" },
+{ code: "cy", text: "Cymraeg", visuallyHidden: "Newid yr iaith ir Gymraeg" }
+    ] %}
+{% endif %}
+
+<nav
+  class="language-select {{params.class}}"
+  aria-label="{{languageSelect.ariaLabel}}"
+  role="navigation"
+>
+  <ul
+    class="govuk-list language-select__list govuk-body-s govuk-!-margin-0"
+    role="list"
+  >
+    {% for lang in languages %}
+    <li class="language-select__list-item" role="listitem">
+      {% if params.activeLanguage == lang.code %}
+      <span aria-current="true">{{ lang.text }}</span>
+      {% else %}
+      <a
+        class="govuk-link govuk-link--no-visited-state"
+        href="{{ addLanguageParam(lang.code, params.url)}}"
+        data-journey-click="link - click:lang-select:{{ lang.code }}"
+        rel="alternate"
+        hreflang="{{ lang.code }}"
+        lang="{{lang.code}}"
+        role="link"
+      >{{ lang.text }}<div class="govuk-visually-hidden">{{ lang.visuallyHidden }}</div></a>
+      {% endif %}
+    </li>
+    {% endfor %}
+  </ul>
+</nav>