dxw_govuk_frontend_rails 3.9.1 → 3.13.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 32963462555eea031d11a2c85e7d59aff6534434c5430e522a1468c591d1aa8d
-  data.tar.gz: 636e39bce62acc9c6106a2f2156865d26f53bda67e68c7d50e3e5352f0e3bfae
+  metadata.gz: d13df6b5f41f50ed1be07dbd4e157072e6cdc64537df5d5fb2f807ca846a59bc
+  data.tar.gz: 79da91fc77c60ed37047d26a770491aa83a717a619ae2e0e45373c5fe3472061
 SHA512:
-  metadata.gz: 4e5169826e7097a3939119f86b73050355f2330f2e3befa2c9146273a51f01a9ee40d521626f6a372d001590e55e26cafeb2ea8c9c1fd787ff5078c0b52b5725
-  data.tar.gz: 3fec0b62d356b58d8cf364d3ebd9d618c092e352fc8cbb6813d047413579a8ec08f36471b46506c6c38c3642d4988dd65b3548c2ec2f0eccd03f045381e65f51
+  metadata.gz: 555d823ff0083d5603ba327eaf385579658a75c2596ce0d734cf649483d210661e5fe4dca8677e0cc220fb578e0761c75c95ff5f7c002c61c59e3a6466c17cc8
+  data.tar.gz: 85551726cc81c6721b9588796611e5bca8b573c32a88df7adcff020cbdb7279567a86e403fe4a5a6ab346971358cb7749ec23e14bb5f32b45e213bbec90e7061

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    dxw_govuk_frontend_rails (3.9.1)
+    dxw_govuk_frontend_rails (3.13.1)
 
 GEM
   remote: https://rubygems.org/
@@ -18,4 +18,4 @@ DEPENDENCIES
   rake (~> 13.0)
 
 BUNDLED WITH
-   2.2.1
+   2.2.24

data/README.md

@@ -1,91 +1,112 @@
-# GOVUK Frontend for Rails
+# GOV.UK Frontend for Rails
 
 ## 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.
+Although this gem makes it super easy to add the GOV.UK Frontend to your Rails
+applications, we would recommend using it as a guide to add the GOV.UK Frontend
+yourself.
 
-## About Adds the GOVUK Frontend for Rails using the asset pipeline.
+## About
+
+Adds the GOV.UK 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
+This release of the GOV.UK 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 GOV.UK Frontend, as the service
+standard no longer requires support for Internet Explorer versions less than 11:
 
 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 GOV.UK patterns
+effectively, see the GOV.UK Design System documentation for that:
+
+https://design-system.service.gov.uk/
 
-https://design-system.service.gov.uk/ ## Installation
+## 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
+```
+$ bundle
+```
+
+## Usage
 
-## Usage Your Rails app will need to have sass enabled.
+Your Rails app will need to have SCSS enabled.
+
+**IMPORTANT: You must not use this library 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
 
 ### 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
+If the service you are building does not need to modify or extend the GOV.UK
+Frontend, all you need to do is import the main SCSS 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 SCSS file in your application:
 
-``` *= require govuk_frontend_rails ```
+  `app/assets/stylesheets/govuk_frontend_rails.scss`
 
-- require the javascript into `app/assets/javascripts/application.js`:
+- import the styles into `govuk_frontend_rails.scss`:
 
-``` //= require govuk_frontend_rails ```
-- initialise the GOVUK Frontend either in a .js file on in your application
+  `@import "govuk-frontend-rails";`
+
+- import the `govuk-frontend-rails.scss` file in the comment block in
+  `app/assets/stylesheets/application.css` or equivalent:
+
+  `*= require govuk_frontend_rails`
+
+- import the JavaScript in the comment block of
+  `app/assets/javascripts/application.js`:
+
+  `//= require govuk_frontend_rails`
+
+- initialise the GOV.UK Frontend either in a .js file or in your application
   layout:
 
-```javascript window.onload = function() { window.GOVUKFrontend.initAll() }; ```
-- update your application markup to use the GOVUK Frontend class names
+  `window.onload = function() { window.GOVUKFrontend.initAll() };`
 
-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:
+- update your application markup to use the GOV.UK Frontend class names
 
-https://www.gov.uk/service-manual/design/making-your-service-look-like-govuk#if-your-service-isnt-on-govuk
+## Tracking GOV.UK Frontend versions
 
-## Tracking version We aim to tracking the version of GOVUK Frontend.
+We aim to track the latest version of GOV.UK Frontend but we may fall behind.
+Opening an issue if we are behind on a new release would be helpful, or open a
+PR to update to the latest release!
 
