govuk_publishing_components 24.9.4 → 24.11.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.9.4
+  version: 24.11.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-04-22 00:00:00.000000000 Z
+date: 2021-05-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -164,6 +164,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '2'
+- !ruby/object:Gem::Dependency
+  name: i18n-coverage
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: jasmine
   requirement: !ruby/object:Gem::Requirement
@@ -416,7 +430,6 @@ files:
 - app/assets/javascripts/component_guide/filter-components.js
 - app/assets/javascripts/component_guide/vendor/bind-polyfill.js
 - app/assets/javascripts/component_guide/vendor/matches-polyfill.min.js
-- app/assets/javascripts/component_guide/visual-regression.js
 - app/assets/javascripts/govuk_publishing_components/all_components.js
 - app/assets/javascripts/govuk_publishing_components/analytics.js
 - app/assets/javascripts/govuk_publishing_components/analytics/analytics.js
@@ -469,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
@@ -1574,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
@@ -1794,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
@@ -1961,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

data/app/assets/javascripts/component_guide/visual-regression.js

@@ -1,71 +0,0 @@
-(function (window, document) {
-  window.GOVUK = window.GOVUK || {}
-
-  window.GOVUK.VisualDiffTool = function (currentWindowLocation) {
-    var visualDiffSelector = 'visual-diff'
-    var existingIframe = document.getElementById(visualDiffSelector)
-    var windowLocation = currentWindowLocation || window.location
-
-    if (existingIframe) {
-      existingIframe.parentNode.removeChild(existingIframe)
-      document.body.style.filter = null
-    } else {
-      var iframe = document.createElement('iframe')
-      iframe.id = visualDiffSelector
-      iframe.setAttribute('scrolling', 'no')
-      _setElementStyles(iframe, {
-        width: '100%',
-        height: document.body.scrollHeight + 'px',
-        position: 'absolute',
-        top: '0',
-        'pointer-events': 'none',
-        border: '0'
-      })
-      iframe.style.setProperty('z-index', '999', 'important')
-
-      // For browsers that support it, do mix-blend-mode diff
-      if ('mix-blend-mode' in document.body.style) {
-        _setElementStyles(iframe, { 'mix-blend-mode': 'difference' })
-        document.body.style.filter = 'invert(100%)'
-      } else {
-        // Else do a simple overlay of the live page for comparison (IE and Edge)
-        _setElementStyles(iframe, { opacity: '0.7' })
-      }
-
-      iframe.src = _processComparisonURL(windowLocation)
-
-      if (iframe.src) {
-        document.body.appendChild(iframe)
-        console.log('comparing to ' + iframe.src)
-      }
-    }
-  }
-
-  var _processComparisonURL = function (url) {
-    var appName
-    var href = url.href
-    var host = url.host
-
-    if (href.includes('dev.gov.uk/component-guide')) {
-      appName = host.split('.')[0]
-      return _forceHTTPS(href.replace(host, appName + '.herokuapp.com'))
-    } else if (href.includes('dev.gov.uk')) {
-      return _forceHTTPS(href.replace(host, 'www.gov.uk'))
-    } else if (href.includes('-pr-')) {
-      appName = host.split('-pr')[0]
-      return _forceHTTPS(href.replace(host, appName + '.herokuapp.com'))
-    } else {
-      throw new Error('Visual Diff Tool: You need to run this tool against a page running on your local dev environment')
-    }
-  }
-
-  var _forceHTTPS = function (href) {
-    return href.replace('http://', 'https://')
-  }
-
-  var _setElementStyles = function (element, styles) {
-    for (var style in styles) {
-      element.style[style] = styles[style]
-    }
-  }
-})(window, document)