npm - @nationalarchives/frontend - Versions diffs - 0.1.41 → 0.1.43 - Mend

@nationalarchives/frontend 0.1.41 → 0.1.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (214) hide show

package/nationalarchives/components/radios/template.njk CHANGED Viewed

@@ -1,33 +1,26 @@
+{% from "nationalarchives/components/radios/radios.njk" import tnaRadiosElement %}
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
 {%- if params.inline -%}
   {%- set containerClasses = containerClasses.concat('tna-form__group--inline') -%}
 {%- endif -%}
 <div class="tna-form__group{% if params.error %} tna-form__group--error{% endif %} {{ containerClasses | join(' ') }}"{% for attribute, value in params.formGroupAttributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  <fieldset class="tna-form__fieldset"{%- if params.hint or params.error %} aria-describedby="{%- if params.hint -%}tna-form__{{ params.id }}-hint{%- endif %} {% if params.error -%}tna-form__{{ params.id }}-error{%- endif -%}"{%- endif %}>
+  <fieldset class="tna-form__fieldset"{%- if params.hint or params.error %} aria-describedby="{%- if params.hint -%}{{ params.id }}-hint{%- endif %} {% if params.error -%}{{ params.id }}-error{%- endif -%}"{%- endif %}>
     <legend class="tna-form__legend">
       <h{{ params.headingLevel }} class="tna-form__heading tna-form__heading--{{ params.headingSize or 'm' }}">
         {{ params.label }}
       </h{{ params.headingLevel }}>
     </legend>
     {%- if params.hint %}
-    <p id="tna-form__{{ params.id }}-hint" class="tna-form__hint">
+    <p id="{{ params.id }}-hint" class="tna-form__hint">
       {{ params.hint }}
     </p>
     {%- endif %}
     {%- if params.error %}
-    <p id="tna-form__{{ params.id }}-error" class="tna-form__error-message">
+    <p id="{{ params.id }}-error" class="tna-form__error-message">
       <span class="tna-!--visually-hidden">Error:</span> {{ params.error.text }}
     </p>
     {%- endif %}
-    <div class="tna-radios{% if params.small or params.inline %} tna-radios--small{% endif %}{% if params.inline %} tna-radios--inline{% endif %}">
-      {%- for item in params.items %}
-      <div class="tna-radios__item">
-        <input type="radio" id="tna-form__{{ params.id }}-{{ item.value }}" value="{{ item.value }}" name="{{ params.name }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% if params.selected and item.value === params.selected %} checked{% endif %}>
-        <label for="tna-form__{{ params.id }}-{{ item.value }}" class="tna-radios__item-label">
-          {{ item.text }}
-        </label>
-      </div>
-      {%- endfor %}
-    </div>
+    {{ tnaRadiosElement(params) }}
   </fieldset>
 </div>

package/nationalarchives/components/search-field/analytics.js ADDED Viewed

@@ -0,0 +1,22 @@
+import { valueGetters } from "../../lib/analytics-helpers.mjs";
+export default [
+  {
+    scope: ".tna-search-field",
+    areaName: "search-field",
+    events: [
+      {
+        eventName: "blurred",
+        targetElement: ".tna-search-field__input",
+        on: "blur",
+        data: {
+          // eslint-disable-next-line no-unused-vars
+          value: valueGetters.value,
+          // eslint-disable-next-line no-unused-vars
+          group: ($el, $scope, event) =>
+            $scope.querySelector(".tna-form__heading")?.innerText,
+        },
+      },
+    ],
+  },
+];

package/nationalarchives/components/search-field/fixtures.json CHANGED Viewed

@@ -10,8 +10,7 @@
         "id": "search1",
         "name": "q"
       },
-      "html": "<div class=\"tna-search-field \"><div class=\"tna-form__group\"><div class=\"tna-form__group-contents\"><h1 class=\"tna-form__heading tna-form__heading--l\"><label class=\"tna-form__label\" for=\"tna-form__search1\">Catalogue search results</label></h1></div><div class=\"tna-search-field__fields\"><input type=\"search\" id=\"tna-form__search1\" class=\"tna-search-field__input \" name=\"q\" value=\"\" spellcheck=\"false\"><button type=\"submit\" class=\"tna-button tna-search-field__button\">Search<i class=\"fa-solid fa-fw fa-arrow-right tna-!--hide-on-tiny\" aria-hidden=\"true\"></i></button></div></div></div>",
-      "hidden": false
+      "html": "<div class=\"tna-search-field \"><div class=\"tna-form__group\"><div class=\"tna-form__group-contents\"><h1 class=\"tna-form__heading tna-form__heading--l\"><label class=\"tna-form__label\" for=\"search1\">Catalogue search results</label></h1></div><div class=\"tna-search-field__fields\"><input type=\"search\" id=\"search1\" class=\"tna-search-field__input \" name=\"q\" value=\"\" spellcheck=\"false\"><button type=\"submit\" class=\"tna-button tna-search-field__button\">Search<i class=\"fa-solid fa-fw fa-arrow-right tna-!--hide-on-tiny\" aria-hidden=\"true\"></i></button></div></div></div>"
     },
     {
       "name": "search field with a preselected value",
@@ -23,8 +22,7 @@
         "name": "q",
         "value": "badgers"
       },
