govuk_publishing_components 21.57.0 → 21.60.1

data/node_modules/govuk-frontend/govuk/components/date-input/macro-options.json

@@ -45,7 +45,7 @@
                 "name": "autocomplete",
                 "type": "string",
                 "required": false,
-                "description": "Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance \"postal-code\" or \"username\". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used."
+                "description": "Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance \"bday-day\". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used."
             },
             {
                 "name": "pattern",

data/node_modules/govuk-frontend/govuk/components/file-upload/_index.scss

@@ -47,31 +47,4 @@
       box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
     }
   }
-
-  .govuk-file-upload--error {
-    // As `upload--error` has border, it needs to have the same padding as
-    // the standard focused element.
-    margin-right: -$component-padding;
-    margin-left: -$component-padding;
-    padding-right: $component-padding;
-    padding-left: $component-padding;
-    border: $govuk-border-width-form-element-error solid $govuk-error-colour;
-
-    &:focus {
-      border-color: $govuk-input-border-colour;
-      // Remove `box-shadow` inherited from `:focus` as `file-upload--error`
-      // already has the thicker border.
-      box-shadow: none;
-    }
-
-    // Repeat `:focus` styles to prevent error styles from being applied when
-    // input button is pressed as this moves the focus to "within".
-    // This can't be set together with `:focus` as all versions of IE fail
-    // to recognise `focus-within` and don't set any styles from the block
-    // when it's a selector.
-    &:focus-within {
-      border-color: $govuk-input-border-colour;
-      box-shadow: none;
-    }
-  }
 }

data/node_modules/govuk-frontend/govuk/components/footer/_index.scss

@@ -210,20 +210,17 @@
     padding: 0;
     list-style: none;
     -webkit-column-gap: $govuk-gutter;
-       -moz-column-gap: $govuk-gutter;
             column-gap: $govuk-gutter; // Support: Columns
   }
 
   @include govuk-media-query ($from: desktop) {
     .govuk-footer__list--columns-2 {
       -webkit-column-count: 2;
-         -moz-column-count: 2;
               column-count: 2; // Support: Columns
     }
 
     .govuk-footer__list--columns-3 {
       -webkit-column-count: 3;
-         -moz-column-count: 3;
               column-count: 3; // Support: Columns
     }
   }

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

@@ -58,7 +58,7 @@
           focusable="false"
           class="govuk-footer__licence-logo"
           xmlns="http://www.w3.org/2000/svg"
-          viewbox="0 0 483.2 195.7"
+          viewBox="0 0 483.2 195.7"
           height="17"
           width="41"
         >

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

@@ -21,7 +21,7 @@
             focusable="false"
             class="govuk-header__logotype-crown"
             xmlns="http://www.w3.org/2000/svg"
-            viewbox="0 0 132 97"
+            viewBox="0 0 132 97"
             height="30"
             width="36"
           >

data/node_modules/govuk-frontend/govuk/components/hint/_index.scss

@@ -16,7 +16,7 @@
   // is unlikely that the default or govuk-label--s class would be used in this
   // case.
 
-  // This adjustment will not work in browsers that do not support :not(). 
+  // This adjustment will not work in browsers that do not support :not().
   // Users with these browsers will see the default size margin (5px larger).
 
   .govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .govuk-hint {
@@ -30,7 +30,7 @@
   // it is unlikely that the default or govuk-fieldset__legend--s class would be
   // used in this case.
 
-  // This adjustment will not work in browsers that do not support :not(). 
+  // This adjustment will not work in browsers that do not support :not().
   // Users with these browsers will see the default size margin (5px larger).
 
   .govuk-fieldset__legend:not(.govuk-fieldset__legend--m):not(.govuk-fieldset__legend--l):not(.govuk-fieldset__legend--xl) + .govuk-hint {

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

@@ -1,4 +1,4 @@
-<span {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-hint {%- if params.classes %} {{ params.classes }}{% endif %}"
+<div {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-hint {%- if params.classes %} {{ params.classes }}{% endif %}"
 {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   {{ params.html | safe if params.html else params.text }}
-</span>
+</div>

data/node_modules/govuk-frontend/govuk/components/input/_index.scss

@@ -58,9 +58,6 @@
 
     &:focus {
       border-color: $govuk-input-border-colour;
-      // Remove `box-shadow` inherited from `:focus` as `input--error`
-      // already has the thicker border.
-      box-shadow: none;
     }
   }
 

data/node_modules/govuk-frontend/govuk/components/input/macro-options.json

@@ -88,6 +88,12 @@
         "required": false,
         "description": "Attribute to [provide a regular expression pattern](https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute), used to match allowed character combinations for the input value."
     },
+    {
+        "name": "spellcheck",
+        "type": "boolean",
+        "required": false,
+        "description": "Optional field to enable or disable the spellcheck attribute on the input."
+    },
     {
         "name": "attributes",
         "type": "object",

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

@@ -38,6 +38,7 @@
   }) | indent(2) | trim }}
 {% endif %}
   <input class="govuk-input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} govuk-input--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"
