govuk_publishing_components 9.6.0 → 9.7.0

data/node_modules/govuk-frontend/components/checkboxes/README.md

@@ -155,6 +155,82 @@ Find out when to use the checkboxes component in your service in the [GOV.UK Des
       ]
     }) }}
 
+### Checkboxes with hints on items
+
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-hints-on-items/preview)
+
+#### Markup
+
+    <div class="govuk-form-group">
+
+      <fieldset class="govuk-fieldset">
+
+      <legend class="govuk-fieldset__legend">
+        <h1 class="govuk-fieldset__heading">
+          How do you want to sign in?
+        </h1>
+      </legend>
+
+      <div class="govuk-checkboxes">
+
+        <div class="govuk-checkboxes__item">
+          <input class="govuk-checkboxes__input" id="government-gateway" name="gateway" type="checkbox" value="gov-gateway" aria-describedby="government-gateway-item-hint">
+          <label class="govuk-label govuk-checkboxes__label" for="government-gateway">
+            Sign in with Government Gateway
+          </label>
+          <span id="government-gateway-item-hint" class="govuk-hint govuk-checkboxes__hint">
+            You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before.
+          </span>
+        </div>
+
+        <div class="govuk-checkboxes__item">
+          <input class="govuk-checkboxes__input" id="govuk-verify" name="verify" type="checkbox" value="gov-verify" aria-describedby="govuk-verify-item-hint">
+          <label class="govuk-label govuk-checkboxes__label" for="govuk-verify">
+            Sign in with GOV.UK Verify
+          </label>
+          <span id="govuk-verify-item-hint" class="govuk-hint govuk-checkboxes__hint">
+            You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.
+          </span>
+        </div>
+
+      </div>
+      </fieldset>
+
+    </div>
+
+#### Macro
+
+    {% from "checkboxes/macro.njk" import govukCheckboxes %}
+
+    {{ govukCheckboxes({
+      "fieldset": {
+        "legend": {
+          "text": "How do you want to sign in?",
+          "isPageHeading": true
+        }
+      },
+      "items": [
+        {
+          "name": "gateway",
+          "id": "government-gateway",
+          "value": "gov-gateway",
+          "text": "Sign in with Government Gateway",
+          "hint": {
+            "text": "You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before."
+          }
+        },
+        {
+          "name": "verify",
+          "id": "govuk-verify",
+          "value": "gov-verify",
+          "text": "Sign in with GOV.UK Verify",
+          "hint": {
+            "text": "You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
+          }
+        }
+      ]
+    }) }}
+
 ### Checkboxes with disabled item
 
 [Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-disabled-item/preview)
@@ -649,7 +725,7 @@ If you are using Nunjucks,then macros take the following arguments
 
 <td class="govuk-table__cell ">No</td>
 
-<td class="govuk-table__cell ">Arguments for the fieldset component (e.g. legend). See fieldset component.</td>
+<td class="govuk-table__cell ">Arguments for the fieldset component (e.g. legend). See <a href="../fieldset/README.md#component-arguments">fieldset</a> component.</td>
 
 </tr>
 
@@ -661,7 +737,7 @@ If you are using Nunjucks,then macros take the following arguments
 
 <td class="govuk-table__cell ">No</td>
 
-<td class="govuk-table__cell ">Arguments for the hint component (e.g. text). See hint component.</td>
+<td class="govuk-table__cell ">Arguments for the hint component (e.g. text). See <a href="../hint/README.md#component-arguments">hint</a> component.</td>
 
 </tr>
 
@@ -673,7 +749,7 @@ If you are using Nunjucks,then macros take the following arguments
 
 <td class="govuk-table__cell ">No</td>
 
-<td class="govuk-table__cell ">Arguments for the errorMessage component (e.g. text). See errorMessage component.</td>
+<td class="govuk-table__cell ">Arguments for the errorMessage component (e.g. text). See <a href="../error-message/README.md#component-arguments">errorMessage</a> component.</td>
 
 </tr>
 
@@ -769,7 +845,19 @@ If you are using Nunjucks,then macros take the following arguments
 
 <td class="govuk-table__cell ">No</td>
 
