katalyst-govuk-formbuilder 1.4.0 → 1.5.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c9df88d9d5abc58da448ed9fd96a45ef1924a27dcda9939ef0596b9e21ff3d06
-  data.tar.gz: c824d95a58018d8376b8cc9de329ef21b1e8d06d9fca460f9683072a625a0fb9
+  metadata.gz: b4255667e305b3281cd8cc212d66cb9f3dd3fb90217ad4610854d9c5eb99bda8
+  data.tar.gz: 186cfd97c4994d09a463f40dbd15747dd249a6fca3af391117bdcabb03bb6d03
 SHA512:
-  metadata.gz: 9c7bf61b527e1092fb8327b2ba88d9832d45e99d46a445a8f1a6d1428d81ddc154aa79af57c5e9fb0892ea2da77482bdb0df396b50bc1ef0bd3e8cab6e9b7213
-  data.tar.gz: 02c92b8b8822995c73bff3851ce55b418b36e11ff5fd25bbf59021a664602802338104a19c752744edcf2f77e1c79471ce7b6ade424d07f7bf2664135e6cf5dc
+  metadata.gz: 565c0b92dabe9090c904f5095faee594fb792591c3b435953d28cfc8ea5b10103c4273dfcf9f320234469fc5ce8eab79e93be13ad2660c74e8e671773830ac9f
+  data.tar.gz: f4172456fee33876936ea05efb3b2dd3ed6077b3abf4b6cfcc80ecd8babfd8dfe116267ff59f89b9d14000ec765f8f51119b8b32d7e72da959d4fa8f5b4aa758

data/README.md

@@ -47,6 +47,14 @@ helper Katalyst::GOVUK::Formbuilder::Frontend
 
 Bug reports and pull requests are welcome on GitHub at https://github.com/katalyst/govuk-formbuilder.
 
+## Release
+
+Update the version number in `lib/katalyst/govuk/formbuilder/version.rb` and run:
+
+```bash
+bundle exec rake release
+```
+
 ## License
 
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/app/assets/builds/katalyst/govuk/formbuilder.css

@@ -1,3 +1,8 @@
+@charset "UTF-8";
+:root {
+  --govuk-frontend-version: "4.7.0";
+}
+
 .govuk-link {
   font-family: "Open Sans", sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -978,6 +983,14 @@
   -moz-text-size-adjust: 100%;
   text-size-adjust: 100%;
 }
+@supports (position: -webkit-sticky) or (position: sticky) {
+  .govuk-template {
+    scroll-padding-top: 60px;
+  }
+  .govuk-template:not(:has(.govuk-exit-this-page)) {
+    scroll-padding-top: 0;
+  }
+}
 @media screen {
   .govuk-template {
     overflow-y: scroll;
@@ -1128,7 +1141,7 @@
 .govuk-button[disabled=disabled]:hover,
 .govuk-button[disabled]:hover {
   background-color: #00703c;
-  cursor: default;
+  cursor: not-allowed;
 }
 .govuk-button--disabled:active,
 .govuk-button[disabled=disabled]:active,
@@ -1165,6 +1178,20 @@
   background-color: #d4351c;
 }
 
+.govuk-button--inverse {
+  background-color: #ffffff;
+  box-shadow: 0 2px 0 #144e81;
+}
+.govuk-button--inverse, .govuk-button--inverse:link, .govuk-button--inverse:visited, .govuk-button--inverse:active, .govuk-button--inverse:hover {
+  color: #1d70b8;
+}
+.govuk-button--inverse:hover {
+  background-color: #e8f1f8;
+}
+.govuk-button--inverse:hover[disabled] {
+  background-color: #ffffff;
+}
+
 .govuk-button--start {
   font-weight: 700;
   font-size: 18px;
@@ -1728,7 +1755,7 @@
 
 .govuk-checkboxes__input:disabled,
 .govuk-checkboxes__input:disabled + .govuk-checkboxes__label {
-  cursor: default;
+  cursor: not-allowed;
 }
 
 .govuk-checkboxes__input:disabled + .govuk-checkboxes__label,
@@ -1893,6 +1920,12 @@
   outline-offset: 0;
   box-shadow: inset 0 0 0 2px;
 }
+.govuk-input:disabled {
+  opacity: 0.5;
+  color: inherit;
+  background-color: transparent;
+  cursor: not-allowed;
+}
 
 .govuk-input::-webkit-outer-spin-button,
 .govuk-input::-webkit-inner-spin-button {
@@ -1911,6 +1944,28 @@
   border-color: #0b0c0c;
 }
 
+.govuk-input--extra-letter-spacing {
+  font-family: "Open Sans", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-feature-settings: "tnum" 1;
+  font-feature-settings: "tnum" 1;
+  font-weight: 400;
+  letter-spacing: 0.05em;
+}
+@media print {
+  .govuk-input--extra-letter-spacing {
+    font-family: sans-serif;
+  }
+}
+@supports (font-variant-numeric: tabular-nums) {
+  .govuk-input--extra-letter-spacing {
+    -webkit-font-feature-settings: normal;
+    font-feature-settings: normal;
+    font-variant-numeric: tabular-nums;
+  }
+}
+
 .govuk-input--width-30 {
   max-width: 29.5em;
 }
@@ -2249,6 +2304,10 @@
   outline: 3px solid #ffdd00;
   box-shadow: inset 0 0 0 4px #0b0c0c;
 }
