dxw_govuk_frontend_rails 3.11.0 → 3.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 53ce04369f5585d9d7e25d250a3e346746bf5b8541387d23b9debfa85996d034
-  data.tar.gz: 50c7eedd8c1c126a6f55873bdb8e9955747de10048909861a086c81b2ae0bef4
+  metadata.gz: e42e5531caedbe80f014557b076fc609f16ca85d666bdcc86bfb4e7c280e28a1
+  data.tar.gz: c712317b305d72d5960a65a1d4dbf0e7b0ebaf4bd482b057f32c6518d4fc90cc
 SHA512:
-  metadata.gz: 82eba76e269590ae83f405a02c03c76177d9d9bf35610e9f4a8b34a4e3550e5ab63f7d66c919744b5b404e08568af98924085f2c18fb17c1a38e8d33e96c958b
-  data.tar.gz: 68f8c51f435994ece6f8d8e219e3c369cfa4579e42cc2fb5f55d272cfd4504563c44f742c23595a7673d74ea6bdc0d05c34105d9d0a38054e31001468458f403
+  metadata.gz: 5f6a004060916897d45767e91565c3cdc6322d860814f2acbc027d35eca9a22f2d328e955095e4c9d0b14b478de12c259f064d88bdc5468bc0ffda3dcd325085
+  data.tar.gz: 3c4a6afe51e11a479d23a3e1ec51e17660511e4dba977af9a89545f5a55be39ac0cffb0cc82626e053323841efdf4976858b4fecf2f11f2664af4341e755e44b

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    dxw_govuk_frontend_rails (3.11.0)
+    dxw_govuk_frontend_rails (3.12.0)
 
 GEM
   remote: https://rubygems.org/
@@ -18,4 +18,4 @@ DEPENDENCIES
   rake (~> 13.0)
 
 BUNDLED WITH
-   2.2.1
+   2.2.24

data/lib/dxw_govuk_frontend_rails/version.rb

@@ -1,3 +1,3 @@
 module DxwGovukFrontendRails
-  VERSION = "3.11.0"
+  VERSION = "3.12.0"
 end

data/package-lock.json

@@ -1,13 +1,31 @@
 {
   "name": "dxw_govuk_frontend_rails",
   "version": "1.0.0",
-  "lockfileVersion": 1,
+  "lockfileVersion": 2,
   "requires": true,
+  "packages": {
+    "": {
+      "name": "dxw_govuk_frontend_rails",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "govuk-frontend": "3.12.0"
+      }
+    },
+    "node_modules/govuk-frontend": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.12.0.tgz",
+      "integrity": "sha512-+mM8BqEUqsBVSV/ud0dEhE8OmMdhkK53eEUp5YyPN+y3mwcdRnwwP2A2B5qFdFi6E6j/2AYuCG8l5kXD+JXNxA==",
+      "engines": {
+        "node": ">= 4.2.0"
+      }
+    }
+  },
   "dependencies": {
     "govuk-frontend": {
-      "version": "3.11.0",
-      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.11.0.tgz",
-      "integrity": "sha512-1hW/3etYBtKPM+PNdWVOijvWVI3mpYL8eb7WLTtlh/Qxf2mCp6LkCsZk9I034n4EJBYQ5jlUWsUlTOOIypftpg=="
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.12.0.tgz",
+      "integrity": "sha512-+mM8BqEUqsBVSV/ud0dEhE8OmMdhkK53eEUp5YyPN+y3mwcdRnwwP2A2B5qFdFi6E6j/2AYuCG8l5kXD+JXNxA=="
     }
   }
 }

data/package.json

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

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

@@ -1,9 +1,4 @@
 @include govuk-exports("govuk/component/accordion") {
-
-  $govuk-accordion-link-colour: $govuk-link-colour;
-  $govuk-accordion-link-hover-colour: govuk-colour("light-blue");
-  $govuk-accordion-border-width: 3px;
-
   .govuk-accordion {
     @include govuk-responsive-margin(6, "bottom");
   }
@@ -98,19 +93,9 @@
       // Safe area on the right to avoid clashing with icon
       padding-right: 40px;
       border-top: 1px solid $govuk-border-colour;
-      color: $govuk-accordion-link-colour;
       cursor: pointer;
     }
 
