govuk_publishing_components 17.21.0 → 18.0.0

data/node_modules/govuk-frontend/{components → govuk/components}/button/button.js

@@ -501,28 +501,179 @@ if (detect) return
 })
 .call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
 
-/**
- * JavaScript 'shim' to trigger the click event of element(s) when the space key is pressed.
- *
- * Created since some Assistive Technologies (for example some Screenreaders)
- * will tell a user to press space on a 'button', so this functionality needs to be shimmed
- * See https://github.com/alphagov/govuk_elements/pull/272#issuecomment-233028270
- *
- * Usage instructions:
- * the 'shim' will be automatically initialised
- */
+(function(undefined) {
+  // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Function/prototype/bind/detect.js
+  var detect = 'bind' in Function.prototype;
+
+  if (detect) return
+
+  // Polyfill from https://cdn.polyfill.io/v2/polyfill.js?features=Function.prototype.bind&flags=always
+  Object.defineProperty(Function.prototype, 'bind', {
+      value: function bind(that) { // .length is 1
+          // add necessary es5-shim utilities
+          var $Array = Array;
+          var $Object = Object;
+          var ObjectPrototype = $Object.prototype;
+          var ArrayPrototype = $Array.prototype;
+          var Empty = function Empty() {};
+          var to_string = ObjectPrototype.toString;
+          var hasToStringTag = typeof Symbol === 'function' && typeof Symbol.toStringTag === 'symbol';
+          var isCallable; /* inlined from https://npmjs.com/is-callable */ var fnToStr = Function.prototype.toString, tryFunctionObject = function tryFunctionObject(value) { try { fnToStr.call(value); return true; } catch (e) { return false; } }, fnClass = '[object Function]', genClass = '[object GeneratorFunction]'; isCallable = function isCallable(value) { if (typeof value !== 'function') { return false; } if (hasToStringTag) { return tryFunctionObject(value); } var strClass = to_string.call(value); return strClass === fnClass || strClass === genClass; };
+          var array_slice = ArrayPrototype.slice;
+          var array_concat = ArrayPrototype.concat;
+          var array_push = ArrayPrototype.push;
+          var max = Math.max;
+          // /add necessary es5-shim utilities
+
+          // 1. Let Target be the this value.
+          var target = this;
+          // 2. If IsCallable(Target) is false, throw a TypeError exception.
+          if (!isCallable(target)) {
+              throw new TypeError('Function.prototype.bind called on incompatible ' + target);
+          }
+          // 3. Let A be a new (possibly empty) internal list of all of the
+          //   argument values provided after thisArg (arg1, arg2 etc), in order.
+          // XXX slicedArgs will stand in for "A" if used
+          var args = array_slice.call(arguments, 1); // for normal call
+          // 4. Let F be a new native ECMAScript object.
+          // 11. Set the [[Prototype]] internal property of F to the standard
+          //   built-in Function prototype object as specified in 15.3.3.1.
+          // 12. Set the [[Call]] internal property of F as described in
+          //   15.3.4.5.1.
+          // 13. Set the [[Construct]] internal property of F as described in
+          //   15.3.4.5.2.
+          // 14. Set the [[HasInstance]] internal property of F as described in
+          //   15.3.4.5.3.
+          var bound;
+          var binder = function () {
+
+              if (this instanceof bound) {
+                  // 15.3.4.5.2 [[Construct]]
+                  // When the [[Construct]] internal method of a function object,
+                  // F that was created using the bind function is called with a
+                  // list of arguments ExtraArgs, the following steps are taken:
+                  // 1. Let target be the value of F's [[TargetFunction]]
+                  //   internal property.
+                  // 2. If target has no [[Construct]] internal method, a
+                  //   TypeError exception is thrown.
+                  // 3. Let boundArgs be the value of F's [[BoundArgs]] internal
+                  //   property.
+                  // 4. Let args be a new list containing the same values as the
+                  //   list boundArgs in the same order followed by the same
+                  //   values as the list ExtraArgs in the same order.
+                  // 5. Return the result of calling the [[Construct]] internal
+                  //   method of target providing args as the arguments.
+
+                  var result = target.apply(
+                      this,
+                      array_concat.call(args, array_slice.call(arguments))
+                  );
+                  if ($Object(result) === result) {
+                      return result;
+                  }
+                  return this;
+
+              } else {
+                  // 15.3.4.5.1 [[Call]]
+                  // When the [[Call]] internal method of a function object, F,
+                  // which was created using the bind function is called with a
+                  // this value and a list of arguments ExtraArgs, the following
+                  // steps are taken:
+                  // 1. Let boundArgs be the value of F's [[BoundArgs]] internal
+                  //   property.
+                  // 2. Let boundThis be the value of F's [[BoundThis]] internal
+                  //   property.
+                  // 3. Let target be the value of F's [[TargetFunction]] internal
+                  //   property.
+                  // 4. Let args be a new list containing the same values as the
+                  //   list boundArgs in the same order followed by the same
+                  //   values as the list ExtraArgs in the same order.
+                  // 5. Return the result of calling the [[Call]] internal method
+                  //   of target providing boundThis as the this value and
+                  //   providing args as the arguments.
+
+                  // equiv: target.call(this, ...boundArgs, ...args)
+                  return target.apply(
+                      that,
+                      array_concat.call(args, array_slice.call(arguments))
+                  );
+
+              }
+
+          };
+
+          // 15. If the [[Class]] internal property of Target is "Function", then
+          //     a. Let L be the length property of Target minus the length of A.
+          //     b. Set the length own property of F to either 0 or L, whichever is
+          //       larger.
+          // 16. Else set the length own property of F to 0.
+
+          var boundLength = max(0, target.length - args.length);
+
+          // 17. Set the attributes of the length own property of F to the values
+          //   specified in 15.3.5.1.
+          var boundArgs = [];
+          for (var i = 0; i < boundLength; i++) {
+              array_push.call(boundArgs, '$' + i);
+          }
+
+          // XXX Build a dynamic function with desired amount of arguments is the only
+          // way to set the length property of a function.
+          // In environments where Content Security Policies enabled (Chrome extensions,
+          // for ex.) all use of eval or Function costructor throws an exception.
+          // However in all of these environments Function.prototype.bind exists
+          // and so this code will never be executed.
+          bound = Function('binder', 'return function (' + boundArgs.join(',') + '){ return binder.apply(this, arguments); }')(binder);
+
+          if (target.prototype) {
+              Empty.prototype = target.prototype;
+              bound.prototype = new Empty();
+              // Clean up dangling references.
+              Empty.prototype = null;
+          }
+
+          // TODO
+          // 18. Set the [[Extensible]] internal property of F to true.
+
+          // TODO
+          // 19. Let thrower be the [[ThrowTypeError]] function Object (13.2.3).
+          // 20. Call the [[DefineOwnProperty]] internal method of F with
+          //   arguments "caller", PropertyDescriptor {[[Get]]: thrower, [[Set]]:
+          //   thrower, [[Enumerable]]: false, [[Configurable]]: false}, and
+          //   false.
+          // 21. Call the [[DefineOwnProperty]] internal method of F with
+          //   arguments "arguments", PropertyDescriptor {[[Get]]: thrower,
+          //   [[Set]]: thrower, [[Enumerable]]: false, [[Configurable]]: false},
+          //   and false.
+
+          // TODO
+          // NOTE Function objects created using Function.prototype.bind do not
+          // have a prototype property or the [[Code]], [[FormalParameters]], and
+          // [[Scope]] internal properties.
+          // XXX can't delete prototype in pure-js.
+
+          // 22. Return F.
+          return bound;
+      }
+  });
+})
+.call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
 
 var KEY_SPACE = 32;
 var DEBOUNCE_TIMEOUT_IN_SECONDS = 1;
