dxw_govuk_frontend_rails 3.10.2 → 3.14.0

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

@@ -2,7 +2,7 @@
 /// @group helpers/links
 ////
 
-/// Common link mixin
+/// Common link styles
 ///
 /// Provides the typography and focus state, regardless of link style.
 ///
@@ -10,18 +10,63 @@
 
 @mixin govuk-link-common {
   @include govuk-typography-common;
+  @include govuk-link-decoration;
+
+  &:hover {
+    @include govuk-link-hover-decoration;
+  }
 
   &:focus {
     @include govuk-focused-text;
   }
 }
 
-/// Default link style mixin
+/// Link decoration
+///
+/// Provides the text decoration for links, including thickness and underline
+/// offset. Use this mixin only if you cannot use the `govuk-link-common` mixin.
+///
+/// @access public
+@mixin govuk-link-decoration {
+  text-decoration: underline;
+
+  @if ($govuk-new-link-styles) {
+    @if ($govuk-link-underline-thickness) {
+      text-decoration-thickness: $govuk-link-underline-thickness;
+    }
+
+    @if ($govuk-link-underline-offset) {
+      text-underline-offset: $govuk-link-underline-offset;
+    }
+  }
+}
+
+/// Link hover decoration
+///
+/// Provides the text decoration for links in their hover state, for you to use
+/// within a `:hover` pseudo-selector. Use this mixin only if you cannot use the
+/// `govuk-link-common` mixin.
+///
+/// @access public
+
+@mixin govuk-link-hover-decoration {
+  @if ($govuk-new-link-styles and $govuk-link-hover-underline-thickness) {
+    text-decoration-thickness: $govuk-link-hover-underline-thickness;
+    // Disable ink skipping on underlines on hover. Browsers haven't
+    // standardised on this part of the spec yet, so set both properties
+    -webkit-text-decoration-skip-ink: none;
+            text-decoration-skip-ink: none; // Chromium, Firefox
+    -webkit-text-decoration-skip: none;
+            text-decoration-skip: none; // Safari
+  }
+}
+
+/// Default link styles
 ///
-/// Provides the default unvisited, visited, hover and active states for links.
+/// Makes links use the default unvisited, visited, hover and active colours.
 ///
-/// If you use this mixin in a component you must also include the
-/// govuk-link-common mixin in order to get the focus state.
+/// If you use this mixin in a component, you must also include the
+/// `govuk-link-common` mixin to get the correct focus and hover states.
 ///
 /// @example scss
 ///   .govuk-component__link {
@@ -66,12 +111,13 @@
   }
 }
 
-/// Error link style mixin
+/// Error link styles
 ///
-/// Provides the error unvisited, visited, hover and active states for links.
+/// Makes links use the error colour. The link will darken if it's active or a
+/// user hovers their cursor over it.
 ///
-/// If you use this mixin in a component you must also include the
-/// govuk-link-common mixin in order to get the focus state.
+/// If you use this mixin in a component, you must also include the
+/// `govuk-link-common` mixin to get the correct focus and hover states.
 ///
 /// @example scss
 ///   .govuk-component__link {
@@ -113,12 +159,13 @@
   }
 }
 
-/// Success link style mixin
+/// Success link styles
 ///
-/// Provides the success unvisited, visited, hover and active states for links.
+/// Makes links use the success colour. The link will darken if it's active or a
+/// user hovers their cursor over it.
 ///
-/// If you use this mixin in a component you must also include the
-/// govuk-link-common mixin in order to get the focus state.
+/// If you use this mixin in a component, you must also include the
+/// `govuk-link-common` mixin to get the correct focus and hover states.
 ///
 /// @example scss
 ///   .govuk-component__link {
@@ -160,13 +207,13 @@
   }
 }
 
-/// Muted style link mixin
+/// Muted link styles
 ///
-/// Used for secondary links on a page - the link will appear in muted colours
-/// regardless of visited state.
+/// Makes links use the secondary text colour. The link will darken if it's
+/// active or a user hovers their cursor over it.
 ///
