dxw_govuk_frontend_rails 3.9.1 → 3.10.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 32963462555eea031d11a2c85e7d59aff6534434c5430e522a1468c591d1aa8d
-  data.tar.gz: 636e39bce62acc9c6106a2f2156865d26f53bda67e68c7d50e3e5352f0e3bfae
+  metadata.gz: b45f829ef6c112b8acdc675c702ea6c5b2ed784f67afd8c46fb5fd1ab9e6515f
+  data.tar.gz: cac2861100bd6e495f63cbf61792428d6dd86260ba6ac8a6499d7d4ddd7efcc8
 SHA512:
-  metadata.gz: 4e5169826e7097a3939119f86b73050355f2330f2e3befa2c9146273a51f01a9ee40d521626f6a372d001590e55e26cafeb2ea8c9c1fd787ff5078c0b52b5725
-  data.tar.gz: 3fec0b62d356b58d8cf364d3ebd9d618c092e352fc8cbb6813d047413579a8ec08f36471b46506c6c38c3642d4988dd65b3548c2ec2f0eccd03f045381e65f51
+  metadata.gz: 2bbc39c25ed2bb297c569524f56b4dd998d4363b27f6a861ffd888c2dd5babcb07f9722d72cc7c54c9604522591a8ac2eefed5527137bd11833ea00bcf8777b7
+  data.tar.gz: 38df5dbcd807f25710609517b7aa8458824b09b0b7e33c04713adb18e9d3613fad3f63574ff2d450f32fbb8d51b8e950f767b3ce4ad3cd983e7026b4b5f2cf22

data/Gemfile.lock

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

data/lib/dxw_govuk_frontend_rails/version.rb

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

data/package-lock.json

@@ -5,9 +5,9 @@
   "requires": true,
   "dependencies": {
     "govuk-frontend": {
-      "version": "3.9.1",
-      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.9.1.tgz",
-      "integrity": "sha512-ouOoDUj0QwDA4uCHIBkGCFMpORuTRcSuDscOrz7V1PBcOecntLglxJAZAuNm+j2sPo7anoScHU0ZSeE2QIoeAg=="
+      "version": "3.10.2",
+      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.10.2.tgz",
+      "integrity": "sha512-MpMymgLsKoMw40MggZ0XLCAj1FY5N2s8Pf3aQR+k0cZOsegjLsnejxNfEB9qEl9jcma2fiiVcvsEZ+Ipo+Oo2g=="
     }
   }
 }

data/package.json

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

data/vendor/assets/javascripts/govuk_frontend_rails.js

@@ -1959,6 +1959,58 @@ ErrorSummary.prototype.getAssociatedLegendOrLabel = function ($input) {
     $input.closest('label')
 };
 
