dxw_govuk_frontend_rails 3.2.0 → 3.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 61748f1e13e72d91ec0f332ab57f1aed6576a0aefd522c7c302778a8618f74e5
-  data.tar.gz: 2ba98295582b3a676de197ee93e0625542579925020a169c672802eee641be52
+  metadata.gz: de482bfdfa09a6ce5fa71d92b1e3aeba8067157a06e3da22bc86b34713b7c9b8
+  data.tar.gz: f3e866b3cb02ec7ef83d934beddb3ee3a84d17cf191228051301a5301d551f10
 SHA512:
-  metadata.gz: 9b59f87fef5d49b8519d8bf8f6fbd4899b8fb4c602fbe7ebf4a934f73e70e0addb429edc341c66ce94734716bee9637a70be02bb05be5f3d4b23407294d6bb97
-  data.tar.gz: 362e8387f34f0995a5d7bb00d03fcb0fb2f8a71f03219ae9b42df429cfd9a1e19a6ebdfae9e337a7d7dd6e3b7a1b33f94b75d3057d08535aa761dc601136218d
+  metadata.gz: 9e1a93086b6f6ed875cb2d63452496cd20ba10c82d6b3f344ea3aa8bc82abf82ce07c5b76e473a864065066cf3cdd852425973c6105f47ec2991e71bc85f5e4e
+  data.tar.gz: b45b9b5aa0bcc6f675d07438cfb9092dec30f836fe95f2ac594b74034c0ec85ff277dcf0478fb2f133398ccf30a0fc47670769e75ed997737984bdcb899a43a9

data/.github/workflows/gempush.yml

@@ -1,4 +1,4 @@
-name: Ruby Gem
+name: Ruby Gems
 
 on:
   push:
@@ -13,7 +13,7 @@ jobs:
     steps:
     - uses: actions/checkout@master
     - name: Set up Ruby 2.6
-      uses: actions/setup-ruby@v1
+      uses: actions/setup-ruby@master
       with:
         version: 2.6.x
 

data/.github/workflows/test.yml

@@ -0,0 +1,19 @@
+name: CI
+
+on: [push]
+
+jobs:
+  build:
+    name: Test that the sass compiles
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@master
+    - uses: actions/setup-node@master
+      with:
+        node-version: '10.x'
+    - run: npm test
+    env:
+      CI: true
+
+

data/Gemfile.lock

@@ -1,12 +1,12 @@
 PATH
   remote: .
   specs:
-    dxw_govuk_frontend_rails (3.2.0)
+    dxw_govuk_frontend_rails (3.6.0)
 
 GEM
   remote: https://rubygems.org/
   specs:
-    rake (10.5.0)
+    rake (13.0.1)
 
 PLATFORMS
   ruby
@@ -14,7 +14,7 @@ PLATFORMS
 DEPENDENCIES
   bundler (~> 2.0)
   dxw_govuk_frontend_rails!
-  rake (~> 10.0)
+  rake (~> 13.0)
 
 BUNDLED WITH
    2.0.2

data/dxw_govuk_frontend_rails.gemspec

@@ -23,5 +23,5 @@ Gem::Specification.new do |spec|
   spec.require_paths = ["lib"]
 
   spec.add_development_dependency "bundler", "~> 2.0"
-  spec.add_development_dependency "rake", "~> 10.0"
+  spec.add_development_dependency "rake", "~> 13.0"
 end

data/lib/dxw_govuk_frontend_rails.rb

@@ -5,7 +5,18 @@ module DxwGovukFrontendRails
     class Engine < ::Rails::Engine
       initializer 'GovukFrontendRails.assets.precompile' do |app|
         app.config.assets.precompile <<
-          /[\w]+\.(?:png|svg|gif|ico|eot|woff|woff2)$/
+          [
+            "favicon.ico",
+            "govuk-apple-touch-icon-152x152.png",
+            "govuk-apple-touch-icon-167x167.png",
+            "govuk-apple-touch-icon-180x180.png",
+            "govuk-apple-touch-icon.png",
+            "govuk-crest-2x.png",
+            "govuk-crest.png",
+            "govuk-logotype-crown.png",
+            "govuk-mask-icon.svg",
+            "govuk-opengraph-image.png",
+          ]
       end
     end
   end

data/lib/dxw_govuk_frontend_rails/version.rb

@@ -1,3 +1,3 @@
 module DxwGovukFrontendRails
-  VERSION = "3.2.0"
+  VERSION = "3.6.0"
 end

data/package-lock.json

@@ -5,9 +5,9 @@
   "requires": true,
   "dependencies": {
     "govuk-frontend": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.2.0.tgz",
-      "integrity": "sha512-OtJozAGMEKFu195fNVVrQHUX7+znCkA4cXDKs4lgFlRQOTzN1ogT9010GBARuoTwbeL0VqQ8nerZYjVxH/wafA=="
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.6.0.tgz",
+      "integrity": "sha512-wTxufdY8vFvKJ2EmmQKmarrQ7n30kzg+vvqgGib2dawl7c5Wst8dffkEJQpy9Zs99TE/yEEFgj0VUO4GRUO22A=="
     }
   }
 }

