govuk_publishing_components 12.8.0 → 12.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a387aeb59072c1b6409f0b54132f6468f45065bca13fc551327ccdb1675d42b1
-  data.tar.gz: c3ffb8f5c1d721e27c44206763cffe6f2f1b7d0885451585ac6f7b6502b1db60
+  metadata.gz: df4a59e5bde0deae7a90d8ab6b60b4bc333082241f512a7d391231015f9160aa
+  data.tar.gz: 9f8d256520354bcf7aa21cf60e41f430a9ac3bb4b16ae65be7191de75020e544
 SHA512:
-  metadata.gz: 0eb5c5f693e7dcf997ee9255300d344c8432941194954a020c67de631b3650f3511715f4feeeb538ea2f614b6e1bb674e4c5e3bcbfa816206d20b4b1c9b01e55
-  data.tar.gz: 8887d46f6cba2359e83ce7fdc092c9b62b43267d4ad5d25c21b548673fcc2d3fe399614a51e2da85e31eb1428118eadf59732eb24df46b368b3fc6a1797e9786
+  metadata.gz: b9484354d62a2985246628f93d405b48f7c21934e9c32570faa84617b44ce132aa516bc0dc8b566da00290606cbb18b3dd4d2cba49dcaa1a0f9e9f511bccf3df
+  data.tar.gz: 6612e414febf1e6aadb2c8220b616b616aef4a0ab885b6cc1633f1cd6b801aa0658121620a29b34a3dd6aba26629fd8b6169a5101153174a33e71535b3dbc80f

data/app/views/govuk_publishing_components/components/_checkboxes.html.erb

@@ -35,6 +35,7 @@
             type: "checkbox",
             value: item[:value],
             class: "govuk-checkboxes__input",
