dxw_govuk_frontend_rails 3.7.0 → 3.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 76252356e718d773b335f5c46af4aa74fb1c7d1a7145941c030183ce45043340
-  data.tar.gz: 1a2df5ee7e9080f9975aa76b749074405fed3a6f48062fc9996e0f82dbbf49c3
+  metadata.gz: 24366e1d10fcdffc7d4ce6ab81b1af6bc53a01971488e7dc4d1e3dc82b3edf3c
+  data.tar.gz: 9ef221edb271314433d1944067443cb2500536c98cf89e84e672ffd56c5ccc05
 SHA512:
-  metadata.gz: 435fc41bbd556daab6ab8286d78b7c9f7d22166e64b345653e221d01aa035cb478bc566d792d55cb99a335cfdb56b0391764b7566839185c86cffe13765cc86a
-  data.tar.gz: 8ae7e6ca9a70f1c4796f4950dee3b11e4e8dde78be034614a7c95f4fc3eacff6de59b3c31f2d9690cb9e710da920725654a31c319b98eaa2e7ae1c9d850a372f
+  metadata.gz: 5fb712c7e9a7b679f9727b49d57eefe2ca24c0e2b01b0216999ef20ff4ca5c476a63be78d803ff4651b330d5361a4bd13d342dc44118a667cd41b86c1fd44dee
+  data.tar.gz: 3c0f0d0f3d3dd1182d366a2a547345a63ea13ba90d44a7fa0e914201954c7547aafeff04119f64dcdb1db39c9002d922161df2758f5fc1f05a5290ce45312cc4

data/CONTRIBUTING.md

