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

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

@@ -0,0 +1,28 @@
+@import "../../../../node_modules/govuk-frontend/govuk/helpers/_colour.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 {
+  font-size: 16px;
+  font-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;
+}
+
+@media (max-width: 256px) {
+.govuk-phase-banner__content{
+  display: block;
+}
+}

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,26 @@
+{% set phaseBanner = params.translations %}
+{% from "./tag/macro.njk" import frontendUiTag -%}
+
+<div role="region" 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">
+    {% if params.phaseBannerText %}
+    {{ params.phaseBannerText }}
+    {% else %}
+    {{ phaseBanner.text }}
+    {% endif %}
+    <a class="govuk-link"
+       rel="noopener"
+       target="_blank"
+       {% if params.noAppend %} href="{{ params.contactUrl }}" {% endif %}
+       {% if params.noAppend != 'true' %} href="{{ contactUsUrl(params.contactUrl, params.url) or contactUsUrl('https://signin.account.gov.uk/contact-us', params.url) }}" {% endif %}>
+      {{ phaseBanner.link}}</a>.
+  </span>
+</p>
+</div>

package/build/components/progress-button/_index.scss

@@ -0,0 +1,51 @@
+.govuk-button--progress{
+  position: relative;
+}
+
+.govuk-button--progress-loading{
+   background-color: #505A5F !important;
+   color: #fff !important;
+   pointer-events: none !important;
+   padding-left: 40px !important;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+
+.govuk-button--progress-loading::before {
+  content: "";
+  border: 3px solid rgba(255, 255, 255, 0.35);
+  border-top: 3px solid #fff;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  animation: rotate 1s infinite linear;
+  position: absolute;
+  top: 12% !important;
+  left: 8px;
+}
+
+.govuk-progress-button--disabled{
+  opacity: 1 !important;
+}
+  
+@media (prefers-reduced-motion: reduce) {
+  .govuk-button--progress-loading {
+    padding-left: 10px !important; 
+
+    &::before {
+      display: none; 
+    }
+  }
+}
+
+
+

package/build/components/progress-button/macro.njk

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

package/build/components/progress-button/progress-button.yaml

@@ -0,0 +1,13 @@
+params:
+  - name: translations
+    type: string
+    required: true
+    description: translations from middleware 
+  - name: href
+    type: string
+    required: true
+    description: URL for the button to link to
+  - name: errorPage
+    type: string
+    required: true
+    description: URL for the error help page

package/build/components/progress-button/template.njk

@@ -0,0 +1,112 @@
+{% set progressButton = params.translations %}
+<noscript>
+  <style>
+    .noscript {
+      border: #F3F3F3 3px solid;
+      padding-top: 28px;
+      padding-left: 12px;
+      padding-right: 12px;
+      margin-bottom: 12px;
+    }
+  </style>
+</noscript>
+
+{# Set classes for this component #}
+{%- set classNames = "govuk-button govuk-button--progress" -%}
+
+{%- if params.classes %}
+  {% set classNames = classNames + " " + params.classes %}
+{% endif %}
+{% if params.disabled %}
+  {% set classNames = classNames + " govuk-button--disabled" %}
+{% endif -%}
+
+{%- if params.element %}
+  {% set element = params.element | lower %}
+{% else %}
+  {% if params.href %}
+    {% set element = 'a' %}
+  {% else %}
+    {% set element = 'button' %}
+  {% endif %}
+{% endif -%}
+
+{% if params.isStartButton %}
+  {% set iconHtml %}
+  {#- 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 class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">
+    <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"/>
+  </svg>
+  {% endset %}
+  {% set classNames = classNames + " govuk-button--start" %}
+{% endif %}
+
+{#- Define common attributes that we can use across all element types #}
+
+{%- set commonAttributes %} data-module="govuk-button"{% for attribute, value in params.attributes %}
+  {{attribute}}="{{value}}"{% endfor %}
+{% if params.id %} id="{{ params.id }}"{% endif %}
+{% endset %}
+
+{#- Define common attributes we can use for both button and input types #}
+
+{%- set buttonAttributes %}
+{% if params.name %} name="{{ params.name }}"{% endif %}
+{% if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}
+{% if params.preventDoubleClick !== undefined %} data-prevent-double-click="{{params.preventDoubleClick}}"{% endif %}{% endset %}
+
+{%- if element == 'a' %}
+  <div class="noscript">
+    <noscript>
+      <div class="govuk-body" >
+        {{ progressButton.noJavascriptMessage }}
+      </div>
+    </noscript>
+
+    <a href="{{ params.href if params.href else '#' }}" role="button" draggable="false" {{- commonAttributes | safe }} class = "{{ classNames }}" data-frontendui="di-progress-button" data-waiting-text="{{ progressButton.waitingText }}" data-long-waiting-text="{{ progressButton.longWaitingText }}" data-error-page="{{ params.errorPage | default('#') }}" >
+      {% if params.html %}
+        {{ params.html | safe }}
+      {% elseif params.text %}
+        {{ params.text | safe }}
+      {% else %}
+        {{ progressButton.text }}
+      {% endif %}
+      {{- iconHtml | safe | trim | indent(2, true) if iconHtml -}}
+    </a>
+  </div>
+
+{%- elseif element == 'button' %}
+  <div class="noscript">
+    <noscript>
+      <div class="govuk-body" >
+        {{ progressButton.noJavascriptMessage }}
+      </div>
+    </noscript>
+
+    <button {%- if params.value %} value="{{ params.value }}"{% endif %}{%- if params.type %} type="{{ params.type }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }} class = "{{ classNames }}" data-frontendui="di-progress-button" data-waiting-text="{{ progressButton.waitingText }}" data-long-waiting-text="{{ progressButton.longWaitingText }}" data-error-page="{{ params.errorPage | default('#') }}" >
+      {% if params.html %}
+        {{ params.html | safe }}
+      {% elseif params.text %}
+        {{ params.text | safe }}
+      {% else %}
+        {{ progressButton.text }}
+      {% endif %}
+      {{- iconHtml | safe | trim | indent(2, true) if iconHtml -}}
+
+    </button>
+  </div>
+
+{%- elseif element == 'input' %}
+  <div class="noscript">
+    <noscript>
+      <div class="govuk-body" >
+        {{ progressButton.noJavascriptMessage }}
+      </div>
+    </noscript>
+    <input value="{{ params.value }}" type="{{ params.type if params.type else 'submit'}}"{{- buttonAttributes | safe }} {{- commonAttributes | safe }} class = "{{ classNames }}" data-frontendui="di-progress-button" data-waiting-text="{{ progressButton.waitingText }}" data-long-waiting-text="{{ progressButton.longWaitingText }}" data-error-page="{{ params.errorPage | default('#') }}" >
+    {{- iconHtml | safe | trim | indent(2, true) if iconHtml -}}
+  </div>
+
+{% endif %}

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,14 @@
+{% from "govuk/components/skip-link/macro.njk" import govukSkipLink %}
+
+{% set skipLink = params.translations %}
+
+{{ govukSkipLink({
+  href: "#main-content",
+  text: skipLink.title,
+  attributes: {
+    "role": "button",
+    "aria-label": skipLink.title
+  }
+}) }}
+
+

package/build/components/spinner/README.md

@@ -0,0 +1,130 @@
+# Spinner
+
+This component:
+- Displays an animated spinner graphic
+- Repeatedly calls a supplied function
+- Stops the spinner animation when the function returns success, failure, or doesn't return either after a certain amount of time
+- Displays different HTML for the different phases of its lifecycle
+
+It consists of code in `../../frontend-src/spinner/spinner.ts` and styling in `_index.scss`
+
+## Requirements
+
+For the spinner to perform correctly it requires the following:
+- A container `div` to display within
+- A polling function to call repeatedly until it returns success or failure
+- An optional success function to call once if the polling function returns success
+- An optional error function to call once if the polling function returns failure, or we reach the abort duration
+- A div with id `no-js-content`. This should contain the HTML to display if the user has JS disabled
+- An optional div with id `wait-content`. This should contain the default HTML to display under the spinner
+- An optional div with id `long-wait-content`. This should contain the HTML to display under the spinner once it has been spinning for the specified long wait duration
+- An optional div with id `success-content`. This should contain the HTML to display under the spinner once the polling function returns success
+- An optional div with id `error-content`. This should contain the HTML to display under the spinner if the polling function returns failure, or doesn't return success before the abort duration is reached
+- An optional data attribute `data-ms-before-informing-of-long-wait` to set the amount of time the spinner will spin before displaying the `long-wait-content`
+- An optional data attribute `data-ms-before-abort` to set the amount of time the spinner will spin before displaying the `error-content` and calling the `errorFunction`
+- An optional data attribute `data-ms-between-dom-update` to set the amount of time between updates to the spinner UI
+- An optional data attribute `data-ms-between-requests` to set the amount of time between calls to the `pollingFunction`
+- An optional data attribute `data-hide-spinner-on-error` to hide the spinner graphic on error (defaults to false)
+- An optional data attribute `data-max-backoff-tries` to set the number of times in a row the polling function can return `backoff` before the error content is displayed (defaults to 3)
+- An optional data attribute `aria-alert-completion-text`. If supplied this text will be set as an aria alert if the spinner completes successfully
+
+For example:
+
+```html
+<div id="spinner-container"
+     data-ms-before-informing-of-long-wait="10000"
+     data-ms-before-abort="30000"
+     data-ms-between-dom-update="1000"
+     data-ms-between-requests="2000"
+     data-hide-spinner-on-error="true"
+     data-max-backoff-tries="3"
+     data-aria-alert-completion-text="Task completed successfully, you may now continue">
+  <div id="no-js-content"><p class="centre govuk-body">JS is disabled</p></div>
+  <div id="wait-content" style="display:none"><p class="centre govuk-body">Waiting</p></div>
+  <div id="long-wait-content" style="display:none"><p class="centre govuk-body">Still waiting</p></div>
+  <div id="success-content" style="display:none"><p class="centre govuk-body">Success!</p></div>
+  <div id="error-content" style="display:none"><p class="centre govuk-body">Error :(</p></div>
+</div>
+```
+
+Note that the content divs (except for the no-js div) have `style="display:none"` to hide them until they are needed.
+
+```typescript
+async function pollFunction(abortSignal): PollResult {
+  // Check for success
+}
+
+function successFunction(): void {
+  // Optionally do stuff, e.g. enable a button, redirect, etc
+}
+
+function errorFunction(): void {
+  // Optionally do stuff, e.g. enable a button, redirect, etc
+}
+
+useSpinner("spinner-container", pollingFunction, successFunction, errorFunction);
+```
+
+## Lifecycle
+
+The spinner starts in the waiting state and displays the `wait` content under the animated spinner graphic content.
+If a call to the polling function returns `success` the spinner will stop animating, display the `success-content` content, and call the `successFunction` (if specified)
+If a call to the polling function returns `failure` the spinner will stop animating, display the `error-content` content, and call the `errorFunction` (if specified)
+If the spinner waits past the `long-wait` duration while the polling function keeps returning `pending` the spinner will display the `long-wait-content` content
+If the spinner waits past the `abort` duration while the polling function keeps returning `pending` the spinner will stop animating, display the `error-content` content, and call the `errorFunction` (if specified)
+The polling function can optionally return `backoff` if it should be tried again but after a delay (e.g. to account for network instability). On receiving `backoff` the spinner will exponentially increase the time before the
+next call to the polling function. If the polling function returns `backoff` more times than the `max-backoff-tries` value in a row then the final call is treated as if had returned `failure` instead. If a call to the polling
+function returns `pending` then the backoff counter resets. 
+
+### Page refreshes
+
+When the spinner starts for the first time it stores the current time in session storage. If the page is refreshed the spinner will retrieve the initial start time from session storage and update itself appropriately. 
+
+## Scripts
+
+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.
+
+## Manual Testing
+
+The nunjucks files in this folder are to allow automated accessibility testing, most users of the spinner component will only need the CSS and script files.
+
+There is a `/spinner` page in the alpha-app that will display the spinner component.
+
+An endpoint has been created in the alpha-app at `/api` that will return a pending result for a specified number of requests before returning a success response.
+
+```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 });
+  }
+});
+```

package/build/components/spinner/_index.scss

@@ -0,0 +1,55 @@
+.spinner {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  border-width: 12px;
+  border-style: solid;
+  border-color: #dee0e2;
+  border-top-color: #005ea5;
+  margin-bottom: 15px;
+
+  @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);
+  }
+
+  &__finished {
+    border-color: #005ea5;
+    -webkit-animation: none;
+    animation: 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/macro.njk

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

package/build/components/spinner/template.njk

@@ -0,0 +1,18 @@
+{# This template is for use in accessbility testing. #}
+{% block content %}
+
+<main>
+  <div id="spinner-container"
+       data-ms-before-informing-of-long-wait="4000"
+       data-ms-before-abort="9000"
+       data-ms-between-dom-update="1000"
+       data-ms-between-requests="3000">
+    <div id="no-js-content"><p class="centre govuk-body">JS is disabled</p></div>
+    <div id="wait-content" style="display:none"><p class="centre govuk-body">Waiting</p></div>
+    <div id="long-wait-content" style="display:none"><p class="centre govuk-body">Still waiting</p></div>
+    <div id="success-content" style="display:none"><p class="centre govuk-body">Success!</p></div>
+    <div id="error-content" style="display:none"><p class="centre govuk-body">Error :(</p></div>
+  </div>
+</main>
+
+{% endblock %}

package/build/esm/backend/index.d.ts

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

package/build/esm/backend/index.d.ts.map

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