+            checked: item[:checked].present? ? "checked" : nil,
             aria: {
               describedby: item[:hint].present? ? "#{id}-#{index}-item-hint" : nil,
               controls: item[:conditional].present? ? "#{id}-conditional-#{index}" : nil

data/app/views/govuk_publishing_components/components/docs/checkboxes.yml

@@ -80,3 +80,16 @@ examples:
           value: "irish"
         - label: "Other"
           value: "other"
+  checkbox_items_with_checked_items:
+    data:
+      name: "nationality"
+      heading: "What is your nationality?"
+      hint_text: "If you have dual nationality, select all options that are relevant to you."
+      items:
+        - label: "British"
+          value: "british"
+          checked: true
+        - label: "Irish"
+          value: "irish"
+        - label: "Other"
+          value: "other"

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = '12.8.0'.freeze
+  VERSION = '12.9.0'.freeze
 end

data/node_modules/govuk-frontend/all.js

@@ -1159,7 +1159,7 @@ Details.prototype.destroy = function (node) {
 
     if (detect) return
 
-    // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-service/8717a9e04ac7aff99b4980fbedead98036b0929a/packages/polyfill-library/polyfills/Element/prototype/classList/polyfill.js
+    // Polyfill from https://cdn.polyfill.io/v2/polyfill.js?features=Element.prototype.classList&flags=always
     (function (global) {
       var dpSupport = true;
       var defineGetter = function (object, name, fn, configurable) {
@@ -1470,6 +1470,53 @@ Checkboxes.prototype.handleClick = function (event) {
   }
 };
 
+(function(undefined) {
+
+  // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-service/1f3c09b402f65bf6e393f933a15ba63f1b86ef1f/packages/polyfill-library/polyfills/Element/prototype/matches/detect.js
+  var detect = (
+    'document' in this && "matches" in document.documentElement
+  );
+
+  if (detect) return
+
+  // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-service/1f3c09b402f65bf6e393f933a15ba63f1b86ef1f/packages/polyfill-library/polyfills/Element/prototype/matches/polyfill.js
+  Element.prototype.matches = Element.prototype.webkitMatchesSelector || Element.prototype.oMatchesSelector || Element.prototype.msMatchesSelector || Element.prototype.mozMatchesSelector || function matches(selector) {
+    var element = this;
+    var elements = (element.document || element.ownerDocument).querySelectorAll(selector);
+    var index = 0;
+
+    while (elements[index] && elements[index] !== element) {
+      ++index;
+    }
+
+    return !!elements[index];
+  };
+
+}).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/1f3c09b402f65bf6e393f933a15ba63f1b86ef1f/packages/polyfill-library/polyfills/Element/prototype/closest/detect.js
+  var detect = (
+    'document' in this && "closest" in document.documentElement
+  );
+
+  if (detect) return
+
+    // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-service/1f3c09b402f65bf6e393f933a15ba63f1b86ef1f/packages/polyfill-library/polyfills/Element/prototype/closest/polyfill.js
+  Element.prototype.closest = function closest(selector) {
+    var node = this;
+
+    while (node) {
+      if (node.matches(selector)) return node;
+      else node = 'SVGElement' in window && node instanceof SVGElement ? node.parentNode : node.parentElement;
+    }
+
+    return null;
+  };
+
+}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
+
 function ErrorSummary ($module) {
   this.$module = $module;
 }
@@ -1482,6 +1529,119 @@ ErrorSummary.prototype.init = function () {
   window.addEventListener('load', function () {
     $module.focus();
   });
+
+  $module.addEventListener('click', this.handleClick.bind(this));
+};
+
+/**
+* Click event handler
+*
+* @param {MouseEvent} event - Click event
+*/
+ErrorSummary.prototype.handleClick = function (event) {
+  var target = event.target;
+  if (this.focusTarget(target)) {
+    event.preventDefault();
+  }
+};
+
+/**
+ * Focus the target element
+ *
+ * By default, the browser will scroll the target into view. Because our labels
+ * or legends appear above the input, this means the user will be presented with
+ * an input without any context, as the label or legend will be off the top of
+ * the screen.
+ *
+ * Manually handling the click event, scrolling the question into view and then
+ * focussing the element solves this.
+ *
+ * This also results in the label and/or legend being announced correctly in
+ * NVDA (as tested in 2018.3.2) - without this only the field type is announced
+ * (e.g. "Edit, has autocomplete").
+ *
+ * @param {HTMLElement} $target - Event target
+ * @returns {boolean} True if the target was able to be focussed
+ */
+ErrorSummary.prototype.focusTarget = function ($target) {
+  // If the element that was clicked was not a link, return early
+  if ($target.tagName !== 'A' || $target.href === false) {
+    return false
+  }
+
+  var inputId = this.getFragmentFromUrl($target.href);
+  var $input = document.getElementById(inputId);
+  if (!$input) {
+    return false
+  }
+
+  var $legendOrLabel = this.getAssociatedLegendOrLabel($input);
+  if (!$legendOrLabel) {
+    return false
+  }
+
+  // Prefer using the history API where possible, as updating
+  // window.location.hash causes the viewport to jump to the input briefly
+  // before then scrolling to the label/legend in IE10, IE11 and Edge (as tested
+  // in Edge 17).
+  if (window.history.pushState) {
+    window.history.pushState(null, null, '#' + inputId);
+  } else {
+    window.location.hash = inputId;
+  }
+
+  // Scroll the legend or label into view *before* calling focus on the input to
+  // avoid extra scrolling in browsers that don't support `preventScroll` (which
+  // at time of writing is most of them...)
+  $legendOrLabel.scrollIntoView();
+  $input.focus({ preventScroll: true });
+
+  return true
+};
+
+/**
+ * Get fragment from URL
+ *
+ * Extract the fragment (everything after the hash) from a URL, but not including
+ * the hash.
+ *
+ * @param {string} url - URL
+ * @returns {string} Fragment from URL, without the hash
+ */
+ErrorSummary.prototype.getFragmentFromUrl = function (url) {
+  if (url.indexOf('#') === -1) {
+    return false
+  }
+
+  return url.split('#').pop()
+};
+
+/**
+ * Get associated legend or label
+ *
+ * Returns the first element that exists from this list:
+ *
+ * - The `<legend>` associated with the closest `<fieldset>` ancestor
+ * - The first `<label>` that is associated with the input using for="inputId"
+ * - The closest parent `<label>`
+ *
+ * @param {HTMLElement} $input - The input
+ * @returns {HTMLElement} Associated legend or label, or null if no associated
+ *                        legend or label can be found
+ */
+ErrorSummary.prototype.getAssociatedLegendOrLabel = function ($input) {
+  var $fieldset = $input.closest('fieldset');
+
+  if ($fieldset) {
+    var legends = $fieldset.getElementsByTagName('legend');
+
+    if (legends.length) {
+      return legends[0]
+    }
+  }
+
+  return document.querySelector("label[for='" + $input.getAttribute('id') + "']") ||
+    $input.closest('label')
 };
 
 function Header ($module) {

data/node_modules/govuk-frontend/components/back-link/README.md

@@ -59,85 +59,11 @@ In order to include the images used in the components, you need to configure you
 
     app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
 
-## Component arguments
+## Component options
 
-If you are using Nunjucks,then macros take the following arguments
+Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
 
-**If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).**
-
-<table class="govuk-table">
-
-<thead class="govuk-table__head">
-
-<tr class="govuk-table__row">
-
-<th class="govuk-table__header" scope="col">Name</th>
-
-<th class="govuk-table__header" scope="col">Type</th>
-
-<th class="govuk-table__header" scope="col">Required</th>
-
-<th class="govuk-table__header" scope="col">Description</th>
-
-</tr>
-
-</thead>
-
-<tbody class="govuk-table__body">
-
-<tr class="govuk-table__row">
-
-<th class="govuk-table__header" scope="row">text (or) html</th>
-
-<td class="govuk-table__cell">string</td>
-
-<td class="govuk-table__cell">Yes</td>
-
-<td class="govuk-table__cell">Text or HTML to use within the back link component. If `html` is provided, the `text` argument will be ignored.</td>
-
-</tr>
-
-<tr class="govuk-table__row">
-
-<th class="govuk-table__header" scope="row">href</th>
-
-<td class="govuk-table__cell">string</td>
-
-<td class="govuk-table__cell">Yes</td>
-
-<td class="govuk-table__cell">The value of the link href attribute</td>
-
-</tr>
-
-<tr class="govuk-table__row">
-
-<th class="govuk-table__header" scope="row">classes</th>
-
-<td class="govuk-table__cell">string</td>
-
-<td class="govuk-table__cell">No</td>
-
-<td class="govuk-table__cell">Optional additional classes to add to the anchor tag.</td>
-
-</tr>
-
-<tr class="govuk-table__row">
-
-<th class="govuk-table__header" scope="row">attributes</th>
-
-<td class="govuk-table__cell">object</td>
-
-<td class="govuk-table__cell">No</td>
-
-<td class="govuk-table__cell">Any extra HTML attributes (for example data attributes) to add to the anchor tag.</td>
-
-</tr>
-
-</tbody>
-
-</table>
-
-**If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).**
+See [options table](https://design-system.service.gov.uk/components/back-link/#options-example-default) for details.
 
 ### Setting up Nunjucks views and paths
 

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

@@ -224,109 +224,11 @@ In order to include the images used in the components, you need to configure you
 
     app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
 
-## Component arguments
+## Component options
 
-If you are using Nunjucks,then macros take the following arguments
+Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
 
-**If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).**
-
-<table class="govuk-table">
-
-<thead class="govuk-table__head">
-
-<tr class="govuk-table__row">
-
-<th class="govuk-table__header" scope="col">Name</th>
-
-<th class="govuk-table__header" scope="col">Type</th>
-
-<th class="govuk-table__header" scope="col">Required</th>
-
-<th class="govuk-table__header" scope="col">Description</th>
-
-</tr>
-
-</thead>
-
-<tbody class="govuk-table__body">
-
-<tr class="govuk-table__row">
-
-<th class="govuk-table__header" scope="row">items</th>
-
-<td class="govuk-table__cell">array</td>
-
-<td class="govuk-table__cell">Yes</td>
-
-<td class="govuk-table__cell">Array of breadcrumbs item objects.</td>
-
-</tr>
-
-<tr class="govuk-table__row">
-
-<th class="govuk-table__header" scope="row">items.{}.text (or) items.{}.html</th>
-
-<td class="govuk-table__cell">string</td>
-
-<td class="govuk-table__cell">Yes</td>
-
-<td class="govuk-table__cell">Text or HTML to use within the breadcrumbs item. If `html` is provided, the `text` argument will be ignored.</td>
-
-</tr>
-
-<tr class="govuk-table__row">
-
-<th class="govuk-table__header" scope="row">items.{}.href</th>
-
-<td class="govuk-table__cell">string</td>
-
-<td class="govuk-table__cell">no</td>
-
-<td class="govuk-table__cell">Link for the breadcrumbs item. If not specified, breadcrumbs item is a normal list item</td>
-
-</tr>
-
-<tr class="govuk-table__row">
-
-<th class="govuk-table__header" scope="row">items.{}.attributes</th>
-
-<td class="govuk-table__cell">object</td>
-
-<td class="govuk-table__cell">No</td>
-
-<td class="govuk-table__cell">Any extra HTML attributes (for example data attributes) to add to the breadcrumb anchor item.</td>
-
-</tr>
-
-<tr class="govuk-table__row">
-
-<th class="govuk-table__header" scope="row">classes</th>
-
-<td class="govuk-table__cell">string</td>
-
-<td class="govuk-table__cell">No</td>
-
-<td class="govuk-table__cell">Optional additional classes to add to the breadcrumbs container.</td>
-
-</tr>
-
-<tr class="govuk-table__row">
-
-<th class="govuk-table__header" scope="row">attributes</th>
-
-<td class="govuk-table__cell">object</td>
-
-<td class="govuk-table__cell">No</td>
-
-<td class="govuk-table__cell">Any extra HTML attributes (for example data attributes) to add to the breadcrumbs container.</td>
-
-</tr>
-
-</tbody>
-
-</table>
-
-**If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).**
+See [options table](https://design-system.service.gov.uk/components/breadcrumbs/#options-example-default) for details.
 
 ### Setting up Nunjucks views and paths
 

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

@@ -160,145 +160,11 @@ In order to include the images used in the components, you need to configure you
 
     app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
 
-## Component arguments
+## Component options
 
-If you are using Nunjucks,then macros take the following arguments
+Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
 
-**If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).**
-
-<table class="govuk-table">
-
-<thead class="govuk-table__head">
-
-<tr class="govuk-table__row">
-
-<th class="govuk-table__header" scope="col">Name</th>
-
-<th class="govuk-table__header" scope="col">Type</th>
-
-<th class="govuk-table__header" scope="col">Required</th>
-
-<th class="govuk-table__header" scope="col">Description</th>
-
-</tr>
-
-</thead>
-
-<tbody class="govuk-table__body">
-
-<tr class="govuk-table__row">
-
-<th class="govuk-table__header" scope="row">element</th>
-
-<td class="govuk-table__cell">string</td>
-
-<td class="govuk-table__cell">No</td>
-
-<td class="govuk-table__cell">Whether to use an `input`, `button` or `a` element to create the button. In most cases you will not need to set this as it will be configured automatically if you use `href` or `html`.</td>
-
-</tr>
-
-<tr class="govuk-table__row">
-
-<th class="govuk-table__header" scope="row">text (or) html</th>
-
-<td class="govuk-table__cell">string</td>
-
-<td class="govuk-table__cell">Yes</td>
-
-<td class="govuk-table__cell">Text or HTML for the button or link. If `html` is provided, the `text` argument will be ignored and `element` will be automatically set to `button` unless `href` is also set, or it has already been defined. This argument has no effect if `element` is set to `input`.</td>
-
-</tr>
-
-<tr class="govuk-table__row">
-
-<th class="govuk-table__header" scope="row">name</th>
-
-<td class="govuk-table__cell">string</td>
-
-<td class="govuk-table__cell">Yes</td>
-
-<td class="govuk-table__cell">Name for the `input` or `button`. This has no effect on `a` elements.</td>
-
-</tr>
-
-<tr class="govuk-table__row">
-
-<th class="govuk-table__header" scope="row">type</th>
-
-<td class="govuk-table__cell">string</td>
-
-<td class="govuk-table__cell">Yes</td>
-
-<td class="govuk-table__cell">Type of `input` or `button` – `button`, `submit` or `reset`. Defaults to `submit`. This has no effect on `a` elements.</td>
-
-</tr>
-
-<tr class="govuk-table__row">
-
-<th class="govuk-table__header" scope="row">value</th>
-
-<td class="govuk-table__cell">string</td>
-
-<td class="govuk-table__cell">Yes</td>
-
-<td class="govuk-table__cell">Value for the `button` tag. This has no effect on `a` or `input` elements.</td>
-
-</tr>
-
-<tr class="govuk-table__row">
-
-<th class="govuk-table__header" scope="row">disabled</th>
-
-<td class="govuk-table__cell">boolean</td>
-
-<td class="govuk-table__cell">No</td>
-
-<td class="govuk-table__cell">Whether the button should be disabled. For button and input elements, `disabled` and `aria-disabled` attributes will be set automatically.</td>
-
-</tr>
-
-<tr class="govuk-table__row">
-
-<th class="govuk-table__header" scope="row">href</th>
-
-<td class="govuk-table__cell">string</td>
-
-<td class="govuk-table__cell">No</td>
-
-<td class="govuk-table__cell">The URL that the button should link to. If this is set, `element` will be automatically set to `a` if it has not already been defined.</td>
-
-</tr>
-
-<tr class="govuk-table__row">
-
-<th class="govuk-table__header" scope="row">classes</th>
-
-<td class="govuk-table__cell">string</td>
-
-<td class="govuk-table__cell">No</td>
-
-<td class="govuk-table__cell">Optional additional classes</td>
-
-</tr>
-
-<tr class="govuk-table__row">
-
-<th class="govuk-table__header" scope="row">attributes</th>
-
-<td class="govuk-table__cell">object</td>
-
-<td class="govuk-table__cell">No</td>
-
-<td class="govuk-table__cell">Any extra HTML attributes (for example data attributes) to add to the button component.</td>
-
-</tr>
-
-</tbody>
-
-</table>
-
-**If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).**
+See [options table](https://design-system.service.gov.uk/components/button/#options-example-default) for details.
 
 ### Setting up Nunjucks views and paths