+.govuk-file-upload:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 
 .govuk-radios__item {
   font-family: "Open Sans", sans-serif;
@@ -2360,7 +2419,7 @@
 
 .govuk-radios__input:disabled,
 .govuk-radios__input:disabled + .govuk-radios__label {
-  cursor: default;
+  cursor: not-allowed;
 }
 
 .govuk-radios__input:disabled + .govuk-radios__label,
@@ -2540,6 +2599,11 @@
   outline-offset: 0;
   box-shadow: inset 0 0 0 2px;
 }
+.govuk-select:disabled {
+  opacity: 0.5;
+  color: inherit;
+  cursor: not-allowed;
+}
 
 .govuk-select option:active,
 .govuk-select option:checked,
@@ -2602,6 +2666,12 @@
   outline-offset: 0;
   box-shadow: inset 0 0 0 2px;
 }
+.govuk-textarea:disabled {
+  opacity: 0.5;
+  color: inherit;
+  background-color: transparent;
+  cursor: not-allowed;
+}
 
 .govuk-textarea--error {
   border-color: #d4351c;
@@ -2629,6 +2699,12 @@
   border: 0 !important;
   white-space: nowrap !important;
 }
+.govuk-visually-hidden:before {
+  content: " ";
+}
+.govuk-visually-hidden:after {
+  content: " ";
+}
 
 .govuk-visually-hidden-focusable {
   position: absolute !important;
@@ -4141,10 +4217,16 @@
   outline-offset: 0;
   box-shadow: inset 0 0 0 2px;
 }
+.govuk-richtextarea:disabled {
+  opacity: 0.5;
+  color: inherit;
+  background-color: transparent;
+  cursor: not-allowed;
+}
 