-/// If you use this mixin in a component you must also include the
-/// govuk-link-common mixin in order to get the focus state.
+/// If you use this mixin in a component, you must also include the
+/// `govuk-link-common` mixin to get the correct focus and hover states.
 ///
 /// @example scss
 ///   .govuk-component__link {
@@ -178,10 +225,13 @@
 
 @mixin govuk-link-style-muted {
   &:link,
-  &:visited,
+  &:visited {
+    color: $govuk-secondary-text-colour;
+  }
+
   &:hover,
   &:active {
-    color: $govuk-secondary-text-colour;
+    color: $govuk-text-colour;
   }
 
   // When focussed, the text colour needs to be darker to ensure that colour
@@ -200,13 +250,13 @@
   }
 }
 
-/// Text style link mixin
+/// Text link styles
 ///
-/// Overrides the colour of links to match the text colour. Generally used by
+/// Makes links use the primary text colour, in all states. Use this mixin for
 /// navigation components, such as breadcrumbs or the back link.
 ///
-/// If you use this mixin in a component you must also include the
-/// govuk-link-common mixin in order to get the focus state.
+/// If you use this mixin in a component, you must also include the
+/// `govuk-link-common` mixin to get the correct focus and hover states.
 ///
 /// @example scss
 ///   .govuk-component__link {
@@ -217,10 +267,17 @@
 /// @access public
 
 @mixin govuk-link-style-text {
-  // Override link colour to use text colour
   &:link,
-  &:visited,
-  &:hover,
+  &:visited {
+    @include govuk-text-colour;
+  }
+
+  // Force a colour change on hover to work around a bug in Safari
+  // https://bugs.webkit.org/show_bug.cgi?id=224483
+  &:hover {
+    color: rgba($govuk-text-colour, .99);
+  }
+
   &:active,
   &:focus {
     @include govuk-text-colour;
@@ -236,17 +293,60 @@
   }
 }
 
-/// No visited state link mixin
+/// Inverse link styles
+///
+/// Makes links white, in all states. Use this mixin if you're displaying links
+/// against a dark background.
+///
+/// If you use this mixin in a component, you must also include the
+/// `govuk-link-common` mixin to get the correct focus and hover states.
+///
+/// @example scss
+///   .govuk-component__link {
+///     @include govuk-link-common;
+///     @include govuk-link-style-inverse;
+///   }
+///
+/// @access public
+
+@mixin govuk-link-style-inverse {
+  &:link,
+  &:visited {
+    color: govuk-colour("white");
+  }
+
+  // Force a colour change on hover to work around a bug in Safari
+  // https://bugs.webkit.org/show_bug.cgi?id=224483
+  &:hover,
+  &:active {
+    color: rgba(govuk-colour("white"), .99);
+  }
+
+  &:focus {
+    color: $govuk-focus-text-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.
+  @include govuk-compatibility(govuk_template) {
+    &:link:focus {
+      color: $govuk-focus-text-colour;
+    }
+  }
+}
+
+/// Default link styles, without a visited state
 ///
-/// Used in cases where it is not helpful to distinguish between visited and
-/// non-visited links.
+/// Makes links use the default unvisited, hover and active colours, with no
+/// distinct visited state.
 ///
-/// For example, navigation links to pages with dynamic content like admin
-/// dashboards. The content on the page is changing all the time, so the fact
-/// that you’ve visited it before is not important.
+/// Use this mixin when it's not helpful to distinguish between visited and
+/// non-visited links. For example, when you link to pages with
+/// frequently-changing content, such as the dashboard for an admin interface.
 ///
-/// If you use this mixin in a component you must also include the
-/// govuk-link-common mixin in order to get the focus state.
+/// If you use this mixin in a component, you must also include the
+/// `govuk-link-common` mixin to get the correct focus and hover states.
 ///
 /// @example scss
 ///   .govuk-component__link {
@@ -280,10 +380,31 @@
   }
 }
 
