dxw_govuk_frontend_rails 3.10.2 → 3.14.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b45f829ef6c112b8acdc675c702ea6c5b2ed784f67afd8c46fb5fd1ab9e6515f
-  data.tar.gz: cac2861100bd6e495f63cbf61792428d6dd86260ba6ac8a6499d7d4ddd7efcc8
+  metadata.gz: d053ce75cefe312fcb93c69b7c62419d035a3993727f0db14e73aa8fbea4ca08
+  data.tar.gz: 5595e806ef47f2224ae37a8e1dde758e46f25d92f23690c3068979d07827f051
 SHA512:
-  metadata.gz: 2bbc39c25ed2bb297c569524f56b4dd998d4363b27f6a861ffd888c2dd5babcb07f9722d72cc7c54c9604522591a8ac2eefed5527137bd11833ea00bcf8777b7
-  data.tar.gz: 38df5dbcd807f25710609517b7aa8458824b09b0b7e33c04713adb18e9d3613fad3f63574ff2d450f32fbb8d51b8e950f767b3ce4ad3cd983e7026b4b5f2cf22
+  metadata.gz: 01f18feb6dfb2f8a759a2e90e12226afd872ae1fc52e336ee96eb11fb45c8348c91045747a748d8b371338deae55e05c770ce74b6d39072931f9161bc20fa803
+  data.tar.gz: 11f7f562aa51c6e1d5a9f129ed6df91e965d4daf442210d9e48246ee9dbba5f32601774036f205da0dea30967e617f5e9be262d603d09365504740b52206b358

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    dxw_govuk_frontend_rails (3.10.2)
+    dxw_govuk_frontend_rails (3.14.0)
 
 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.10.2"
+  VERSION = "3.14.0"
 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.14.0"
+      }
+    },
+    "node_modules/govuk-frontend": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.14.0.tgz",
+      "integrity": "sha512-y7FTuihCSA8Hty+e9h0uPhCoNanCAN+CLioNFlPmlbeHXpbi09VMyxTcH+XfnMPY4Cp++7096v0rLwwdapTXnA==",
+      "engines": {
+        "node": ">= 4.2.0"
+      }
+    }
+  },
   "dependencies": {
     "govuk-frontend": {
-      "version": "3.10.2",
-      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.10.2.tgz",
-      "integrity": "sha512-MpMymgLsKoMw40MggZ0XLCAj1FY5N2s8Pf3aQR+k0cZOsegjLsnejxNfEB9qEl9jcma2fiiVcvsEZ+Ipo+Oo2g=="
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.14.0.tgz",
+      "integrity": "sha512-y7FTuihCSA8Hty+e9h0uPhCoNanCAN+CLioNFlPmlbeHXpbi09VMyxTcH+XfnMPY4Cp++7096v0rLwwdapTXnA=="
     }
   }
 }

data/package.json

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

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) {

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";

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;
   }

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

@@ -73,47 +73,49 @@
         touch-action: manipulation;
   }
 