-## Updating to a new Version of GOVUK Frontend
+## Updating to a new version of GOV.UK Frontend
 
-When a new version of the GOVUK Frontend is released:
+When a new version of the GOV.UK Frontend is released:
 
-- make a new branch with the GOVUK Frontend version number
+- make a new branch with the GOV.UK 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 `npm update` to get the new release of the GOV.UK Frontend
 - run `bundle exec rake` to compile the new assets
 - commit the changes
-- tag with the same release number as GOVUK Frontend
+- tag with the same release number as GOV.UK Frontend
 - 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
+- GitHub actions will build the gem and push to RubyGems

data/lib/dxw_govuk_frontend_rails/version.rb

@@ -1,3 +1,3 @@
 module DxwGovukFrontendRails
-  VERSION = "3.9.1"
+  VERSION = "3.13.1"
 end

data/package-lock.json

@@ -1,13 +1,31 @@
 {
   "name": "dxw_govuk_frontend_rails",
   "version": "1.0.0",
-  "lockfileVersion": 1,
+  "lockfileVersion": 2,
   "requires": true,
+  "packages": {
+    "": {
+      "name": "dxw_govuk_frontend_rails",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "govuk-frontend": "3.13.1"
+      }
+    },
+    "node_modules/govuk-frontend": {
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.13.1.tgz",
+      "integrity": "sha512-OlbAVVpJfZ8tEhkScVoNFA+27RUfMDslN4uxtJyASfXwg4QZYHTX8RqmKBbgVJWaybpa5RsYDuRKQNJe3qN8gw==",
+      "engines": {
+        "node": ">= 4.2.0"
+      }
+    }
+  },
   "dependencies": {
     "govuk-frontend": {
-      "version": "3.9.1",
-      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.9.1.tgz",
-      "integrity": "sha512-ouOoDUj0QwDA4uCHIBkGCFMpORuTRcSuDscOrz7V1PBcOecntLglxJAZAuNm+j2sPo7anoScHU0ZSeE2QIoeAg=="
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.13.1.tgz",
+      "integrity": "sha512-OlbAVVpJfZ8tEhkScVoNFA+27RUfMDslN4uxtJyASfXwg4QZYHTX8RqmKBbgVJWaybpa5RsYDuRKQNJe3qN8gw=="
     }
   }
 }

data/package.json

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

data/vendor/assets/javascripts/govuk_frontend_rails.js

@@ -1498,7 +1498,7 @@ function CharacterCount ($module) {
   this.$module = $module;
   this.$textarea = $module.querySelector('.govuk-js-character-count');
   if (this.$textarea) {
-    this.$countMessage = $module.querySelector('[id=' + this.$textarea.id + '-info]');
+    this.$countMessage = $module.querySelector('[id="' + this.$textarea.id + '-info"]');
   }
 }
 
@@ -1751,6 +1751,47 @@ Checkboxes.prototype.syncConditionalRevealWithInputState = function ($input) {
   }
 };
 
