dxw_govuk_frontend_rails 3.10.2 → 3.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b45f829ef6c112b8acdc675c702ea6c5b2ed784f67afd8c46fb5fd1ab9e6515f
-  data.tar.gz: cac2861100bd6e495f63cbf61792428d6dd86260ba6ac8a6499d7d4ddd7efcc8
+  metadata.gz: 53ce04369f5585d9d7e25d250a3e346746bf5b8541387d23b9debfa85996d034
+  data.tar.gz: 50c7eedd8c1c126a6f55873bdb8e9955747de10048909861a086c81b2ae0bef4
 SHA512:
-  metadata.gz: 2bbc39c25ed2bb297c569524f56b4dd998d4363b27f6a861ffd888c2dd5babcb07f9722d72cc7c54c9604522591a8ac2eefed5527137bd11833ea00bcf8777b7
-  data.tar.gz: 38df5dbcd807f25710609517b7aa8458824b09b0b7e33c04713adb18e9d3613fad3f63574ff2d450f32fbb8d51b8e950f767b3ce4ad3cd983e7026b4b5f2cf22
+  metadata.gz: 82eba76e269590ae83f405a02c03c76177d9d9bf35610e9f4a8b34a4e3550e5ab63f7d66c919744b5b404e08568af98924085f2c18fb17c1a38e8d33e96c958b
+  data.tar.gz: 68f8c51f435994ece6f8d8e219e3c369cfa4579e42cc2fb5f55d272cfd4504563c44f742c23595a7673d74ea6bdc0d05c34105d9d0a38054e31001468458f403

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    dxw_govuk_frontend_rails (3.10.2)
+    dxw_govuk_frontend_rails (3.11.0)
 
 GEM
   remote: https://rubygems.org/

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.11.0"
 end

data/package-lock.json

@@ -5,9 +5,9 @@
   "requires": true,
   "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.11.0",
+      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.11.0.tgz",
+      "integrity": "sha512-1hW/3etYBtKPM+PNdWVOijvWVI3mpYL8eb7WLTtlh/Qxf2mCp6LkCsZk9I034n4EJBYQ5jlUWsUlTOOIypftpg=="
     }
   }
 }

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.11.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"]');
   }
 }
 

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

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

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

@@ -47,4 +47,25 @@
     display: table-caption;
     text-align: left;
   }
+
+  // Modifiers that make captions look more like their equivalent headings
+
+  .govuk-table__caption--xl {
+    @include govuk-font($size: 48, $weight: bold);
+    margin-bottom: govuk-spacing(3);
+  }
+
+  .govuk-table__caption--l {
+    @include govuk-font($size: 36, $weight: bold);
+    margin-bottom: govuk-spacing(3);
+  }
+
+  .govuk-table__caption--m {
+    @include govuk-font($size: 24, $weight: bold);
+    margin-bottom: govuk-spacing(3);
+  }
+
+  .govuk-table__caption--s {
+    @include govuk-font($size: 19, $weight: bold);
+  }
 }

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

@@ -1,3 +1,4 @@
+@import "button-group";
 @import "form-group";
 @import "grid";
 @import "main-wrapper";

data/vendor/assets/stylesheets/objects/_button-group.scss