-  // [ ] Check box
-  .govuk-checkboxes__label:before {
-    content: "";
-    box-sizing: border-box;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: $govuk-checkboxes-size;
-    height: $govuk-checkboxes-size;
-    border: $govuk-border-width-form-element solid currentColor;
-    background: transparent;
-  }
+  @include govuk-not-ie8 {
+    // [ ] Check box
+    .govuk-checkboxes__label:before {
+      content: "";
+      box-sizing: border-box;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: $govuk-checkboxes-size;
+      height: $govuk-checkboxes-size;
+      border: $govuk-border-width-form-element solid currentColor;
+      background: transparent;
+    }
 
-  // ✔ Check mark
-  //
-  // The check mark is a box with a border on the left and bottom side (└──),
-  // rotated 45 degrees
-  .govuk-checkboxes__label:after {
-    content: "";
-    box-sizing: border-box;
+    // ✔ Check mark
+    //
+    // The check mark is a box with a border on the left and bottom side (└──),
+    // rotated 45 degrees
+    .govuk-checkboxes__label:after {
+      content: "";
+      box-sizing: border-box;
 
-    position: absolute;
-    top: 11px;
-    left: 9px;
-    width: 23px;
-    height: 12px;
+      position: absolute;
+      top: 11px;
+      left: 9px;
+      width: 23px;
+      height: 12px;
 
-    -webkit-transform: rotate(-45deg);
+      -webkit-transform: rotate(-45deg);
 
-        -ms-transform: rotate(-45deg);
+          -ms-transform: rotate(-45deg);
 
-            transform: rotate(-45deg);
-    border: solid;
-    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;
+              transform: rotate(-45deg);
+      border: solid;
+      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;
 
-    opacity: 0;
+      opacity: 0;
 
-    background: transparent;
+      background: transparent;
+    }
   }
 
   .govuk-checkboxes__hint {
@@ -125,6 +127,20 @@
   // Focused state
   .govuk-checkboxes__input:focus + .govuk-checkboxes__label:before {
     border-width: 4px;
+
+    // When colours are overridden, the yellow box-shadow becomes invisible
+    // which means the focus state is less obvious. By adding a transparent
+    // outline, which becomes solid (text-coloured) in that context, we ensure
+    // the focus remains clearly visible.
+    outline: $govuk-focus-width solid transparent;
+    outline-offset: 1px;
+
+    // When in an explicit forced-color mode, we can use the Highlight system
+    // color for the outline to better match focus states of native controls
+    @media screen and (forced-colors: active), (-ms-high-contrast: active) {
+      outline-color: Highlight;
+    }
+
     box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
   }
 
@@ -143,6 +159,19 @@
     opacity: .5;
   }
 
+  // =========================================================
+  // Dividers ('or')
+  // =========================================================
+
+  .govuk-checkboxes__divider {
+    $govuk-divider-size: $govuk-checkboxes-size !default;
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    width: $govuk-divider-size;
+    margin-bottom: govuk-spacing(2);
+    text-align: center;
+  }
+
   // =========================================================
   // Conditional reveals
   // =========================================================

data/vendor/assets/stylesheets/components/cookie-banner/_cookie-banner.scss

@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";

data/vendor/assets/stylesheets/components/cookie-banner/_index.scss

@@ -0,0 +1,51 @@
+@include govuk-exports("govuk/component/cookie-banner") {
+
+  // This needs to be kept in sync with the header component's styles
+  $border-bottom-width: govuk-spacing(2);
+
+  .govuk-cookie-banner {
+    @include govuk-font($size: 19);
+
+    padding-top: govuk-spacing(4);
+    // The component does not set bottom spacing.
+    // The bottom spacing should be created by the items inside the component.
+
+    // Visually separate the cookie banner from content underneath
+    // when user changes colours in their browser.
+    border-bottom: $border-bottom-width solid transparent;
+
+    background-color: govuk-colour("light-grey", $legacy: "grey-3");
+  }
+
+  // Support older browsers which don't hide elements with the `hidden` attribute
+  // when user hides the whole cookie banner with a 'Hide' button.
+  .govuk-cookie-banner[hidden] {
+    display: none;
+  }
+
+  .govuk-cookie-banner__message {
+    // Remove the extra height added by the separator border.
+    margin-bottom: -$border-bottom-width;
+
+    &[hidden] {
+      // Support older browsers which don't hide elements with the `hidden` attribute
+      // when the visibility of cookie and replacement messages is toggled.
+      display: none;
+    }
+
+    &:focus {
+      // Remove the native visible focus indicator when the element is programmatically focused.
+      //
+      // The focused cookie banner is the first element on the page and the last thing the user
+      // interacted with prior to it gaining focus.
+      // We therefore assume that moving focus to it is not going to surprise users, and that giving
+      // it a visible focus indicator could be more confusing than helpful, especially as the
+      // element is not normally keyboard operable.
+      //
+      // We have flagged this in the research section of the guidance as something to monitor.
+      //
+      // A related discussion: https://github.com/w3c/wcag/issues/1001
+      outline: none;
+    }
+  }
+}