@nationalarchives/frontend 0.6.0 → 0.7.0

package/nationalarchives/components/text-input/text-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/text-input/text-input.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,usBCLvD,IAAMC,EAAS,WA+BnB,O,EA9BD,SAAAA,EAAYC,GAAS,IAAAC,EAAA,M,4FAAAC,CAAA,KAAAH,GACnBI,KAAKH,QAAUA,EACfG,KAAKC,OAASJ,GAAWA,EAAQK,cAAc,mBAE1CF,KAAKH,SAAYG,KAAKC,QAIc,aAArCD,KAAKC,OAAOE,aAAa,UAC3BH,KAAKI,kBAAoBC,SAASC,cAAc,OAChDN,KAAKI,kBAAkBG,UAAUC,IAAI,0BAErCR,KAAKS,yBAA2BJ,SAASC,cAAc,UACvDN,KAAKS,yBAAyBC,aAAa,OAAQ,UACnDV,KAAKS,yBAAyBF,UAAUC,IACtC,aACA,oBACA,yBAEFR,KAAKW,iCAELX,KAAKI,kBAAkBQ,YAAYZ,KAAKC,QACxCD,KAAKI,kBAAkBQ,YAAYZ,KAAKS,0BACxCT,KAAKH,QAAQe,YAAYZ,KAAKI,mBAE9BJ,KAAKS,yBAAyBI,iBAAiB,SAAS,WACtDf,EAAKgB,qBACLhB,EAAKG,OAAOc,OACd,IAEJ,G,EAAC,EAAAjC,IAAA,qBAAAa,MAED,WAC2C,aAArCK,KAAKC,OAAOE,aAAa,QAC3BH,KAAKC,OAAOS,aAAa,OAAQ,QAEjCV,KAAKC,OAAOS,aAAa,OAAQ,YAEnCV,KAAKW,gCACP,GAAC,CAAA7B,IAAA,iCAAAa,MAED,WAC2C,aAArCK,KAAKC,OAAOE,aAAa,SAC3BH,KAAKS,yBAAyBO,UAAY,02BAC1ChB,KAAKS,yBAAyBC,aAAa,QAAS,iBACpDV,KAAKS,yBAAyBC,aAAa,aAAc,mBAEzDV,KAAKS,yBAAyBO,UAAY,mjCAC1ChB,KAAKS,yBAAyBC,aAAa,QAAS,iBACpDV,KAAKS,yBAAyBC,aAAa,aAAc,iBAE7D,M,6EAAC,CApDmB,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/text-input/text-input.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 TextInput {\n  constructor($module) {\n    this.$module = $module;\n    this.$input = $module && $module.querySelector(\".tna-text-input\");\n\n    if (!this.$module || !this.$input) {\n      return;\n    }\n\n    if (this.$input.getAttribute(\"type\") === \"password\") {\n      this.$textInputWrapper = document.createElement(\"div\");\n      this.$textInputWrapper.classList.add(\"tna-text-input-wrapper\");\n\n      this.$textInputPasswordToggle = document.createElement(\"button\");\n      this.$textInputPasswordToggle.setAttribute(\"type\", \"button\");\n      this.$textInputPasswordToggle.classList.add(\n        \"tna-button\",\n        \"tna-button--small\",\n        \"tna-button--icon-only\",\n      );\n      this.updateTogglePasswordButtonText();\n\n      this.$textInputWrapper.appendChild(this.$input);\n      this.$textInputWrapper.appendChild(this.$textInputPasswordToggle);\n      this.$module.appendChild(this.$textInputWrapper);\n\n      this.$textInputPasswordToggle.addEventListener(\"click\", () => {\n        this.togglePasswordType();\n        this.$input.focus();\n      });\n    }\n  }\n\n  togglePasswordType() {\n    if (this.$input.getAttribute(\"type\") === \"password\") {\n      this.$input.setAttribute(\"type\", \"text\");\n    } else {\n      this.$input.setAttribute(\"type\", \"password\");\n    }\n    this.updateTogglePasswordButtonText();\n  }\n\n  updateTogglePasswordButtonText() {\n    if (this.$input.getAttribute(\"type\") === \"password\") {\n      this.$textInputPasswordToggle.innerHTML = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\" height=\"32\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z\"/></svg>Show password`;\n      this.$textInputPasswordToggle.setAttribute(\"title\", \"Show password\");\n      this.$textInputPasswordToggle.setAttribute(\"aria-title\", \"Show password\");\n    } else {\n      this.$textInputPasswordToggle.innerHTML = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 512\" height=\"32\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z\"/></svg></i>Hide password`;\n      this.$textInputPasswordToggle.setAttribute(\"title\", \"Hide password\");\n      this.$textInputPasswordToggle.setAttribute(\"aria-title\", \"Hide password\");\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","TextInput","$module","_this","_classCallCheck","this","$input","querySelector","getAttribute","$textInputWrapper","document","createElement","classList","add","$textInputPasswordToggle","setAttribute","updateTogglePasswordButtonText","appendChild","addEventListener","togglePasswordType","focus","innerHTML"],"sourceRoot":""}

package/nationalarchives/components/text-input/text-input.mjs

@@ -0,0 +1,54 @@
+export class TextInput {
+  constructor($module) {
+    this.$module = $module;
+    this.$input = $module && $module.querySelector(".tna-text-input");
+
+    if (!this.$module || !this.$input) {
+      return;
+    }
+
+    if (this.$input.getAttribute("type") === "password") {
+      this.$textInputWrapper = document.createElement("div");
+      this.$textInputWrapper.classList.add("tna-text-input-wrapper");
+
+      this.$textInputPasswordToggle = document.createElement("button");
+      this.$textInputPasswordToggle.setAttribute("type", "button");
+      this.$textInputPasswordToggle.classList.add(
+        "tna-button",
+        "tna-button--small",
+        "tna-button--icon-only",
+      );
+      this.updateTogglePasswordButtonText();
+
+      this.$textInputWrapper.appendChild(this.$input);
+      this.$textInputWrapper.appendChild(this.$textInputPasswordToggle);
+      this.$module.appendChild(this.$textInputWrapper);
+
+      this.$textInputPasswordToggle.addEventListener("click", () => {
+        this.togglePasswordType();
+        this.$input.focus();
+      });
+    }
+  }
+
+  togglePasswordType() {
+    if (this.$input.getAttribute("type") === "password") {
+      this.$input.setAttribute("type", "text");
+    } else {
+      this.$input.setAttribute("type", "password");
+    }
+    this.updateTogglePasswordButtonText();
+  }
+
+  updateTogglePasswordButtonText() {
+    if (this.$input.getAttribute("type") === "password") {
+      this.$textInputPasswordToggle.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" height="32" aria-hidden="true" focusable="false"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"/></svg>Show password`;
+      this.$textInputPasswordToggle.setAttribute("title", "Show password");
+      this.$textInputPasswordToggle.setAttribute("aria-title", "Show password");
+    } else {
+      this.$textInputPasswordToggle.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" height="32" aria-hidden="true" focusable="false"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z"/></svg></i>Hide password`;
+      this.$textInputPasswordToggle.setAttribute("title", "Hide password");
+      this.$textInputPasswordToggle.setAttribute("aria-title", "Hide password");
+    }
+  }
+}

package/nationalarchives/components/text-input/text-input.njk

@@ -1,9 +1,11 @@
 {%- macro tnaTextInputElement(params, extraAttributes) -%}
 {%- set inputClasses = [params.classes] if params.classes else [] -%}
-<input type="text" id="{{ params.id }}" class="tna-text-input{% if params.size %} tna-text-input--{{ params.size }}{% endif %} {{ inputClasses | join(' ') }}" name="{{ params.name }}" value="{{ params.value }}" spellcheck="{{ params.spellcheck if params.spellcheck else false }}"
+<input id="{{ params.id }}" class="tna-text-input{% if params.size %} tna-text-input--{{ params.size }}{% endif %} {{ inputClasses | join(' ') }}" name="{{ params.name }}" value="{{ params.value }}"
 {%- if params.hint or params.error %} aria-describedby="{%- if params.hint -%}{{ params.id }}-hint{%- endif %} {% if params.error -%}{{ params.id }}-error{%- endif -%}"{%- endif %}
 {%- if params.maxLength %} maxlength="{{ params.maxLength }}"{% endif %}
-{%- if params.autofill %} autofill="{{ params.autofill }}"{% endif %}
+{%- if params.password %} type="password" autocapitalize="none" autocomplete="off" autocorrect="off" spellcheck="false"{%- else %} type="text" spellcheck="{{ params.spellcheck if params.spellcheck else false }}"
+    {%- if params.autofill %} autofill="{{ params.autofill }}"{% endif %}
+{%- endif %}
 {%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}
 {%- for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}
 {%- for attribute, value in extraAttributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>

package/nationalarchives/components/text-input/text-input.scss

@@ -3,7 +3,6 @@
 @use "../../tools/spacing";
 
 .tna-text-input {
-  width: 100%;
   padding: 0 spacing.space(0.375);
 
   display: block;
@@ -18,6 +17,11 @@
   @include colour.colour-border("input-border", forms.$form-field-border-width);
   border-radius: 0.1px;
 
+  &,
+  &-wrapper {
+    width: 100%;
+  }
+
   .tna-form__group--error & {
     @include colour.colour-border("form-error-border");
   }
@@ -41,4 +45,21 @@
   &--xl {
     max-width: 80rem;
   }
+
+  &-wrapper & {
+    border-right-width: 0;
+  }
+
+  &-wrapper {
+    display: flex;
+
+    .tna-button {
+      white-space: nowrap;
+
+      svg {
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+    }
+  }
 }

package/nationalarchives/components/textarea/analytics.js

@@ -15,7 +15,8 @@ export default [
           group: ($el, $scope, event) =>
             $scope
               .closest(".tna-form__group")
-              ?.querySelector(".tna-form__heading")?.innerText,
+              ?.querySelector(".tna-form__heading")
+              ?.innerText?.trim(),
         },
       },
     ],