-      "html": "<div class=\"tna-search-field \"><div class=\"tna-form__group\"><div class=\"tna-form__group-contents\"><h1 class=\"tna-form__heading tna-form__heading--l\"><label class=\"tna-form__label\" for=\"tna-form__search1\">Catalogue search results</label></h1></div><div class=\"tna-search-field__fields\"><input type=\"search\" id=\"tna-form__search1\" class=\"tna-search-field__input \" name=\"q\" value=\"badgers\" spellcheck=\"false\"><button type=\"submit\" class=\"tna-button tna-search-field__button\">Search<i class=\"fa-solid fa-fw fa-arrow-right tna-!--hide-on-tiny\" aria-hidden=\"true\"></i></button></div></div></div>",
-      "hidden": false
+      "html": "<div class=\"tna-search-field \"><div class=\"tna-form__group\"><div class=\"tna-form__group-contents\"><h1 class=\"tna-form__heading tna-form__heading--l\"><label class=\"tna-form__label\" for=\"search1\">Catalogue search results</label></h1></div><div class=\"tna-search-field__fields\"><input type=\"search\" id=\"search1\" class=\"tna-search-field__input \" name=\"q\" value=\"badgers\" spellcheck=\"false\"><button type=\"submit\" class=\"tna-button tna-search-field__button\">Search<i class=\"fa-solid fa-fw fa-arrow-right tna-!--hide-on-tiny\" aria-hidden=\"true\"></i></button></div></div></div>"
     },
     {
       "name": "search field with a hint",
@@ -36,8 +34,7 @@
         "name": "q",
         "hint": "Try searching for something interesting"
       },
-      "html": "<div class=\"tna-search-field \"><div class=\"tna-form__group\"><div class=\"tna-form__group-contents\"><h1 class=\"tna-form__heading tna-form__heading--l\"><label class=\"tna-form__label\" for=\"tna-form__search1\">Catalogue search results</label></h1><p id=\"tna-form__search1-hint\" class=\"tna-form__hint\">Try searching for something interesting</p></div><div class=\"tna-search-field__fields\"><input type=\"search\" id=\"tna-form__search1\" class=\"tna-search-field__input \" name=\"q\" value=\"\" spellcheck=\"false\" aria-describedby=\"tna-form__search1-hint\"><button type=\"submit\" class=\"tna-button tna-search-field__button\">Search<i class=\"fa-solid fa-fw fa-arrow-right tna-!--hide-on-tiny\" aria-hidden=\"true\"></i></button></div></div></div>",
-      "hidden": false
+      "html": "<div class=\"tna-search-field \"><div class=\"tna-form__group\"><div class=\"tna-form__group-contents\"><h1 class=\"tna-form__heading tna-form__heading--l\"><label class=\"tna-form__label\" for=\"search1\">Catalogue search results</label></h1><p id=\"search1-hint\" class=\"tna-form__hint\">Try searching for something interesting</p></div><div class=\"tna-search-field__fields\"><input type=\"search\" id=\"search1\" class=\"tna-search-field__input \" name=\"q\" value=\"\" spellcheck=\"false\" aria-describedby=\"search1-hint\"><button type=\"submit\" class=\"tna-button tna-search-field__button\">Search<i class=\"fa-solid fa-fw fa-arrow-right tna-!--hide-on-tiny\" aria-hidden=\"true\"></i></button></div></div></div>"
     }
   ]
 }

package/nationalarchives/components/search-field/search-field.css CHANGED Viewed

	@@ -1 +1 @@