+  {%- if (params.spellcheck === false) or (params.spellcheck === true) %} spellcheck="{{ params.spellcheck }}"{% endif %}
   {%- if params.value %} value="{{ params.value}}"{% endif %}
   {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
   {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}

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

@@ -1030,67 +1030,115 @@ function nodeListForEach (nodes, callback) {
 
 function Radios ($module) {
   this.$module = $module;
+  this.$inputs = $module.querySelectorAll('input[type="radio"]');
 }
 
+/**
+ * Initialise Radios
+ *
+ * Radios can be associated with a 'conditionally revealed' content block – for
+ * example, a radio for 'Phone' could reveal an additional form field for the
+ * user to enter their phone number.
+ *
+ * These associations are made using a `data-aria-controls` attribute, which is
+ * promoted to an aria-controls attribute during initialisation.
+ *
+ * We also need to restore the state of any conditional reveals on the page (for
+ * example if the user has navigated back), and set up event handlers to keep
+ * the reveal in sync with the radio state.
+ */
 Radios.prototype.init = function () {
   var $module = this.$module;
-  var $inputs = $module.querySelectorAll('input[type="radio"]');
+  var $inputs = this.$inputs;
 
-  /**
-  * Loop over all items with [data-controls]
-  * Check if they have a matching conditional reveal
-  * If they do, assign attributes.
-  **/
   nodeListForEach($inputs, function ($input) {
-    var controls = $input.getAttribute('data-aria-controls');
+    var target = $input.getAttribute('data-aria-controls');
 
-    // Check if input controls anything
-    // Check if content exists, before setting attributes.
-    if (!controls || !$module.querySelector('#' + controls)) {
+    // Skip radios without data-aria-controls attributes, or where the
+    // target element does not exist.
+    if (!target || !$module.querySelector('#' + target)) {
       return
     }
 
-    // If we have content that is controlled, set attributes.
-    $input.setAttribute('aria-controls', controls);
+    // Promote the data-aria-controls attribute to a aria-controls attribute
+    // so that the relationship is exposed in the AOM
+    $input.setAttribute('aria-controls', target);
     $input.removeAttribute('data-aria-controls');
-    this.setAttributes($input);
-  }.bind(this));
+  });
+
+  // When the page is restored after navigating 'back' in some browsers the
+  // state of form controls is not restored until *after* the DOMContentLoaded
+  // event is fired, so we need to sync after the pageshow event in browsers
+  // that support it.
+  if ('onpageshow' in window) {
+    window.addEventListener('pageshow', this.syncAllConditionalReveals.bind(this));
+  } else {
+    window.addEventListener('DOMContentLoaded', this.syncAllConditionalReveals.bind(this));
+  }
+
+  // Although we've set up handlers to sync state on the pageshow or
+  // DOMContentLoaded event, init could be called after those events have fired,
+  // for example if they are added to the page dynamically, so sync now too.
+  this.syncAllConditionalReveals();
 
   // Handle events
   $module.addEventListener('click', this.handleClick.bind(this));
 };
 
-Radios.prototype.setAttributes = function ($input) {
-  var $content = document.querySelector('#' + $input.getAttribute('aria-controls'));
+/**
+ * Sync the conditional reveal states for all inputs in this $module.
+ */
+Radios.prototype.syncAllConditionalReveals = function () {
+  nodeListForEach(this.$inputs, this.syncConditionalRevealWithInputState.bind(this));
+};
 
-  if ($content && $content.classList.contains('govuk-radios__conditional')) {
+/**
+ * Sync conditional reveal with the input state
+ *
+ * Synchronise the visibility of the conditional reveal, and its accessible
+ * state, with the input's checked state.
+ *
+ * @param {HTMLInputElement} $input Radio input
+ */
+Radios.prototype.syncConditionalRevealWithInputState = function ($input) {
+  var $target = document.querySelector('#' + $input.getAttribute('aria-controls'));
+
+  if ($target && $target.classList.contains('govuk-radios__conditional')) {
     var inputIsChecked = $input.checked;
 
     $input.setAttribute('aria-expanded', inputIsChecked);
-
-    $content.classList.toggle('govuk-radios__conditional--hidden', !inputIsChecked);
+    $target.classList.toggle('govuk-radios__conditional--hidden', !inputIsChecked);
   }
 };
 
+/**
+ * Click event handler
+ *
+ * Handle a click within the $module – if the click occurred on a radio, sync
+ * the state of the conditional reveal for all radio buttons in the same form
+ * with the same name (because checking one radio could have un-checked a radio
+ * in another $module)
+ *
+ * @param {MouseEvent} event Click event
+ */
 Radios.prototype.handleClick = function (event) {
   var $clickedInput = event.target;
-  // We only want to handle clicks for radio inputs
+
+  // Ignore clicks on things that aren't radio buttons
   if ($clickedInput.type !== 'radio') {
     return
   }
-  // Because checking one radio can uncheck a radio in another $module,
-  // we need to call set attributes on all radios in the same form, or document if they're not in a form.
-  //
-  // We also only want radios which have aria-controls, as they support conditional reveals.
+
+  // We only need to consider radios with conditional reveals, which will have
+  // aria-controls attributes.
   var $allInputs = document.querySelectorAll('input[type="radio"][aria-controls]');
+
   nodeListForEach($allInputs, function ($input) {
-    // Only inputs with the same form owner should change.
     var hasSameFormOwner = ($input.form === $clickedInput.form);
-
-    // In radios, only radios with the same name will affect each other.
     var hasSameName = ($input.name === $clickedInput.name);
+
     if (hasSameName && hasSameFormOwner) {
-      this.setAttributes($input);
+      this.syncConditionalRevealWithInputState($input);
     }
   }.bind(this));
 };

data/node_modules/govuk-frontend/govuk/components/select/_index.scss

@@ -44,9 +44,6 @@
 
     &:focus {
       border-color: $govuk-input-border-colour;
-      // Remove `box-shadow` inherited from `:focus` as `select--error`
-      // already has the thicker border.
-      box-shadow: none;
     }
   }
 

data/node_modules/govuk-frontend/govuk/components/skip-link/_index.scss

@@ -21,6 +21,7 @@
 
     &:focus {
       outline: $govuk-focus-width solid $govuk-focus-colour;
+      outline-offset: 0;
       background-color: $govuk-focus-colour;
 
       // Undo unwanted changes when global styles are enabled

data/node_modules/govuk-frontend/govuk/components/textarea/_index.scss

@@ -42,9 +42,6 @@
 
     &:focus {
       border-color: $govuk-input-border-colour;
-      // Remove `box-shadow` inherited from `:focus` as `textarea--error`
-      // already has the thicker border.
-      box-shadow: none;
     }
 
   }

data/node_modules/govuk-frontend/govuk/components/textarea/macro-options.json

@@ -11,6 +11,12 @@
         "required": true,
         "description": "The name of the textarea, which is submitted with the form data."
     },
+    {
+        "name": "spellcheck",
+        "type": "boolean",
+        "required": false,
+        "description": "Optional field to enable or disable the spellcheck attribute on the textarea."
+    },
     {
         "name": "rows",
         "type": "string",

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

@@ -38,6 +38,7 @@
   }) | indent(2) | trim }}
 {% endif %}
   <textarea class="govuk-textarea {{- ' govuk-textarea--error' if params.errorMessage }} {{- ' ' + params.classes if params.classes}}" id="{{ params.id }}" name="{{ params.name }}" rows="{%if params.rows %} {{- params.rows -}} {% else %}5{%endif %}"
