dxw_govuk_frontend_rails 3.1.0 → 3.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cbcd2ddb17bdc8d387895ac9a4ddeb7dcd25239b7c1090ce8b58d47af168c07a
-  data.tar.gz: c2993f4da0ed20359c196a5149d208241acce40338ffffedc229d729d5b97cdb
+  metadata.gz: ae09a9588462372293e8a6feaa9815bd7317909f8fe984fedfc1fa4eb39d112c
+  data.tar.gz: de694312ec22a3117847497310c0d21f078172fe49ef1ff65442f41b87ed8e48
 SHA512:
-  metadata.gz: 5fb847feb82101b5a189176d65ce95cf8bfaed0cfb6db18fa161080b76c9003a1e7ae2471014cacb591522fd0a9e9a6b2c1ae0cc30ff052035370204d0bc9f46
-  data.tar.gz: 4f96f18d8e39a95bb7b2a187d944eb3b33527f3d0f7a18fdde0d2f74399c9f920af932fe7ba9696ba9abea08cb4f1b05d684dbe80a13a8d9ba32ed8f364f8c62
+  metadata.gz: 4663f2f1786ab540e0d329a96265946b66f45cad0fc220623db398975cebecd7cfc9c1a092d320a53c2c8fe2cc6e7969a1820e64826bda545d50eecc34c89458
+  data.tar.gz: d3024c1c0d1615e8c8f5f18d18eabeec53eec3b2ee0fc877bcde5403609f0b733a8dee3d067beeb9ee62638688b52116bc480d645d492b443eb9b17cf37b6a52

data/.github/workflows/gempush.yml

@@ -1,23 +1,23 @@
-name: Ruby Gem
+name: Ruby Gems
 
 on:
   push:
     tags:
-      - '*'
+      - "*"
 
 jobs:
   build:
-    name: Build + Publish
+    name: Publish to Rubygems
     runs-on: ubuntu-latest
 
     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
 
-    - name: Compile sass
+    - name: Check sass compiles
       run: |
         npx node-sass ./vendor/assets/stylesheets/govuk-frontend-rails.scss /tmp/govuk-frontend-rails.css
 

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.1.0)
+    dxw_govuk_frontend_rails (3.5.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.1.0"
+  VERSION = "3.5.0"
 end

data/package-lock.json

@@ -5,9 +5,9 @@
   "requires": true,
   "dependencies": {
     "govuk-frontend": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.1.0.tgz",
-      "integrity": "sha512-ozyG6ulmawzg3rsf9Efxcgj81mk4yzea3tfl0hgmXWILGC0/uEGj6A+g9pJ2ETgk78rgNlRLXDv0WvlaHd/LnA=="
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.5.0.tgz",
+      "integrity": "sha512-4tNKgcChO1bMNsrTz2UsK4fDMmU9R87UDxy/KhKIMbnhsuJLVuArDveYLkZuUsZ6B3eaCbl5gmI8i/Q/Mi680A=="
     }
   }
 }

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.1.0"
+    "govuk-frontend": "3.5.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();
+  // Remove hard limit if set
+  $module.removeAttribute('maxlength');
 
-  // If there's a maximum length defined and the count message exists
-  if (this.countMessage) {
-    // 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);
@@ -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
+        }
+      }
     }
   }
 
@@ -2028,12 +2036,13 @@ Radios.prototype.handleClick = function (event) {
 
     (function (global) {
 
-      // Polyfill from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-404b69b4750d18dea4174930a49170fd
+      // There is no polyfill in polyfill-library (https://github.com/Financial-Times/polyfill-library/issues/338)
+      // So we source this from https://github.com/Alhadis/Snippets/blob/e09b4dfb7ffc9e250bc28319051e39ead3e5f70a/js/polyfills/IE8-child-elements.js#L28-L33
       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;
+          return el;
         }
       });
 
@@ -2051,12 +2060,13 @@ Radios.prototype.handleClick = function (event) {
     if (detect) return
 
     (function (global) {
-      // Polyfill from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-b45a1197b842728cb76b624b6ba7d739
+      // There is no polyfill in polyfill-library (https://github.com/Financial-Times/polyfill-library/issues/338)
+      // So we source this from https://github.com/Alhadis/Snippets/blob/e09b4dfb7ffc9e250bc28319051e39ead3e5f70a/js/polyfills/IE8-child-elements.js#L35-L40
       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;
+          return el;
         }
       });
 

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