-    // For devices that can't hover such as touch devices,
-    // remove hover state as it can be stuck in that state (iOS).
-    @media (hover: none) {
-      .govuk-accordion__section-header:hover {
-        border-top-color: $govuk-accordion-link-colour;
-        box-shadow: inset 0 $govuk-accordion-border-width 0 0 $govuk-accordion-link-colour;
-      }
-    }
-
     // Buttons within the headers don’t need default styling
     .govuk-accordion__section-button {
       @include govuk-typography-common;
@@ -119,7 +104,7 @@
       margin-left: 0;
       padding: 0;
       border-width: 0;
-      color: inherit;
+      color: $govuk-link-colour;
       background: none;
       text-align: left;
       cursor: pointer;
@@ -147,7 +132,13 @@
     }
 
     .govuk-accordion__section-button:hover:not(:focus) {
+      color: $govuk-link-hover-colour;
       text-decoration: underline;
+
+      // This needs to come after the text-decoration property otherwise
+      // text-decoration, as a shorthand property, resets it to auto
+      @include govuk-link-hover-decoration;
+      text-underline-offset: $govuk-link-underline-offset;
     }
 
     // For devices that can't hover such as touch devices,

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

@@ -24,21 +24,6 @@
     padding-left: 14px;
   }
 
-  // Only underline if the component is linkable
-  .govuk-back-link[href] {
-    text-decoration: underline;
-
-    // When the back link is focused, hide the bottom link border as the
-    // focus styles has a bottom border.
-    &:focus {
-      text-decoration: none;
-
-      &:before {
-        border-color: $govuk-text-colour;
-      }
-    }
-  }
-
   // Prepend left pointing chevron
   .govuk-back-link:before {
     content: "";
@@ -88,6 +73,10 @@
     }
   }
 
