govuk_publishing_components 24.10.1 → 24.12.0

data/node_modules/govuk-frontend/govuk/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/node_modules/govuk-frontend/govuk/settings/_all.scss

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

data/node_modules/govuk-frontend/govuk/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;

data/node_modules/govuk-frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "govuk-frontend",
   "description": "GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.",
-  "version": "3.11.0",
+  "version": "3.12.0",
   "main": "govuk/all.js",
   "sass": "govuk/all.scss",
   "engines": {

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 24.10.1
+  version: 24.12.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-05-06 00:00:00.000000000 Z
+date: 2021-06-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -482,6 +482,7 @@ files:
 - app/assets/javascripts/govuk_publishing_components/lib/toggle-input-class-on-focus.js
 - app/assets/javascripts/govuk_publishing_components/lib/toggle.js
 - app/assets/javascripts/govuk_publishing_components/lib/track-click.js
+- app/assets/javascripts/govuk_publishing_components/lib/trigger-event.js
 - app/assets/javascripts/govuk_publishing_components/modules.js
 - app/assets/javascripts/govuk_publishing_components/vendor/html5shiv-printshiv.js
 - app/assets/javascripts/govuk_publishing_components/vendor/json2.js
@@ -1587,6 +1588,7 @@ files:
 - node_modules/govuk-frontend/govuk/components/checkboxes/macro-options.json
 - node_modules/govuk-frontend/govuk/components/checkboxes/macro.njk
 - node_modules/govuk-frontend/govuk/components/checkboxes/template.njk
+- node_modules/govuk-frontend/govuk/components/cookie-banner/README.md
 - node_modules/govuk-frontend/govuk/components/cookie-banner/_cookie-banner.scss
 - node_modules/govuk-frontend/govuk/components/cookie-banner/_index.scss
 - node_modules/govuk-frontend/govuk/components/cookie-banner/fixtures.json
@@ -1807,6 +1809,7 @@ files:
 - node_modules/govuk-frontend/govuk/settings/_compatibility.scss
 - node_modules/govuk-frontend/govuk/settings/_global-styles.scss
 - node_modules/govuk-frontend/govuk/settings/_ie8.scss
+- node_modules/govuk-frontend/govuk/settings/_links.scss
 - node_modules/govuk-frontend/govuk/settings/_measurements.scss
 - node_modules/govuk-frontend/govuk/settings/_media-queries.scss
 - node_modules/govuk-frontend/govuk/settings/_spacing.scss
@@ -1974,7 +1977,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.1.4
+rubygems_version: 3.1.6
 signing_key: 
 specification_version: 4
 summary: A gem to document components in GOV.UK frontend applications