-var debounceFormSubmitTimer = null;
 
 function Button ($module) {
   this.$module = $module;
+  this.debounceFormSubmitTimer = null;
 }
 
 /**
-* if the event target element has a role='button' and the event is key space pressed
-* then it prevents the default event and triggers a click event
+* JavaScript 'shim' to trigger the click event of element(s) when the space key is pressed.
+*
+* Created since some Assistive Technologies (for example some Screenreaders)
+* will tell a user to press space on a 'button', so this functionality needs to be shimmed
+* See https://github.com/alphagov/govuk_elements/pull/272#issuecomment-233028270
+*
 * @param {object} event event
 */
 Button.prototype.handleKeyDown = function (event) {
@@ -549,14 +700,14 @@ Button.prototype.debounce = function (event) {
   }
 
   // If the timer is still running then we want to prevent the click from submitting the form
-  if (debounceFormSubmitTimer) {
+  if (this.debounceFormSubmitTimer) {
     event.preventDefault();
     return false
   }
 
-  debounceFormSubmitTimer = setTimeout(function () {
-    debounceFormSubmitTimer = null;
-  }, DEBOUNCE_TIMEOUT_IN_SECONDS * 1000);
+  this.debounceFormSubmitTimer = setTimeout(function () {
+    this.debounceFormSubmitTimer = null;
+  }.bind(this), DEBOUNCE_TIMEOUT_IN_SECONDS * 1000);
 };
 
 /**

data/node_modules/govuk-frontend/govuk/components/button/template.njk

@@ -0,0 +1,60 @@
+{# Set classes for this component #}
+{%- set classNames = "govuk-button" -%}
+
+{%- if params.classes %}
+  {% set classNames = classNames + " " + params.classes %}
+{% endif %}
+{% if params.disabled %}
+  {% set classNames = classNames + " govuk-button--disabled" %}
+{% endif -%}
+
+{# Determine type of element to use, if not explicitly set #}
+{%- if params.element %}
+  {% set element = params.element | lower %}
+{% else %}
+  {% if params.href %}
+    {% set element = 'a' %}
+  {% else %}
+    {% set element = 'button' %}
+  {% endif %}
+{% endif -%}
+
+{% if params.isStartButton %}
+  {% set iconHtml %}
+{#- The SVG needs `focusable="false"` so that Internet Explorer does not
+treat it as an interactive element - without this it will be
+'focusable' when using the keyboard to navigate. #}
+<svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" role="presentation" focusable="false">
+  <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"/>
+</svg>
+  {% endset %}
+  {% set classNames = classNames + " govuk-button--start" %}
+{% endif %}
+
+{#- Define common attributes that we can use across all element types #}
+
+{%- set commonAttributes %} class="{{ classNames }}" data-module="govuk-button"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endset %}
+
+{#- Define common attributes we can use for both button and input types #}
+
+{%- set buttonAttributes %}{% if params.name %} name="{{ params.name }}"{% endif %} type="{{ params.type if params.type else 'submit' }}"{% if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}{% if params.preventDoubleClick %} data-prevent-double-click="true"{% endif %}{% endset %}
+
+{#- Actually create a button... or a link! #}
+
+{%- if element == 'a' %}
+<a href="{{ params.href if params.href else '#' }}" role="button" draggable="false" {{- commonAttributes | safe }}>
+  {{ params.html | safe if params.html else params.text }}
+{# Indentation is intentional to output HTML nicely #}
+{{- iconHtml | safe | trim | indent(2, true) if iconHtml -}}
+</a>
+
+{%- elseif element == 'button' %}
+<button {%- if params.value %} value="{{ params.value }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
+  {{ params.html | safe if params.html else params.text }}
+{# Indentation is intentional to output HTML nicely #}
+{{- iconHtml | safe | trim | indent(2, true) if iconHtml -}}
+</button>
+
+{%- elseif element == 'input' %}
+<input value="{{ params.text }}" {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
+{%- endif %}

data/node_modules/govuk-frontend/{components → govuk/components}/character-count/character-count.js

@@ -1016,7 +1016,7 @@ if (detect) return
 
 function CharacterCount ($module) {
   this.$module = $module;
-  this.$textarea = $module.querySelector('.js-character-count');
+  this.$textarea = $module.querySelector('.govuk-js-character-count');
 }
 
 CharacterCount.prototype.defaults = {
@@ -1156,8 +1156,12 @@ CharacterCount.prototype.updateCountMessage = function () {
   var thresholdValue = maxLength * thresholdPercent / 100;
   if (thresholdValue > currentLength) {
     countMessage.classList.add('govuk-character-count__message--disabled');
+    // Ensure threshold is hidden for users of assistive technologies
+    countMessage.setAttribute('aria-hidden', true);
   } else {
     countMessage.classList.remove('govuk-character-count__message--disabled');
+    // Ensure threshold is visible for users of assistive technologies
+    countMessage.removeAttribute('aria-hidden');
   }
 
   // Update styles

data/node_modules/govuk-frontend/{components → govuk/components}/character-count/template.njk

@@ -1,6 +1,6 @@
 {% from "../textarea/macro.njk" import govukTextarea %}
 
-<div class="govuk-character-count" data-module="character-count"
+<div class="govuk-character-count" data-module="govuk-character-count"
 {%- if params.maxlength %} data-maxlength="{{ params.maxlength }}"{% endif %}
 {%- if params.threshold %} data-threshold="{{ params.threshold }}"{% endif %}
 {%- if params.maxwords %} data-maxwords="{{ params.maxwords }}"{% endif %}>
@@ -10,7 +10,7 @@
     describedBy: params.id + '-info',
     rows: params.rows,
     value: params.value,
-    classes: 'js-character-count ' + (' govuk-textarea--error' if params.errorMessage) + (params.classes if params.classes),
+    classes: 'govuk-js-character-count ' + (' govuk-textarea--error' if params.errorMessage) + (params.classes if params.classes),
     label: {
       html: params.label.html,
       text: params.label.text,

data/node_modules/govuk-frontend/{components → govuk/components}/checkboxes/_checkboxes.scss

@@ -127,11 +127,7 @@
 
   // Focused state
   .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
-    // Since box-shadows are removed when users customise their colours, we set
-    // a transparent outline that is shown instead.
-    // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
-    outline: $govuk-focus-width solid transparent;
-    outline-offset: $govuk-focus-width;
+    border-width: 4px;
     box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
   }
 
@@ -154,7 +150,9 @@
   // Conditional reveals
   // =========================================================
 
-  $conditional-border-width: $govuk-border-width-mobile;
+  // The narrow border is used in the conditional reveals because the border has
+  // to be an even number in order to be centred under the 40px checkbox or radio.
+  $conditional-border-width: $govuk-border-width-narrow;
   // Calculate the amount of padding needed to keep the border centered against the checkbox.
   $conditional-border-padding: ($govuk-checkboxes-size / 2) - ($conditional-border-width / 2);
   // Move the border centered with the checkbox

data/node_modules/govuk-frontend/{components → govuk/components}/checkboxes/macro-options.json

@@ -1,4 +1,10 @@
 [
+    {
+        "name": "describedBy",
+        "type": "string",
+        "required": false,
+        "description": "One or more element IDs to add to the input `aria-describedby` attribute without a fieldset, used to provide additional descriptive information for screenreader users."
+    },
     {
         "name": "fieldset",
         "type": "object",

data/node_modules/govuk-frontend/{components → govuk/components}/checkboxes/template.njk

@@ -9,7 +9,10 @@
 
 {#- a record of other elements that we need to associate with the input using
    aria-describedby – for example hints or error messages -#}
-{% set describedBy = "" %}
+{% set describedBy = params.describedBy if params.describedBy else "" %}
+{% if params.fieldset.describedBy %}
+   {% set describedBy = params.fieldset.describedBy %}
+{% endif %}
 
 {% set isConditional = false %}
 {% for item in params.items %}
@@ -48,9 +51,19 @@
 {% endif %}
   <div class="govuk-checkboxes {%- if params.classes %} {{ params.classes }}{% endif %}"
     {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
-    {%- if isConditional %} data-module="checkboxes"{% endif -%}>
+    {%- if isConditional %} data-module="govuk-checkboxes"{% endif -%}>
     {% for item in params.items %}
-    {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
+    {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
+    {%- if item.id -%}
+      {%- set id = item.id -%}
+    {%- else -%}
+      {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
+      {%- if loop.first -%}
+        {%- set id = idPrefix %}
+      {% else %}
+        {%- set id = idPrefix + "-" + loop.index -%}
+      {%- endif -%}
+    {%- endif -%}
     {% set name = item.name if item.name else params.name %}
     {% set conditionalId = "conditional-" + id %}
     {% set hasHint = true if item.hint.text or item.hint.html %}
@@ -71,7 +84,7 @@
         attributes: item.label.attributes,
         for: id
       }) | indent(6) | trim }}
-      {%- if hasHint %}
+      {% if hasHint %}
       {{ govukHint({
         id: itemHintId,
         classes: 'govuk-checkboxes__hint',
@@ -79,7 +92,7 @@
         html: item.hint.html,
         text: item.hint.text
       }) | indent(6) | trim }}
-      {%- endif %}
+      {% endif %}
     </div>
     {% if item.conditional %}
       <div class="govuk-checkboxes__conditional{% if not item.checked %} govuk-checkboxes__conditional--hidden{% endif %}" id="{{ conditionalId }}">

data/node_modules/govuk-frontend/{components → govuk/components}/date-input/template.njk

@@ -5,7 +5,7 @@
 
 {#- a record of other elements that we need to associate with the input using
    aria-describedby – for example hints or error messages -#}
-{% set describedBy = "" %}
+{% set describedBy = params.fieldset.describedBy if params.fieldset.describedBy else "" %}
 
 {% if params.items %}
   {% set dateInputItems = params.items %}

data/node_modules/govuk-frontend/{components → govuk/components}/details/_details.scss

@@ -27,6 +27,14 @@
     // Style the summary to look like a link...
     color: $govuk-link-colour;
     cursor: pointer;
+
+    &:hover {
+      color: $govuk-link-hover-colour;
+    }
+
+    &:focus {
+      @include govuk-focused-text;
+    }
   }
 
   // ...but only underline the text, not the arrow
@@ -34,18 +42,9 @@
     text-decoration: underline;
   }
 
-  .govuk-details__summary:hover {
-    color: $govuk-link-hover-colour;
-  }
-
-  .govuk-details__summary:focus {
-    // -1px offset fixes gap between background and outline in Firefox
-    outline: ($govuk-focus-width + 1px) solid $govuk-focus-colour;
-    outline-offset: -1px;
-    // When focussed, the text colour needs to be darker to ensure that colour
-    // contrast is still acceptable
-    color: $govuk-focus-text-colour;
-    background: $govuk-focus-colour;
+  // Remove the underline when focussed to avoid duplicate borders
+  .govuk-details__summary:focus .govuk-details__summary-text {
+    text-decoration: none;
   }
 
   // Remove the default details marker so we can style our own consistently and
@@ -59,7 +58,7 @@
     content: "";
     position: absolute;
 
-    top: 0;
+    top: -1px;
     bottom: 0;
     left: 0;