+  .govuk-back-link:focus:before {
+    border-color: $govuk-focus-text-colour;
+  }
+
   .govuk-back-link:after {
     content: "";
     position: absolute;

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

@@ -34,7 +34,11 @@
 
   // ...but only underline the text, not the arrow
   .govuk-details__summary-text {
-    text-decoration: underline;
+    @include govuk-link-decoration;
+  }
+
+  .govuk-details__summary:hover .govuk-details__summary-text {
+    @include govuk-link-hover-decoration;
   }
 
   // Remove the underline when focussed to avoid duplicate borders

data/vendor/assets/stylesheets/components/file-upload/_index.scss

@@ -8,17 +8,21 @@
   .govuk-file-upload {
     @include govuk-font($size: 19);
     @include govuk-text-colour;
-    padding-top: $component-padding;
-    padding-bottom: $component-padding;
+    margin-left: -$component-padding;
+    padding: $component-padding;
+
+    // The default file upload button in Safari does not
+    // support setting a custom font-size. Set `-webkit-appearance`
+    // to `button` to drop out of the native appearance so the
+    // font-size is set to 19px
+    // https://bugs.webkit.org/show_bug.cgi?id=224746
+    &::-webkit-file-upload-button {
+      -webkit-appearance: button;
+      color: inherit;
+      font: inherit;
+    }
 
     &:focus {
-      // "Yank" the padding with negative margin to avoid a jump
-      // when element is focused
-      margin-right: -$component-padding;
-      margin-left: -$component-padding;
-      padding-right: $component-padding;
-      padding-left: $component-padding;
-
       outline: $govuk-focus-width solid $govuk-focus-colour;
       // Use `box-shadow` to add border instead of changing `border-width`
       // (which changes element size) and since `outline` is already used for the
@@ -37,11 +41,6 @@
     // to recognise `focus-within` and don't set any styles from the block
     // when it's a selector.
     &:focus-within {
-      margin-right: -$component-padding;
-      margin-left: -$component-padding;
-      padding-right: $component-padding;
-      padding-left: $component-padding;
-
       outline: $govuk-focus-width solid $govuk-focus-colour;
 
       box-shadow: inset 0 0 0 4px $govuk-input-border-colour;

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

@@ -6,17 +6,13 @@
   // as it'll just be the same as $govuk-footer-border.
   $govuk-footer-border-top: $govuk-border-colour;
   $govuk-footer-text: $govuk-text-colour;
-  $govuk-footer-link: $govuk-footer-text;
-  $govuk-footer-link-hover: false;
+  $govuk-footer-link-hover-colour: null; // Only used with the legacy palette
 
   @if ($govuk-use-legacy-palette) {
     $govuk-footer-border-top: #a1acb2;
     $govuk-footer-border: govuk-colour("grey-2");
     $govuk-footer-text: #454a4c;
-    $govuk-footer-link: $govuk-footer-text;
-
-    // Only used with the legacy palette
-    $govuk-footer-link-hover: #171819;
+    $govuk-footer-link-hover-colour: #171819;
   }
 
   // Based on the govuk-crest-2x.png image dimensions.
@@ -37,27 +33,20 @@
   }
 
   .govuk-footer__link {
+    @include govuk-link-common;
+
     @if ($govuk-use-legacy-palette) {
       &:link,
       &:visited {
-        color: $govuk-footer-link;
+        color: $govuk-footer-text;
       }
 
       &:hover,
       &:active {
-        color: $govuk-footer-link-hover;
+        color: $govuk-footer-link-hover-colour;
       }
     } @else {
-      &:link,
-      &:visited,
-      &:hover,
-      &:active {
-        color: $govuk-footer-link;
-      }
-    }
-
-    &:focus {
-      @include govuk-focused-text;
+      @include govuk-link-style-text;
     }
 
     // alphagov/govuk_template includes a specific a:link:focus selector
@@ -134,7 +123,6 @@
     background-position: 50% 0%;
     background-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height;
     text-align: center;
-    text-decoration: none;
     white-space: nowrap;
   }
 
@@ -210,6 +198,13 @@
     list-style: none;
     -webkit-column-gap: $govuk-gutter;
             column-gap: $govuk-gutter; // Support: Columns
+
+    // Disable thicker underlines on hover because of a bug in Chromium
+    // affecting links within columns
+    // https://bugs.chromium.org/p/chromium/issues/detail?id=1190987
+    .govuk-footer__link:hover {
+      text-decoration-thickness: auto;
+    }
   }
 
   @include govuk-media-query ($from: desktop) {

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

@@ -4,10 +4,9 @@
   $govuk-header-border-color: $govuk-brand-colour;
   $govuk-header-border-width: govuk-spacing(2);
   $govuk-header-text: govuk-colour("white");
-  $govuk-header-link: govuk-colour("white");
-  $govuk-header-link-hover: govuk-colour("white");
   $govuk-header-link-active: #1d8feb;
   $govuk-header-nav-item-border-color: #2e3133;
+  $govuk-header-link-underline-thickness: 3px;
 
   .govuk-header {
     @include govuk-font($size: 16);
@@ -36,7 +35,19 @@
 
   .govuk-header__logotype {
     display: inline-block;
+
+    // Add a gap between logo and any product name
     margin-right: govuk-spacing(1);
+
+    // Prevent readability backplate from obscuring underline in Windows
+    // High Contrast Mode
+    forced-color-adjust: none;
+
+    // But remove it if there's nothing after the logo to keep hover and focus
+    // states neat
+    &:last-child {
+      margin-right: 0;
+    }
   }
 
   .govuk-header__logotype-crown {
@@ -57,33 +68,33 @@
   .govuk-header__product-name {
     @include govuk-font($size: 24, $line-height: 1);
     display: inline-table;
-    padding-right: govuk-spacing(2);
   }
 
   .govuk-header__link {
-    text-decoration: none;
+    // Avoid using the `govuk-link-common` mixin because the links in the header
+    // get a special treatment, because:
+    //
+    // - underlines are only visible on hover
+    // - all links get a 3px underline regardless of text size, as there are
+    //   multiple grouped elements close to one another and having slightly
+    //   different underline widths looks unbalanced
+    @include govuk-typography-common;
+    @include govuk-link-style-inverse;
 
-    &:link,
-    &:visited {
-      color: $govuk-header-link;
-    }
+    text-decoration: none;
 
     &:hover {
       text-decoration: underline;
+      text-decoration-thickness: $govuk-header-link-underline-thickness;
+
+      @if ($govuk-link-underline-offset) {
+        text-underline-offset: $govuk-link-underline-offset;
+      }
     }
 
     &:focus {
       @include govuk-focused-text;
     }
-
-    // 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 {
-        @include govuk-text-colour;
-      }
-    }
   }
 
   .govuk-header__link--homepage {
@@ -92,6 +103,7 @@
     @include govuk-font($size: false, $weight: bold);
 
     display: inline-block;
+    margin-right: govuk-spacing(2);
     font-size: 30px; // We don't have a mixin that produces 30px font size
     line-height: 1;
 
@@ -103,10 +115,10 @@
     &:hover,
     &:active {
       // Negate the added border
-      margin-bottom: -1px;
+      margin-bottom: $govuk-header-link-underline-thickness * -1;
       // Omitting colour will use default value of currentColor – if we
       // specified currentColor explicitly IE8 would ignore this rule.
-      border-bottom: 1px solid;
+      border-bottom: $govuk-header-link-underline-thickness solid;
     }
 
     // Remove any borders that show when focused and hovered.
@@ -156,11 +168,17 @@
     margin: 0;
     padding: 0;
     border: 0;
-    color: $govuk-header-link;
+    color: govuk-colour("white");
     background: none;
+    cursor: pointer;
 
     &:hover {
-      text-decoration: underline;
+      -webkit-text-decoration: solid underline $govuk-header-link-underline-thickness;
+              text-decoration: solid underline $govuk-header-link-underline-thickness;
+
+      @if ($govuk-link-underline-offset) {
+        text-underline-offset: $govuk-link-underline-offset;
+      }
     }
 
     &:focus {

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

@@ -22,6 +22,6 @@
 
   .govuk-phase-banner__text {
     display: table-cell;
-    vertical-align: baseline;
+    vertical-align: middle;
   }
 }

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

@@ -2,6 +2,7 @@
   .govuk-skip-link {
     @include govuk-visually-hidden-focusable;
     @include govuk-typography-common;
+    @include govuk-link-decoration;
     @include govuk-link-style-text;
     @include govuk-typography-responsive($size: 16);
 
@@ -27,7 +28,6 @@
       // Undo unwanted changes when global styles are enabled
       @if ($govuk-global-styles) {
         box-shadow: none;
-        text-decoration: underline;
       }
     }
   }

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

@@ -30,16 +30,11 @@
   }
 
   .govuk-tabs__tab {
+    @include govuk-link-common;
     @include govuk-link-style-default;
 
     display: inline-block;
     margin-bottom: govuk-spacing(2);
-
-    // Focus state for mobile and when JavaScript is disabled
-    // It is removed for JS-enabled desktop styles
-    &:focus {
-      @include govuk-focused-text;
-    }
   }
 
   .govuk-tabs__panel {

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

@@ -46,6 +46,16 @@
        -moz-user-select: none;
         -ms-user-select: none;
             user-select: none;
+
+    // Improve rendering in Windows High Contrast Mode (Edge), where a
+    // readability backplate behind the exclamation mark obscures the circle
+    forced-color-adjust: none;
+
+    @media screen and (forced-colors: active) {
+      border-color: windowText;
+      color: windowText;
+      background: transparent;
+    }
   }
 
   .govuk-warning-text__text {

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

@@ -27,6 +27,14 @@
     @include govuk-link-style-text;
   }
 
+  .govuk-link--inverse {
+    @include govuk-link-style-inverse;
+  }
+
+  .govuk-link--no-underline {
+    @include govuk-link-style-no-underline;
+  }
+
   .govuk-link--no-visited-state {
     @include govuk-link-style-no-visited-state;
   }

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,57 @@
 
 @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;
+  }
+}
+
+/// 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 +105,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 +153,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 +201,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 +219,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 +244,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 +261,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 +287,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 +374,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/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.11.0
+  version: 3.12.0
 platform: ruby
 authors:
 - mec
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2021-04-28 00:00:00.000000000 Z
+date: 2021-11-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -183,6 +183,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
@@ -221,7 +222,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.2.15
+rubygems_version: 3.2.22
 signing_key: 
 specification_version: 4
 summary: Adds the GOVUK frontend to a Rails application that uses the Asset Pipeline.