-/// Print friendly link mixin
+/// Remove underline from links
+///
+/// Remove underlines from links unless the link is active or a user hovers
+/// their cursor over it. This has no effect in Internet Explorer 8 (IE8),
+/// because IE8 does not support `:not`.
+///
+/// @example scss
+///   .govuk-component__link {
+///     @include govuk-link-common;
+///     @include govuk-link-style-default;
+///     @include govuk-link-style-no-underline;
+///   }
+///
+/// @access public
+
+@mixin govuk-link-style-no-underline {
+  &:not(:hover):not(:active) {
+    text-decoration: none;
+  }
+}
+
+/// Include link destination when printing the page
 ///
-/// When printing, append the the destination URL to the link text, as long
-/// as the URL starts with either `/`, `http://` or `https://`.
+/// If the user prints the page, add the destination URL after the link text, if
+/// the URL starts with `/`, `http://` or `https://`.
 ///
 /// @access public
 

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

@@ -8,15 +8,26 @@
 ///
 /// Returns measurement corresponding to the spacing point requested.
 ///
-/// @param {Number} $spacing-point - Point on the spacing scale (set in `settings/_spacing.sccs`)
+/// @param {Number} $spacing-point - Point on the spacing scale
+///  (set in `settings/_spacing.scss`)
 ///
-/// @returns {String} Spacing Measurement eg. 10px
+/// @returns {String} Spacing measurement eg. 10px
 ///
 /// @example scss
 ///   .element {
 ///     padding: govuk-spacing(5);
-///     top: govuk-spacing(2) !important; // if `!important` is required
 ///   }
+///
+/// @example scss Using negative spacing
+///   .element {
+///     margin-top: govuk-spacing(-1);
+///   }
+///
+/// @example scss Marking spacing declarations as important
+///   .element {
+///     margin-top: govuk-spacing(1) !important;
+///   }
+///
 /// @access public
 
 @function govuk-spacing($spacing-point) {
@@ -27,11 +38,18 @@
     + "#{$actual-input-type}.";
   }
 
+  $is-negative: false;
+  @if ($spacing-point < 0) {
+    $is-negative: true;
+    $spacing-point: abs($spacing-point);
+  }
+
   @if not map-has-key($govuk-spacing-points, $spacing-point) {
     @error "Unknown spacing variable `#{$spacing-point}`. Make sure you are using a point from the spacing scale in `_settings/spacing.scss`.";
   }
 
-  @return map-get($govuk-spacing-points, $spacing-point);
+  $value: map-get($govuk-spacing-points, $spacing-point);
+  @return if($is-negative, $value * -1, $value);
 }
 
 /// Responsive spacing

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,101 @@
+@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: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-align: center;
+    -webkit-align-items: 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;
+
+      -webkit-flex-direction: row;
+
+          -ms-flex-direction: row;
+
+              flex-direction: row;
+      -webkit-flex-wrap: wrap;
+          -ms-flex-wrap: wrap;
+              flex-wrap: wrap;
+      -webkit-box-align: baseline;
+      -webkit-align-items: baseline;
+          -ms-flex-align: baseline;
+              align-items: baseline;
+
+      .govuk-button,
+      .govuk-link {
+        margin-right: $horizontal-gap;
+      }
+
+      .govuk-link {
+        text-align: left;
+      }
+    }
+  }
+}

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