-<td class="govuk-table__cell ">Provide additional attributes to each checkbox item label. See `label` component for more details.</td>
+<td class="govuk-table__cell ">Provide additional attributes and classes to each checkbox item label. See [label](../label/README.md#component-arguments) component for more details.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">items.{}.hint</th>
+
+<td class="govuk-table__cell ">object</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Provide optional hint to each checkbox item. See `hint` component for more details.</td>
 
 </tr>
 

data/node_modules/govuk-frontend/components/checkboxes/_checkboxes.scss

@@ -66,6 +66,12 @@
     touch-action: manipulation;
   }
 
+  .govuk-checkboxes__hint {
+    display: block;
+    padding-right: $govuk-checkboxes-label-padding-left-right;
+    padding-left: $govuk-checkboxes-label-padding-left-right;
+  }
+
   .govuk-checkboxes__input + .govuk-checkboxes__label::before {
     content: "";
     -webkit-box-sizing: border-box;
@@ -146,7 +152,7 @@
     padding-left: $conditional-padding-left;
     border-left: $conditional-border-width solid $govuk-border-colour;
 
-    &[aria-hidden="true"] {
+    .js-enabled &--hidden {
       display: none;
     }
 

data/node_modules/govuk-frontend/components/checkboxes/checkboxes.js

@@ -659,6 +659,361 @@ if (detect) return
 })
 .call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
 