@@ -0,0 +1 @@
+The [dxw standard contributing guide](https://github.com/dxw/.github/blob/main/CONTRIBUTING.md) applies for this repository.

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    dxw_govuk_frontend_rails (3.7.0)
+    dxw_govuk_frontend_rails (3.8.0)
 
 GEM
   remote: https://rubygems.org/
@@ -10,6 +10,7 @@ GEM
 
 PLATFORMS
   ruby
+  x86_64-darwin-19
 
 DEPENDENCIES
   bundler (~> 2.0)
@@ -17,4 +18,4 @@ DEPENDENCIES
   rake (~> 13.0)
 
 BUNDLED WITH
-   2.0.2
+   2.2.1

data/README.md

@@ -1,88 +1,91 @@
 # GOVUK Frontend for Rails
 
-Adds the GOVUK Frontend for Rails using the asset pipeline.
+## Read this first
+
+Although this gem makes it super easy to add the GOVUK Frontend to your
+Rails applications, we would recommend using it as a guide to add the
+GOVUK Frontend yourself.
+
+## About Adds the GOVUK Frontend for Rails using the asset pipeline.
 
 https://github.com/alphagov/govuk-frontend
 
 ## Breaking Changes in v3.0.0
 
-This release of the GOVUK Frontend has breaking changes! Do not update to this version until you have read and understood:
+This release of the GOVUK Frontend has breaking changes! Do not update to this
+version until you have read and understood:
 
-You will not be required to updated any file paths with govuk as we take care of that for you, all others changes will need to be managed:
+You will not be required to updated any file paths with govuk as we take care of
+that for you, all others changes will need to be managed:
 
 https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0
 
 ## Limitations
 
-This gem does not include the ie8 version of GOVUK Frontend, as the service standard no longer requires it:
+This gem does not include the ie8 version of GOVUK Frontend, as the service
+standard no longer requires it:
 
 https://www.gov.uk/service-manual/technology/designing-for-different-browsers-and-devices
 
-This gem and its documentation cannot tell you how to use the GOVUK effectively, see the GOVUK Design System documentation for that:
+This gem and its documentation cannot tell you how to use the GOVUK effectively,
+see the GOVUK Design System documentation for that:
 
-https://design-system.service.gov.uk/
-## Installation
+https://design-system.service.gov.uk/ ## Installation
 
 Add this line to your application's Gemfile:
 
-```ruby
-gem 'dxw_govuk_frontend_rails'
-```
+```ruby gem 'dxw_govuk_frontend_rails' ```
 
 And then execute:
 
     $ bundle
 
-## Usage
-Your Rails app will need to have sass enabled.
+## Usage Your Rails app will need to have sass enabled.
 
 ### Basic usage
 
-If the service you are building does not need to modify or extend the GOVUK Frontend all you need to do is import the main sass and javascript files into your Rails app:
+If the service you are building does not need to modify or extend the GOVUK
+Frontend all you need to do is import the main sass and javascript files into
+your Rails app:
 
-- create a sass file in your application:
-```
-app/assets/stylesheets/govuk_frontend_rails.scss
-```
-- import the styles into `govuk_frontend_rails.scss`:
-```sass
-@import "govuk-frontend-rails";
-```
-- require the `govuk-frontend-rails.scss` file in `application.css` or equivalent:
+- create a sass file in your application: ```
+  app/assets/stylesheets/govuk_frontend_rails.scss ```
+- import the styles into `govuk_frontend_rails.scss`: ```sass @import
+  "govuk-frontend-rails"; ```
+- require the `govuk-frontend-rails.scss` file in `application.css` or
+  equivalent:
 
-```
-*= require govuk_frontend_rails
-```
+``` *= require govuk_frontend_rails ```
 
 - require the javascript into `app/assets/javascripts/application.js`:
 
-```
-//= require govuk_frontend_rails
-```
-- initialise the GOVUK Frontend either in a .js file on in your application layout:
+``` //= require govuk_frontend_rails ```
+- initialise the GOVUK Frontend either in a .js file on in your application
+  layout:
 
-```javascript
-window.onload = function() {
-  window.GOVUKFrontend.initAll()
-};
-```
+```javascript window.onload = function() { window.GOVUKFrontend.initAll() }; ```
 - update your application markup to use the GOVUK Frontend class names
 
-IMPORTANT: You cannot use the GOVUK Frontend without changes if the service you are building is not on GOV.UK, read and understand the guidance here:
+IMPORTANT: You cannot use the GOVUK Frontend without changes if the service you
+are building is not on GOV.UK, read and understand the guidance here:
 
 https://www.gov.uk/service-manual/design/making-your-service-look-like-govuk#if-your-service-isnt-on-govuk
 
-## Tracking version
-We aim to tracking the version of GOVUK Frontend.
+## Tracking version We aim to tracking the version of GOVUK Frontend.
 
 ## Updating to a new Version of GOVUK Frontend
 
 When a new version of the GOVUK Frontend is released:
 
-- set the new version number in `package.json` and `lib/dxw_govuk_frontend_rails/version.rb`
-- run  `npm update` to get the new release
-- run `bundle rake` to compile the new assets
+- make a new branch with the GOVUK Frontend version number
+- set the new version number in `package.json` and
+  `lib/dxw_govuk_frontend_rails/version.rb`
+- run  `npm update` to get the new release of the GOVUK Frontend
+- run `bundle exec rake` to compile the new assets
 - commit the changes
 - tag with the same release number as GOVUK Frontend
-- push the changes
-- Github acitons will build the gem and push to Rubygems
+- push the change
+- push the tag
+- merge your branch
+- make a new release of the tag on GitHub
+- GitHub acitons will build the gem and push to Rubygems

data/lib/dxw_govuk_frontend_rails/version.rb

@@ -1,3 +1,3 @@
 module DxwGovukFrontendRails
-  VERSION = "3.7.0"
+  VERSION = "3.8.0"
 end

data/package-lock.json

@@ -5,9 +5,9 @@
   "requires": true,
   "dependencies": {
     "govuk-frontend": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.7.0.tgz",
-      "integrity": "sha512-G3bqoKGGF8YQ18UJH9tTARrwB8i7iPwN1xc8RXwWyx91q0p/Xl10uNywZLkzGWcJDzEz1vwmBTTL3SLDU/KxNg=="
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.8.0.tgz",
+      "integrity": "sha512-+vgXzFsh7wpLRGjFSDvDcA2zNA2wOxT6gGs/KUpkTjF1Uop9BerW/1W/YB1BMpeTEJoPlmrkA19+DS1fqJtL9Q=="
     }
   }
 }

data/package.json

@@ -21,6 +21,6 @@
   },
   "homepage": "https://github.com/mec/dxw_govuk_frontend_rails#readme",
   "dependencies": {
-    "govuk-frontend": "3.7.0"
+    "govuk-frontend": "3.8.0"
   }
 }

data/vendor/assets/javascripts/govuk_frontend_rails.js

@@ -1542,13 +1542,22 @@ CharacterCount.prototype.init = function () {
   // Remove hard limit if set
   $module.removeAttribute('maxlength');
 
-  // Bind event changes to the textarea
-  var boundChangeEvents = this.bindChangeEvents.bind(this);
-  boundChangeEvents();
+  // When the page is restored after navigating 'back' in some browsers the
+  // state of the character count 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.sync.bind(this));
+  } else {
+    window.addEventListener('DOMContentLoaded', this.sync.bind(this));
+  }
+
+  this.sync();
+};
 
-  // Update count message
-  var boundUpdateCountMessage = this.updateCountMessage.bind(this);
-  boundUpdateCountMessage();
+CharacterCount.prototype.sync = function () {
+  this.bindChangeEvents();
+  this.updateCountMessage();
 };
 
 // Read data attributes
@@ -1596,8 +1605,7 @@ CharacterCount.prototype.checkIfValueChanged = function () {
   if (!this.$textarea.oldValue) this.$textarea.oldValue = '';
   if (this.$textarea.value !== this.$textarea.oldValue) {
     this.$textarea.oldValue = this.$textarea.value;
-    var boundUpdateCountMessage = this.updateCountMessage.bind(this);
-    boundUpdateCountMessage();
+    this.updateCountMessage();
   }
 };
 
