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

package/build/components/header/template.njk

@@ -1,88 +1,39 @@
+{% from "../macros/logo.njk" import govukLogo %}
 {% 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>
+{%if May_2025_Rebrand%}
+{%- 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
+        }) | 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 }}">
+              <ul id="navigation" class="frontendUi_header__signOut govuk-header__navigation-list">
+                <li class="{{ 'frontendUi_header_signOut-item--rebrand' if May_2025_Rebrand }} {{'frontendUi_header_signOut-item' if not May_2025_Rebrand}} 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>
-    {% endif %}
-  </div>
-</header>
+    </header>

package/build/components/macros/logo.njk

@@ -0,0 +1,75 @@
+{#- This macro is for interal use within GOV.UK Frontend. It isn't intended for
+external use and may receive undocumented breaking changes in non-breaking
+releases of Frontend. #}
+
+{% macro govukLogo(params) %}
+  {#- Default options #}
+  {%- set rebrand = params.rebrand | default(false) %}
+  {%- set useLogotype = params.useLogotype | default(true) %}
+  {%- set useTudorCrown = params.useTudorCrown | default(true) %}
+
+  {# Force use of Tudor Crown if rebrand flag is on. #}
+  {%- set useTudorCrown = true if rebrand else useTudorCrown  %}
+
+  {#- Calculate how wide the logo needs to be for the given parameters. #}
+  {%- set svgWidth = 32 if useTudorCrown else 36 %}
+  {%- set svgWidth = svgWidth + 116 if (useLogotype and not rebrand) else svgWidth %}
+  {%- set svgWidth = svgWidth + 130 if (useLogotype and rebrand) else svgWidth %}
+
+  {#- Charles III's Tudor Crown icon has been the default since February 2024. #}
+  {%- set _tudorCrown %}
+    <g>
+      <circle cx="20" cy="17.6" r="3.7"/>
+      <circle cx="10.2" cy="23.5" r="3.7"/>
+      <circle cx="3.7" cy="33.2" r="3.7"/>
+      <circle cx="31.7" cy="30.6" r="3.7"/>
+      <circle cx="43.3" cy="17.6" r="3.7"/>
+      <circle cx="53.2" cy="23.5" r="3.7"/>
+      <circle cx="59.7" cy="33.2" r="3.7"/>
+      <circle cx="31.7" cy="30.6" r="3.7"/>
+      <path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"/>
+    </g>
+  {%- endset %}
+
+  {#- St. Edward's Crown was the logo under Elizabeth II. It's included to avoid
+  a breaking change in services. It can be removed in Frontend v6. #}
+  {%- set _stEdwardsCrown %}
+    <path d="M13.4,22.3c2,.8,4.2-.2,5-2s-.2-4.2-2-5c-2-.8-4.2.2-5,2-.8,2,0,4.2,2,5M4.8,27.3c2,.8,4.2-.2,5-2s-.2-4.2-2-5c-2-.8-4.2.2-5,2-1,2,0,4.2,2,5M2.2,36.9c2,.8,4.2-.2,5-2,.8-2-.2-4.2-2-5-2-.8-4.2.2-5,2-.8,2,0,4.2,2,5M23,25.3c2,.8,4.2-.2,5-2s-.2-4.2-2-5c-2-.8-4.2.2-5,2s0,4.2,2,5M57.8,22.3c-2,.8-4.2-.2-5-2s.2-4.2,2-5c2-.8,4.2.2,5,2,1,2,0,4.2-2,5M66.4,27.3c-2,.8-4.2-.2-5-2s.2-4.2,2-5c2-.8,4.2.2,5,2,1,2,0,4.2-2,5M69,36.9c-2,.8-4.2-.2-5-2-.8-2,.2-4.2,2-5,2-.8,4.2.2,5,2,.8,2,0,4.2-2,5M48.2,25.3c-2,.8-4.2-.2-5-2s.2-4.2,2-5c2-.8,4.2.2,5,2s0,4.2-2,5M37.6,15.5l4.8,2.6v-7.2l-4.8,1.6c-.2-.2-.2-.4-.4-.4s2-6,2-6h-6.8l2,6c-.2.2-.4.2-.4.4-.2.2-4.8-1.4-4.8-1.4v7l4.8-2.6c-.2.2,0,.4.2.6l-2.8,8.4c-.2.4-.2.8-.2,1.4,0,2.2,1.6,4.2,3.8,4.4h1.2c2.2-.4,3.8-2.2,3.8-4.4s0-.8-.2-1.4l-2.8-8.4c.4-.2.6-.4.6-.6M35.6,56.1c9.2,0,17.8.6,25.6,1.8,2.2-9.2,4.8-14.4,7.6-18.2l-5.2-1.8c.6,2.6.6,3.8,0,5.6-.8-.8-1.6-2.4-2.2-4.8l-2.4,8.4c1.6-1,2.8-1.8,4-1.8-2.4,5.2-5.4,6.4-7.2,6-2.4-.4-3.4-2.6-3-4.4.6-2.6,3.2-3.2,4.4-.2,2.4-4.8-1.6-6.2-4.2-4.8,3.8-3.8,4.4-7.2,1.2-11.4-4.4,3.4-4.4,6.6-2.4,11.2-2.6-3-6.6-1.4-5,3.4,1.8-2.8,4.2-1,4,1.6-.4,2.4-3.4,4.2-7.4,4-5.6-.4-6-4.4-6-7.4,1.4-.2,3.8,1,6,4l.8-8.8c-2.2,2.4-4.4,2.8-6.6,2.8.8-2.4,4.2-6.2,4.2-6.2h-11s3.6,4,4.2,6.2c-2.2,0-4.4-.6-6.6-2.8l.8,8.8c2.2-3,4.6-4.2,6-4-.2,3.2-.4,7-6,7.4-3.8.4-7-1.6-7.4-4-.4-2.6,2-4.4,3.8-1.6,1.4-4.8-2.6-6.2-5.2-3.4,2-4.6,2-8-2.4-11.2-3.2,4.2-2.6,7.6,1.2,11.4-2.6-1.4-6.4,0-4.2,4.8,1.2-3,3.8-2.2,4.4.2.4,1.8-.8,3.8-3,4.4-2,.4-5-1-7.4-6,1.4,0,2.6.8,4,1.8l-3-8.4c-.6,2.4-1.4,3.8-2.4,4.8-.6-1.6-.4-3,0-5.6l-5.2,1.8c3,3.8,5.6,9,7.8,18.2,7.6-1,16.4-1.8,25.4-1.8"/>
+  {%- endset %}
+
+  {#- The GOV.UK logotype with standard dot. This needs to be slightly offset if
+  using the St. Edward's Crown, as that crown is wider. #}
+  {%- set _logotype %}
+    <path {%- if not useTudorCrown %} transform="translate(8 0)"{% endif %} d="M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z"/>
+  {%- endset %}
+
+  {#- The GOV.UK logotype with raised and coloured dot. This is only intended for
+  use alongide the Tudor Crown, so don't bother with offsetting for the
+  St. Edward's Crown. #}
+  {%- set _dotLogotype %}
+    <circle class="govuk-logo-dot" cx="227" cy="36" r="7.3"/>
+    <path d="M94.7,36.1c0,1.9.2,3.6.7,5.4.5,1.7,1.2,3.2,2.1,4.5.9,1.3,2.2,2.4,3.6,3.2,1.5.8,3.2,1.2,5.3,1.2s3.6-.3,4.9-.9c1.3-.6,2.3-1.4,3.1-2.3.8-.9,1.3-2,1.6-3,.3-1.1.5-2.1.5-3v-.4h-11v-6.6h19.5v24h-7.7v-5.4c-.5.8-1.2,1.6-2,2.3-.8.7-1.7,1.3-2.7,1.8-1,.5-2.1.9-3.3,1.2-1.2.3-2.5.4-3.8.4-3.2,0-6-.6-8.4-1.7-2.5-1.1-4.5-2.7-6.2-4.7-1.7-2-3-4.4-3.8-7.1-.9-2.7-1.3-5.6-1.3-8.7s.5-6,1.5-8.7,2.4-5.1,4.2-7.1c1.8-2,4-3.6,6.5-4.7s5.4-1.7,8.6-1.7,4,.2,5.9.7c1.8.5,3.5,1.1,5.1,2,1.5.9,2.9,1.9,4,3.2,1.2,1.2,2.1,2.6,2.8,4.1l-7.7,4.3c-.5-.9-1-1.8-1.6-2.6-.6-.8-1.3-1.5-2.2-2.1-.8-.6-1.7-1-2.8-1.4-1-.3-2.2-.5-3.5-.5-2,0-3.8.4-5.3,1.2s-2.7,1.9-3.6,3.2c-.9,1.3-1.7,2.8-2.1,4.6s-.7,3.5-.7,5.3v.3h0ZM152.9,13.7c3.2,0,6.1.6,8.7,1.7,2.6,1.2,4.7,2.7,6.5,4.7,1.8,2,3.1,4.4,4.1,7.1s1.4,5.6,1.4,8.7-.5,6-1.4,8.7c-.9,2.7-2.3,5.1-4.1,7.1s-4,3.6-6.5,4.7c-2.6,1.1-5.5,1.7-8.7,1.7s-6.1-.6-8.7-1.7c-2.6-1.1-4.7-2.7-6.5-4.7-1.8-2-3.1-4.4-4.1-7.1-.9-2.7-1.4-5.6-1.4-8.7s.5-6,1.4-8.7,2.3-5.1,4.1-7.1c1.8-2,4-3.6,6.5-4.7s5.4-1.7,8.7-1.7h0ZM152.9,50.4c1.9,0,3.6-.4,5-1.1,1.4-.7,2.7-1.7,3.6-3,1-1.3,1.7-2.8,2.2-4.5.5-1.7.8-3.6.8-5.7v-.2c0-2-.3-3.9-.8-5.7-.5-1.7-1.3-3.3-2.2-4.5-1-1.3-2.2-2.3-3.6-3-1.4-.7-3.1-1.1-5-1.1s-3.6.4-5,1.1c-1.5.7-2.7,1.7-3.6,3s-1.7,2.8-2.2,4.5c-.5,1.7-.8,3.6-.8,5.7v.2c0,2.1.3,4,.8,5.7.5,1.7,1.2,3.2,2.2,4.5,1,1.3,2.2,2.3,3.6,3,1.5.7,3.1,1.1,5,1.1ZM189.1,58l-12.3-44h9.8l8.4,32.9h.3l8.2-32.9h9.7l-12.3,44M262.9,50.4c1.3,0,2.5-.2,3.6-.6,1.1-.4,2-.9,2.8-1.7.8-.8,1.4-1.7,1.9-2.9.5-1.2.7-2.5.7-4.1V14h8.6v28.5c0,2.4-.4,4.6-1.3,6.6-.9,2-2.1,3.6-3.7,5-1.6,1.4-3.4,2.4-5.6,3.2-2.2.7-4.5,1.1-7.1,1.1s-4.9-.4-7.1-1.1c-2.2-.7-4-1.8-5.6-3.2s-2.8-3-3.7-5c-.9-2-1.3-4.1-1.3-6.6V14h8.7v27.2c0,1.6.2,2.9.7,4.1.5,1.2,1.1,2.1,1.9,2.9.8.8,1.7,1.3,2.8,1.7s2.3.6,3.6.6h0ZM288.5,14h8.7v19.1l15.5-19.1h10.8l-15.1,17.6,16.1,26.4h-10.2l-11.5-19.7-5.6,6.3v13.5h-8.7"/>
+  {%- endset %}
+
+  {#- 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. #}
+  <svg
+    focusable="false"
+    role="{{ "img" if params.ariaLabelText else "presentation" }}"
+    xmlns="http://www.w3.org/2000/svg"
+    {#- The viewbox is 2x the actual display dimensions #}
+    viewBox="0 0 {{ svgWidth * 2 }} 60"
+    height="30"
+    width="{{ svgWidth }}"
+    fill="currentcolor"
+    {%- if params.classes %} class="{{ params.classes }}"{% endif %}
+    {%- if params.ariaLabelText %} aria-label="{{ params.ariaLabelText }}"{% endif %}
+  >
+    {%- if params.ariaLabelText %}<title>{{ params.ariaLabelText }}</title>{% endif %}
+    {{ (_stEdwardsCrown if not useTudorCrown else _tudorCrown) | safe | trim | indent(2) }}
+    {% if useLogotype %}
+      {{ (_dotLogotype if rebrand else _logotype) | safe | trim | indent(2) }}
+    {% endif %}
+  </svg>
+{% endmacro %}

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

@@ -2,19 +2,19 @@
 // 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;
-  }
+  @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/template.njk

@@ -10,7 +10,11 @@
   }) | indent(4) | trim }}
 
   <span class="govuk-phase-banner__text">
+    {% if params.phaseBannerText %}
+    {{ params.phaseBannerText }}
+    {% else %}
     {{ phaseBanner.text }}
+    {% endif %}
     <a class="govuk-link"
        rel="noopener"
        target="_blank"

package/build/components/spinner/README.md

@@ -0,0 +1,107 @@
+# Spinner
+
+This component can be imported to be displayed before the page loads. Currently the logic has been set up to **display** the spinner.
+
+Should you need to ensure it displays before the page renders any data, this should be done within the app.
+
+## Timer
+
+The timer is set to two seconds and this is done in the route. There is a file called `api.njk` and this binds the data attributes that are needed for the script to be run.
+
+```njk
+{% extends "layouts/main.njk" %}
+
+{% set url = "/api" %}
+
+{% block content %}
+  <div id="spinner-container"
+     data-initial-heading="Initial heading text"
+     data-initial-spinnerStateText="Initial spinner state text"
+     data-initial-spinnerState="pending"
+     data-error-heading="Error heading"
+     data-error-messageText="Error message text"
+     data-error-whatYouCanDo-heading="Error what you can do heading"
+     data-error-whatYouCanDo-message-text1="Error what you can do message text1"
+     data-error-whatYouCanDo-message-link-href="Error what you can do message link href"
+     data-error-whatYouCanDo-message-link-text="Error what you can do message link text"
+     data-error-whatYouCanDo-message-text2="Error what you can do message link text2"
+     data-complete-spinnerState="complete"
+     data-longWait-spinnerStateText="Long wait spinner state">
+  </div>
+
+{% endblock %}
+
+{% block pageScripts %}
+
+{% endblock %}
+
+
+```
+
+## Scripts
+
+The script finds the DOM element of the ID `spinner-container` and then runs the animation, it has the flexibility for an error state to be handled or for spinner to take longer/shorter.
+
+Within the frontend-ui package, this script is bundled within `frontend-src`, so that it can be used in the alpha-app.
+
+Please note that in the `package.json` file of the frontend-ui repo the files needed for the spinner are exported as follows:
+
+```json
+ "exports": {
+    ".": {
+      "import": "./build/esm/index.js",
+      "require": "./build/cjs/index.cjs"
+    },
+    "./frontend": {
+      "import": "./build/esm/index-fe.js",
+      "require": "./build/cjs/index-fe.cjs"
+    }
+  },
+```
+
+The default import is at the top and the one at the bottom ensures, the correct script files are ported when the package is built.
+
+Configurations to the alpha-app have also been made to ensure these script files work accordingly however this should not affect any users wanting to use the spinner component from the frontend-ui package.
+
+## Routes
+
+The way testing is done for visual purposes of the components within the frontend-ui package is through the alpha-app.
+
+The routes are set with Express and it is important to note, this route setting is important within the user's application to ensure the spinner works effectively.
+
+```js
+let counter = 0;
+
+app.get("/api", (req, res) => {
+  counter++;
+  const processingTime = req.query.processingTime || 1;
+  console.log(
+    `Elapsed processing seconds: ${counter}. Processing time limit is: ${processingTime}`,
+  );
+  if (counter >= processingTime) {
+    res.json({ status: "Clear to proceed", counter: counter });
+    counter = 0;
+  } else {
+    res.json({ status: "Still processing", counter: counter });
+  }
+});
+```
+
+This block of code is used **before** any middleware is set, to ensure the params at the end of the route can be captured. This is also helpful as usually the spinner is the first thing to render, whilst the page waits for data to be loaded.
+
+There is a counter set here and within `template.njk` the url sets the processing time (defaulted to 2 currently).
+
+```njk
+{% block content %}
+
+{% set url = "/api?processingTime=2" %}
+
+
+<div id="spinner-container" data-api-route="{{ url }}">
+
+</div>
+
+{% endblock %}
+```
+
+It is important that the url is set and the page uses the correct ID.

package/build/components/spinner/_index.scss

@@ -0,0 +1,64 @@
+.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) {
+    forced-color-adjust: none;
+    border-top-color: transparent !important;
+  }
+
+  @media not (prefers-reduced-motion) {
+    -webkit-animation: spin 2s linear infinite;
+    animation: spin 2s linear infinite;
+  }
+
+  @media (prefers-reduced-motion) {
+    transform: rotate(0.125turn);
+  }
+
+  &__ready {
+    border-color: #005ea5;
+    -webkit-animation: none;
+    animation: none;
+  }
+}
+
+#spinner-container {
+  &__error {
+    .spinner,
+    .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;
+}

package/build/components/spinner/api.njk

@@ -0,0 +1,27 @@
+{% extends "layouts/main.njk" %}
+
+{% set url = "/api" %}
+
+{% block content %}
+
+    <div id="spinner-container"
+         data-initial-heading="Initial heading text"
+         data-initial-spinnerStateText="Initial spinner state text"
+         data-initial-spinnerState="pending"
+         data-error-heading="Error heading"
+         data-error-messageText="Error message text"
+         data-error-whatYouCanDo-heading="Error what you can do heading"
+         data-error-whatYouCanDo-message-text1="Error what you can do message text1"
+         data-error-whatYouCanDo-message-link-href="Error what you can do message link href"
+         data-error-whatYouCanDo-message-link-text="Error what you can do message link text"
+         data-error-whatYouCanDo-message-text2="Error what you can do message link text2"
+         data-complete-spinnerState="complete"
+         data-longWait-spinnerStateText="Long wait spinner state">
+    </div>
+
+{% endblock %}
+
+{% block pageScripts %}
+
+{% endblock %}
+

package/build/components/spinner/javascript/spinner.js

@@ -0,0 +1,118 @@
+export 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();
+      });
+    },
+  };
+})();

package/build/components/spinner/macro.njk

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

package/build/components/spinner/template.njk

@@ -0,0 +1,11 @@
+{% block content %}
+
+{% set url = "/api?processingTime=2" %}
+
+
+<div id="spinner-container" data-api-route="{{ url }}">
+   
+</div>
+
+
+{% endblock %}