+function NotificationBanner ($module) {
+  this.$module = $module;
+}
+
+/**
+ * Initialise the component
+ */
+NotificationBanner.prototype.init = function () {
+  var $module = this.$module;
+  // Check for module
+  if (!$module) {
+    return
+  }
+
+  this.setFocus();
+};
+
+/**
+ * Focus the element
+ *
+ * If `role="alert"` is set, focus the element to help some assistive technologies
+ * prioritise announcing it.
+ *
+ * You can turn off the auto-focus functionality by setting `data-disable-auto-focus="true"` in the
+ * component HTML. You might wish to do this based on user research findings, or to avoid a clash
+ * with another element which should be focused when the page loads.
+ */
+NotificationBanner.prototype.setFocus = function () {
+  var $module = this.$module;
+
+  if ($module.getAttribute('data-disable-auto-focus') === 'true') {
+    return
+  }
+
+  if ($module.getAttribute('role') !== 'alert') {
+    return
+  }
+
+  // Set tabindex to -1 to make the element focusable with JavaScript.
+  // Remove the tabindex on blur as the component doesn't need to be focusable after the page has
+  // loaded.
+  if (!$module.getAttribute('tabindex')) {
+    $module.setAttribute('tabindex', '-1');
+
+    $module.addEventListener('blur', function () {
+      $module.removeAttribute('tabindex');
+    });
+  }
+
+  $module.focus();
+};
+
 function Header ($module) {
   this.$module = $module;
   this.$menuButton = $module && $module.querySelector('.govuk-js-header-toggle');
@@ -2476,6 +2528,11 @@ function initAll (options) {
   var $toggleButton = scope.querySelector('[data-module="govuk-header"]');
   new Header($toggleButton).init();
 
+  var $notificationBanners = scope.querySelectorAll('[data-module="govuk-notification-banner"]');
+  nodeListForEach($notificationBanners, function ($notificationBanner) {
+    new NotificationBanner($notificationBanner).init();
+  });
+
   var $radios = scope.querySelectorAll('[data-module="govuk-radios"]');
   nodeListForEach($radios, function ($radio) {
     new Radios($radio).init();

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

@@ -19,6 +19,7 @@
 @import "input/index";
 @import "inset-text/index";
 @import "label/index";
+@import "notification-banner/index";
 @import "panel/index";
 @import "phase-banner/index";
 @import "tabs/index";

data/vendor/assets/stylesheets/components/error-summary/_index.scss

@@ -37,17 +37,7 @@
 
   .govuk-error-summary__list a {
     @include govuk-typography-weight-bold;
-
-    // Override default link styling to use error colour
-    &:link,
-    &:visited,
-    &:hover,
-    &:active {
-      color: $govuk-error-colour;
-    }
-
-    &:focus {
-      @include govuk-focused-text;
-    }
+    @include govuk-link-common;
+    @include govuk-link-style-error;
   }
 }

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

@@ -0,0 +1,89 @@
+@include govuk-exports("govuk/component/notification-banner") {
+  .govuk-notification-banner {
+    @include govuk-font($size: 19);
+    @include govuk-responsive-margin(8, "bottom");
+
+    border: $govuk-border-width solid $govuk-brand-colour;
+
+    background-color: $govuk-brand-colour;
+
+    &:focus {
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+    }
+  }
+
+  .govuk-notification-banner__header {
+    padding: 2px govuk-spacing(3) govuk-spacing(1);
+
+    // Ensures the notification header appears separate to the notification body text in high contrast mode
+    border-bottom: 1px solid transparent;
+
+    @include govuk-media-query($from: tablet) {
+      padding: 2px govuk-spacing(4) govuk-spacing(1);
+    }
+  }
+
+  .govuk-notification-banner__title {
+    @include govuk-font($size: 19, $weight: bold);
+
+    margin: 0;
+
+    padding: 0;
+
+    color: govuk-colour("white");
+  }
+
+  .govuk-notification-banner__content {
+    $padding-tablet: govuk-spacing(4);
+    @include govuk-text-colour;
+    padding: govuk-spacing(3);
+
+    background-color: $govuk-body-background-colour;
+
+    @include govuk-media-query($from: tablet) {
+      padding: $padding-tablet;
+    }
+
+    // Wrap content at the same place that a 2/3 grid column ends, to maintain
+    // shorter line-lengths when the notification banner is full width
+    > * {
+      // When elements have their own padding (like lists), include the padding
+      // in the max-width calculation
+      box-sizing: border-box;
+
+      // Calculate the internal width of a two-thirds column...
+      $two-col-width: ($govuk-page-width * 2 / 3) - ($govuk-gutter * 1 / 3);
+
+      // ...and then factor in the left border and padding
+      $banner-exterior: ($padding-tablet + $govuk-border-width);
+      max-width: $two-col-width - $banner-exterior;
+    }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .govuk-notification-banner__heading {
+    @include govuk-font($size: 24, $weight: bold);
+
+    margin: 0 0 govuk-spacing(3) 0;
+
+    padding: 0;
+  }
+
+  .govuk-notification-banner__link {
+    @include govuk-link-common;
+    @include govuk-link-style-no-visited-state;
+  }
+
+  .govuk-notification-banner--success {
+    border-color: $govuk-success-colour;
+
+    background-color: $govuk-success-colour;
+
+    .govuk-notification-banner__link {
+      @include govuk-link-style-success;
+    }
+  }
+}

data/vendor/assets/stylesheets/components/notification-banner/_notification-banner.scss

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

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

@@ -66,6 +66,100 @@
   }
 }
 
+/// Error link style mixin
+///
+/// Provides the error unvisited, visited, hover and active states for links.
+///
+/// If you use this mixin in a component you must also include the
+/// govuk-link-common mixin in order to get the focus state.
+///
+/// @example scss
+///   .govuk-component__link {
+///     @include govuk-link-common;
+///     @include govuk-link-style-error;
+///   }
+///
+/// @access public
+
+@mixin govuk-link-style-error {
+  &:link,
+  &:visited {
+    color: $govuk-error-colour;
+  }
+
+  &:hover {
+    color: scale-color($govuk-error-colour, $lightness: -30%);
+  }
+
+  &:active {
+    color: $govuk-error-colour;
+  }
+
+  // When focussed, the text colour needs to be darker to ensure that colour
+  // contrast is still acceptable
+  &:focus {
+    color: $govuk-focus-text-colour;
+  }
+
+  // alphagov/govuk_template includes a specific a:link:focus selector
+  // designed to make unvisited link  s 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-focus-text-colour;
+    }
+  }
+}
+
+/// Success link style mixin
+///
+/// Provides the success unvisited, visited, hover and active states for links.
+///
+/// If you use this mixin in a component you must also include the
+/// govuk-link-common mixin in order to get the focus state.
+///
+/// @example scss
+///   .govuk-component__link {
+///     @include govuk-link-common;
+///     @include govuk-link-style-success;
+///   }
+///
+/// @access public
+
+@mixin govuk-link-style-success {
+  &:link,
+  &:visited {
+    color: $govuk-success-colour;
+  }
+
+  &:hover {
+    color: scale-color($govuk-success-colour, $lightness: -30%);
+  }
+
+  &:active {
+    color: $govuk-success-colour;
+  }
+
+  // When focussed, the text colour needs to be darker to ensure that colour
+  // contrast is still acceptable
+  &:focus {
+    color: $govuk-focus-text-colour;
+  }
+
+  // alphagov/govuk_template includes a specific a:link:focus selector
+  // designed to make unvisited link  s 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-focus-text-colour;
+    }
+  }
+}
+
 /// Muted style link mixin
 ///
 /// Used for secondary links on a page - the link will appear in muted colours

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

