Merge pull request #2573 from daniel-ac-martin/patch-1

Better handle cases where govuk-text-colour is set to a non-colour value

CHANGELOG.md

@@ -4,7 +4,8 @@
 
 ### Fixes
 
-[#2549: Fix header with product name focus and hover state length](https://github.com/alphagov/govuk-frontend/pull/2549)
+- [#2549: Fix header with product name focus and hover state length](https://github.com/alphagov/govuk-frontend/pull/2549)
+- [#2573: Better handle cases where govuk-text-colour is set to a non-colour value](https://github.com/alphagov/govuk-frontend/pull/2573)
 
 ## 4.0.1 (Fix release)
 

src/govuk/helpers/_links.scss

@@ -273,7 +273,9 @@
   // 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);
+    @if (type-of($govuk-text-colour) == color) {
+      color: rgba($govuk-text-colour, .99);
+    }
   }
 
   &:active,

src/govuk/helpers/links.test.js

@@ -156,3 +156,39 @@ describe('@mixin govuk-link-hover-decoration', () => {
     })
   })
 })
+
+describe('@mixin govuk-link-style-text', () => {
+  describe('when $govuk-text-colour is a colour', () => {
+    it('applies the rgba function', async () => {
+      const sass = `
+        $govuk-text-colour: black;
+        @import "base";
+
+        a {
+            @include govuk-link-style-text;
+        }`
+
+      const results = await renderSass({ data: sass, ...sassConfig })
+
+      expect(results.css.toString()).toContain(':hover')
+      expect(results.css.toString()).toContain('color:')
+      expect(results.css.toString()).toContain('rgba(')
+    })
+  })
+
+  describe('when $govuk-text-colour is inherit', () => {
+    it('does NOT apply the rgba function', async () => {
+      const sass = `
+        $govuk-text-colour: inherit;
+        @import "base";
+
+        a {
+            @include govuk-link-style-text;
+        }`
+
+      const results = await renderSass({ data: sass, ...sassConfig })
+
+      expect(results.css.toString()).not.toContain('rgba(')
+    })
+  })
+})