+/**
+ * Uncheck other checkboxes
+ *
+ * Find any other checkbox inputs with the same name value, and uncheck them.
+ * This is useful for when a “None of these" checkbox is checked.
+ */
+Checkboxes.prototype.unCheckAllInputsExcept = function ($input) {
+  var allInputsWithSameName = document.querySelectorAll('input[type="checkbox"][name="' + $input.name + '"]');
+
+  nodeListForEach(allInputsWithSameName, function ($inputWithSameName) {
+    var hasSameFormOwner = ($input.form === $inputWithSameName.form);
+    if (hasSameFormOwner && $inputWithSameName !== $input) {
+      $inputWithSameName.checked = false;
+    }
+  });
+
+  this.syncAllConditionalReveals();
+};
+
+/**
+ * Uncheck exclusive inputs
+ *
+ * Find any checkbox inputs with the same name value and the 'exclusive' behaviour,
+ * and uncheck them. This helps prevent someone checking both a regular checkbox and a
+ * "None of these" checkbox in the same fieldset.
+ */
+Checkboxes.prototype.unCheckExclusiveInputs = function ($input) {
+  var allInputsWithSameNameAndExclusiveBehaviour = document.querySelectorAll(
+    'input[data-behaviour="exclusive"][type="checkbox"][name="' + $input.name + '"]'
+  );
+
+  nodeListForEach(allInputsWithSameNameAndExclusiveBehaviour, function ($exclusiveInput) {
+    var hasSameFormOwner = ($input.form === $exclusiveInput.form);
+    if (hasSameFormOwner) {
+      $exclusiveInput.checked = false;
+    }
+  });
+
+  this.syncAllConditionalReveals();
+};
+
 /**
  * Click event handler
  *
@@ -1762,12 +1803,29 @@ Checkboxes.prototype.syncConditionalRevealWithInputState = function ($input) {
 Checkboxes.prototype.handleClick = function (event) {
   var $target = event.target;
 
-  // If a checkbox with aria-controls, handle click
-  var isCheckbox = $target.getAttribute('type') === 'checkbox';
+  // Ignore clicks on things that aren't checkbox inputs
+  if ($target.type !== 'checkbox') {
+    return
+  }
+
+  // If the checkbox conditionally-reveals some content, sync the state
   var hasAriaControls = $target.getAttribute('aria-controls');
-  if (isCheckbox && hasAriaControls) {
+  if (hasAriaControls) {
     this.syncConditionalRevealWithInputState($target);
   }
+
+  // No further behaviour needed for unchecking
+  if (!$target.checked) {
+    return
+  }
+
+  // Handle 'exclusive' checkbox behaviour (ie "None of these")
+  var hasBehaviourExclusive = ($target.getAttribute('data-behaviour') === 'exclusive');
+  if (hasBehaviourExclusive) {
+    this.unCheckAllInputsExcept($target);
+  } else {
+    this.unCheckExclusiveInputs($target);
+  }
 };
 
 (function(undefined) {
@@ -1959,6 +2017,58 @@ ErrorSummary.prototype.getAssociatedLegendOrLabel = function ($input) {
     $input.closest('label')
 };
 
+function NotificationBanner ($module) {
+  this.$module = $module;
+}
+
+/**
+ * Initialise the component
+ */
+NotificationBanner.prototype.init = function () {
+  var $module = this.$module;
+  // Check for module
+  if (!$module) {
+    return
+  }
+
+  this.setFocus();
+};
+
+/**
+ * Focus the element
+ *
+ * If `role="alert"` is set, focus the element to help some assistive technologies
+ * prioritise announcing it.
+ *
+ * You can turn off the auto-focus functionality by setting `data-disable-auto-focus="true"` in the
+ * component HTML. You might wish to do this based on user research findings, or to avoid a clash
+ * with another element which should be focused when the page loads.
+ */
+NotificationBanner.prototype.setFocus = function () {
+  var $module = this.$module;
+
+  if ($module.getAttribute('data-disable-auto-focus') === 'true') {
+    return
+  }
+
+  if ($module.getAttribute('role') !== 'alert') {
+    return
+  }
+
+  // Set tabindex to -1 to make the element focusable with JavaScript.
+  // Remove the tabindex on blur as the component doesn't need to be focusable after the page has
+  // loaded.
+  if (!$module.getAttribute('tabindex')) {
+    $module.setAttribute('tabindex', '-1');
+
+    $module.addEventListener('blur', function () {
+      $module.removeAttribute('tabindex');
+    });
+  }
+
+  $module.focus();
+};
+
 function Header ($module) {
   this.$module = $module;
   this.$menuButton = $module && $module.querySelector('.govuk-js-header-toggle');
@@ -2476,6 +2586,11 @@ function initAll (options) {
   var $toggleButton = scope.querySelector('[data-module="govuk-header"]');
   new Header($toggleButton).init();
 
+  var $notificationBanners = scope.querySelectorAll('[data-module="govuk-notification-banner"]');
+  nodeListForEach($notificationBanners, function ($notificationBanner) {
+    new NotificationBanner($notificationBanner).init();
+  });
+
   var $radios = scope.querySelectorAll('[data-module="govuk-radios"]');
   nodeListForEach($radios, function ($radio) {
     new Radios($radio).init();

data/vendor/assets/stylesheets/components/_all.scss

@@ -6,6 +6,7 @@
 @import "button/index";
 @import "checkboxes/index";
 @import "character-count/index";
+@import "cookie-banner/index";
 @import "summary-list/index";
 @import "date-input/index";
 @import "details/index";
@@ -19,6 +20,7 @@
 @import "input/index";
 @import "inset-text/index";
 @import "label/index";
+@import "notification-banner/index";
 @import "panel/index";
 @import "phase-banner/index";
 @import "tabs/index";

data/vendor/assets/stylesheets/components/accordion/_index.scss

@@ -1,9 +1,4 @@
 @include govuk-exports("govuk/component/accordion") {
-
-  $govuk-accordion-link-colour: $govuk-link-colour;
-  $govuk-accordion-link-hover-colour: govuk-colour("light-blue");
-  $govuk-accordion-border-width: 3px;
-
   .govuk-accordion {
     @include govuk-responsive-margin(6, "bottom");
   }
@@ -98,19 +93,9 @@
       // Safe area on the right to avoid clashing with icon
       padding-right: 40px;
       border-top: 1px solid $govuk-border-colour;
-      color: $govuk-accordion-link-colour;
       cursor: pointer;
     }
 
-    // For devices that can't hover such as touch devices,
-    // remove hover state as it can be stuck in that state (iOS).
-    @media (hover: none) {
-      .govuk-accordion__section-header:hover {
-        border-top-color: $govuk-accordion-link-colour;
-        box-shadow: inset 0 $govuk-accordion-border-width 0 0 $govuk-accordion-link-colour;
-      }
-    }
-
     // Buttons within the headers don’t need default styling
     .govuk-accordion__section-button {
       @include govuk-typography-common;
@@ -119,7 +104,7 @@
       margin-left: 0;
       padding: 0;
       border-width: 0;
-      color: inherit;
+      color: $govuk-link-colour;
       background: none;
       text-align: left;
       cursor: pointer;
@@ -147,7 +132,13 @@
     }
 
     .govuk-accordion__section-button:hover:not(:focus) {
+      color: $govuk-link-hover-colour;
       text-decoration: underline;
+
+      // This needs to come after the text-decoration property otherwise
+      // text-decoration, as a shorthand property, resets it to auto
+      @include govuk-link-hover-decoration;
+      text-underline-offset: $govuk-link-underline-offset;
     }
 
     // For devices that can't hover such as touch devices,

data/vendor/assets/stylesheets/components/back-link/_index.scss

@@ -24,21 +24,6 @@
     padding-left: 14px;
   }
 
-  // Only underline if the component is linkable
-  .govuk-back-link[href] {
-    text-decoration: underline;
-
-    // When the back link is focused, hide the bottom link border as the
-    // focus styles has a bottom border.
-    &:focus {
-      text-decoration: none;
-
-      &:before {
-        border-color: $govuk-text-colour;
-      }
-    }
-  }
-
   // Prepend left pointing chevron
   .govuk-back-link:before {
     content: "";
@@ -88,6 +73,10 @@
     }
   }
 
+  .govuk-back-link:focus:before {
+    border-color: $govuk-focus-text-colour;
+  }
+
   .govuk-back-link:after {
     content: "";
     position: absolute;

data/vendor/assets/stylesheets/components/breadcrumbs/_index.scss

@@ -129,6 +129,7 @@
 
       .govuk-breadcrumbs__list {
         display: -webkit-box;
+        display: -webkit-flex;
         display: -ms-flexbox;
         display: flex;
       }

data/vendor/assets/stylesheets/components/button/_index.scss

@@ -29,6 +29,8 @@
     position: relative;
     width: 100%;
     margin-top: 0;
+    margin-right: 0;
+    margin-left: 0;
     @include govuk-responsive-margin(6, "bottom", $adjustment: $button-shadow-size); // s2
     padding: (govuk-spacing(2) - $govuk-border-width-form-element) govuk-spacing(2) (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2)); // s1
     border: $govuk-border-width-form-element solid transparent;
@@ -156,10 +158,6 @@
       cursor: default;
     }
 
-    &:focus {
-      outline: none;
-    }
-
     &:active {
       top: 0;
       box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
@@ -239,6 +237,8 @@
 
     display: -webkit-inline-box;
 
+    display: -webkit-inline-flex;
+
     display: -ms-inline-flexbox;
 
     display: inline-flex;
@@ -246,6 +246,8 @@
 
     -webkit-box-pack: center;
 
+    -webkit-justify-content: center;
+
         -ms-flex-pack: center;
 
             justify-content: center;
@@ -258,10 +260,15 @@
       margin-left: govuk-spacing(2);
     }
     vertical-align: middle;
-    -ms-flex-negative: 0;
-        flex-shrink: 0;
-    -ms-flex-item-align: center;
-        align-self: center;
+    -webkit-flex-shrink: 0;
+        -ms-flex-negative: 0;
+            flex-shrink: 0;
+    -webkit-align-self: center;
+        -ms-flex-item-align: center;
+            align-self: center;
+    // Work around SVGs not inheriting color from parent in forced color mode
+    // (https://github.com/w3c/csswg-drafts/issues/6310)
+    forced-color-adjust: auto;
   }
 
   @if $govuk-use-legacy-font {

data/vendor/assets/stylesheets/components/character-count/_index.scss

@@ -14,6 +14,7 @@
   }
 
   .govuk-character-count__message {
+    @include govuk-font($size: false, $tabular: true);
     margin-top: 0;
     margin-bottom: 0;
   }