@@ -86,6 +86,15 @@ $govuk-focus-text-colour: govuk-colour("black") !default;
 
 $govuk-error-colour: govuk-colour("red") !default;
 
+/// Success colour
+///
+/// Used to highlight success messages and banners
+///
+/// @type Colour
+/// @access public
+
+$govuk-success-colour: govuk-colour("green") !default;
+
 /// Border colour
 ///
 /// Used in for example borders, separators, rules and keylines.

data/vendor/assets/stylesheets/settings/_typography-font.scss

@@ -52,6 +52,9 @@ $govuk-font-family-tabular: if(
 
 /// Font families to use for print media
 ///
+/// We recommend that you use system fonts when printing. This will avoid issues
+/// with some printer drivers and operating systems.
+///
 /// @type List
 /// @access public
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: dxw_govuk_frontend_rails
 version: !ruby/object:Gem::Version
-  version: 3.9.1
+  version: 3.10.2
 platform: ruby
 authors:
 - mec
@@ -117,6 +117,8 @@ files:
 - vendor/assets/stylesheets/components/inset-text/_inset-text.scss
 - vendor/assets/stylesheets/components/label/_index.scss
 - vendor/assets/stylesheets/components/label/_label.scss
+- vendor/assets/stylesheets/components/notification-banner/_index.scss
+- vendor/assets/stylesheets/components/notification-banner/_notification-banner.scss
 - vendor/assets/stylesheets/components/panel/_index.scss
 - vendor/assets/stylesheets/components/panel/_panel.scss
 - vendor/assets/stylesheets/components/phase-banner/_index.scss