data/package.json

@@ -7,7 +7,7 @@
     "lib": "lib"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "npx node-sass ./vendor/assets/stylesheets/govuk-frontend-rails.scss /tmp/govuk-frontend-rails.css"
   },
   "repository": {
     "type": "git",
@@ -21,6 +21,6 @@
   },
   "homepage": "https://github.com/mec/dxw_govuk_frontend_rails#readme",
   "dependencies": {
-    "govuk-frontend": "3.2.0"
+    "govuk-frontend": "3.6.0"
   }
 }

data/vendor/assets/javascripts/govuk_frontend_rails.js

@@ -1497,6 +1497,9 @@ Details.prototype.polyfillHandleInputs = function (node, callback) {
 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]');
+  }
 }
 
 CharacterCount.prototype.defaults = {
@@ -1509,10 +1512,16 @@ CharacterCount.prototype.init = function () {
   // Check for module
   var $module = this.$module;
   var $textarea = this.$textarea;
-  if (!$textarea) {
+  var $countMessage = this.$countMessage;
+
+  if (!$textarea || !$countMessage) {
     return
   }
 
+  // We move count message right after the field
+  // Kept for backwards compatibility
+  $textarea.insertAdjacentElement('afterend', $countMessage);
+
   // Read options set using dataset ('data-' values)
   this.options = this.getDataset($module);
 
@@ -1530,23 +1539,16 @@ CharacterCount.prototype.init = function () {
     return
   }
 
-  // Generate and reference message
-  var boundCreateCountMessage = this.createCountMessage.bind(this);
-  this.countMessage = boundCreateCountMessage();
-
-  // If there's a maximum length defined and the count message exists
-  if (this.countMessage) {
-    // Remove hard limit if set
-    $module.removeAttribute('maxlength');
+  // Remove hard limit if set
+  $module.removeAttribute('maxlength');
 
-    // Bind event changes to the textarea
-    var boundChangeEvents = this.bindChangeEvents.bind(this);
-    boundChangeEvents();
+  // Bind event changes to the textarea
+  var boundChangeEvents = this.bindChangeEvents.bind(this);
+  boundChangeEvents();
 
-    // Update count message
-    var boundUpdateCountMessage = this.updateCountMessage.bind(this);
-    boundUpdateCountMessage();
-  }
+  // Update count message
+  var boundUpdateCountMessage = this.updateCountMessage.bind(this);
+  boundUpdateCountMessage();
 };
 
 // Read data attributes
@@ -1577,27 +1579,6 @@ CharacterCount.prototype.count = function (text) {
   return length
 };
 
-// Generate count message and bind it to the input
-// returns reference to the generated element
-CharacterCount.prototype.createCountMessage = function () {
-  var countElement = this.$textarea;
-  var elementId = countElement.id;
-  // Check for existing info count message
-  var countMessage = document.getElementById(elementId + '-info');
-  // If there is no existing info count message we add one right after the field
-  if (elementId && !countMessage) {
-    countElement.insertAdjacentHTML('afterend', '<span id="' + elementId + '-info" class="govuk-hint govuk-character-count__message" aria-live="polite"></span>');
-    this.describedBy = countElement.getAttribute('aria-describedby');
-    this.describedByInfo = this.describedBy + ' ' + elementId + '-info';
-    countElement.setAttribute('aria-describedby', this.describedByInfo);
-    countMessage = document.getElementById(elementId + '-info');
-  } else {
-  // If there is an existing info count message we move it right after the field
-    countElement.insertAdjacentElement('afterend', countMessage);
-  }
-  return countMessage
-};
-
 // Bind input propertychange to the elements and update based on the change
 CharacterCount.prototype.bindChangeEvents = function () {
   var $textarea = this.$textarea;
@@ -1624,7 +1605,7 @@ CharacterCount.prototype.checkIfValueChanged = function () {
 CharacterCount.prototype.updateCountMessage = function () {
   var countElement = this.$textarea;
   var options = this.options;
-  var countMessage = this.countMessage;
+  var countMessage = this.$countMessage;
 
   // Determine the remaining number of characters/words
   var currentLength = this.count(countElement.value);
@@ -1767,7 +1748,7 @@ Checkboxes.prototype.handleClick = function (event) {
 
   if (detect) return
 
-    // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-service/1f3c09b402f65bf6e393f933a15ba63f1b86ef1f/packages/polyfill-library/polyfills/Element/prototype/closest/polyfill.js
+  // 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;
 
@@ -1873,7 +1854,9 @@ ErrorSummary.prototype.getFragmentFromUrl = function (url) {
  *
  * Returns the first element that exists from this list:
  *
- * - The `<legend>` associated with the closest `<fieldset>` ancestor
+ * - The `<legend>` associated with the closest `<fieldset>` ancestor, as long
+ *   as the top of it is no more than half a viewport height away from the
+ *   bottom of the input
  * - The first `<label>` that is associated with the input using for="inputId"
  * - The closest parent `<label>`
  *
@@ -1888,7 +1871,32 @@ ErrorSummary.prototype.getAssociatedLegendOrLabel = function ($input) {
     var legends = $fieldset.getElementsByTagName('legend');
 
     if (legends.length) {
-      return legends[0]
+      var $candidateLegend = legends[0];
+
+      // If the input type is radio or checkbox, always use the legend if there
+      // is one.
+      if ($input.type === 'checkbox' || $input.type === 'radio') {
+        return $candidateLegend
+      }
+
+      // For other input types, only scroll to the fieldset’s legend (instead of
+      // the label associated with the input) if the input would end up in the
+      // top half of the screen.
+      //
+      // This should avoid situations where the input either ends up off the
+      // screen, or obscured by a software keyboard.
+      var legendTop = $candidateLegend.getBoundingClientRect().top;
+      var inputRect = $input.getBoundingClientRect();
+
+      // If the browser doesn't support Element.getBoundingClientRect().height
+      // or window.innerHeight (like IE8), bail and just link to the label.
+      if (inputRect.height && window.innerHeight) {
+        var inputBottom = inputRect.top + inputRect.height;
+
+        if (inputBottom - legendTop < window.innerHeight / 2) {
+          return $candidateLegend
+        }
+      }
     }
   }
 
@@ -2018,49 +2026,41 @@ Radios.prototype.handleClick = function (event) {
 
 (function(undefined) {
 
-    // Detection from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-b09a5d2acf3314b46a6c8f8d0c31b85c
+    // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-library/master/polyfills/Element/prototype/nextElementSibling/detect.js
     var detect = (
-      'Element' in this && "nextElementSibling" in document.documentElement
+      'document' in this && "nextElementSibling" in document.documentElement
     );
 
     if (detect) return
 
-
-    (function (global) {
-
-      // Polyfill from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-404b69b4750d18dea4174930a49170fd
-      Object.defineProperty(Element.prototype, "nextElementSibling", {
-        get: function(){
-          var el = this.nextSibling;
-          while (el && el.nodeType !== 1) { el = el.nextSibling; }
-          return (el.nodeType === 1) ? el : null;
-        }
-      });
-
-    }(this));
+    // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-library/master/polyfills/Element/prototype/nextElementSibling/polyfill.js
+    Object.defineProperty(Element.prototype, "nextElementSibling", {
+      get: function(){
+        var el = this.nextSibling;
+        while (el && el.nodeType !== 1) { el = el.nextSibling; }
+        return el;
+      }
+    });
 
 }).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
 
 (function(undefined) {
 
-    // Detection from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-a162235fbc9c0dd40d4032265f44942e
+    // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-library/master/polyfills/Element/prototype/previousElementSibling/detect.js
     var detect = (
-      'Element' in this && 'previousElementSibling' in document.documentElement
+      'document' in this && "previousElementSibling" in document.documentElement
     );
 
     if (detect) return
 
-    (function (global) {
-      // Polyfill from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-b45a1197b842728cb76b624b6ba7d739
-      Object.defineProperty(Element.prototype, 'previousElementSibling', {
-        get: function(){
-          var el = this.previousSibling;
-          while (el && el.nodeType !== 1) { el = el.previousSibling; }
-          return (el.nodeType === 1) ? el : null;
-        }
-      });
-
-    }(this));
+    // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-library/master/polyfills/Element/prototype/previousElementSibling/polyfill.js
+    Object.defineProperty(Element.prototype, 'previousElementSibling', {
+      get: function(){
+        var el = this.previousSibling;
+        while (el && el.nodeType !== 1) { el = el.previousSibling; }
+        return el;
+      }
+    });
 
 }).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
 

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

@@ -17,7 +17,10 @@
 
     // Allow space for the arrow
     padding-left: 14px;
+  }
 
+  // Only add a custom underline if the component is linkable
+  .govuk-back-link[href] {
     // Use border-bottom rather than text-decoration so that the arrow is
     // underlined as well.
     border-bottom: 1px solid govuk-colour("black");
@@ -30,22 +33,22 @@
     &:focus {
       border-bottom-color: transparent;
     }
+  }
 
-    // Prepend left pointing arrow
-    &:before {
-      @include govuk-shape-arrow($direction: left, $base: 10px, $height: 6px);
+  // Prepend left pointing arrow
+  .govuk-back-link:before {
+    @include govuk-shape-arrow($direction: left, $base: 10px, $height: 6px);
 
-      content: "";
+    content: "";
 
-      // Vertically align with the parent element
-      position: absolute;
+    // Vertically align with the parent element
+    position: absolute;
 
-      top: 0;
-      bottom: 0;
-      left: 0;
+    top: 0;
+    bottom: 0;
+    left: 0;
 
-      margin: auto;
-    }
+    margin: auto;
   }
 
   @if $govuk-use-legacy-font {

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

@@ -243,8 +243,6 @@
 
     display: -webkit-inline-box;
 
-    display: -webkit-inline-flex;
-
     display: -ms-inline-flexbox;
 
     display: inline-flex;
@@ -252,8 +250,6 @@
 
     -webkit-box-pack: center;
 
-    -webkit-justify-content: center;
-
         -ms-flex-pack: center;
 
             justify-content: center;
@@ -266,12 +262,10 @@
       margin-left: govuk-spacing(2);
     }
     vertical-align: middle;
-    -webkit-flex-shrink: 0;
-        -ms-flex-negative: 0;
-            flex-shrink: 0;
-    -webkit-align-self: center;
-        -ms-flex-item-align: center;
-            align-self: center;
+    -ms-flex-negative: 0;
+        flex-shrink: 0;
+    -ms-flex-item-align: center;
+        align-self: center;
   }
 
   @if $govuk-use-legacy-font {

data/vendor/assets/stylesheets/components/footer/_footer.scss

@@ -77,19 +77,6 @@
     }
   }
 
-  // Internet Explorer 8 does not support `:not()` selectors, so don't conditionally show underlines.
-  @include govuk-not-ie8 {
-    .govuk-footer__inline-list .govuk-footer__link,
-    .govuk-footer__list .govuk-footer__link {
-      text-decoration: none;
-
-      &:hover:not(:focus),
-      &:active:not(:focus) {
-        text-decoration: underline;
-      }
-    }
-  }
-
   .govuk-footer__section-break {
     margin: 0; // Reset `<hr>` default margins
     @include govuk-responsive-margin(8, "bottom");
@@ -99,20 +86,16 @@
 
   .govuk-footer__meta {
     display: -webkit-box;
-    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex; // Support: Flexbox
     margin-right: -$govuk-gutter-half;
     margin-left: -$govuk-gutter-half;
-    -webkit-flex-wrap: wrap;
-        -ms-flex-wrap: wrap;
-            flex-wrap: wrap; // Support: Flexbox
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap; // Support: Flexbox
     -webkit-box-align: end;
-    -webkit-align-items: flex-end;
         -ms-flex-align: end;
             align-items: flex-end; // Support: Flexbox
     -webkit-box-pack: center;
-    -webkit-justify-content: center;
         -ms-flex-pack: center;
             justify-content: center; // Support: Flexbox
   }
@@ -125,20 +108,18 @@
 
   .govuk-footer__meta-item--grow {
     -webkit-box-flex: 1;
-    -webkit-flex: 1;
         -ms-flex: 1;
             flex: 1; // Support: Flexbox
-    @include mq ($until: tablet) {
-      -webkit-flex-basis: 320px;
-          -ms-flex-preferred-size: 320px;
-              flex-basis: 320px; // Support: Flexbox
+    @include govuk-media-query ($until: tablet) {
+      -ms-flex-preferred-size: 320px;
+          flex-basis: 320px; // Support: Flexbox
     }
   }
 
   .govuk-footer__licence-logo {
     display: inline-block;
     margin-right: govuk-spacing(2);
-    @include mq ($until: desktop) {
+    @include govuk-media-query ($until: desktop) {
       margin-bottom: govuk-spacing(3);
     }
     vertical-align: top;
@@ -183,7 +164,7 @@
   .govuk-footer__heading {
     @include govuk-responsive-margin(7, "bottom");
     padding-bottom: govuk-spacing(4);
-    @include mq ($until: tablet) {
+    @include govuk-media-query ($until: tablet) {
       padding-bottom: govuk-spacing(2);
     }
     border-bottom: 1px solid $govuk-footer-border;
@@ -191,14 +172,12 @@
 
   .govuk-footer__navigation {
     display: -webkit-box;
-    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex; // Support: Flexbox
     margin-right: -$govuk-gutter-half;
     margin-left: -$govuk-gutter-half;
-    -webkit-flex-wrap: wrap;
-        -ms-flex-wrap: wrap;
-            flex-wrap: wrap; // Support: Flexbox
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap; // Support: Flexbox
   }
 
   .govuk-footer__section {
@@ -209,28 +188,24 @@
     vertical-align: top;
     // Ensure columns take up equal width (typically one-half:one-half)
     -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
         -ms-flex-positive: 1;
             flex-grow: 1; // Support: Flexbox
-    -webkit-flex-shrink: 1;
-        -ms-flex-negative: 1;
-            flex-shrink: 1; // Support: Flexbox
-    @include mq ($until: desktop) {
+    -ms-flex-negative: 1;
+        flex-shrink: 1; // Support: Flexbox
+    @include govuk-media-query ($until: desktop) {
       // Make sure columns do not drop below 200px in width
       // Will typically result in wrapping, and end up in a single column on smaller screens.
-      -webkit-flex-basis: 200px;
-          -ms-flex-preferred-size: 200px;
-              flex-basis: 200px; // Support: Flexbox
+      -ms-flex-preferred-size: 200px;
+          flex-basis: 200px; // Support: Flexbox
     }
   }
 
   // If there are only two sections, set the layout to be two-third:one-third on desktop
-  @include mq ($from: desktop) {
+  @include govuk-media-query ($from: desktop) {
     // We match the first section with `:first-child`.
     // To ensure the section is one of two, we can count backwards using `:nth-last-child(2)`.
     .govuk-footer__section:first-child:nth-last-child(2) {
       -webkit-box-flex: 2;
-      -webkit-flex-grow: 2;
           -ms-flex-positive: 2;
               flex-grow: 2; // Support: Flexbox
     }
@@ -245,7 +220,7 @@
             column-gap: $govuk-gutter; // Support: Columns
   }
 
-  @include mq ($from: desktop) {
+  @include govuk-media-query ($from: desktop) {
     .govuk-footer__list--columns-2 {
       -webkit-column-count: 2;
          -moz-column-count: 2;

data/vendor/assets/stylesheets/components/header/_header.scss

@@ -42,6 +42,7 @@
   }
 
   .govuk-header__logotype {
+    display: inline-block;
     margin-right: govuk-spacing(1);
   }
 
@@ -137,7 +138,7 @@
     @include govuk-responsive-margin(2, "bottom");
     padding-right: govuk-spacing(8);
 
-    @include mq ($from: desktop) {
+    @include govuk-media-query ($from: desktop) {
       width: 33.33%;
       padding-right: $govuk-gutter-half;
       float: left;
@@ -146,7 +147,7 @@
   }
 
   .govuk-header__content {
-    @include mq ($from: desktop) {
+    @include govuk-media-query ($from: desktop) {
       width: 66.66%;
       padding-left: $govuk-gutter-half;
       float: left;
@@ -179,7 +180,7 @@
       margin-left: govuk-spacing(1);
     }
 
-    @include mq ($from: tablet) {
+    @include govuk-media-query ($from: tablet) {
       top: govuk-spacing(3);
     }
   }
@@ -201,14 +202,14 @@
   .js-enabled {
     .govuk-header__menu-button {
       display: block;
-      @include mq ($from: desktop) {
+      @include govuk-media-query ($from: desktop) {
         display: none;
       }
     }
 
     .govuk-header__navigation {
       display: none;
-      @include mq ($from: desktop) {
+      @include govuk-media-query ($from: desktop) {
         display: block;
       }
     }
@@ -220,7 +221,7 @@
 
 
   .govuk-header__navigation--end {
-    @include mq ($from: desktop) {
+    @include govuk-media-query ($from: desktop) {
       margin: 0;
       padding: govuk-spacing(1) 0;
       text-align: right;
@@ -235,7 +236,7 @@
     padding: govuk-spacing(2) 0;
     border-bottom: 1px solid $govuk-header-nav-item-border-color;
 
-    @include mq ($from: desktop) {
+    @include govuk-media-query ($from: desktop) {
       display: inline-block;
       margin-right: govuk-spacing(3);
       padding: govuk-spacing(1) 0;

data/vendor/assets/stylesheets/components/input/_input.scss

@@ -13,6 +13,9 @@
     box-sizing: border-box;
     width: 100%;
     height: 40px;
+    @if $govuk-typography-use-rem {
+      height: govuk-px-to-rem(40px);
+    }
     margin-top: 0;
 
     padding: govuk-spacing(1);

data/vendor/assets/stylesheets/components/radios/_radios.scss

@@ -148,7 +148,7 @@
   // =========================================================
 
   .govuk-radios--inline {
-    @include mq ($from: tablet) {
+    @include govuk-media-query ($from: tablet) {
       @include govuk-clearfix;
 
       .govuk-radios__item {

data/vendor/assets/stylesheets/components/select/_select.scss

@@ -13,6 +13,9 @@
     box-sizing: border-box; // should this be global?
     max-width: 100%;
     height: 40px;
+    @if $govuk-typography-use-rem {
+      height: govuk-px-to-rem(40px);
+    }
     padding: govuk-spacing(1); // was 5px 4px 4px - size of it should be adjusted to match other form elements
     border: $govuk-border-width-form-element solid $govuk-input-border-colour;
 

data/vendor/assets/stylesheets/components/skip-link/_skip-link.scss

@@ -26,6 +26,12 @@
     &:focus {
       outline: $govuk-focus-width solid $govuk-focus-colour;
       background-color: $govuk-focus-colour;
+
+      // Undo unwanted changes when global styles are enabled
+      @if ($govuk-global-styles) {
+        box-shadow: none;
+        text-decoration: underline;
+      }
     }
   }
 }

data/vendor/assets/stylesheets/components/tag/_tag.scss

@@ -38,7 +38,54 @@
     }
   }
 
+  // Deprecated. We'll remove this class in a future release. Use `.govuk-tag--grey` instead.
   .govuk-tag--inactive {
     background-color: govuk-colour("dark-grey", $legacy: "grey-1");
   }
+
+  .govuk-tag--grey {
+    color: govuk-shade(govuk-colour("dark-grey", $legacy: "grey-1"), 30);
+    background: govuk-tint(govuk-colour("dark-grey", $legacy: "grey-1"), 90);
+  }
+
+  .govuk-tag--purple {
+    color: govuk-shade(govuk-colour("purple"), 20);
+    background: govuk-tint(govuk-colour("purple"), 80);
+  }
+
+  .govuk-tag--turquoise {
+    color: govuk-shade(govuk-colour("turquoise"), 60);
+    background: govuk-tint(govuk-colour("turquoise"), 70);
+  }
+
+  .govuk-tag--blue {
+    color: govuk-shade(govuk-colour("blue"), 30);
+    background: govuk-tint(govuk-colour("blue"), 80);
+  }
+
+  .govuk-tag--yellow {
+    color: govuk-shade(govuk-colour("yellow"), 65);
+    background: govuk-tint(govuk-colour("yellow"), 75);
+  }
+
+  .govuk-tag--orange {
+    color: govuk-shade(govuk-colour("orange"), 55);
+    background: govuk-tint(govuk-colour("orange"), 70);
+  }
+
+  .govuk-tag--red {
+    color: govuk-shade(govuk-colour("red"), 30);
+    background: govuk-tint(govuk-colour("red"), 80);
+  }
+
+  .govuk-tag--pink {
+    color: govuk-shade(govuk-colour("pink"), 40);
+    background: govuk-tint(govuk-colour("pink"), 80);
+  }
+
+  .govuk-tag--green {
+    color: govuk-shade(govuk-colour("green"), 20);
+    background: govuk-tint(govuk-colour("green"), 80);
+  }
+
 }

data/vendor/assets/stylesheets/components/warning-text/_warning-text.scss

@@ -5,9 +5,6 @@
 @include govuk-exports("govuk/component/warning-text") {
 
   .govuk-warning-text {
-    @include govuk-font($size: 19);
-    @include govuk-text-colour;
-
     position: relative;
     @include govuk-responsive-margin(6, "bottom");
     padding: govuk-spacing(2) 0;
@@ -23,13 +20,15 @@
     display: inline-block;
 
     position: absolute;
-    top: 50%;
     left: 0;
 
-    min-width: 32px;
+    min-width: 29px;
     min-height: 29px;
-    margin-top: -20px; // Half the height of the circle (adjusted for NTA)
-    padding-top: 3px;
+    margin-top: -7px;
+
+    @include govuk-media-query($from: tablet) {
+      margin-top: -5px;
+    }
 
     // When a user customises their colours the background colour will often be removed.
     // Adding a border to the component keeps it's shape as a circle.
@@ -39,7 +38,7 @@
     color: govuk-colour("white");
     background: govuk-colour("black");
 
-    font-size: 1.6em;
+    font-size: 30px;
     line-height: 29px;
 
     text-align: center;
@@ -53,7 +52,9 @@
   }
 
   .govuk-warning-text__text {
+    @include govuk-font($size: 19, $weight: bold);
+    @include govuk-text-colour;
     display: block;
-    padding-left: 50px;
+    padding-left: 45px;
   }
 }

data/vendor/assets/stylesheets/helpers/_spacing.scss

@@ -82,16 +82,16 @@
     @if $breakpoint == null {
 
       @if $direction == all {
-        #{$property}: $breakpoint-value iff($important, !important);
+        #{$property}: $breakpoint-value if($important, !important, null);
       } @else {
-        #{$property}-#{$direction}: $breakpoint-value iff($important, !important);
+        #{$property}-#{$direction}: $breakpoint-value if($important, !important, null);
       }
     } @else {
       @include govuk-media-query($from: $breakpoint) {
         @if $direction == all {
-          #{$property}: $breakpoint-value iff($important, !important);
+          #{$property}: $breakpoint-value if($important, !important, null);
         } @else {
-          #{$property}-#{$direction}: $breakpoint-value iff($important, !important);
+          #{$property}-#{$direction}: $breakpoint-value if($important, !important, null);
         }
       }
     }

data/vendor/assets/stylesheets/helpers/_typography.scss

@@ -53,7 +53,7 @@
 /// @access public
 
 @mixin govuk-typography-weight-regular($important: false) {
-  font-weight: $govuk-font-weight-regular iff($important, !important);
+  font-weight: $govuk-font-weight-regular if($important, !important, null);
 }
 
 /// Bold font weight helper
@@ -63,7 +63,7 @@
 /// @access public
 
 @mixin govuk-typography-weight-bold($important: false) {
-  font-weight: $govuk-font-weight-bold iff($important, !important);
+  font-weight: $govuk-font-weight-bold if($important, !important, null);
 }
 
 /// Convert line-heights specified in pixels into a relative value, unless
@@ -137,9 +137,9 @@
     // Mark rules as !important if $important is true - this will result in
     // these variables becoming strings, so this needs to happen *after* they
     // are used in calculations
-    $font-size: $font-size iff($important, !important);
-    $font-size-rem: $font-size-rem iff($important, !important);
-    $line-height: $line-height iff($important, !important);
+    $font-size: $font-size if($important, !important, null);
+    $font-size-rem: $font-size-rem if($important, !important, null);
+    $line-height: $line-height if($important, !important, null);
 
     @if $breakpoint == null {
       font-size: $font-size; // sass-lint:disable no-duplicate-properties

data/vendor/assets/stylesheets/helpers/_visually-hidden.scss

@@ -14,26 +14,26 @@
 /// @access public
 
 @mixin govuk-visually-hidden($important: true) {
-  position: absolute iff($important, !important);
+  position: absolute if($important, !important, null);
 
-  width: 1px iff($important, !important);
-  height: 1px iff($important, !important);
+  width: 1px if($important, !important, null);
+  height: 1px if($important, !important, null);
   // If margin is set to a negative value it can cause text to be announced in
   // the wrong order in VoiceOver for OSX
-  margin: 0 iff($important, !important);
-  padding: 0 iff($important, !important);
+  margin: 0 if($important, !important, null);
+  padding: 0 if($important, !important, null);
 
-  overflow: hidden iff($important, !important);
-  clip: rect(0 0 0 0) iff($important, !important);
-  -webkit-clip-path: inset(50%) iff($important, !important);
-          clip-path: inset(50%) iff($important, !important);
+  overflow: hidden if($important, !important, null);
+  clip: rect(0 0 0 0) if($important, !important, null);
+  -webkit-clip-path: inset(50%) if($important, !important, null);
+          clip-path: inset(50%) if($important, !important, null);
 
-  border: 0 iff($important, !important);
+  border: 0 if($important, !important, null);
 
   // For long content, line feeds are not interpreted as spaces and small width
   // causes content to wrap 1 word per line:
   // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
-  white-space: nowrap iff($important, !important);
+  white-space: nowrap if($important, !important, null);
 }
 
 /// Hide an element visually, but have it available for screen readers whilst
@@ -48,37 +48,37 @@
 /// @access public
 
 @mixin govuk-visually-hidden-focusable($important: true) {
-  position: absolute iff($important, !important);
+  position: absolute if($important, !important, null);
 
-  width: 1px iff($important, !important);
-  height: 1px iff($important, !important);
+  width: 1px if($important, !important, null);
+  height: 1px if($important, !important, null);
   // If margin is set to a negative value it can cause text to be announced in
   // the wrong order in VoiceOver for OSX
-  margin: 0 iff($important, !important);
+  margin: 0 if($important, !important, null);
 
-  overflow: hidden iff($important, !important);
-  clip: rect(0 0 0 0) iff($important, !important);
-  -webkit-clip-path: inset(50%) iff($important, !important);
-          clip-path: inset(50%) iff($important, !important);
+  overflow: hidden if($important, !important, null);
+  clip: rect(0 0 0 0) if($important, !important, null);
+  -webkit-clip-path: inset(50%) if($important, !important, null);
+          clip-path: inset(50%) if($important, !important, null);
 
   // For long content, line feeds are not interpreted as spaces and small width
   // causes content to wrap 1 word per line:
   // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
-  white-space: nowrap iff($important, !important);
+  white-space: nowrap if($important, !important, null);
 
   &:active,
   &:focus {
-    position: static iff($important, !important);
+    position: static if($important, !important, null);
 
-    width: auto iff($important, !important);
-    height: auto iff($important, !important);
-    margin: inherit iff($important, !important);
+    width: auto if($important, !important, null);
+    height: auto if($important, !important, null);
+    margin: inherit if($important, !important, null);
 
-    overflow: visible iff($important, !important);
-    clip: auto iff($important, !important);
-    -webkit-clip-path: none iff($important, !important);
-            clip-path: none iff($important, !important);
+    overflow: visible if($important, !important, null);
+    clip: auto if($important, !important, null);
+    -webkit-clip-path: none if($important, !important, null);
+            clip-path: none if($important, !important, null);
 
-    white-space: inherit iff($important, !important);
+    white-space: inherit if($important, !important, null);
   }
 }

data/vendor/assets/stylesheets/objects/_width-container.scss

@@ -2,12 +2,31 @@
 @import "../tools/all";
 @import "../helpers/all";
 
-@mixin govuk-width-container {
-  // Limit the width of the container to the page width
-  max-width: $govuk-page-width;
+////
+/// @group objects
+////
+
+/// Width container mixin
+///
+/// Used to create page width and custom width container classes.
+///
+/// @param {String} $width [$govuk-page-width] - Width in pixels
+///
+/// @example scss - Creating a 1200px wide container class
+///  .app-width-container--wide {
+///    @include govuk-width-container(1200px);
+///  }
+///
+/// @access public
+
+@mixin govuk-width-container($width: $govuk-page-width) {
+
+  // By default, limit the width of the container to the page width
+  max-width: $width;
 
   // On mobile, add half width gutters
-  margin: 0 $govuk-gutter-half;
+  margin-right: $govuk-gutter-half;
+  margin-left: $govuk-gutter-half;
 
   // Respect 'display cutout' safe area (avoids notches and rounded corners)
   @supports (margin: unquote("max(calc(0px))")) {
@@ -22,7 +41,8 @@
 
   // On tablet, add full width gutters
   @include govuk-media-query($from: tablet) {
-    margin: 0 $govuk-gutter;
+    margin-right: $govuk-gutter;
+    margin-left: $govuk-gutter;
 
     // Respect 'display cutout' safe area (avoids notches and rounded corners)
     @supports (margin: unquote("max(calc(0px))")) {
@@ -38,21 +58,24 @@
 
   // As soon as the viewport is greater than the width of the page plus the
   // gutters, just centre the content instead of adding gutters.
-  @include govuk-media-query($and: "(min-width: #{($govuk-page-width + $govuk-gutter * 2)})") {
-    margin: 0 auto;
+  @include govuk-media-query($and: "(min-width: #{($width + $govuk-gutter * 2)})") {
+    margin-right: auto;
+    margin-left: auto;
 
     // Since a safe area may have previously been set above,
     // we need to duplicate this margin that centers the page.
     @supports (margin: unquote("max(calc(0px))")) {
-      margin: 0 auto;
+      margin-right: auto;
+      margin-left: auto;
     }
   }
 
   @include govuk-if-ie8 {
-    width: $govuk-page-width;
+    width: $width;
     // Since media queries are not supported in IE8,
     // we need to duplicate this margin that centers the page.
-    margin: 0 auto;
+    margin-right: auto;
+    margin-left: auto;
   }
 }
 

data/vendor/assets/stylesheets/overrides/_display.scss

@@ -15,4 +15,14 @@
   .govuk-\!-display-block {
     display: block !important;
   }
+
+  .govuk-\!-display-none {
+    display: none !important;
+  }
+
+  @include govuk-media-query($media-type: print) {
+    .govuk-\!-display-none-print {
+      display: none !important;
+    }
+  }
 }

data/vendor/assets/stylesheets/settings/_colours-palette.scss

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

data/vendor/assets/stylesheets/tools/_iff.scss

@@ -8,8 +8,10 @@
 /// @param {Boolean} $condition - Whether to return the value of `$if-true`
 /// @param {Mixed} $if-true - Value to return if `$condition` is truthy
 /// @return {Mixed} Value of `$if-true` if `$condition` is truthy, else null
-/// @access public
+/// @access private
+/// @deprecated We will be removing this function in a future release, use `if($condition, $if-true, null);` instead.
 
 @function iff($condition, $if-true) {
+  @warn "The `iff` function will be removed in a future release, use `if($condition, $if-true, null);` instead.";
   @return if($condition, $if-true, null);
 }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: dxw_govuk_frontend_rails
 version: !ruby/object:Gem::Version
-  version: 3.2.0
+  version: 3.6.0
 platform: ruby
 authors:
 - mec
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2019-10-09 00:00:00.000000000 Z
+date: 2020-06-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -31,14 +31,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '10.0'
+        version: '13.0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '10.0'
+        version: '13.0'
 description: Adds the GOVUK frontend to a Rails application that uses the Asset Pipeline.
 email: 
 executables: []
@@ -46,6 +46,7 @@ extensions: []
 extra_rdoc_files: []
 files:
 - ".github/workflows/gempush.yml"
+- ".github/workflows/test.yml"
 - ".gitignore"
 - CODE_OF_CONDUCT.md
 - Gemfile
@@ -184,7 +185,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.3
+rubygems_version: 3.1.2
 signing_key: 
 specification_version: 4
 summary: Adds the GOVUK frontend to a Rails application that uses the Asset Pipeline.