@@ -1666,44 +1674,91 @@ function Checkboxes ($module) {
   this.$inputs = $module.querySelectorAll('input[type="checkbox"]');
 }
 
+/**
+ * Initialise Checkboxes
+ *
+ * Checkboxes can be associated with a 'conditionally revealed' content block –
+ * for example, a checkbox 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 checkbox state.
+ */
 Checkboxes.prototype.init = function () {
   var $module = this.$module;
   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 checkboxes 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));
 };
 
-Checkboxes.prototype.setAttributes = function ($input) {
-  var inputIsChecked = $input.checked;
-  $input.setAttribute('aria-expanded', inputIsChecked);
+/**
+ * Sync the conditional reveal states for all inputs in this $module.
+ */
+Checkboxes.prototype.syncAllConditionalReveals = function () {
+  nodeListForEach(this.$inputs, this.syncConditionalRevealWithInputState.bind(this));
+};
+
+/**
+ * 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 Checkbox input
+ */
+Checkboxes.prototype.syncConditionalRevealWithInputState = function ($input) {
+  var $target = this.$module.querySelector('#' + $input.getAttribute('aria-controls'));
 
-  var $content = this.$module.querySelector('#' + $input.getAttribute('aria-controls'));
-  if ($content) {
-    $content.classList.toggle('govuk-checkboxes__conditional--hidden', !inputIsChecked);
+  if ($target && $target.classList.contains('govuk-checkboxes__conditional')) {
+    var inputIsChecked = $input.checked;
+
+    $input.setAttribute('aria-expanded', inputIsChecked);
+    $target.classList.toggle('govuk-checkboxes__conditional--hidden', !inputIsChecked);
   }
 };
 
+/**
+ * Click event handler
+ *
+ * Handle a click within the $module – if the click occurred on a checkbox, sync
+ * the state of any associated conditional reveal with the checkbox state.
+ *
+ * @param {MouseEvent} event Click event
+ */
 Checkboxes.prototype.handleClick = function (event) {
   var $target = event.target;
 
@@ -1711,7 +1766,7 @@ Checkboxes.prototype.handleClick = function (event) {
   var isCheckbox = $target.getAttribute('type') === 'checkbox';
   var hasAriaControls = $target.getAttribute('aria-controls');
   if (isCheckbox && hasAriaControls) {
-    this.setAttributes($target);
+    this.syncConditionalRevealWithInputState($target);
   }
 };
 
@@ -1959,67 +2014,115 @@ Header.prototype.handleClick = function (event) {
 
 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/vendor/assets/stylesheets/components/checkboxes/_index.scss

@@ -92,12 +92,13 @@
   // rotated 45 degrees
   .govuk-checkboxes__label::after {
     content: "";
+    box-sizing: border-box;
 
     position: absolute;
     top: 11px;
     left: 9px;
-    width: 18px;
-    height: 7px;
+    width: 23px;
+    height: 12px;
 
     -webkit-transform: rotate(-45deg);
 
@@ -105,7 +106,7 @@
 
             transform: rotate(-45deg);
     border: solid;
-    border-width: 0 0 $govuk-border-width $govuk-border-width;
+    border-width: 0 0 5px 5px;
     // Fix bug in IE11 caused by transform rotate (-45deg).
     // See: alphagov/govuk_elements/issues/518
     border-top-color: transparent;
@@ -238,8 +239,8 @@
     .govuk-checkboxes__label::after {
       top: 15px;
       left: 6px;
-      width: 9px;
-      height: 3.5px;
+      width: 12px;
+      height: 6.5px;
       border-width: 0 0 3px 3px;
     }
 

data/vendor/assets/stylesheets/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/vendor/assets/stylesheets/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/vendor/assets/stylesheets/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/vendor/assets/stylesheets/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/vendor/assets/stylesheets/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/vendor/assets/stylesheets/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/vendor/assets/stylesheets/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/vendor/assets/stylesheets/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/vendor/assets/stylesheets/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/vendor/assets/stylesheets/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/vendor/assets/stylesheets/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/vendor/assets/stylesheets/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
 ///

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: dxw_govuk_frontend_rails
 version: !ruby/object:Gem::Version
-  version: 3.7.0
+  version: 3.8.0
 platform: ruby
 authors:
 - mec
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2020-06-26 00:00:00.000000000 Z
+date: 2020-12-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -49,6 +49,7 @@ files:
 - ".github/workflows/test.yml"
 - ".gitignore"
 - CODE_OF_CONDUCT.md
+- CONTRIBUTING.md
 - Gemfile
 - Gemfile.lock
 - LICENSE.txt
@@ -215,7 +216,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.1.2
+rubygems_version: 3.1.4
 signing_key: 
 specification_version: 4
 summary: Adds the GOVUK frontend to a Rails application that uses the Asset Pipeline.