katalyst-govuk-formbuilder 1.3.2 → 1.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: adcae9707fd2bb8a976bc2208e61000139dbe07eaeb309d5d58058588e9da18b
-  data.tar.gz: e1106ae77973289645d583efee9688bae912bca77b1cd038b2ac1e9f4675d532
+  metadata.gz: 58e68fe3ca009403a6a3b6f979919eb10a4841e2d67da05ce35bd76f4c711a9b
+  data.tar.gz: ec8757dab48258b437ed24d3393fec87e51d956658262fce3d80113f51d64303
 SHA512:
-  metadata.gz: ee422822f141806456f21a44da3989cf560e33fbbbed337513aa8e3918f58ad4c7c499f6a3bfc1a54ac834dcdd3331d117aee75f9727d01fc93758006646e2c1
-  data.tar.gz: 515c407a9fd737fbe50bc118e9096d7df4deafbf06c805725198511e1bf40a7834ea70f5612e25b6234acc802a9e1b2675aa2a402f067f03664dc77cae5c3e33
+  metadata.gz: a2dc00bb4778ee15bdfd8a964cb60b107a48ee41dff48bcab840fdb59185b4d6fddb2406d45af5e2b1ea0b86fc5d71811790ea98ecd62c38191c274411134e0f
+  data.tar.gz: f4b98623d425c1107f5e2688ad77482f03dfb803d05378f3f7b4e0d68cdb3fe3aa83df7134b18bbc50425f76e67a00af9a07ed4acfc811a96d205d0f534bede9

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,7 @@
+:root {
+  --govuk-frontend-version: "4.6.0";
+}
+
 .govuk-link {
   font-family: "Open Sans", sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -1128,7 +1132,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,
@@ -1728,7 +1732,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 +1897,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 +1921,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 +2281,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 +2396,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 +2576,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 +2643,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;
@@ -4141,10 +4188,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) {