+(function(undefined) {
+
+    // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-service/master/packages/polyfill-library/polyfills/DOMTokenList/detect.js
+    var detect = (
+      'DOMTokenList' in this && (function (x) {
+        return 'classList' in x ? !x.classList.toggle('x', false) && !x.className : true;
+      })(document.createElement('x'))
+    );
+
+    if (detect) return
+
+    // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-service/master/packages/polyfill-library/polyfills/DOMTokenList/polyfill.js
+    (function (global) {
+      var nativeImpl = "DOMTokenList" in global && global.DOMTokenList;
+
+      if (
+          !nativeImpl ||
+          (
+            !!document.createElementNS &&
+            !!document.createElementNS('http://www.w3.org/2000/svg', 'svg') &&
+            !(document.createElementNS("http://www.w3.org/2000/svg", "svg").classList instanceof DOMTokenList)
+          )
+        ) {
+        global.DOMTokenList = (function() { // eslint-disable-line no-unused-vars
+          var dpSupport = true;
+          var defineGetter = function (object, name, fn, configurable) {
+            if (Object.defineProperty)
+              Object.defineProperty(object, name, {
+                configurable: false === dpSupport ? true : !!configurable,
+                get: fn
+              });
+
+            else object.__defineGetter__(name, fn);
+          };
+
+          /** Ensure the browser allows Object.defineProperty to be used on native JavaScript objects. */
+          try {
+            defineGetter({}, "support");
+          }
+          catch (e) {
+            dpSupport = false;
+          }
+
+
+          var _DOMTokenList = function (el, prop) {
+            var that = this;
+            var tokens = [];
+            var tokenMap = {};
+            var length = 0;
+            var maxLength = 0;
+            var addIndexGetter = function (i) {
+              defineGetter(that, i, function () {
+                preop();
+                return tokens[i];
+              }, false);
+
+            };
+            var reindex = function () {
+
+              /** Define getter functions for array-like access to the tokenList's contents. */
+              if (length >= maxLength)
+                for (; maxLength < length; ++maxLength) {
+                  addIndexGetter(maxLength);
+                }
+            };
+
+            /** Helper function called at the start of each class method. Internal use only. */
+            var preop = function () {
+              var error;
+              var i;
+              var args = arguments;
+              var rSpace = /\s+/;
+
+              /** Validate the token/s passed to an instance method, if any. */
+              if (args.length)
+                for (i = 0; i < args.length; ++i)
+                  if (rSpace.test(args[i])) {
+                    error = new SyntaxError('String "' + args[i] + '" ' + "contains" + ' an invalid character');
+                    error.code = 5;
+                    error.name = "InvalidCharacterError";
+                    throw error;
+                  }
+
+
+              /** Split the new value apart by whitespace*/
+              if (typeof el[prop] === "object") {
+                tokens = ("" + el[prop].baseVal).replace(/^\s+|\s+$/g, "").split(rSpace);
+              } else {
+                tokens = ("" + el[prop]).replace(/^\s+|\s+$/g, "").split(rSpace);
+              }
+
+              /** Avoid treating blank strings as single-item token lists */
+              if ("" === tokens[0]) tokens = [];
+
+              /** Repopulate the internal token lists */
+              tokenMap = {};
+              for (i = 0; i < tokens.length; ++i)
+                tokenMap[tokens[i]] = true;
+              length = tokens.length;
+              reindex();
+            };
+
+            /** Populate our internal token list if the targeted attribute of the subject element isn't empty. */
+            preop();
+
+            /** Return the number of tokens in the underlying string. Read-only. */
+            defineGetter(that, "length", function () {
+              preop();
+              return length;
+            });
+
+            /** Override the default toString/toLocaleString methods to return a space-delimited list of tokens when typecast. */
+            that.toLocaleString =
+              that.toString = function () {
+                preop();
+                return tokens.join(" ");
+              };
+
+            that.item = function (idx) {
+              preop();
+              return tokens[idx];
+            };
+
+            that.contains = function (token) {
+              preop();
+              return !!tokenMap[token];
+            };
+
+            that.add = function () {
+              preop.apply(that, args = arguments);
+
+              for (var args, token, i = 0, l = args.length; i < l; ++i) {
+                token = args[i];
+                if (!tokenMap[token]) {
+                  tokens.push(token);
+                  tokenMap[token] = true;
+                }
+              }
+
+              /** Update the targeted attribute of the attached element if the token list's changed. */
+              if (length !== tokens.length) {
+                length = tokens.length >>> 0;
+                if (typeof el[prop] === "object") {
+                  el[prop].baseVal = tokens.join(" ");
+                } else {
+                  el[prop] = tokens.join(" ");
+                }
+                reindex();
+              }
+            };
+
+            that.remove = function () {
+              preop.apply(that, args = arguments);
+
+              /** Build a hash of token names to compare against when recollecting our token list. */
+              for (var args, ignore = {}, i = 0, t = []; i < args.length; ++i) {
+                ignore[args[i]] = true;
+                delete tokenMap[args[i]];
+              }
+
+              /** Run through our tokens list and reassign only those that aren't defined in the hash declared above. */
+              for (i = 0; i < tokens.length; ++i)
+                if (!ignore[tokens[i]]) t.push(tokens[i]);
+
+              tokens = t;
+              length = t.length >>> 0;
+
+              /** Update the targeted attribute of the attached element. */
+              if (typeof el[prop] === "object") {
+                el[prop].baseVal = tokens.join(" ");
+              } else {
+                el[prop] = tokens.join(" ");
+              }
+              reindex();
+            };
+
+            that.toggle = function (token, force) {
+              preop.apply(that, [token]);
+
+              /** Token state's being forced. */
+              if (undefined !== force) {
+                if (force) {
+                  that.add(token);
+                  return true;
+                } else {
+                  that.remove(token);
+                  return false;
+                }
+              }
+
+              /** Token already exists in tokenList. Remove it, and return FALSE. */
+              if (tokenMap[token]) {
+                that.remove(token);
+                return false;
+              }
+
+              /** Otherwise, add the token and return TRUE. */
+              that.add(token);
+              return true;
+            };
+
+            return that;
+          };
+
+          return _DOMTokenList;
+        }());
+      }
+
+      // Add second argument to native DOMTokenList.toggle() if necessary
+      (function () {
+        var e = document.createElement('span');
+        if (!('classList' in e)) return;
+        e.classList.toggle('x', false);
+        if (!e.classList.contains('x')) return;
+        e.classList.constructor.prototype.toggle = function toggle(token /*, force*/) {
+          var force = arguments[1];
+          if (force === undefined) {
+            var add = !this.contains(token);
+            this[add ? 'add' : 'remove'](token);
+            return add;
+          }
+          force = !!force;
+          this[force ? 'add' : 'remove'](token);
+          return force;
+        };
+      }());
+
+      // Add multiple arguments to native DOMTokenList.add() if necessary
+      (function () {
+        var e = document.createElement('span');
+        if (!('classList' in e)) return;
+        e.classList.add('a', 'b');
+        if (e.classList.contains('b')) return;
+        var native = e.classList.constructor.prototype.add;
+        e.classList.constructor.prototype.add = function () {
+          var args = arguments;
+          var l = arguments.length;
+          for (var i = 0; i < l; i++) {
+            native.call(this, args[i]);
+          }
+        };
+      }());
+
+      // Add multiple arguments to native DOMTokenList.remove() if necessary
+      (function () {
+        var e = document.createElement('span');
+        if (!('classList' in e)) return;
+        e.classList.add('a');
+        e.classList.add('b');
+        e.classList.remove('a', 'b');
+        if (!e.classList.contains('b')) return;
+        var native = e.classList.constructor.prototype.remove;
+        e.classList.constructor.prototype.remove = function () {
+          var args = arguments;
+          var l = arguments.length;
+          for (var i = 0; i < l; i++) {
+            native.call(this, args[i]);
+          }
+        };
+      }());
+
+    }(this));
+
+}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
+
+(function(undefined) {
+
+    // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-service/8717a9e04ac7aff99b4980fbedead98036b0929a/packages/polyfill-library/polyfills/Element/prototype/classList/detect.js
+    var detect = (
+      'document' in this && "classList" in document.documentElement && 'Element' in this && 'classList' in Element.prototype && (function () {
+        var e = document.createElement('span');
+        e.classList.add('a', 'b');
+        return e.classList.contains('b');
+      }())
+    );
+
+    if (detect) return
+
+    // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-service/8717a9e04ac7aff99b4980fbedead98036b0929a/packages/polyfill-library/polyfills/Element/prototype/classList/polyfill.js
+    (function (global) {
+      var dpSupport = true;
+      var defineGetter = function (object, name, fn, configurable) {
+        if (Object.defineProperty)
+          Object.defineProperty(object, name, {
+            configurable: false === dpSupport ? true : !!configurable,
+            get: fn
+          });
+
+        else object.__defineGetter__(name, fn);
+      };
+      /** Ensure the browser allows Object.defineProperty to be used on native JavaScript objects. */
+      try {
+        defineGetter({}, "support");
+      }
+      catch (e) {
+        dpSupport = false;
+      }
+      /** Polyfills a property with a DOMTokenList */
+      var addProp = function (o, name, attr) {
+
+        defineGetter(o.prototype, name, function () {
+          var tokenList;
+
+          var THIS = this,
+
+          /** Prevent this from firing twice for some reason. What the hell, IE. */
+          gibberishProperty = "__defineGetter__" + "DEFINE_PROPERTY" + name;
+          if(THIS[gibberishProperty]) return tokenList;
+          THIS[gibberishProperty] = true;
+
+          /**
+           * IE8 can't define properties on native JavaScript objects, so we'll use a dumb hack instead.
+           *
+           * What this is doing is creating a dummy element ("reflection") inside a detached phantom node ("mirror")
+           * that serves as the target of Object.defineProperty instead. While we could simply use the subject HTML
+           * element instead, this would conflict with element types which use indexed properties (such as forms and
+           * select lists).
+           */
+          if (false === dpSupport) {
+
+            var visage;
+            var mirror = addProp.mirror || document.createElement("div");
+            var reflections = mirror.childNodes;
+            var l = reflections.length;
+
+            for (var i = 0; i < l; ++i)
+              if (reflections[i]._R === THIS) {
+                visage = reflections[i];
+                break;
+              }
+
+            /** Couldn't find an element's reflection inside the mirror. Materialise one. */
+            visage || (visage = mirror.appendChild(document.createElement("div")));
+
+            tokenList = DOMTokenList.call(visage, THIS, attr);
+          } else tokenList = new DOMTokenList(THIS, attr);
+
+          defineGetter(THIS, name, function () {
+            return tokenList;
+          });
+          delete THIS[gibberishProperty];
+
+          return tokenList;
+        }, true);
+      };
+
+      addProp(global.Element, "classList", "className");
+      addProp(global.HTMLElement, "classList", "className");
+      addProp(global.HTMLLinkElement, "relList", "rel");
+      addProp(global.HTMLAnchorElement, "relList", "rel");
+      addProp(global.HTMLAreaElement, "relList", "rel");
+    }(this));
+
+}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
+
 /**
  * TODO: Ideally this would be a NodeList.prototype.forEach polyfill
  * This seems to fail in IE8, requires more investigation.
@@ -711,7 +1066,7 @@ Checkboxes.prototype.setAttributes = function ($input) {
   $input.setAttribute('aria-expanded', inputIsChecked);
 
   var $content = document.querySelector('#' + $input.getAttribute('aria-controls'));
-  $content.setAttribute('aria-hidden', !inputIsChecked);
+  $content.classList.toggle('govuk-checkboxes__conditional--hidden', !inputIsChecked);
 };
 
 Checkboxes.prototype.handleClick = function (event) {