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

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

@@ -0,0 +1,82 @@
+{% extends "hmpo-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 %}
+
+{%- 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({
+    translations: translations.cookieBanner
+  }
+  )}}
+  {% endblock %}
+
+  {% block frontendUiHeader %}
+    {{ frontendUiHeader({
+      translations: translations.header,
+      homepageUrl: "https://www.gov.uk"
+    }) }}
+  {% endblock %}
+{% endblock %}
+
+{% block beforeContent %}
+    {{ frontendUiPhaseBanner({
+      translations: translations.phaseBanner,
+      url: currentUrl,
+      contactUrl: 'https://signin.account.gov.uk/contact-us'
+    }) }}
+  {% block backLink %}
+    {{ frontendUiLanguageSelect({
+      translations: translations.languageSelect,
+      url: currentUrl,
+      activeLanguage: htmlLang
+    }) }}
+      {% if backLink %}
+        {% from "govuk/components/back-link/macro.njk" import govukBackLink %}
+        <span id="back">{{ govukBackLink({
+          text: translate("govuk.backLink"),
+          href: backLink}) }}
+        </span>
+      {% endif %}
+
+  {% endblock %}
+{% endblock %}
+
+{% block footer %}
+  {{ frontendUiFooter({
+    translations: translations.footer
+  }) }}
+{% endblock %}
+
+{% block bodyEnd %}
+  {% block scripts %}
+    <script type="text/javascript" src="/public/javascripts/all.js"></script>
+    <script type="text/javascript" src="/public/javascripts/analytics.js"></script>
+    <script type="text/javascript" {% if cspNonce %} nonce="{{ cspNonce }}"{%  endif %}>
+      window.GOVUKFrontend.initAll()
+      window.DI.appInit({
+        ga4ContainerId: "{{ga4ContainerId}}",
+        uaContainerId:"{{uaContainerId}}"
+      },{
+        enableGa4Tracking:{{ga4Enabled}},
+        enableUaTracking:{{uaEnabled}},
+        enablePageViewTracking:{{ga4PageViewEnabled}},
+        enableFormErrorTracking:{{ga4FormErrorEnabled}},
+        enableFormChangeTracking:{{ga4FormChangeEnabled}},
+        enableFormResponseTracking:{{ga4FormResponseEnabled}},
+        enableNavigationTracking:{{ga4NavigationEnabled}},
+        enableSelectContentTracking:{{ga4SelectContentEnabled}},
+        cookieDomain:"{{analyticsCookieDomain}}",
+        isDataSensitive:{{analyticsDataSensitive}}
+      });
+    </script>
+  {% endblock %}
+{% 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,97 @@
+{% 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"
+        },
+        {
+          text: cookieBanner.rejectAdditionalCookies,
+          type: "button",
+          name: "cookiesReject",
+          value: "reject"
+        },
+        {
+          text: cookieBanner.viewCookies,
+          href: "https://signin.account.gov.uk/cookies"
+        }
+      ]
+    },
+    {
+      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/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,9 @@
+{% 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 }
+}) }}

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,19 @@
+@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;
+}

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,88 @@
+{% set header = params.translations %}
+{#- We use an inline SVG for the crown so that we can cascade the
+currentColor into the crown whilst continuing to support older browsers
+which do not support external SVGs without a Javascript polyfill. This
+adds approximately 1kb to every page load.
+
+We use currentColour so that we can easily invert it when printing and
+when the focus state is applied. This also benefits users who override
+colours in their browser as they will still see the crown.
+
+The SVG needs `focusable="false"` so that Internet Explorer does not
+treat it as an interactive element - without this it will be
+'focusable' when using the keyboard to navigate. #}
+
+{% set _stEdwardsCrown %}
+<!--[if gt E 8]><!-->
+<svg
+  aria-hidden="true"
+  focusable="false"
+  class="govuk-header__logotype-crown"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 132 97"
+  height="30"
+  width="36"
+>
+  <path
+    fill="currentColor" fill-rule="evenodd"
+    d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
+</svg>
+<!--<![endif]-->
+<!--[if IE 8]>
+<img src="{{ params.assetsPath | default('/assets/images') }}/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32" alt="">
+<![endif]-->
+{% endset %}
+
+{% set _tudorCrown %}
+<!--[if gt IE 8]><!-->
+<svg
+  aria-hidden="true"
+  focusable="false"
+  class="govuk-header__logotype-crown"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 32 30"
+  height="30"
+  width="32"
+>
+  <path
+    fill="currentColor" fill-rule="evenodd"
+    d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8"></path>
+</svg>
+<!--<![endif]-->
+<!--[if IE 8]>
+<img src="{{ params.assetsPath | default('/assets/images') }}/govuk-logotype-tudor-crown.png" class="govuk-header__logotype-crown-fallback-image" width="32" height="30" alt="">
+<![endif]-->
+{% endset %}
+
+<header class="govuk-header {{ params.classes if params.classes }}" role="banner" data-module="govuk-header"
+ {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  <div class="frontendUi_header__signOut govuk-header__container {{ params.containerClasses | default('govuk-width-container') }}">
+    <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 %}
+        <span class="govuk-header__logotype">
+          {{ (_stEdwardsCrown if params.useStEdwardsCrown else _tudorCrown) | safe }}
+          <span class="govuk-header__logotype-text">
+            GOV.UK
+          </span>
+        </span>
+      </a>
+    </div>
+    {% if params.signOutLink %}
+      <div class="frontendUi-header__content govuk-header__content">
+        <nav aria-label="{{ params.navigationLabel | default(menuButtonText) }}" class="govuk-header__navigation {{ params.navigationClasses if params.navigationClasses }}">
+          <ul id="navigation" class="frontendUi_header__signOut govuk-header__navigation-list">
+            <li class="frontendUi_header_signOut-item govuk-header__navigation-item{{ ' govuk-header__navigation-item--active' if item.active }}">
+                <a aria-label="{{header.ariaLabel}}" 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>

package/build/components/phase-banner/_index.scss

@@ -0,0 +1,20 @@
+@import "../../../../node_modules/govuk-frontend/govuk/base.scss";
+// Temporarily overwrite the tag component styling to match pre-v5 appearance.
+// This ensures a cohesive phase banner across One Login applications during the transition.
+.govuk-tag {
+    @include govuk-font($size: 16, $weight: bold, $line-height: 1);
+    display: inline-block;
+    padding-top: 5px;
+    padding-right: 8px;
+    padding-bottom: 4px;
+    padding-left: 8px;
+    // Accessibility: Ensure visibility for users customizing colours.
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+    // Key properties to maintain the old appearance:
+    color: govuk-colour("white") !important;
+    background-color: govuk-colour("blue") !important;
+    letter-spacing: 1px !important;
+    text-decoration: none !important;
+    text-transform: uppercase !important;
+  }

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

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

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

@@ -0,0 +1,17 @@
+params:
+  - name: translations
+    type: string
+    required: true
+    description: translations from middleware 
+  - name: url
+    type: string
+    required: true
+    description: current page url
+  - name: tag
+    type: string
+    required: false
+    description: tag override
+  - name: contactUrl
+    type: string
+    required: false
+    description: contactUsUrl override

package/build/components/phase-banner/tag/macro.njk

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

package/build/components/phase-banner/tag/template.njk

@@ -0,0 +1,3 @@
+<strong class="govuk-tag{% if params.classes %} {{ params.classes }}{% endif %}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {{ params.html | safe if params.html}}
+</strong>

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

@@ -0,0 +1,22 @@
+{% set phaseBanner = params.translations %}
+{% from "./tag/macro.njk" import frontendUiTag -%}
+
+<div class="govuk-phase-banner
+  {%- if params.classes %} {{ params.classes }}{% endif %}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+<p class="govuk-phase-banner__content">
+ {{ frontendUiTag({
+    html: params.tag or phaseBanner.tag, 
+    classes: "govuk-phase-banner__content__tag" + (" " + params.tag.classes if params.tag.classes)
+  }) | indent(4) | trim }}
+
+  <span class="govuk-phase-banner__text">
+    {{ phaseBanner.text }}
+    <a class="govuk-link"
+       rel="noopener"
+       target="_blank"
+       href="{{ contactUsUrl(params.contactUrl, params.url) or contactUsUrl('https://signin.account.gov.uk/contact-us', params.url) }}">
+      {{ phaseBanner.link }}
+    </a>
+  </span>
+</p>
+</div>

package/build/components/skip-link/README.md

@@ -0,0 +1,10 @@
+# Skip Link
+
+## Translations
+
+For translations to be enabled, the param `skipLink: translations` should be passed into `frontendUiSkipLink` in the `skipLink` block.
+
+```html
+{% block skipLink %} {{ frontendUiSkipLink({ skipLink: translations }) }} {%
+endblock %}
+```

package/build/components/skip-link/macro.njk

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

package/build/components/skip-link/skip-link.yaml

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

package/build/components/skip-link/template.njk

@@ -0,0 +1,10 @@
+{% from "govuk/components/skip-link/macro.njk" import govukSkipLink %}
+
+{% set skipLink = params.translations %}
+
+{{ govukSkipLink({
+  href: "#main-content",
+  text: skipLink.title 
+}) }}
+
+

package/build/esm/__tests__/index.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.spec.d.ts.map

package/build/esm/__tests__/index.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.spec.d.ts","sourceRoot":"","sources":["../../../src/__tests__/index.spec.ts"],"names":[],"mappings":""}

package/build/esm/__tests__/logger.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=logger.spec.d.ts.map

package/build/esm/__tests__/logger.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"logger.spec.d.ts","sourceRoot":"","sources":["../../../src/__tests__/logger.spec.ts"],"names":[],"mappings":""}

package/build/esm/index.d.ts

@@ -0,0 +1,29 @@
+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;
+            };
+        };
+    };
+}, res: Response & {
+    locals: {
+        translations: unknown;
+    };
+}, next: NextFunction) => void;
+export declare const frontendUiMiddlewareIdentityBypass: (req: Request & {
+    i18n: {
+        language: "en" | "cy";
+    };
+}, res: Response & {
+    locals: {
+        translations: unknown;
+    };
+}, next: NextFunction) => void;
+export declare function addLanguageParam(language: string, url?: URL): string;
+export declare function contactUsUrl(baseUrl: string, urlToAppend: string): string | null;
+//# sourceMappingURL=index.d.ts.map