@@ -28,7 +28,9 @@
 
   // Respect 'display cutout' safe area (avoids notches and rounded corners)
   @supports (margin: unquote("max(calc(0px))")) {
+    $gutter-safe-area-right: -webkit-calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
     $gutter-safe-area-right: calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
+    $gutter-safe-area-left: -webkit-calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
     $gutter-safe-area-left: calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
 
     // Use max() to pick largest margin, default or with safe area
@@ -44,7 +46,9 @@
 
     // Respect 'display cutout' safe area (avoids notches and rounded corners)
     @supports (margin: unquote("max(calc(0px))")) {
+      $gutter-safe-area-right: -webkit-calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
       $gutter-safe-area-right: calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
+      $gutter-safe-area-left: -webkit-calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
       $gutter-safe-area-left: calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
 
       // Use max() to pick largest margin, default or with safe area

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

@@ -1,4 +1,5 @@
 @import "display";
 @import "spacing";
+@import "text-align";
 @import "typography";
 @import "width";

data/vendor/assets/stylesheets/overrides/_text-align.scss

@@ -0,0 +1,20 @@
+@if not mixin-exists("govuk-exports") {
+  @warn "Importing items from the overrides layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0.";
+}
+
+@import "../base";
+
+// stylelint-disable declaration-no-important
+@include govuk-exports("govuk/overrides/text-align") {
+  .govuk-\!-text-align-left {
+    text-align: left !important;
+  }
+
+  .govuk-\!-text-align-centre {
+    text-align: center !important;
+  }
+
+  .govuk-\!-text-align-right {
+    text-align: right !important;
+  }
+}

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

@@ -19,3 +19,5 @@
 @import "typography-font-families";
 @import "typography-font";
 @import "typography-responsive";
+
+@import "links";

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

@@ -0,0 +1,62 @@
+////
+/// @group settings/links
+////
+
+/// Enable new link styles
+///
+/// If enabled, the link styles will change. Underlines will:
+///
+/// - be consistently thinner and a bit further away from the link text
+/// - have a clearer hover state, where the underline gets thicker to make the
+///   link stand out to users
+///
+/// You should only enable the new link styles if both:
+///
+/// - you've made sure your whole service will use the new style consistently
+/// - you do not have links in a multi-column CSS layout - there's [a Chromium
+///   bug that affects links](https://github.com/alphagov/govuk-frontend/issues/2204)
+///
+/// @type Boolean
+/// @access public
+
+$govuk-new-link-styles: false !default;
+
+/// Thickness of link underlines
+///
+/// The default will be either:
+///
+///  - 1px
+///  - 0.0625rem, if it's thicker than 1px because the user has changed the text
+///    size in their browser
+///
+/// Set this variable to `false` to avoid setting a thickness.
+///
+/// @type Number
+/// @access public
+
+$govuk-link-underline-thickness: unquote("max(1px, .0625rem)") !default;
+
+/// Offset of link underlines from text baseline
+///
+/// Set this variable to `false` to avoid setting an offset.
+///
+/// @type Number
+/// @access public
+
+$govuk-link-underline-offset: .1em !default;
+
+/// Thickness of link underlines in hover state
+///
+/// The default for each link will be the thickest of the following:
+///
+///  - 3px
+///  - 0.1875rem, if it's thicker than 3px because the user has changed the text
+///    size in their browser
+///  - 0.12em (relative to the link's text size)
+///
+/// Set this variable to `false` to avoid setting a thickness.
+///
+/// @type Number
+/// @access public
+
+$govuk-link-hover-underline-thickness: unquote("max(3px, .1875rem, .12em)") !default;

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.14.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-11-12 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
@@ -170,6 +173,7 @@ files:
 - vendor/assets/stylesheets/overrides/_all.scss
 - vendor/assets/stylesheets/overrides/_display.scss
 - vendor/assets/stylesheets/overrides/_spacing.scss
+- vendor/assets/stylesheets/overrides/_text-align.scss
 - vendor/assets/stylesheets/overrides/_typography.scss
 - vendor/assets/stylesheets/overrides/_width.scss
 - vendor/assets/stylesheets/settings/_all.scss
@@ -180,6 +184,7 @@ files:
 - vendor/assets/stylesheets/settings/_compatibility.scss
 - vendor/assets/stylesheets/settings/_global-styles.scss
 - vendor/assets/stylesheets/settings/_ie8.scss
+- vendor/assets/stylesheets/settings/_links.scss
 - vendor/assets/stylesheets/settings/_measurements.scss
 - vendor/assets/stylesheets/settings/_media-queries.scss
 - vendor/assets/stylesheets/settings/_spacing.scss
@@ -218,7 +223,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.1.4
+rubygems_version: 3.2.22
 signing_key: 
 specification_version: 4
 summary: Adds the GOVUK frontend to a Rails application that uses the Asset Pipeline.