1	- .tna-search-field__input{--page-background: #f4f4f4;--background-tint: #e4e4e4;--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(0 0 0/0.58);--icon-light: rgb(52 51 56/0.45);--link: #0062a8;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--~~form-error: #c00;--~~button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}@media(prefers-contrast: more){.tna-search-field__input{--page-background: rgb(255, 255, 255);--background-tint: #e4e4e4;--font-base: rgb(0, 0, 0);--font-dark: rgb(0, 0, 0);--font-light: rgb(0, 0, 0);--icon-light: rgb(0 0 0/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(0, 0, 0);--keyline-dark: rgb(0, 0, 0);--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--~~form-error: #c00;--~~button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(0, 0, 0);--contrast-font-dark: rgb(0, 0, 0);--contrast-font-light: rgb(0, 0, 0);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(0, 0, 0);--contrast-keyline-dark: rgb(0, 0, 0);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(0, 0, 0);--contrast-button-hover-text: rgb(0, 0, 0);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}}.tna-template--high-contrast-theme .tna-search-field__input{--page-background: rgb(255, 255, 255);--background-tint: #e4e4e4;--font-base: rgb(0, 0, 0);--font-dark: rgb(0, 0, 0);--font-light: rgb(0, 0, 0);--icon-light: rgb(0 0 0/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(0, 0, 0);--keyline-dark: rgb(0, 0, 0);--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--~~form-error: #c00;--~~button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(0, 0, 0);--contrast-font-dark: rgb(0, 0, 0);--contrast-font-light: rgb(0, 0, 0);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(0, 0, 0);--contrast-keyline-dark: rgb(0, 0, 0);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(0, 0, 0);--contrast-button-hover-text: rgb(0, 0, 0);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-search-field__fields{display:flex;align-self:stretch}.tna-search-field__input{min-width:8rem;padding:0 .375rem;display:block;flex:1;color:#000;color:var(--input-foreground);font-size:inherit;line-height:2rem;background-color:#fff;background-color:var(--input-background);border-color:#000;border-color:var(--input-border);border-width:~~1px~~ 0 ~~1px~~ ~~1px~~;border-radius:0}.tna-template--dark-theme .tna-search-field__input,.tna-background-contrast .tna-search-field__input{margin-right:~~1px~~;border-width:0}.tna-template--dark-theme .tna-background-accent .tna-search-field__input,.tna-template--dark-theme .tna-background-accent-light .tna-search-field__input,.tna-template--light-theme.tna-template--high-contrast-theme .tna-background-contrast .tna-search-field__input{margin-right:0;border-width:~~1px~~}/# sourceMappingURL=search-field.css.map /
1	+ .tna-search-field__input{--page-background: #f4f4f4;--background-tint: #e4e4e4;--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(0 0 0/0.58);--icon-light: rgb(52 51 56/0.45);--link: #0062a8;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}@media(prefers-contrast: more){.tna-search-field__input{--page-background: rgb(255, 255, 255);--background-tint: #e4e4e4;--font-base: rgb(0, 0, 0);--font-dark: rgb(0, 0, 0);--font-light: rgb(0, 0, 0);--icon-light: rgb(0 0 0/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(0, 0, 0);--keyline-dark: rgb(0, 0, 0);--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(0, 0, 0);--contrast-font-dark: rgb(0, 0, 0);--contrast-font-light: rgb(0, 0, 0);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(0, 0, 0);--contrast-keyline-dark: rgb(0, 0, 0);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(0, 0, 0);--contrast-button-hover-text: rgb(0, 0, 0);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}}.tna-template--high-contrast-theme .tna-search-field__input{--page-background: rgb(255, 255, 255);--background-tint: #e4e4e4;--font-base: rgb(0, 0, 0);--font-dark: rgb(0, 0, 0);--font-light: rgb(0, 0, 0);--icon-light: rgb(0 0 0/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(0, 0, 0);--keyline-dark: rgb(0, 0, 0);--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(0, 0, 0);--contrast-font-dark: rgb(0, 0, 0);--contrast-font-light: rgb(0, 0, 0);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(0, 0, 0);--contrast-keyline-dark: rgb(0, 0, 0);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(0, 0, 0);--contrast-button-hover-text: rgb(0, 0, 0);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-search-field{margin-top:2rem}.tna-search-field:first-child{margin-top:0}.tna-search-field__fields{display:flex;align-self:stretch}.tna-search-field__input{min-width:8rem;padding:0 .375rem;display:block;flex:1;color:#000;color:var(--input-foreground);font-size:inherit;line-height:2rem;background-color:#fff;background-color:var(--input-background);border-color:#000;border-color:var(--input-border);border-width:2px 0 2px 2px;border-style:solid;border-radius:.1px}.tna-template--dark-theme .tna-search-field__input,.tna-background-contrast .tna-search-field__input{margin-right:2px;border-width:0}.tna-template--dark-theme .tna-background-accent .tna-search-field__input,.tna-template--dark-theme .tna-background-accent-light .tna-search-field__input,.tna-template--light-theme.tna-template--high-contrast-theme .tna-background-contrast .tna-search-field__input{margin-right:0;border-width:2px}/# sourceMappingURL=search-field.css.map /

package/nationalarchives/components/search-field/search-field.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/search-field/search-field.scss","../../../../src/nationalarchives/variables/_forms.scss"],"names":[],"mappings":"AAwJA,yBA9II,4hDAiJF,+BAHF,yBAlII,+9CAyIF,4DAzIE,89CClBF,0BACE,aACA,mBAGF,yBACE,eACA,kBAEA,cACA,ODkEF,WACA,8BC/DE,kBACA,iBDkEF,sBAEA,yCAsCI,kBAEA,iCCvGF,2BAEA,gBAEA,qGAEE,aC9BoB,IDgCpB,eAGF,yQAKE,eAEA,aC1CoB","file":"search-field.css","sourcesContent":["@use \"sass:map\";\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() {\n @each $name, $value in colour.$colour-palette-default {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-dark() {\n @each $name, $value in colour.$colour-palette-dark {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-high-contrast() {\n @each $name, $value in colour.$colour-palette-high-contrast {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark() {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n --#{$name}: #{$value};\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;\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast;\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast;\n }\n}\n\n@mixin light {\n @extend %light;\n}\n\n%dark {\n @include colour-css-vars-dark;\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast-dark;\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast-dark;\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 \"../../variables/forms\";\n@use \"../../tools/colour\";\n\n.tna-search-field {\n &__fields {\n display: flex;\n align-self: stretch;\n }\n\n &__input {\n min-width: 8rem;\n padding: 0 0.375rem;\n\n display: block;\n flex: 1;\n\n @include colour.light;\n @include colour.colour-font(\"input-foreground\");\n font-size: inherit;\n line-height: 2rem;\n\n @include colour.colour-background(\"input-background\");\n\n @include colour.colour-border(\"input-border\");\n border-width: forms.$form-field-border-width 0\n forms.$form-field-border-width forms.$form-field-border-width;\n border-radius: 0;\n\n .tna-template--dark-theme &,\n .tna-background-contrast & {\n margin-right: forms.$form-field-border-width;\n\n border-width: 0;\n }\n\n .tna-template--dark-theme .tna-background-accent &,\n .tna-template--dark-theme .tna-background-accent-light &,\n .tna-template--light-theme.tna-template--high-contrast-theme\n .tna-background-contrast\n & {\n margin-right: 0;\n\n border-width: forms.$form-field-border-width;\n }\n }\n\n &__button {\n }\n}\n","$form-field-border-width: 1px !default;\n$checkbox-checkmark-width: 0.1875rem !default;\n"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/search-field/search-field.scss","../../../../src/nationalarchives/variables/_forms.scss"],"names":[],"mappings":"AAyLA,yBA7KM,ygDAgLJ,+BAHF,yBA7JM,48CAoKJ,4DApKI,28CCxBN,kBACE,gBAEA,8BACE,aCDF,0BACE,aACA,mBAGF,yBACE,eACA,kBAEA,cACA,OFwEF,WACA,8BErEE,kBACA,iBFwEF,sBAEA,yCA0CI,kBAEA,iCEjHF,2BAEA,mBACA,mBAEA,qGAGE,aCnCoB,IDqCpB,eAGF,yQAKE,eAEA,aC/CoB","file":"search-field.css","sourcesContent":["@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:map\";\n@use \"../variables/spacing\";\n@use \"../tools/media\";\n\n%space-above {\n margin-top: 2rem;\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above {\n @extend %space-above;\n}\n\n@function space($size) {\n @return map.get(spacing.$spacing, $size);\n}\n\n@function space-mobile($size) {\n @return map.get(spacing.$spacing-mobile, $size);\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n @each $property in margin, padding {\n @each $direction in top, bottom {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n } @else {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{$amount} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n }\n }\n }\n }\n }\n\n @include media.on-mobile {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing-mobile {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{$amount} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"../../variables/forms\";\n@use \"../../tools/colour\";\n@use \"../../tools/spacing\";\n\n.tna-search-field {\n @include spacing.space-above;\n\n &__fields {\n display: flex;\n align-self: stretch;\n }\n\n &__input {\n min-width: 8rem;\n padding: 0 0.375rem;\n\n display: block;\n flex: 1;\n\n @include colour.light;\n @include colour.colour-font(\"input-foreground\");\n font-size: inherit;\n line-height: 2rem;\n\n @include colour.colour-background(\"input-background\");\n\n @include colour.colour-border(\"input-border\");\n border-width: forms.$form-field-border-width 0\n forms.$form-field-border-width forms.$form-field-border-width;\n border-style: solid;\n border-radius: 0.1px;\n\n .tna-template--dark-theme &,\n .tna-background-contrast &/,\n .tna-background-accent &/ {\n margin-right: forms.$form-field-border-width;\n\n border-width: 0;\n }\n\n .tna-template--dark-theme .tna-background-accent &,\n .tna-template--dark-theme .tna-background-accent-light &,\n .tna-template--light-theme.tna-template--high-contrast-theme\n .tna-background-contrast\n & {\n margin-right: 0;\n\n border-width: forms.$form-field-border-width;\n }\n }\n\n &__button {\n }\n}\n","$form-field-border-width: 2px !default;\n$checkbox-checkmark-width: 0.1875rem !default;\n"]}