@@ -98,6 +98,17 @@
       box-shadow: inset 0 0 0 1px $govuk-focus-colour;
     }
 
+    // alphagov/govuk_template includes a specific a:link:focus selector
+    // designed to make unvisited links a slightly darker blue when focussed, so
+    // we need to override the text colour for that combination of selectors so
+    // so that unvisited links styled as buttons do not end up with dark blue
+    // text when focussed.
+    @include govuk-compatibility(govuk_template) {
+      &:link:focus {
+        color: $govuk-button-text-colour;
+      }
+    }
+
     &:focus:not(:active):not(:hover) {
       border-color: $govuk-focus-colour;
       color: $govuk-focus-text-colour;
@@ -232,8 +243,6 @@
 
     display: -webkit-inline-box;
 
-    display: -webkit-inline-flex;
-
     display: -ms-inline-flexbox;
 
     display: inline-flex;
@@ -241,8 +250,6 @@
 
     -webkit-box-pack: center;
 
-    -webkit-justify-content: center;
-
         -ms-flex-pack: center;
 
             justify-content: center;
@@ -255,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/fieldset/_fieldset.scss

@@ -32,8 +32,6 @@
     max-width: 100%;        // 1
     margin-bottom: govuk-spacing(2);
     padding: 0;
-    // Hack to let legends or elements within legends have margins in webkit browsers
-    overflow: hidden;
 
     white-space: normal;    // 1
   }

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/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/_font-faces.scss

@@ -15,26 +15,28 @@
 /// @access private
 
 @mixin _govuk-font-face-gds-transport {
-  @include govuk-exports("govuk/helpers/font-faces") {
-    @at-root {
-      /*! Copyright (c) 2011 by Margaret Calvert & Henrik Kubel. All rights reserved. The font has been customised for exclusive use on gov.uk. This cut is not commercially available. */
+  @include govuk-not-ie8 { // In IE8, which cannot render WOFF format, we fall back to system fonts
+    @include govuk-exports("govuk/helpers/font-faces") {
+      @at-root {
+        /*! Copyright (c) 2011 by Margaret Calvert & Henrik Kubel. All rights reserved. The font has been customised for exclusive use on gov.uk. This cut is not commercially available. */
 
-      @font-face {
-        font-family: "GDS Transport";
-        src: govuk-font-url("light-94a07e06a1-v2.woff2") format("woff2"),
-             govuk-font-url("light-f591b13f7d-v2.woff") format("woff");
-        font-weight: normal;
-        font-style: normal;
-        font-display: fallback;
-      }
+        @font-face {
+          font-family: "GDS Transport";
+          src: govuk-font-url("light-94a07e06a1-v2.woff2") format("woff2"),
+               govuk-font-url("light-f591b13f7d-v2.woff") format("woff");
+          font-weight: normal;
+          font-style: normal;
+          font-display: fallback;
+        }
 
-      @font-face {
-        font-family: "GDS Transport";
-        src: govuk-font-url("bold-b542beb274-v2.woff2") format("woff2"),
-             govuk-font-url("bold-affa96571d-v2.woff") format("woff");
-        font-weight: bold;
-        font-style: normal;
-        font-display: fallback;
+        @font-face {
+          font-family: "GDS Transport";
+          src: govuk-font-url("bold-b542beb274-v2.woff2") format("woff2"),
+               govuk-font-url("bold-affa96571d-v2.woff") format("woff");
+          font-weight: bold;
+          font-style: normal;
+          font-display: fallback;
+        }
       }
     }
   }

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,8 @@
   .govuk-\!-display-block {
     display: block !important;
   }
+
+  .govuk-\!-display-none {
+    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,

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: dxw_govuk_frontend_rails
 version: !ruby/object:Gem::Version
-  version: 3.1.0
+  version: 3.5.0
 platform: ruby
 authors:
 - mec
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2019-09-03 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.