@nationalarchives/frontend 0.1.42 → 0.1.44

package/nationalarchives/analytics.mjs

@@ -6,6 +6,7 @@ import {
 } from "./lib/analytics-helpers.mjs";
 import BreadcrumbAnalytics from "./components/breadcrumbs/analytics.js";
 import CheckboxesAnalytics from "./components/checkboxes/analytics.js";
+import FooterAnalytics from "./components/footer/analytics.js";
 import GlobalHeaderAnalytics from "./components/global-header/analytics.js";
 import HeaderAnalytics from "./components/header/analytics.js";
 import HeroAnalytics from "./components/hero/analytics.js";
@@ -18,6 +19,7 @@ import TextareaAnalytics from "./components/textarea/analytics.js";
 const componentAnalytics = [
   ...BreadcrumbAnalytics,
   ...CheckboxesAnalytics,
+  ...FooterAnalytics,
   ...GlobalHeaderAnalytics,
   ...HeaderAnalytics,
   ...HeroAnalytics,
@@ -36,14 +38,55 @@ class EventTracker {
   events = [];
 
   /** @protected */
-  start = new Date();
+  startTime = new Date();
 
-  constructor() {
+  /** @protected */
+  prefix = "tna";
+
+  constructor(options = {}) {
+    const { prefix = null } = options;
+    if (prefix) {
+      this.prefix = prefix;
+    }
+  }
+
+  start(initAll) {
+    if (!navigator.doNotTrack || navigator.doNotTrack !== 1) {
+      if (this.cookies.isPolicyAccepted("usage")) {
+        this.enableTracking();
+      } else {
+        window[this.ga4Disable] = true;
+        this.cookies.set(this.ga4Disable, "true");
+      }
+      this.cookies.on("changePolicy", (policies) => {
+        if (Object.hasOwn(policies, "usage")) {
+          if (policies["usage"]) {
+            this.enableTracking();
+          } else {
+            this.disableTracking();
+          }
+        }
+      });
+      if (initAll) {
+        this.initAll();
+      }
+    }
+  }
+
+  enableTracking() {}
+
+  disableTracking() {}
+
+  /**
+   * Initialise all TNA Frontend component analytics.
+   */
+  initAll() {
     componentAnalytics.forEach((componentConfig) => {
       this.addListener(
         componentConfig.scope,
         componentConfig.areaName,
         componentConfig.events,
+        componentConfig.rootEventName || "",
       );
     });
   }
@@ -52,9 +95,10 @@ class EventTracker {
    * Add an event listener.
    * @param {String|HTMLElement} scope - The element to which the listener is scoped.
    * @param {String} areaName - The name of the component to pass on to the tracker.
-   * @param {{eventName: String, targetElement: String|undefined, on: String, data: {value: Function|String|undefined, state: Function|String|undefined, [String]: any}}[]} events - The configuration of events to track along with their optional value and state which can be computed.
+   * @param {{eventName: String, targetElement: String|undefined, on: String, data: {value: Function|String|undefined, state: Function|String|undefined, group: Function|String|undefined, [String]: String|Integer}, rootData:{[String]: Function|String}}[]} events - The configuration of events to track along with their optional value and state which can be computed.
+   * @param {String} rootEventName - The event name to use if specified (prefix).
    */
-  addListener(scope, areaName, events) {
+  addListener(scope, areaName, events, rootEventName = "") {
     let scopeArray;
     if (typeof scope === "string") {
       scopeArray = Array.from(document.querySelectorAll(scope));
@@ -65,31 +109,33 @@ class EventTracker {
       return;
     }
     scopeArray.forEach(($scope) => {
-      events.forEach((componentTracking) => {
-        if (!componentTracking.on) {
+      events.forEach((eventConfig) => {
+        if (!eventConfig.on) {
           return;
         }
-        if (componentTracking.targetElement) {
+        if (eventConfig.targetElement) {
           Array.from(
-            $scope.querySelectorAll(componentTracking.targetElement),
-          ).forEach(($el) =>
+            $scope.querySelectorAll(eventConfig.targetElement),
+          ).forEach(($el, index) =>
             this.attachListener(
               $el,
-              componentTracking.on,
               $scope,
-              this.generateEventName(areaName, componentTracking),
-              componentTracking.data,
-              componentTracking.targetElement,
+              rootEventName,
+              eventConfig,
+              scope,
+              areaName,
+              index + 1,
             ),
           );
         } else {
           this.attachListener(
             $scope,
-            componentTracking.on,
             $scope,
-            this.generateEventName(areaName, componentTracking),
-            componentTracking.data,
-            componentTracking.targetElement,
+            rootEventName,
+            eventConfig,
+            scope,
+            areaName,
+            1,
           );
         }
       });
@@ -97,56 +143,78 @@ class EventTracker {
   }
 
   /** @protected */
-  generateEventName(areaName, componentTracking) {
-    return `${areaName}.${componentTracking.eventName || componentTracking.on}`;
+  generateEventName(areaName, eventConfig) {
+    return `${this.prefix}.${areaName}.${eventConfig.eventName || eventConfig.on}`;
   }
 
   /** @protected */
   attachListener(
     $el,
-    eventTrigger,
     $scope,
-    eventName,
-    eventDataInit,
-    targetElement,
+    rootEventName,
+    eventConfig,
+    scope,
+    areaName,
+    index,
   ) {
-    if (!$el) {
-      return;
-    }
-    $el.addEventListener(eventTrigger, (event) =>
-      this.recordEvent(eventName, {
-        ...eventDataInit,
-        value:
-          typeof eventDataInit.value === "function"
-            ? eventDataInit.value.call(this, $el, $scope, event)
-            : eventDataInit.value || null,
-        state:
-          typeof eventDataInit.state === "function"
-            ? eventDataInit.state.call(this, $el, $scope, event)
-            : eventDataInit.state || null,
-        group:
-          typeof eventDataInit.group === "function"
-            ? eventDataInit.group.call(this, $el, $scope, event)
-            : eventDataInit.group || null,
-        scope: getXPathTo($scope),
-        targetElement: targetElement,
-        timestamp: new Date().toISOString(),
-        uri: window.location.pathname,
-        timeSincePageLoad: new Date() - this.start,
-      }),
+    const { on, data, targetElement, rootData = {} } = eventConfig;
+    $el.addEventListener(on, (event) =>
+      this.recordEvent(
+        rootEventName
+          ? `${this.prefix}.${rootEventName}`
+          : this.generateEventName(areaName, eventConfig),
+        {
+          ...data,
+          name: this.generateEventName(areaName, eventConfig),
+          value: data?.value
+            ? this.computedValue(data.value, $el, $scope, event, index)
+            : null,
+          state: data?.state
+            ? this.computedValue(data.state, $el, $scope, event, index)
+            : null,
+          group: data?.group
+            ? this.computedValue(data.group, $el, $scope, event, index)
+            : null,
+          xPath: getXPathTo($el),
+          targetElement: targetElement,
+          timeSincePageLoad: new Date() - this.startTime,
+          index,
+          scope,
+          areaName,
+        },
+        Object.fromEntries(
+          Object.entries(rootData).map(([key, value]) => [
+            key,
+            this.computedValue(value, $el, $scope, event, index),
+          ]),
+        ),
+      ),
     );
   }
 
   /** @protected */
-  recordEvent(eventName, data) {
-    this.events.push({ event: eventName, "tna.data": data });
+  computedValue(value, $el, $scope, event, index) {
+    return typeof value === "function"
+      ? value.call(this, $el, $scope, event, index)
+      : value ?? null;
+  }
+
+  /** @protected */
+  recordEvent(eventName, data, rootData = {}) {
+    this.events.push({
+      event: eventName,
+      [`${this.prefix}.event`]: data,
+      ...rootData,
+    });
   }
 
   /** @protected */
   getTnaMetaTags() {
     return Object.fromEntries(
       Array.from(
-        document.head.querySelectorAll("meta[name^='tna.'][content]"),
+        document.head.querySelectorAll(
+          `meta[name^='${this.prefix}.'][content]`,
+        ),
       ).map(($metaEl) => [
         $metaEl.getAttribute("name"),
         $metaEl.getAttribute("content"),
@@ -163,31 +231,47 @@ class EventTracker {
  * @public
  */
 class GA4 extends EventTracker {
+  /** @protected */
   trackingCodeAdded = false;
+
+  /** @protected */
   trackingEnabled = false;
+
+  /** @protected */
   gTagId;
 
-  constructor(id) {
-    super();
+  constructor(options = {}) {
+    if (GA4._instance) {
+      return GA4._instance;
+    }
+    const { id = null, prefix = null, initAll = true } = options;
+    if (!id) {
+      throw Error("ID was not specified");
+    }
+    super({ prefix });
+    GA4._instance = this;
     this.gTagId = id;
+    this.ga4Disable = `ga-disable-${this.gTagId}`;
     window.dataLayer = window.dataLayer || [];
-    if (this.cookies.isPolicyAccepted("usage")) {
-      this.enableTracking();
-    }
-    this.cookies.on("changePolicy", (policies) => {
-      if (Object.hasOwn(policies, "usage")) {
-        if (policies["usage"]) {
-          this.enableTracking();
-        } else {
-          this.disableTracking();
-        }
-      }
-    });
+    this.start(initAll);
+  }
+
+  destroy() {
+    GA4._instance = null;
   }
 
   /** @protected */
-  recordEvent(eventName, data) {
-    const ga4Data = { event: eventName, "tna.event": data };
+  recordEvent(eventName, data, rootData = {}) {
+    const ga4Data = {
+      event: eventName,
+      ...Object.fromEntries(
+        Object.entries(data).map(([key, value]) => [
+          `${this.prefix}.event.${key}`,
+          value,
+        ]),
+      ),
+      ...rootData,
+    };
     this.pushToDataLayer(ga4Data);
   }
 
@@ -204,8 +288,8 @@ class GA4 extends EventTracker {
   /** @protected */
   enableTracking() {
     if (!this.trackingEnabled) {
-      window["ga-disable-GA_MEASUREMENT_ID"] = false;
-      this.trackingEnabled = true;
+      window[this.ga4Disable] = false;
+      this.cookies.set(this.ga4Disable, "false");
       if (!this.trackingCodeAdded) {
         this.pushToDataLayer({
           "gtm.start": new Date().getTime(),
@@ -215,20 +299,31 @@ class GA4 extends EventTracker {
         const script = document.createElement("script");
         script.async = true;
         script.src = `https://www.googletagmanager.com/gtm.js?id=${this.gTagId}&l=dataLayer`;
-        firstScript.parentNode.insertBefore(script, firstScript);
+        if (firstScript) {
+          firstScript.parentNode.insertBefore(script, firstScript);
+        } else {
+          document.head.appendChild(script);
+        }
         this.trackingCodeAdded = true;
-        this.pushToDataLayer(this.getTnaMetaTags());
+        const tnaMetaTags = this.getTnaMetaTags();
+        if (Object.keys(tnaMetaTags).length) {
+          this.pushToDataLayer(tnaMetaTags);
+        }
       }
-      this.gtag("set", { allow_google_signals: true });
+      this.trackingEnabled = true;
     }
   }
 
   /** @protected */
   disableTracking() {
     if (this.trackingEnabled) {
-      window["ga-disable-GA_MEASUREMENT_ID"] = true;
-      this.gtag("set", { allow_google_signals: false });
+      window[this.ga4Disable] = true;
+      this.cookies.set(this.ga4Disable, "true");
+      this.cookies.delete("_ga");
+      // this.cookies.delete("_gat_gtag_UA_43169816_3");
+      // this.cookies.delete("_gid");
       this.trackingEnabled = false;
+      window.location.reload();
     }
   }
 }

package/nationalarchives/components/breadcrumbs/breadcrumbs.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/components/breadcrumbs/breadcrumbs.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"CAIA,iBACE,iBACA,oBAEA,uBACE,wBAGF,uBACE,SACA,UAEA,gBAEA,aACA,eAGF,uBACE,aAGE,sDACE,gBAEA,qBAEA,wBAEA,YACA,eAIJ,mCACE,aCoBJ,wBDrBE,mCAII,iCAKN,uBACE,qBAEA,kFEuCF,cACA,uBFlCE,6BEiCF,WACA,uBA2RA,8BFtUA,uBAcI,qBACA,oBAEA,qBEgEA,yBAIA,qCFhEA,6BACE,0BEoBN,cACA,iCAIA,sBAEA,4CAyQA,0DF5SI,qBACA,oBAEA,qBEgEA,yBAIA,qCFhEA,gEACE,0BEoBN,cACA,iCAIA,sBAEA,2CA8QE,+BADF,mDFhTI,qBACA,oBAEA,qBEgEA,yBAIA,qCFhEA,yDACE,0BEoBN,cACA,iCAIA,sBAEA,4CFlBA,8CACE,SACA,UACA,YAEA,kBACA,oBACA,oBAEA,+BAEA,YAEA,gBACA,eAEA,oDACE,cG3CJ,0BACA,0BC3CsC,MJwFlC,+BCvCJ,wBD4CE,oHACE,cCvCJ,aD4CE,uBACE,wBAEA,mCACE","file":"breadcrumbs.css","sourcesContent":["@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/typography\";\n\n.tna-breadcrumbs {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n\n  &:focus {\n    outline: none !important;\n  }\n\n  &__list {\n    margin: 0;\n    padding: 0;\n\n    list-style: none;\n\n    display: flex;\n    flex-wrap: wrap;\n  }\n\n  &__item {\n    display: flex;\n\n    + .tna-breadcrumbs__item {\n      &::before {\n        margin: 0 0.75rem;\n\n        display: inline-block;\n\n        vertical-align: baseline;\n\n        content: \"\\203A\";\n        content: \"\\203A\" / \"\";\n      }\n    }\n\n    &--expandable {\n      display: none;\n\n      @include media.on-mobile {\n        display: inline-block !important;\n      }\n    }\n  }\n\n  &__link {\n    display: inline-block;\n\n    &,\n    &:link,\n    &:visited {\n      @include colour.colour-font(\"font-base\");\n    }\n\n    &:hover {\n      @include colour.colour-font(\"font-dark\");\n    }\n\n    @include colour.on-high-contrast-and-forced-colours {\n      padding-right: 0.75rem;\n      padding-left: 0.75rem;\n\n      text-decoration: none;\n\n      @include colour.colour-border(\"keyline-dark\", 1px);\n\n      &:hover {\n        text-decoration: underline;\n\n        @include colour.colour-font(\"contrast-background\");\n\n        @include colour.colour-background(\"contrast-font-base\");\n      }\n    }\n  }\n\n  button#{&}__link {\n    margin: 0;\n    padding: 0;\n    height: 100%;\n\n    font-size: inherit;\n    line-height: inherit;\n    font-weight: inherit;\n\n    background-color: transparent;\n\n    border: none;\n\n    appearance: none;\n    cursor: pointer;\n\n    &:hover {\n      color: inherit;\n      @include typography.interacted-text-decoration;\n\n      background-color: transparent;\n    }\n  }\n\n  @include media.on-mobile {\n    &--collapsed &__item:not(:first-child, &__item--expandable, :last-child) {\n      display: none;\n    }\n  }\n\n  @include media.on-print {\n    &__item {\n      display: flex !important;\n\n      &--expandable {\n        display: none !important;\n      }\n    }\n  }\n}\n","@use \"../variables/media\";\n\n//   0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)\n//   |         .     |         |      |\n//   |-TINY----------|-SMALL---|-MED--|-LARGE------------------------\n//   |         .     |         |      |\n//   |<------------->|         |      |            on-tiny\n//   |<----------------------->|      |            on-mobile\n//   |<------------------------------>|            on-smaller-than-large\n//   |         .     |<------->|      |            on-small\n//   |         .     |<-------------------------   on-larger-than-tiny\n//   |         .     |         |<---->|            on-medium\n//   |         .     |         |<---------------   on-larger-than-mobile\n//   |         .     |         |      |<--------   on-large\n//   |<------->.     |         |      |            Smallest device\n\n@mixin on-large() {\n  @media #{media.$media-large} {\n    @content;\n  }\n}\n\n@mixin on-medium() {\n  @media #{media.$media-medium} {\n    @content;\n  }\n}\n\n@mixin on-small() {\n  @media #{media.$media-small} {\n    @content;\n  }\n}\n\n@mixin on-tiny() {\n  @media #{media.$media-tiny} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-mobile() {\n  @media #{media.$media-gt-mobile} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-tiny() {\n  @media #{media.$media-gt-tiny} {\n    @content;\n  }\n}\n\n@mixin on-smaller-than-large() {\n  @media #{media.$media-lt-large} {\n    @content;\n  }\n}\n\n@mixin on-mobile() {\n  @media #{media.$media-mobile} {\n    @content;\n  }\n}\n\n@mixin on-print() {\n  @media print {\n    @content;\n  }\n}\n","@use \"sass:map\";\n@use \"sass:list\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin accent-css-vars($colour) {\n  @if $colour == \"yellow\" {\n    --accent-background: #{brand-colour(\"yellow\")} !important;\n    --accent-background-light: #{brand-colour(\"cream\")} !important;\n    --accent-font-base: #{brand-colour(\"black\")} !important;\n    --accent-font-dark: #{brand-colour(\"black\")} !important;\n    --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"black\")} !important;\n    --accent-link-visited: #{brand-colour(\"black\")} !important;\n    --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n    --button-accent-background: #{brand-colour(\"yellow\")} !important;\n  } @else {\n    --accent-font-base: #{brand-colour(\"white\")} !important;\n    --accent-font-dark: #{brand-colour(\"white\")} !important;\n    --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"white\")} !important;\n    --accent-link-visited: #{brand-colour(\"white\")} !important;\n    --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n    --button-accent-text: #{brand-colour(\"white\")} !important;\n    @if $colour == \"pink\" {\n      --accent-background: #{brand-colour(\"maroon\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n      --button-accent-background: #{brand-colour(\"maroon\")} !important;\n    } @else if $colour == \"orange\" {\n      --accent-background: #{brand-colour(\"chestnut\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n      --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n    } @else if $colour == \"green\" {\n      --accent-background: #{brand-colour(\"forest\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n      --button-accent-background: #{brand-colour(\"forest\")} !important;\n    } @else if $colour == \"blue\" {\n      --accent-background: #{brand-colour(\"navy\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n      --button-accent-background: #{brand-colour(\"navy\")} !important;\n    }\n  }\n}\n\n@mixin colour-font(\n  $colour,\n  $important: false,\n  $default-palette: colour.$colour-palette-default\n) {\n  color: map.get($default-palette, $colour) if($important, !important, null);\n  color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      $property: border-#{$direction};\n      border-#{$direction}: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border-#{$direction}: $width\n        var(--#{$colour})\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: map.get(\n          colour.$colour-palette-default,\n          $colour\n        )\n        if($important, !important, null);\n      border-#{$direction}-color: var(--#{$colour})\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border: $width var(--#{$colour}) $style if($important, !important, null);\n    } @else {\n      border-color: map.get(colour.$colour-palette-default, $colour)\n        if($important, !important, null);\n      border-color: var(--#{$colour}) if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      map.get(colour.$colour-palette-default, $colour)\n      $style\n      if($important, !important, null);\n    outline: $width var(--#{$colour}) $style if($important, !important, null);\n  } @else {\n    outline-color: map.get(colour.$colour-palette-default, $colour)\n      if($important, !important, null);\n    outline-color: var(--#{$colour}) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  fill: var(--#{$colour}) if($important, !important, null);\n}\n\n%light {\n  @include colour-css-vars(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n}\n\n@mixin light {\n  @extend %light;\n}\n\n%dark {\n  @include colour-css-vars-dark(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n}\n\n@mixin dark {\n  @extend %dark;\n}\n\n%plain {\n  .tna-template--system-theme & {\n    @extend %light;\n\n    @media (prefers-color-scheme: dark) {\n      @include colour-css-vars-dark;\n    }\n\n    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n      @include colour-css-vars-high-contrast-dark;\n    }\n  }\n\n  .tna-template--light-theme & {\n    @include colour-css-vars;\n  }\n\n  .tna-template--dark-theme & {\n    @include colour-css-vars-dark;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast;\n  }\n\n  .tna-template--high-contrast-theme.tna-template--dark-theme & {\n    @include colour-css-vars-high-contrast-dark;\n  }\n\n  --background: var(--page-background);\n}\n\n@mixin plain {\n  @extend %plain;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n  @extend %accent;\n}\n\n%tint {\n  @include colour-background(\"background-tint\");\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent-background {\n  @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n  @extend %accent-background;\n}\n\n%accent-light {\n  --background: var(--accent-background-light);\n  --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n  --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n  --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n  // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n  // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n  --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n  --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n  --button-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-background\"\n    )};\n  --button-hover-text: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-text\"\n    )};\n  --button-hover-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-background\"\n    )};\n\n  @include colour-background(\"background\");\n  @include colour-font(\"font-base\");\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      --link: #{map.get(colour.$colour-palette-default, \"link\")};\n      --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n    }\n  }\n\n  .tna-template--dark-theme & {\n    --link: #{map.get(colour.$colour-palette-default, \"link\")};\n    --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n  .tna-template--high-contrast-theme & {\n    @content;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-contrast: more) {\n      @content;\n    }\n  }\n}\n\n@mixin on-forced-colours {\n  @media (forced-colors: active) {\n    @content;\n  }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n  @include on-forced-colours {\n    @content;\n  }\n\n  @include on-high-contrast {\n    @content;\n  }\n}\n","@use \"sass:math\";\n@use \"colour\";\n@use \"../variables/typography\";\n\n@mixin relative-font-size($fontSizePx) {\n  font-size: #{math.div($fontSizePx, typography.$relative-1rem-px)}rem;\n}\n\n@mixin main-font-weight {\n  font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-bold {\n  font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n  font-family: typography.$main-font-family;\n  @if $bold {\n    @include main-font-weight-bold;\n  } @else {\n    @include main-font-weight;\n  }\n  font-optical-sizing: auto;\n  font-style: normal;\n  font-variation-settings: \"wdth\" 100;\n}\n\n@mixin heading-font {\n  font-family: typography.$heading-font-family;\n  font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n  font-family: typography.$detail-font-family;\n  @if $bold {\n    font-weight: typography.$detail-font-weight-bold;\n  } @else {\n    font-weight: typography.$detail-font-weight;\n  }\n  font-optical-sizing: auto;\n  font-style: normal;\n}\n\n@mixin detail-font-small {\n  @include detail-font;\n  @include relative-font-size(14);\n  text-transform: uppercase;\n  line-height: #{math.div(typography.$relative-1rem-px, 14)};\n}\n\n@mixin interacted-text-decoration {\n  text-decoration: underline;\n  text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n","@use \"sass:math\";\n\n$use-local-fonts: false !default;\n\n$relative-1rem-px: 16; // 16px is always 1rem\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: #{math.div($relative-1rem-px, $body-font-size-px) * 2} !default; // 1.77777\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font: \"Open Sans\" !default;\n$main-font-family: $main-font, sans-serif !default;\n$main-font-weight: 400 !default;\n$main-font-weight-bold: 700 !default;\n\n$heading-font-family: supria-sans-condensed, \"Arial Narrow\", sans-serif !default;\n$heading-font-weight: 500 !default;\n\n$detail-font-family: \"Roboto Mono\", monospace !default;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n"]}
+{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/components/breadcrumbs/breadcrumbs.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"CAIA,iBACE,iBACA,oBAEA,uBACE,wBAGF,uBACE,SACA,UAEA,gBAEA,aACA,eAGF,uBACE,aAGE,sDACE,gBAEA,qBAEA,wBAEA,YACA,eAIJ,mCACE,aCoBJ,wBDrBE,mCAII,iCAKN,uBACE,qBAEA,kFEuCF,cACA,uBFlCE,6BEiCF,WACA,uBAmTA,8BF9VA,uBAcI,qBACA,oBAEA,qBEoEA,yBAIA,qCFpEA,6BACE,0BEoBN,cACA,iCAIA,sBAEA,4CAiSA,0DFpUI,qBACA,oBAEA,qBEoEA,yBAIA,qCFpEA,gEACE,0BEoBN,cACA,iCAIA,sBAEA,2CAsSE,+BADF,mDFxUI,qBACA,oBAEA,qBEoEA,yBAIA,qCFpEA,yDACE,0BEoBN,cACA,iCAIA,sBAEA,4CFlBA,8CACE,SACA,UACA,YAEA,kBACA,oBACA,oBAEA,+BAEA,YAEA,gBACA,eAEA,oDACE,cG3CJ,0BACA,0BC3CsC,MJwFlC,+BCvCJ,wBD4CE,oHACE,cCvCJ,aD4CE,uBACE,wBAEA,mCACE","file":"breadcrumbs.css","sourcesContent":["@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/typography\";\n\n.tna-breadcrumbs {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n\n  &:focus {\n    outline: none !important;\n  }\n\n  &__list {\n    margin: 0;\n    padding: 0;\n\n    list-style: none;\n\n    display: flex;\n    flex-wrap: wrap;\n  }\n\n  &__item {\n    display: flex;\n\n    + .tna-breadcrumbs__item {\n      &::before {\n        margin: 0 0.75rem;\n\n        display: inline-block;\n\n        vertical-align: baseline;\n\n        content: \"\\203A\";\n        content: \"\\203A\" / \"\";\n      }\n    }\n\n    &--expandable {\n      display: none;\n\n      @include media.on-mobile {\n        display: inline-block !important;\n      }\n    }\n  }\n\n  &__link {\n    display: inline-block;\n\n    &,\n    &:link,\n    &:visited {\n      @include colour.colour-font(\"font-base\");\n    }\n\n    &:hover {\n      @include colour.colour-font(\"font-dark\");\n    }\n\n    @include colour.on-high-contrast-and-forced-colours {\n      padding-right: 0.75rem;\n      padding-left: 0.75rem;\n\n      text-decoration: none;\n\n      @include colour.colour-border(\"keyline-dark\", 1px);\n\n      &:hover {\n        text-decoration: underline;\n\n        @include colour.colour-font(\"contrast-background\");\n\n        @include colour.colour-background(\"contrast-font-base\");\n      }\n    }\n  }\n\n  button#{&}__link {\n    margin: 0;\n    padding: 0;\n    height: 100%;\n\n    font-size: inherit;\n    line-height: inherit;\n    font-weight: inherit;\n\n    background-color: transparent;\n\n    border: none;\n\n    appearance: none;\n    cursor: pointer;\n\n    &:hover {\n      color: inherit;\n      @include typography.interacted-text-decoration;\n\n      background-color: transparent;\n    }\n  }\n\n  @include media.on-mobile {\n    &--collapsed &__item:not(:first-child, &__item--expandable, :last-child) {\n      display: none;\n    }\n  }\n\n  @include media.on-print {\n    &__item {\n      display: flex !important;\n\n      &--expandable {\n        display: none !important;\n      }\n    }\n  }\n}\n","@use \"../variables/media\";\n\n//   0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)\n//   |         .     |         |      |\n//   |-TINY----------|-SMALL---|-MED--|-LARGE------------------------\n//   |         .     |         |      |\n//   |<------------->|         |      |            on-tiny\n//   |<----------------------->|      |            on-mobile\n//   |<------------------------------>|            on-smaller-than-large\n//   |         .     |<------->|      |            on-small\n//   |         .     |<-------------------------   on-larger-than-tiny\n//   |         .     |         |<---->|            on-medium\n//   |         .     |         |<---------------   on-larger-than-mobile\n//   |         .     |         |      |<--------   on-large\n//   |<------->.     |         |      |            Smallest device\n\n@mixin on-large() {\n  @media #{media.$media-large} {\n    @content;\n  }\n}\n\n@mixin on-medium() {\n  @media #{media.$media-medium} {\n    @content;\n  }\n}\n\n@mixin on-small() {\n  @media #{media.$media-small} {\n    @content;\n  }\n}\n\n@mixin on-tiny() {\n  @media #{media.$media-tiny} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-mobile() {\n  @media #{media.$media-gt-mobile} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-tiny() {\n  @media #{media.$media-gt-tiny} {\n    @content;\n  }\n}\n\n@mixin on-smaller-than-large() {\n  @media #{media.$media-lt-large} {\n    @content;\n  }\n}\n\n@mixin on-mobile() {\n  @media #{media.$media-mobile} {\n    @content;\n  }\n}\n\n@mixin on-print() {\n  @media print {\n    @content;\n  }\n}\n","@use \"sass:map\";\n@use \"sass:list\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin accent-css-vars($colour) {\n  @if $colour == \"yellow\" {\n    --accent-background: #{brand-colour(\"yellow\")} !important;\n    --accent-background-light: #{brand-colour(\"cream\")} !important;\n    --accent-font-base: #{brand-colour(\"black\")} !important;\n    --accent-font-dark: #{brand-colour(\"black\")} !important;\n    --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"black\")} !important;\n    --accent-link-visited: #{brand-colour(\"black\")} !important;\n    --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n    --button-accent-background: #{brand-colour(\"yellow\")} !important;\n  } @else {\n    --accent-font-base: #{brand-colour(\"white\")} !important;\n    --accent-font-dark: #{brand-colour(\"white\")} !important;\n    --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"white\")} !important;\n    --accent-link-visited: #{brand-colour(\"white\")} !important;\n    --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n    --button-accent-text: #{brand-colour(\"white\")} !important;\n    @if $colour == \"pink\" {\n      --accent-background: #{brand-colour(\"maroon\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n      --button-accent-background: #{brand-colour(\"maroon\")} !important;\n    } @else if $colour == \"orange\" {\n      --accent-background: #{brand-colour(\"chestnut\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n      --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n    } @else if $colour == \"green\" {\n      --accent-background: #{brand-colour(\"forest\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n      --button-accent-background: #{brand-colour(\"forest\")} !important;\n    } @else if $colour == \"blue\" {\n      --accent-background: #{brand-colour(\"navy\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n      --button-accent-background: #{brand-colour(\"navy\")} !important;\n    }\n  }\n}\n\n@mixin colour-font(\n  $colour,\n  $important: false,\n  $default-palette: colour.$colour-palette-default\n) {\n  color: map.get($default-palette, $colour) if($important, !important, null);\n  color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      $property: border-#{$direction};\n      border-#{$direction}: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border-#{$direction}: $width\n        var(--#{$colour})\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: map.get(\n          colour.$colour-palette-default,\n          $colour\n        )\n        if($important, !important, null);\n      border-#{$direction}-color: var(--#{$colour})\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border: $width var(--#{$colour}) $style if($important, !important, null);\n    } @else {\n      border-color: map.get(colour.$colour-palette-default, $colour)\n        if($important, !important, null);\n      border-color: var(--#{$colour}) if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      map.get(colour.$colour-palette-default, $colour)\n      $style\n      if($important, !important, null);\n    outline: $width var(--#{$colour}) $style if($important, !important, null);\n  } @else {\n    outline-color: map.get(colour.$colour-palette-default, $colour)\n      if($important, !important, null);\n    outline-color: var(--#{$colour}) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  fill: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction) {\n  @include colour-border(\"keyline\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-dark($direction) {\n  @include colour-border(\"keyline-dark\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-accent($direction) {\n  @include colour-border(\"accent-background\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-error($direction) {\n  @include colour-border(\"form-error\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n  border-#{$direction}: 5px #{brand-colour($brandColour)} solid;\n}\n\n%light {\n  @include colour-css-vars(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n}\n\n@mixin light {\n  @extend %light;\n}\n\n%dark {\n  @include colour-css-vars-dark(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n}\n\n@mixin dark {\n  @extend %dark;\n}\n\n%plain {\n  .tna-template--system-theme & {\n    @extend %light;\n\n    @media (prefers-color-scheme: dark) {\n      @include colour-css-vars-dark;\n    }\n\n    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n      @include colour-css-vars-high-contrast-dark;\n    }\n  }\n\n  .tna-template--light-theme & {\n    @include colour-css-vars;\n  }\n\n  .tna-template--dark-theme & {\n    @include colour-css-vars-dark;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast;\n  }\n\n  .tna-template--high-contrast-theme.tna-template--dark-theme & {\n    @include colour-css-vars-high-contrast-dark;\n  }\n\n  --background: var(--page-background);\n}\n\n@mixin plain {\n  @extend %plain;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n  @extend %accent;\n}\n\n%tint {\n  @include colour-background(\"background-tint\");\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent-background {\n  @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n  @extend %accent-background;\n}\n\n%accent-light {\n  --background: var(--accent-background-light);\n  --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n  --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n  --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n  // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n  // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n  --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n  --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n  --button-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-background\"\n    )};\n  --button-hover-text: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-text\"\n    )};\n  --button-hover-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-background\"\n    )};\n\n  @include colour-background(\"background\");\n  @include colour-font(\"font-base\");\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      --link: #{map.get(colour.$colour-palette-default, \"link\")};\n      --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n    }\n  }\n\n  .tna-template--dark-theme & {\n    --link: #{map.get(colour.$colour-palette-default, \"link\")};\n    --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n  .tna-template--high-contrast-theme & {\n    @content;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-contrast: more) {\n      @content;\n    }\n  }\n}\n\n@mixin on-forced-colours {\n  @media (forced-colors: active) {\n    @content;\n  }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n  @include on-forced-colours {\n    @content;\n  }\n\n  @include on-high-contrast {\n    @content;\n  }\n}\n","@use \"sass:math\";\n@use \"colour\";\n@use \"../variables/typography\";\n\n@mixin relative-font-size($fontSizePx) {\n  font-size: #{math.div($fontSizePx, typography.$relative-1rem-px)}rem;\n}\n\n@mixin main-font-weight {\n  font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-bold {\n  font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n  font-family: typography.$main-font-family;\n  @if $bold {\n    @include main-font-weight-bold;\n  } @else {\n    @include main-font-weight;\n  }\n  font-optical-sizing: auto;\n  font-style: normal;\n  font-variation-settings: \"wdth\" 100;\n}\n\n@mixin heading-font {\n  font-family: typography.$heading-font-family;\n  font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n  font-family: typography.$detail-font-family;\n  @if $bold {\n    font-weight: typography.$detail-font-weight-bold;\n  } @else {\n    font-weight: typography.$detail-font-weight;\n  }\n  font-optical-sizing: auto;\n  font-style: normal;\n}\n\n@mixin detail-font-small {\n  @include detail-font;\n  @include relative-font-size(14);\n  text-transform: uppercase;\n  line-height: #{math.div(typography.$relative-1rem-px, 14)};\n}\n\n@mixin interacted-text-decoration {\n  text-decoration: underline;\n  text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n","@use \"sass:math\";\n\n$use-local-fonts: false !default;\n\n$relative-1rem-px: 16; // 16px is always 1rem\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: #{math.div($relative-1rem-px, $body-font-size-px) * 2} !default; // 1.77777\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font: \"Open Sans\" !default;\n$main-font-family: $main-font, sans-serif !default;\n$main-font-weight: 400 !default;\n$main-font-weight-bold: 700 !default;\n\n$heading-font-family: supria-sans-condensed, \"Arial Narrow\", sans-serif !default;\n$heading-font-weight: 500 !default;\n\n$detail-font-family: \"Roboto Mono\", monospace !default;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n"]}

package/nationalarchives/components/breadcrumbs/template.njk

@@ -2,7 +2,8 @@
 {%- if params.noCollapse -%}
   {%- set containerClasses = containerClasses.concat('tna-breadcrumbs--no-collapse') -%}
 {%- endif -%}
-<nav class="tna-breadcrumbs{{ ' ' + ( containerClasses | join(' ') ) if containerClasses.length else '' }}" data-module="tna-breadcrumbs" aria-label="Breadcrumb"{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+{%- set classes = containerClasses | join(' ') -%}
+<nav class="tna-breadcrumbs{% if classes %} {{ classes }}{% endif %}" data-module="tna-breadcrumbs" aria-label="Breadcrumb"{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <ol class="tna-breadcrumbs__list" {%- if params.structuredData %} itemscope itemtype="https://schema.org/BreadcrumbList"{% endif %}>
   {%- for item in params.items -%}
     <li class="tna-breadcrumbs__item" {%- if params.structuredData %} itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"{% endif %}>

package/nationalarchives/components/button/button-group.stories.js

@@ -0,0 +1,122 @@
+import Button from "./template.njk";
+
+export default {
+  title: "Components/Button group",
+};
+
+const Template = ({
+  text,
+  href,
+  title,
+  icon,
+  accent,
+  small,
+  plain,
+  iconOnly,
+  iconOnlyOnMobile,
+  rightAlignIcon,
+  buttonElement,
+  buttonType,
+  classes,
+  attributes,
+}) =>
+  Button({
+    params: {
+      text,
+      href,
+      title,
+      icon,
+      accent,
+      small,
+      plain,
+      iconOnly,
+      iconOnlyOnMobile,
+      rightAlignIcon,
+      buttonElement,
+      buttonType,
+      classes,
+      attributes,
+    },
+  });
+
+const GroupTemplate = ({ buttons }) =>
+  `<div class="tna-button-group">
+    ${buttons.map((button) => Template(button)).join("")}
+</div>`;
+
+export const Group = GroupTemplate.bind({});
+Group.args = {
+  buttons: [
+    {
+      text: "Standard",
+      href: "#",
+      classes: "tna-button--demo",
+    },
+    {
+      text: "Accent",
+      href: "#",
+      accent: true,
+      classes: "tna-button--demo",
+    },
+    {
+      text: "Icon",
+      href: "#",
+      icon: "phone",
+      classes: "tna-button--demo",
+    },
+    {
+      text: "Right Aligned Icon",
+      href: "#",
+      icon: "chevron-right",
+      rightAlignIcon: true,
+      classes: "tna-button--demo",
+    },
+    {
+      text: "Icon Only",
+      href: "#",
+      icon: "list",
+      iconOnly: true,
+      classes: "tna-button--demo",
+    },
+    {
+      text: "Icon Only On Mobile",
+      href: "#",
+      icon: "list",
+      iconOnlyOnMobile: true,
+      classes: "tna-button--demo",
+    },
+    {
+      text: "Plain",
+      plain: true,
+      classes: "tna-button--demo",
+    },
+    {
+      text: "Plain With Icon",
+      href: "#",
+      icon: "map-location-dot",
+      plain: true,
+      classes: "tna-button--demo",
+    },
+    {
+      text: "Button",
+      buttonElement: true,
+      classes: "tna-button--demo",
+    },
+  ],
+};
+
+const GroupOfSmallTemplate = ({ buttons }) =>
+  `<div class="tna-button-group">
+    ${buttons.map((button) => Template({ ...button, text: `Small ${button.text}`, small: true })).join("")}
+</div>`;
+
+export const GroupOfSmall = GroupOfSmallTemplate.bind({});
+GroupOfSmall.args = Group.args;
+
+const SmallGroupTemplate = ({ buttons }) =>
+  `<div class="tna-button-group tna-button-group--small">
+    ${buttons.map((button) => Template({ ...button, text: `Small ${button.text}` })).join("")}
+</div>`;
+
+export const SmallGroup = SmallGroupTemplate.bind({});
+SmallGroup.args = Group.args;