package/nationalarchives/components/search-field/search-field.scss CHANGED Viewed

@@ -1,7 +1,10 @@
 @use "../../variables/forms";
 @use "../../tools/colour";
+@use "../../tools/spacing";
 .tna-search-field {
+  @include spacing.space-above;
   &__fields {
     display: flex;
     align-self: stretch;
@@ -24,10 +27,12 @@
     @include colour.colour-border("input-border");
     border-width: forms.$form-field-border-width 0
       forms.$form-field-border-width forms.$form-field-border-width;
-    border-radius: 0;
+    border-style: solid;
+    border-radius: 0.1px;
     .tna-template--dark-theme &,
-    .tna-background-contrast & {
+    .tna-background-contrast &/*,
+    .tna-background-accent &*/ {
       margin-right: forms.$form-field-border-width;
       border-width: 0;

package/nationalarchives/components/search-field/template.njk CHANGED Viewed

@@ -4,19 +4,19 @@
   <div class="tna-form__group{% if params.error %} tna-form__group--error{% endif %}">
     <div class="tna-form__group-contents">
       <h{{ params.headingLevel }} class="tna-form__heading tna-form__heading--{{ params.headingSize or 'm' }}">
-        <label class="tna-form__label" for="tna-form__{{ params.id }}">
+        <label class="tna-form__label" for="{{ params.id }}">
           {{ params.label }}
         </label>
       </h{{ params.headingLevel }}>
       {%- if params.hint %}
-      <p id="tna-form__{{ params.id }}-hint" class="tna-form__hint">
+      <p id="{{ params.id }}-hint" class="tna-form__hint">
         {{ params.hint }}
       </p>
       {%- endif %}
     </div>
     <div class="tna-search-field__fields">
-      <input type="search" id="tna-form__{{ params.id }}" class="tna-search-field__input {{ inputClasses | join(' ') }}" name="{{ params.name }}" value="{{ params.value }}" spellcheck="{{ params.spellcheck if params.spellcheck else false }}"
-      {%- if params.hint %} aria-describedby="tna-form__{{ params.id }}-hint"{% endif %}
+      <input type="search" id="{{ params.id }}" class="tna-search-field__input {{ inputClasses | join(' ') }}" name="{{ params.name }}" value="{{ params.value }}" spellcheck="{{ params.spellcheck if params.spellcheck else false }}"
+      {%- if params.hint %} aria-describedby="{{ params.id }}-hint"{% endif %}
       {%- if params.maxLength %} maxlength="{{ params.maxLength }}"{% endif %}
       {%- if params.autofill %} autofill="{{ params.autofill }}"{% endif %}
       {%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}

package/nationalarchives/components/search-filters/_index.scss ADDED Viewed

	@@ -0,0 +1 @@
1	+ @use "search-filters";

package/nationalarchives/components/search-filters/fixtures.json ADDED Viewed

@@ -0,0 +1,16 @@
+{
+  "component": "search-filters",
+  "fixtures": [
+    {
+      "name": "plain search filters",
+      "options": {
+        "title": "Filters",
+        "rootHeadingLevel": 2,
+        "formId": "test-form",
+        "items": []
+      },
+      "html": "<div class=\"tna-search-filters \" data-module=\"tna-search-filters\"><h2 class=\"tna-heading-m tna-search-filters__title\">Filters</h2><div class=\"tna-search-filters__footer\"><div class=\"tna-button-group tna-button-group--small\"><button class=\"tna-button tna-search-filters__update\" type=\"submit\" form=\"test-form\">Update</button><a href=\"#\" class=\"tna-button tna-button--plain\">Clear all filters</a></div></div></div>",
+      "hidden": false
+    }
+  ]
+}

package/nationalarchives/components/search-filters/macro-options.json ADDED Viewed

@@ -0,0 +1,39 @@
+[
+  {
+    "name": "title",
+    "type": "string",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "rootHeadingLevel",
+    "type": "string",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "formId",
+    "type": "string",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "items",
+    "type": "array",
+    "required": true,
+    "description": "TODO",
+    "params": []
+  },
+  {
+    "name": "classes",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the search filters."
+  },
+  {
+    "name": "attributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the search filters."
+  }
+]

package/nationalarchives/components/search-filters/macro.njk ADDED Viewed

@@ -0,0 +1,3 @@
+{% macro tnaSearchFilters(params) %}
+  {%- include "nationalarchives/components/search-filters/template.njk" -%}
+{% endmacro %}

package/nationalarchives/components/search-filters/search-filters.css ADDED Viewed

@@ -0,0 +1 @@

+ .tna-search-filters{margin-top:2rem}.tna-search-filters:first-child{margin-top:0}.tna-search-filters__update{display:block}.tna-search-filters .tna-heading-s{margin:0;padding:0}.tna-search-filters__fieldset{border:none}.tna-search-filters__legend{width:100%}.tna-search-filters__heading-inner,.tna-search-filters__item-toggle{padding:.5rem .75rem;border:1px rgb(38 38 42/0.25) solid;border:1px var(--keyline) solid;border-bottom-width:0}.tna-search-filters__heading-inner{margin-top:1rem;padding:.5rem .75rem}.tna-search-filters__item-toggle{width:100%;margin:0;padding-right:2.5rem;display:block;position:relative;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;text-align:inherit;background:none;cursor:pointer}.tna-search-filters__item-toggle::before{width:0;height:0;position:absolute;right:.5rem;top:calc(50% - 0.4330127019rem);border:0.8660254038rem #343338 solid;border:0.8660254038rem var(--font-base) solid;border-right:.5rem rgba(0,0,0,0) solid;border-bottom-width:0;border-left:.5rem rgba(0,0,0,0) solid;content:""}.tna-search-filters__item-toggle:hover,.tna-search-filters__item-toggle:active{text-decoration:underline;text-decoration-thickness:3.5px;background:none}.tna-search-filters__item-toggle[aria-expanded=true]::before{border-top-width:0;border-bottom-width:0.8660254038rem}.tna-search-filters__item-toggle-info{display:block;font-weight:400;font-size:0.875rem}.tna-search-filters__item{padding:.75rem;background-color:#e4e4e4;background-color:var(--background-tint);border:1px rgb(38 38 42/0.25) solid;border:1px var(--keyline) solid;border-width:0 1px 1px}.tna-search-filters__hint{margin-bottom:.5rem;font-size:1rem;color:rgb(0 0 0/0.58);color:var(--font-light)}.tna-search-filters__inline-fields{display:flex;flex-wrap:wrap;gap:.5rem 2rem}.tna-search-filters__label{display:block}.tna-search-filters__footer{padding:.75rem;display:none;border:1px rgb(38 38 42/0.25) solid;border:1px var(--keyline) solid}.tna-search-filters--js-enabled .tna-search-filters__title{margin-bottom:1rem}.tna-search-filters--js-enabled .tna-search-filters__footer{display:block}.tna-search-filters--js-enabled .tna-search-filters__item{border-bottom:none}.tna-search-filters--js-enabled .tna-search-filters__update-item{display:none}.tna-search-filters__fieldset[data-type=multiple] .tna-search-filters__item{max-height:15rem;overflow:auto}/*# sourceMappingURL=search-filters.css.map */

package/nationalarchives/components/search-filters/search-filters.css.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/search-filters/search-filters.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"AAIA,oBACE,gBAEA,gCACE,aCKF,4BACE,cAGF,mCACE,SACA,UAGF,8BACE,YAGF,4BACE,WAGF,oEAEE,qBCoGE,oCAIA,gCDrGF,sBAGF,mCACE,gBACA,qBAGF,iCACE,WACA,SACA,qBAEA,cAEA,kBAEA,cACA,oBACA,kBACA,oBACA,oBACA,mBAEA,gBAEA,eAEA,yCACE,QACA,SAEA,kBACA,YACA,gCC+DA,qCAIA,8CD7DA,uCACA,sBACA,sCAEA,WAGF,+EE9BF,0BACA,0BC3CsC,MH4ElC,gBAIA,6DACE,mBACA,oCAQN,sCACE,cE5FF,YCKiB,IDTjB,mBFsGA,0BACE,eCdF,yBAEA,wCAoCI,oCAIA,gCDvBF,uBAGF,0BACE,oBEhHF,eDoFA,sBACA,wBDiCA,mCACE,aACA,eACA,eAGF,2BACE,cAGF,4BACE,eAEA,aCJE,oCAIA,gCDKJ,2DACE,mBAGF,4DACE,cAGF,0DACE,mBAGF,iEACE,aAGF,4EACE,iBAEA","file":"search-filters.css","sourcesContent":["@use \"sass:map\";\n@use \"../variables/spacing\";\n@use \"../tools/media\";\n\n%space-above {\n margin-top: 2rem;\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above {\n @extend %space-above;\n}\n\n@function space($size) {\n @return map.get(spacing.$spacing, $size);\n}\n\n@function space-mobile($size) {\n @return map.get(spacing.$spacing-mobile, $size);\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n @each $property in margin, padding {\n @each $direction in top, bottom {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n } @else {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{$amount} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n }\n }\n }\n }\n }\n\n @include media.on-mobile {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing-mobile {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{$amount} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"sass:math\";\n\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-search-filters {\n @include spacing.space-above;\n\n &__title {\n }\n\n &__update {\n display: block;\n }\n\n .tna-heading-s {\n margin: 0;\n padding: 0;\n }\n\n &__fieldset {\n border: none;\n }\n\n &__legend {\n width: 100%;\n }\n\n &__heading-inner,\n &__item-toggle {\n padding: 0.5rem 0.75rem;\n\n @include colour.colour-border(\"keyline\", 1px, solid);\n border-bottom-width: 0;\n }\n\n &__heading-inner {\n margin-top: 1rem;\n padding: 0.5rem 0.75rem;\n }\n\n &__item-toggle {\n width: 100%;\n margin: 0;\n padding-right: 2.5rem;\n\n display: block;\n\n position: relative;\n\n color: inherit;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n text-align: inherit;\n\n background: none;\n\n cursor: pointer;\n\n &::before {\n width: 0;\n height: 0;\n\n position: absolute;\n right: 0.5rem;\n top: calc(50% - #{math.div(math.sqrt(3), 4)}rem);\n\n @include colour.colour-border(\n \"font-base\",\n #{math.div(math.sqrt(3), 2)}rem\n );\n border-right: 0.5rem transparent solid;\n border-bottom-width: 0;\n border-left: 0.5rem transparent solid;\n\n content: \"\";\n }\n\n &:hover,\n &:active {\n @include typography.interacted-text-decoration;\n\n background: none;\n }\n\n &[aria-expanded=\"true\"] {\n &::before {\n border-top-width: 0;\n border-bottom-width: #{math.div(math.sqrt(3), 2)}rem;\n }\n }\n }\n\n &__item-toggle-label {\n }\n\n &__item-toggle-info {\n display: block;\n\n @include typography.main-font-weight;\n @include typography.relative-font-size(14);\n }\n\n &__item {\n padding: 0.75rem;\n\n @include colour.colour-background(\"background-tint\");\n\n @include colour.colour-border(\"keyline\", 1px);\n border-width: 0 1px 1px;\n }\n\n &__hint {\n margin-bottom: 0.5rem;\n\n @include typography.relative-font-size(16);\n @include colour.colour-font(\"font-light\");\n }\n\n &__inline-fields {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem 2rem;\n }\n\n &__label {\n display: block;\n }\n\n &__footer {\n padding: 0.75rem;\n\n display: none;\n\n @include colour.colour-border(\"keyline\", 1px);\n }\n\n &--js-enabled &__title {\n margin-bottom: 1rem;\n }\n\n &--js-enabled &__footer {\n display: block;\n }\n\n &--js-enabled &__item {\n border-bottom: none;\n }\n\n &--js-enabled &__update-item {\n display: none;\n }\n\n &__fieldset[data-type=\"multiple\"] &__item {\n max-height: 15rem;\n\n overflow: auto;\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/search-filters/search-filters.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("TNAFrontend",[],t):"object"==typeof exports?exports.TNAFrontend=t():e.TNAFrontend=t()}(self,(()=>(()=>{"use strict";var e={d:(t,r)=>{for(var o in r)e.o(r,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:r[o]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};function r(e){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r(e)}function o(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable\|\|!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,n(o.key),o)}}function n(e){var t=function(e,t){if("object"!=r(e)\|\|!e)return e;var o=e[Symbol.toPrimitive];if(void 0!==o){var n=o.call(e,"string");if("object"!=r(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==r(t)?t:String(t)}e.r(t),e.d(t,{SearchFilters:()=>i});var i=function(){function e(t){var r=this;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.$module=t,this.$module&&(this.$module.classList.add("tna-search-filters--js-enabled"),Array.from(this.$module.querySelectorAll(".tna-search-filters__fieldset")).forEach((function(e){var t=e.querySelector(".tna-search-filters__item-toggle"),o=e.querySelector(".tna-search-filters__heading-inner"),n=e.querySelector(".tna-search-filters__item");t&&o&&n&&(t.removeAttribute("hidden"),o.remove(),r.syncItem(t,n),t.addEventListener("click",(function(){r.toggleItem(t,n)})))})))}var t,r;return t=e,(r=[{key:"toggleItem",value:function(e,t){e.setAttribute("aria-expanded","false"==e.getAttribute("aria-expanded")),this.syncItem(e,t)}},{key:"syncItem",value:function(e,t){"true"==e.getAttribute("aria-expanded")?t.removeAttribute("hidden"):t.setAttribute("hidden",!0)}}])&&o(t.prototype,r),Object.defineProperty(t,"prototype",{writable:!1}),e}();return t})()));
2	+ //# sourceMappingURL=search-filters.js.map

package/nationalarchives/components/search-filters/search-filters.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"components/search-filters/search-filters.js","mappings":"CAAA,SAA2CA,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,IACQ,mBAAXG,QAAyBA,OAAOC,IAC9CD,OAAO,cAAe,GAAIH,GACA,iBAAZC,QACdA,QAAqB,YAAID,IAEzBD,EAAkB,YAAIC,GACvB,CATD,CASGK,MAAM,I,mBCRT,IAAIC,EAAsB,CCA1BA,EAAwB,CAACL,EAASM,KACjC,IAAI,IAAIC,KAAOD,EACXD,EAAoBG,EAAEF,EAAYC,KAASF,EAAoBG,EAAER,EAASO,IAC5EE,OAAOC,eAAeV,EAASO,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDF,EAAwB,CAACQ,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,GCClFT,EAAyBL,IACH,oBAAXkB,QAA0BA,OAAOC,aAC1CV,OAAOC,eAAeV,EAASkB,OAAOC,YAAa,CAAEC,MAAO,WAE7DX,OAAOC,eAAeV,EAAS,aAAc,CAAEoB,OAAO,GAAO,G,ktBCLvD,IAAMC,EAAa,WACxB,SAAAA,EAAYC,GAAS,IAAAC,EAAA,M,4FAAAC,CAAA,KAAAH,GACnBI,KAAKH,QAAUA,EAEVG,KAAKH,UAIVG,KAAKH,QAAQI,UAAUC,IAAI,kCAE3BC,MAAMC,KACJJ,KAAKH,QAAQQ,iBAAiB,kCAC9BC,SAAQ,SAACC,GAET,IAAMC,EAAUD,EAAUE,cACxB,oCAEIC,EAAgBH,EAAUE,cAC9B,sCAEIE,EAAQJ,EAAUE,cAAc,6BAEjCD,GAAYE,GAAkBC,IAInCH,EAAQI,gBAAgB,UACxBF,EAAcG,SAEdf,EAAKgB,SAASN,EAASG,GAEvBH,EAAQO,iBAAiB,SAAS,WAChCjB,EAAKkB,WAAWR,EAASG,EAC3B,IAeF,IACF,C,QAgBC,O,EAhBAf,G,EAAA,EAAAd,IAAA,aAAAa,MAED,SAAWa,EAASG,GAClBH,EAAQS,aACN,gBACyC,SAAzCT,EAAQU,aAAa,kBAEvBlB,KAAKc,SAASN,EAASG,EACzB,GAAC,CAAA7B,IAAA,WAAAa,MAED,SAASa,EAASG,GAC6B,QAAzCH,EAAQU,aAAa,iBACvBP,EAAMC,gBAAgB,UAEtBD,EAAMM,aAAa,UAAU,EAEjC,M,oEAACrB,CAAA,CAjEuB,G","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/search-filters/search-filters.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class SearchFilters {\n constructor($module) {\n this.$module = $module;\n\n if (!this.$module) {\n return;\n }\n\n this.$module.classList.add(\"tna-search-filters--js-enabled\");\n\n Array.from(\n this.$module.querySelectorAll(\".tna-search-filters__fieldset\"),\n ).forEach(($fieldset) => {\n // const type = $fieldset.dataset.type;\n const $toggle = $fieldset.querySelector(\n \".tna-search-filters__item-toggle\",\n );\n const $headingInner = $fieldset.querySelector(\n \".tna-search-filters__heading-inner\",\n );\n const $item = $fieldset.querySelector(\".tna-search-filters__item\");\n\n if (!$toggle || !$headingInner || !$item) {\n return;\n }\n\n $toggle.removeAttribute(\"hidden\");\n $headingInner.remove();\n\n this.syncItem($toggle, $item);\n\n $toggle.addEventListener(\"click\", () => {\n this.toggleItem($toggle, $item);\n });\n\n // if (type === \"multiple\") {\n // const $count = $toggle.querySelector(\n // \".tna-search-filters__item-toggle-info\",\n // );\n // if ($count) {\n // $item.addEventListener(\"change\", () => {\n // const selected = Array.from(\n // $item.querySelectorAll('input[type=\"checkbox\"]:checked'),\n // ).length;\n // $count.innerText = selected ? `(${selected} selected)` : \"\";\n // });\n // }\n // }\n });\n }\n\n toggleItem($toggle, $item) {\n $toggle.setAttribute(\n \"aria-expanded\",\n $toggle.getAttribute(\"aria-expanded\") == \"false\",\n );\n this.syncItem($toggle, $item);\n }\n\n syncItem($toggle, $item) {\n if ($toggle.getAttribute(\"aria-expanded\") == \"true\") {\n $item.removeAttribute(\"hidden\");\n } else {\n $item.setAttribute(\"hidden\", true);\n }\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","SearchFilters","$module","_this","_classCallCheck","this","classList","add","Array","from","querySelectorAll","forEach","$fieldset","$toggle","querySelector","$headingInner","$item","removeAttribute","remove","syncItem","addEventListener","toggleItem","setAttribute","getAttribute"],"sourceRoot":""}

package/nationalarchives/components/search-filters/search-filters.mjs ADDED Viewed

@@ -0,0 +1,67 @@
+export class SearchFilters {
+  constructor($module) {
+    this.$module = $module;
+    if (!this.$module) {
+      return;
+    }
+    this.$module.classList.add("tna-search-filters--js-enabled");
+    Array.from(
+      this.$module.querySelectorAll(".tna-search-filters__fieldset"),
+    ).forEach(($fieldset) => {
+      // const type = $fieldset.dataset.type;
+      const $toggle = $fieldset.querySelector(
+        ".tna-search-filters__item-toggle",
+      );
+      const $headingInner = $fieldset.querySelector(
+        ".tna-search-filters__heading-inner",
+      );
+      const $item = $fieldset.querySelector(".tna-search-filters__item");
+      if (!$toggle || !$headingInner || !$item) {
+        return;
+      }
+      $toggle.removeAttribute("hidden");
+      $headingInner.remove();
+      this.syncItem($toggle, $item);
+      $toggle.addEventListener("click", () => {
+        this.toggleItem($toggle, $item);
+      });
+      // if (type === "multiple") {
+      //   const $count = $toggle.querySelector(
+      //     ".tna-search-filters__item-toggle-info",
+      //   );
+      //   if ($count) {
+      //     $item.addEventListener("change", () => {
+      //       const selected = Array.from(
+      //         $item.querySelectorAll('input[type="checkbox"]:checked'),
+      //       ).length;
+      //       $count.innerText = selected ? `(${selected} selected)` : "";
+      //     });
+      //   }
+      // }
+    });
+  }
+  toggleItem($toggle, $item) {
+    $toggle.setAttribute(
+      "aria-expanded",
+      $toggle.getAttribute("aria-expanded") == "false",
+    );
+    this.syncItem($toggle, $item);
+  }
+  syncItem($toggle, $item) {
+    if ($toggle.getAttribute("aria-expanded") == "true") {
+      $item.removeAttribute("hidden");
+    } else {
+      $item.setAttribute("hidden", true);
+    }
+  }
+}