@@ -0,0 +1,94 @@
+@import "../base";
+
+@include govuk-exports("govuk/objects/button-group") {
+  // Button groups can be used to group buttons and links together as a group.
+  //
+  // Within a button group:
+  //
+  // - links are styled to line up visually with the buttons, including being
+  //   centre-aligned on mobile
+  // - spacing between the buttons and links is handled automatically, including
+  //   when they wrap across multiple lines
+  .govuk-button-group {
+    $horizontal-gap: govuk-spacing(3);
+    $vertical-gap: govuk-spacing(3);
+
+    // These need to be kept in sync with the button component's styles
+    $button-padding: govuk-spacing(2);
+    $button-shadow-size: $govuk-border-width-form-element;
+
+    $link-spacing: govuk-spacing(1);
+
+    @include govuk-responsive-margin(6, "bottom", $adjustment: $vertical-gap * -1);
+
+    // Flexbox is used to center-align links on mobile, align everything along
+    // the baseline on tablet and above, and to removes extra whitespace that
+    // we'd get between the buttons and links because they're inline-blocks.
+    //
+    // Ideally we'd use `gap` with flexbox rather than having to do it all with
+    // margins, but unfortunately the support isn't there (yet) and @supports
+    // doesn't play nicely with it
+    // (https://github.com/w3c/csswg-drafts/issues/3559)
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+
+    // Give links within the button group the same font-size and line-height
+    // as buttons.
+    //
+    // Because we want the focus state to be tight around the link text, we use
+    // margins where the buttons would use padding.
+    .govuk-link {
+      @include govuk-font($size: 19, $line-height: 19px);
+      display: inline-block;
+      // Prevent links overflowing their container in IE10/11 because of bug
+      // with align-items: center
+      max-width: 100%;
+      margin-top: $link-spacing;
+      margin-bottom: $link-spacing + $vertical-gap;
+      text-align: center;
+    }
+
+    // Reduce the bottom margin to the size of the vertical gap (accommodating
+    // the button shadow) – the 'lost' margin is moved to the button-group.
+    .govuk-button {
+      margin-bottom: $vertical-gap + $button-shadow-size;
+    }
+
+    // On tablet and above, we also introduce a 'column gap' between the
+    // buttons and links in each row and left align links
+    @include govuk-media-query($from: tablet) {
+      // Cancel out the column gap for the last item in each row
+      margin-right: ($horizontal-gap * -1);
+
+      -webkit-box-orient: horizontal;
+
+      -webkit-box-direction: normal;
+
+          -ms-flex-direction: row;
+
+              flex-direction: row;
+      -ms-flex-wrap: wrap;
+          flex-wrap: wrap;
+      -webkit-box-align: baseline;
+          -ms-flex-align: baseline;
+              align-items: baseline;
+
+      .govuk-button,
+      .govuk-link {
+        margin-right: $horizontal-gap;
+      }
+
+      .govuk-link {
+        text-align: left;
+      }
+    }
+  }
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: dxw_govuk_frontend_rails
 version: !ruby/object:Gem::Version
-  version: 3.10.2
+  version: 3.11.0
 platform: ruby
 authors:
 - mec
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2020-12-23 00:00:00.000000000 Z
+date: 2021-04-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -93,6 +93,8 @@ files:
 - vendor/assets/stylesheets/components/character-count/_index.scss
 - vendor/assets/stylesheets/components/checkboxes/_checkboxes.scss
 - vendor/assets/stylesheets/components/checkboxes/_index.scss
+- vendor/assets/stylesheets/components/cookie-banner/_cookie-banner.scss
+- vendor/assets/stylesheets/components/cookie-banner/_index.scss
 - vendor/assets/stylesheets/components/date-input/_date-input.scss
 - vendor/assets/stylesheets/components/date-input/_index.scss
 - vendor/assets/stylesheets/components/details/_details.scss
@@ -163,6 +165,7 @@ files:
 - vendor/assets/stylesheets/helpers/_typography.scss
 - vendor/assets/stylesheets/helpers/_visually-hidden.scss
 - vendor/assets/stylesheets/objects/_all.scss
+- vendor/assets/stylesheets/objects/_button-group.scss
 - vendor/assets/stylesheets/objects/_form-group.scss
 - vendor/assets/stylesheets/objects/_grid.scss
 - vendor/assets/stylesheets/objects/_main-wrapper.scss
@@ -218,7 +221,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.1.4
+rubygems_version: 3.2.15
 signing_key: 
 specification_version: 4
 summary: Adds the GOVUK frontend to a Rails application that uses the Asset Pipeline.