diff --git a/src/govuk/helpers/_links.scss b/src/govuk/helpers/_links.scss index 9796a89bcb..22496f8644 100644 --- a/src/govuk/helpers/_links.scss +++ b/src/govuk/helpers/_links.scss @@ -34,6 +34,12 @@ @if ($govuk-link-underline-offset) { text-underline-offset: $govuk-link-underline-offset; } + + @if ($govuk-link-hover-underline-thickness) { + &:hover { + text-decoration-thickness: $govuk-link-hover-underline-thickness; + } + } } /// Default link style mixin diff --git a/src/govuk/helpers/links.test.js b/src/govuk/helpers/links.test.js index d9df72deb1..c1bba795d9 100644 --- a/src/govuk/helpers/links.test.js +++ b/src/govuk/helpers/links.test.js @@ -3,7 +3,7 @@ const { renderSass } = require('../../../lib/jest-helpers') const sassConfig = { - outputStyle: 'nested' + outputStyle: 'compact' } describe('@mixin govuk-link-decoration', () => { @@ -66,4 +66,34 @@ describe('@mixin govuk-link-decoration', () => { expect(results.css.toString()).not.toContain('text-underline-offset') }) }) + + it('sets text-decoration-thickness on hover', async () => { + const sass = ` + $govuk-link-hover-underline-thickness: 10px; + @import "base"; + + .foo { + @include govuk-link-decoration; + }` + + const results = await renderSass({ data: sass, ...sassConfig }) + + expect(results.css.toString()).toContain('.foo:hover { text-decoration-thickness: 10px; }') + }) + + describe('when $govuk-link-hover-underline-thickness is falsey', () => { + it('does not set a hover state', async () => { + const sass = ` + $govuk-link-hover-underline-thickness: false; + @import "base"; + + .foo { + @include govuk-link-decoration; + }` + + const results = await renderSass({ data: sass, ...sassConfig }) + + expect(results.css.toString()).not.toContain(':hover') + }) + }) }) diff --git a/src/govuk/settings/_measurements.scss b/src/govuk/settings/_measurements.scss index b38401cee5..d15d2022b1 100644 --- a/src/govuk/settings/_measurements.scss +++ b/src/govuk/settings/_measurements.scss @@ -112,6 +112,14 @@ $govuk-hover-width: 10px !default; /// @access public $govuk-link-underline-thickness: 1px !default; +/// Link hover state underline thickness +/// +/// Set to false to disable setting a thickness +/// +/// @type Number +/// @access public +$govuk-link-hover-underline-thickness: unquote("max(3px, .12em)") !default; + /// Link underline offset. /// /// Set to false to disable setting an offset