+  {%- if (params.spellcheck === false) or (params.spellcheck === true) %} spellcheck="{{ params.spellcheck }}"{% endif %}
   {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
   {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
   {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.value }}</textarea>

data/node_modules/govuk-frontend/govuk/components/warning-text/_index.scss

@@ -13,13 +13,15 @@
   .govuk-warning-text__icon {
     @include govuk-font($size: false, $weight: bold);
 
+    box-sizing: border-box;
+
     display: inline-block;
 
     position: absolute;
     left: 0;
 
-    min-width: 29px;
-    min-height: 29px;
+    min-width: 35px;
+    min-height: 35px;
     margin-top: -7px;
 
     @include govuk-media-query($from: tablet) {

data/node_modules/govuk-frontend/govuk/helpers/_colour.scss

@@ -52,7 +52,7 @@
 ///   colour will be returned which meets contrast requirements . If you want to
 ///   use the non-websafe version you can set this to `false` but your should
 ///   ensure that you still meets contrast requirements for accessibility - for
-///   example, don't use the non-websafe version for text.
+///   example, do not use the non-websafe version for text.
 ///
 /// @return {Colour} Representation of colour for organisation
 /// @throw if `$organisation` is not a known organisation

data/node_modules/govuk-frontend/govuk/settings/_colours-applied.scss

@@ -52,7 +52,7 @@ $govuk-print-text-colour: #000000 !default;
 
 /// Secondary text colour
 ///
-/// Used for 'muted' text, help text, etc.
+/// Used in for example 'muted' text and help text.
 ///
 /// @type Colour
 /// @access public
@@ -90,7 +90,7 @@ $govuk-error-colour: govuk-colour("red") !default;
 
 /// Border colour
 ///
-/// Used for borders, separators, rules, keylines etc.
+/// Used in for example borders, separators, rules and keylines.
 ///
 /// @type Colour
 /// @access public

data/node_modules/govuk-frontend/govuk/settings/_colours-palette.scss

@@ -70,7 +70,7 @@ $_govuk-colour-palette-modern: (
   "purple": #4c2c92,
 
   "black": #0b0c0c,
-  "dark-grey": #626a6e,
+  "dark-grey": #505a5f,
   "mid-grey": #b1b4b6,
   "light-grey": #f3f2f1,
   "white": #ffffff,

data/node_modules/govuk-frontend/govuk/settings/_measurements.scss

@@ -81,8 +81,11 @@ $govuk-border-width-form-element: 2px !default;
 ///
 /// @type Number
 /// @access public
+/// @deprecated Use $govuk-border-width-form-element instead. There should be no
+///   difference in thickness for inputs in the error state, in order to
+///   maintain a distinct focus state.
 
-$govuk-border-width-form-element-error: 4px !default;
+$govuk-border-width-form-element-error: 2px !default;
 
 /// Form group border width when in error state
 ///

data/node_modules/govuk-frontend/package.json

@@ -1,74 +1,23 @@
 {
-  "_args": [
-    [
-      {
-        "raw": "govuk-frontend@^3.7.0",
-        "scope": null,
-        "escapedName": "govuk-frontend",
-        "name": "govuk-frontend",
-        "rawSpec": "^3.7.0",
-        "spec": ">=3.7.0 <4.0.0",
-        "type": "range"
-      },
-      "/var/lib/jenkins/workspace/ublishing_components_master-N4FWJIUY4CIFHKGZOAAEVVXODRY3YBORQOPIBBXWX72VUPSGJRRQ"
-    ]
-  ],
-  "_from": "govuk-frontend@>=3.7.0 <4.0.0",
-  "_hasShrinkwrap": false,
-  "_id": "govuk-frontend@3.7.0",
-  "_inCache": true,
-  "_location": "/govuk-frontend",
-  "_nodeVersion": "12.13.1",
-  "_npmOperationalInternal": {
-    "host": "s3://npm-registry-packages",
-    "tmp": "tmp/govuk-frontend_3.7.0_1591023375568_0.08981992062114386"
-  },
-  "_npmUser": {
-    "name": "govuk-patterns-and-tools",
-    "email": "design-system-deploy+npm@digital.cabinet-office.gov.uk"
-  },
-  "_npmVersion": "6.12.1",
-  "_phantomChildren": {},
-  "_requested": {
-    "raw": "govuk-frontend@^3.7.0",
-    "scope": null,
-    "escapedName": "govuk-frontend",
-    "name": "govuk-frontend",
-    "rawSpec": "^3.7.0",
-    "spec": ">=3.7.0 <4.0.0",
-    "type": "range"
+  "name": "govuk-frontend",
+  "description": "GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.",
+  "version": "3.8.0",
+  "main": "govuk/all.js",
+  "sass": "govuk/all.scss",
+  "engines": {
+    "node": ">= 4.2.0"
   },
-  "_requiredBy": [
-    "/"
-  ],
-  "_resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.7.0.tgz",
-  "_shasum": "2eb2130c3c9f7c701c7ecdb300cc91106275a414",
-  "_shrinkwrap": null,
-  "_spec": "govuk-frontend@^3.7.0",
-  "_where": "/var/lib/jenkins/workspace/ublishing_components_master-N4FWJIUY4CIFHKGZOAAEVVXODRY3YBORQOPIBBXWX72VUPSGJRRQ",
   "author": {
-    "name": "GOV.UK Design System Team",
-    "email": "design-system-developers@digital.cabinet-office.gov.uk",
-    "url": "Government Digital Service"
+    "name": "GOV.UK Design System Team (Government Digital Service)",
+    "email": "design-system-developers@digital.cabinet-office.gov.uk"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/alphagov/govuk-frontend.git"
   },
   "bugs": {
     "url": "https://github.com/alphagov/govuk-frontend/issues"
   },
-  "dependencies": {},
-  "description": "GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.",
-  "devDependencies": {},
-  "directories": {},
-  "dist": {
-    "integrity": "sha512-G3bqoKGGF8YQ18UJH9tTARrwB8i7iPwN1xc8RXwWyx91q0p/Xl10uNywZLkzGWcJDzEz1vwmBTTL3SLDU/KxNg==",
-    "shasum": "2eb2130c3c9f7c701c7ecdb300cc91106275a414",
-    "tarball": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.7.0.tgz",
-    "fileCount": 277,
-    "unpackedSize": 1031388,
-    "npm-signature": "-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1RcQCRA9TVsSAnZWagAAVssP/Rgy/zroRGgis6A7IGKr\nLoXiduk2Zl2dSos0glFBxVxL2P/2Wn4VPjiHKAu/ldH6wLGhgg601IfBH+ZI\nKBGWayz3j8ZmZLltseD8wks6wIpvg28RemifYDKRFmgZI6i31OwdKLoLvYF5\nF8bf8vzlgOGVHg+TweEKW8hJ2RsjHNZ2sI27Hh/qIRNzcmuQ6Tu6Q1vRtphK\nxwc+KC+DYsHIis/k/h+9C6oo7Ja59U/z1n8EohzYTvZU4J6x64FjAGj6GLl2\nopibQSz84XHPHDo2ZZKlWuoDAYlUmyewnDRsEIwGXGYWvecwHnYwcBx8eU+n\nKxrPX1tDEDkuoBIyc1G14kr07CADbU3DahfD8dFHYd7e8zZYIn731GZN6VH5\n9LuJLROKiz4BucOMn9UPYfSccPLUwVV3iRAC2Uo6UQRsnueA6m0ATeGeTmZo\n1C11kuxdkPAp7CdphHxPkl2LZAjXBAGh6UrGf6FD/kChVf6uqV59FoqgHuHS\nkeUbE1u+RdInWfniHX62W0FTQZD8LbNY8DfDCHZlVALzb7C77O4E2puKlLsK\nkRhj8P50is161A0cKbSeUi56/v4jQdaIkfaWstQalWmi6K5+rt5TxZR09JQL\n7O73z3u14cOKvqiV1IPduNt8bOMKDtrKcioGU8lEUIKtVvPJGgB+GfUcNaf9\nPHrk\r\n=KkMF\r\n-----END PGP SIGNATURE-----\r\n"
-  },
-  "engines": {
-    "node": ">= 4.2.0"
-  },
   "homepage": "https://frontend.design-system.service.gov.uk/",
   "keywords": [
     "govuk",
@@ -76,21 +25,5 @@
     "design system",
     "template"
   ],
-  "license": "MIT",
-  "main": "govuk/all.js",
-  "maintainers": [
-    {
-      "name": "govuk-patterns-and-tools",
-      "email": "design-system-pipeline@digital.cabinet-office.gov.uk"
-    }
-  ],
-  "name": "govuk-frontend",
-  "optionalDependencies": {},
-  "readme": "ERROR: No README data found!",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/alphagov/govuk-frontend.git"
-  },
-  "sass": "govuk/all.scss",
-  "version": "3.7.0"
+  "license": "MIT"
 }