-.govuk-richtextarea--error {
+.govuk-textarea--error {
   border-color: #d4351c;
 }
-.govuk-richtextarea--error:focus {
+.govuk-textarea--error:focus {
   border-color: #0b0c0c;
 }

data/app/assets/builds/katalyst/govuk/formbuilder.js

@@ -276,7 +276,7 @@ function normaliseString(value) {
   if (trimmedValue === "false") {
     return false;
   }
-  if (trimmedValue.length > 0 && isFinite(trimmedValue)) {
+  if (trimmedValue.length > 0 && isFinite(Number(trimmedValue))) {
     return Number(trimmedValue);
   }
   return value;
@@ -551,7 +551,7 @@ var KEY_SPACE = 32;
 var DEBOUNCE_TIMEOUT_IN_SECONDS = 1;
 
 function Button($module, config) {
-  if (!$module) {
+  if (!($module instanceof HTMLElement)) {
     return this;
   }
   this.$module = $module;
@@ -572,7 +572,10 @@ Button.prototype.init = function() {
 
 Button.prototype.handleKeyDown = function(event) {
   var $target = event.target;
-  if ($target.getAttribute("role") === "button" && event.keyCode === KEY_SPACE) {
+  if (event.keyCode !== KEY_SPACE) {
+    return;
+  }
+  if ($target instanceof HTMLElement && $target.getAttribute("role") === "button") {
     event.preventDefault();
     $target.click();
   }
@@ -618,10 +621,8 @@ Button.prototype.debounce = function(event) {
 }).call("object" === typeof window && window || "object" === typeof self && self || "object" === typeof global && global || {});
 
 function closestAttributeValue($element, attributeName) {
-  var closestElementWithAttribute = $element.closest("[" + attributeName + "]");
-  if (closestElementWithAttribute) {
-    return closestElementWithAttribute.getAttribute(attributeName);
-  }
+  var $closestElementWithAttribute = $element.closest("[" + attributeName + "]");
+  return $closestElementWithAttribute ? $closestElementWithAttribute.getAttribute(attributeName) : null;
 }
 
 function I18n(translations, config) {
@@ -633,11 +634,11 @@ I18n.prototype.t = function(lookupKey, options) {
   if (!lookupKey) {
     throw new Error("i18n: lookup key missing");
   }
-  if (options && typeof options.count !== "undefined") {
+  if (options && typeof options.count === "number") {
     lookupKey = lookupKey + "." + this.getPluralSuffix(lookupKey, options.count);
   }
-  if (lookupKey in this.translations) {
-    var translationString = this.translations[lookupKey];
+  var translationString = this.translations[lookupKey];
+  if (typeof translationString === "string") {
     if (translationString.match(/%{(.\S+)}/)) {
       if (!options) {
         throw new Error("i18n: cannot replace placeholders in string if no option data provided");
@@ -659,11 +660,11 @@ I18n.prototype.replacePlaceholders = function(translationString, options) {
   return translationString.replace(/%{(.\S+)}/g, (function(placeholderWithBraces, placeholderKey) {
     if (Object.prototype.hasOwnProperty.call(options, placeholderKey)) {
       var placeholderValue = options[placeholderKey];
-      if (placeholderValue === false) {
+      if (placeholderValue === false || typeof placeholderValue !== "number" && typeof placeholderValue !== "string") {
         return "";
       }
-      if (typeof placeholderValue === "number" && formatter) {
-        return formatter.format(placeholderValue);
+      if (typeof placeholderValue === "number") {
+        return formatter ? formatter.format(placeholderValue) : placeholderValue.toString();
       }
       return placeholderValue;
     } else {
@@ -1108,7 +1109,11 @@ var CHARACTER_COUNT_TRANSLATIONS = {
 };
 
 function CharacterCount($module, config) {
-  if (!$module) {
+  if (!($module instanceof HTMLElement)) {
+    return this;
+  }
+  var $textarea = $module.querySelector(".govuk-js-character-count");
+  if (!($textarea instanceof HTMLTextAreaElement || $textarea instanceof HTMLInputElement)) {
     return this;
   }
   var defaultConfig = {
@@ -1127,26 +1132,32 @@ function CharacterCount($module, config) {
   this.i18n = new I18n(extractConfigByNamespace(this.config, "i18n"), {
     locale: closestAttributeValue($module, "lang")
   });
-  if (this.config.maxwords) {
+  this.maxLength = Infinity;
+  if ("maxwords" in this.config && this.config.maxwords) {
     this.maxLength = this.config.maxwords;
-  } else if (this.config.maxlength) {
+  } else if ("maxlength" in this.config && this.config.maxlength) {
     this.maxLength = this.config.maxlength;
   } else {
     return;
   }
   this.$module = $module;
-  this.$textarea = $module.querySelector(".govuk-js-character-count");
+  this.$textarea = $textarea;
   this.$visibleCountMessage = null;
   this.$screenReaderCountMessage = null;
   this.lastInputTimestamp = null;
+  this.lastInputValue = "";
+  this.valueChecker = null;
 }
 
 CharacterCount.prototype.init = function() {
-  if (!this.$textarea) {
+  if (!this.$module || !this.$textarea) {
     return;
   }
   var $textarea = this.$textarea;
   var $textareaDescription = document.getElementById($textarea.id + "-info");
+  if (!$textareaDescription) {
+    return;
+  }
   if ($textareaDescription.innerText.match(/^\s*$/)) {
     $textareaDescription.innerText = this.i18n.t("textareaDescription", {
       count: this.maxLength
@@ -1167,11 +1178,7 @@ CharacterCount.prototype.init = function() {
   $textareaDescription.classList.add("govuk-visually-hidden");
   $textarea.removeAttribute("maxlength");
   this.bindChangeEvents();
-  if ("onpageshow" in window) {
-    window.addEventListener("pageshow", this.updateCountMessage.bind(this));
-  } else {
-    window.addEventListener("DOMContentLoaded", this.updateCountMessage.bind(this));
-  }
+  window.addEventListener("onpageshow" in window ? "pageshow" : "DOMContentLoaded", this.updateCountMessage.bind(this));
   this.updateCountMessage();
 };
 
@@ -1200,9 +1207,8 @@ CharacterCount.prototype.handleBlur = function() {
 };
 
 CharacterCount.prototype.updateIfValueChanged = function() {
-  if (!this.$textarea.oldValue) this.$textarea.oldValue = "";
-  if (this.$textarea.value !== this.$textarea.oldValue) {
-    this.$textarea.oldValue = this.$textarea.value;
+  if (this.$textarea.value !== this.lastInputValue) {
+    this.lastInputValue = this.$textarea.value;
     this.updateCountMessage();
   }
 };
@@ -1238,13 +1244,13 @@ CharacterCount.prototype.updateScreenReaderCountMessage = function() {
   if (this.isOverThreshold()) {
     $screenReaderCountMessage.removeAttribute("aria-hidden");
   } else {
-    $screenReaderCountMessage.setAttribute("aria-hidden", true);
+    $screenReaderCountMessage.setAttribute("aria-hidden", "true");
   }
   $screenReaderCountMessage.innerText = this.getCountMessage();
 };
 
 CharacterCount.prototype.count = function(text) {
-  if (this.config.maxwords) {
+  if ("maxwords" in this.config && this.config.maxwords) {
     var tokens = text.match(/\S+/g) || [];
     return tokens.length;
   } else {
@@ -1254,7 +1260,7 @@ CharacterCount.prototype.count = function(text) {
 
 CharacterCount.prototype.getCountMessage = function() {
   var remainingNumber = this.maxLength - this.count(this.$textarea.value);
-  var countType = this.config.maxwords ? "words" : "characters";
+  var countType = "maxwords" in this.config && this.config.maxwords ? "words" : "characters";
   return this.formatCountMessage(remainingNumber, countType);
 };
 
@@ -1280,11 +1286,21 @@ CharacterCount.prototype.isOverThreshold = function() {
 };
 
 function Checkboxes($module) {
+  if (!($module instanceof HTMLElement)) {
+    return this;
+  }
+  var $inputs = $module.querySelectorAll('input[type="checkbox"]');
+  if (!$inputs.length) {
+    return this;
+  }
   this.$module = $module;
-  this.$inputs = $module.querySelectorAll('input[type="checkbox"]');
+  this.$inputs = $inputs;
 }
 
 Checkboxes.prototype.init = function() {
+  if (!this.$module || !this.$inputs) {
+    return;
+  }
   var $module = this.$module;
   var $inputs = this.$inputs;
   nodeListForEach($inputs, (function($input) {
@@ -1295,11 +1311,7 @@ Checkboxes.prototype.init = function() {
     $input.setAttribute("aria-controls", targetId);
     $input.removeAttribute("data-aria-controls");
   }));
-  if ("onpageshow" in window) {
-    window.addEventListener("pageshow", this.syncAllConditionalReveals.bind(this));
-  } else {
-    window.addEventListener("DOMContentLoaded", this.syncAllConditionalReveals.bind(this));
-  }
+  window.addEventListener("onpageshow" in window ? "pageshow" : "DOMContentLoaded", this.syncAllConditionalReveals.bind(this));
   this.syncAllConditionalReveals();
   $module.addEventListener("click", this.handleClick.bind(this));
 };
@@ -1309,39 +1321,45 @@ Checkboxes.prototype.syncAllConditionalReveals = function() {
 };
 
 Checkboxes.prototype.syncConditionalRevealWithInputState = function($input) {
-  var $target = document.getElementById($input.getAttribute("aria-controls"));
+  var targetId = $input.getAttribute("aria-controls");
+  if (!targetId) {
+    return;
+  }
+  var $target = document.getElementById(targetId);
   if ($target && $target.classList.contains("govuk-checkboxes__conditional")) {
     var inputIsChecked = $input.checked;
-    $input.setAttribute("aria-expanded", inputIsChecked);
+    $input.setAttribute("aria-expanded", inputIsChecked.toString());
     $target.classList.toggle("govuk-checkboxes__conditional--hidden", !inputIsChecked);
   }
 };
 
 Checkboxes.prototype.unCheckAllInputsExcept = function($input) {
+  var $component = this;
   var allInputsWithSameName = document.querySelectorAll('input[type="checkbox"][name="' + $input.name + '"]');
-  nodeListForEach(allInputsWithSameName, function($inputWithSameName) {
+  nodeListForEach(allInputsWithSameName, (function($inputWithSameName) {
     var hasSameFormOwner = $input.form === $inputWithSameName.form;
     if (hasSameFormOwner && $inputWithSameName !== $input) {
       $inputWithSameName.checked = false;
-      this.syncConditionalRevealWithInputState($inputWithSameName);
+      $component.syncConditionalRevealWithInputState($inputWithSameName);
     }
-  }.bind(this));
+  }));
 };
 
 Checkboxes.prototype.unCheckExclusiveInputs = function($input) {
+  var $component = this;
   var allInputsWithSameNameAndExclusiveBehaviour = document.querySelectorAll('input[data-behaviour="exclusive"][type="checkbox"][name="' + $input.name + '"]');
-  nodeListForEach(allInputsWithSameNameAndExclusiveBehaviour, function($exclusiveInput) {
+  nodeListForEach(allInputsWithSameNameAndExclusiveBehaviour, (function($exclusiveInput) {
     var hasSameFormOwner = $input.form === $exclusiveInput.form;
     if (hasSameFormOwner) {
       $exclusiveInput.checked = false;
-      this.syncConditionalRevealWithInputState($exclusiveInput);
+      $component.syncConditionalRevealWithInputState($exclusiveInput);
     }
-  }.bind(this));
+  }));
 };
 
 Checkboxes.prototype.handleClick = function(event) {
   var $clickedInput = event.target;
-  if ($clickedInput.type !== "checkbox") {
+  if (!($clickedInput instanceof HTMLInputElement) || $clickedInput.type !== "checkbox") {
     return;
   }
   var hasAriaControls = $clickedInput.getAttribute("aria-controls");
@@ -1360,7 +1378,7 @@ Checkboxes.prototype.handleClick = function(event) {
 };
 
 function ErrorSummary($module, config) {
-  if (!$module) {
+  if (!($module instanceof HTMLElement)) {
     return this;
   }
   this.$module = $module;
@@ -1371,10 +1389,10 @@ function ErrorSummary($module, config) {
 }
 
 ErrorSummary.prototype.init = function() {
-  var $module = this.$module;
-  if (!$module) {
+  if (!this.$module) {
     return;
   }
+  var $module = this.$module;
   this.setFocus();
   $module.addEventListener("click", this.handleClick.bind(this));
 };
@@ -1399,10 +1417,13 @@ ErrorSummary.prototype.handleClick = function(event) {
 };
 
 ErrorSummary.prototype.focusTarget = function($target) {
-  if ($target.tagName !== "A" || $target.href === false) {
+  if (!($target instanceof HTMLAnchorElement)) {
     return false;
   }
   var inputId = this.getFragmentFromUrl($target.href);
+  if (!inputId) {
+    return false;
+  }
   var $input = document.getElementById(inputId);
   if (!$input) {
     return false;
@@ -1420,7 +1441,7 @@ ErrorSummary.prototype.focusTarget = function($target) {
 
 ErrorSummary.prototype.getFragmentFromUrl = function(url) {
   if (url.indexOf("#") === -1) {
-    return false;
+    return undefined;
   }
   return url.split("#").pop();
 };
@@ -1431,7 +1452,7 @@ ErrorSummary.prototype.getAssociatedLegendOrLabel = function($input) {
     var $legends = $fieldset.getElementsByTagName("legend");
     if ($legends.length) {
       var $candidateLegend = $legends[0];
-      if ($input.type === "checkbox" || $input.type === "radio") {
+      if ($input instanceof HTMLInputElement && ($input.type === "checkbox" || $input.type === "radio")) {
         return $candidateLegend;
       }
       var legendTop = $candidateLegend.getBoundingClientRect().top;
@@ -1448,11 +1469,21 @@ ErrorSummary.prototype.getAssociatedLegendOrLabel = function($input) {
 };
 
 function Radios($module) {
+  if (!($module instanceof HTMLElement)) {
+    return this;
+  }
+  var $inputs = $module.querySelectorAll('input[type="radio"]');
+  if (!$inputs.length) {
+    return this;
+  }
   this.$module = $module;
-  this.$inputs = $module.querySelectorAll('input[type="radio"]');
+  this.$inputs = $inputs;
 }
 
 Radios.prototype.init = function() {
+  if (!this.$module || !this.$inputs) {
+    return;
+  }
   var $module = this.$module;
   var $inputs = this.$inputs;
   nodeListForEach($inputs, (function($input) {
@@ -1463,11 +1494,7 @@ Radios.prototype.init = function() {
     $input.setAttribute("aria-controls", targetId);
     $input.removeAttribute("data-aria-controls");
   }));
-  if ("onpageshow" in window) {
-    window.addEventListener("pageshow", this.syncAllConditionalReveals.bind(this));
-  } else {
-    window.addEventListener("DOMContentLoaded", this.syncAllConditionalReveals.bind(this));
-  }
+  window.addEventListener("onpageshow" in window ? "pageshow" : "DOMContentLoaded", this.syncAllConditionalReveals.bind(this));
   this.syncAllConditionalReveals();
   $module.addEventListener("click", this.handleClick.bind(this));
 };
@@ -1477,27 +1504,34 @@ Radios.prototype.syncAllConditionalReveals = function() {
 };
 
 Radios.prototype.syncConditionalRevealWithInputState = function($input) {
-  var $target = document.getElementById($input.getAttribute("aria-controls"));
+  var targetId = $input.getAttribute("aria-controls");
+  if (!targetId) {
+    return;
+  }
+  var $target = document.getElementById(targetId);
   if ($target && $target.classList.contains("govuk-radios__conditional")) {
     var inputIsChecked = $input.checked;
-    $input.setAttribute("aria-expanded", inputIsChecked);
+    $input.setAttribute("aria-expanded", inputIsChecked.toString());
     $target.classList.toggle("govuk-radios__conditional--hidden", !inputIsChecked);
   }
 };
 
 Radios.prototype.handleClick = function(event) {
+  var $component = this;
   var $clickedInput = event.target;
-  if ($clickedInput.type !== "radio") {
+  if (!($clickedInput instanceof HTMLInputElement) || $clickedInput.type !== "radio") {
     return;
   }
   var $allInputs = document.querySelectorAll('input[type="radio"][aria-controls]');
-  nodeListForEach($allInputs, function($input) {
-    var hasSameFormOwner = $input.form === $clickedInput.form;
-    var hasSameName = $input.name === $clickedInput.name;
+  var $clickedInputForm = $clickedInput.form;
+  var $clickedInputName = $clickedInput.name;
+  nodeListForEach($allInputs, (function($input) {
+    var hasSameFormOwner = $input.form === $clickedInputForm;
+    var hasSameName = $input.name === $clickedInputName;
     if (hasSameName && hasSameFormOwner) {
-      this.syncConditionalRevealWithInputState($input);
+      $component.syncConditionalRevealWithInputState($input);
     }
-  }.bind(this));
+  }));
 };
 
 function initAll(options) {