From cd0f9df157baa4a4e91257d1b505a71833a38204 Mon Sep 17 00:00:00 2001
From: Greg Tyler <greg.tyler@digital.justice.gov.uk>
Date: Thu, 25 Jan 2024 13:37:58 +0000
Subject: [PATCH] feat(navigation): enhance hover styles of navigation links

Applies to Primary navigation, Sub navigation and Side navigation.

Use the standard GDS link hover colour to ensure links colour contrast is sufficient for
readability.

Ensure borders follow suit, and ensure they're always on the same side of the element.

Fixes #447
---
 .../primary-navigation/_primary-navigation.scss | 10 +++++++++-
 .../side-navigation/_side-navigation.scss       | 12 ++++++------
 .../sub-navigation/_sub-navigation.scss         | 17 +++++++++++++----
 3 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/moj/components/primary-navigation/_primary-navigation.scss b/src/moj/components/primary-navigation/_primary-navigation.scss
index 66ce19682..b9bb2b65d 100644
--- a/src/moj/components/primary-navigation/_primary-navigation.scss
+++ b/src/moj/components/primary-navigation/_primary-navigation.scss
@@ -62,7 +62,7 @@
   }
 
   &:hover {
-    color: govuk-tint($govuk-link-colour, 25);
+    color: $govuk-link-hover-colour;
   }
 
   &:focus {
@@ -95,6 +95,14 @@
       width: 100%;
     }
 
+    &:hover {
+      color: $govuk-link-hover-colour;
+
+      &:before {
+        background-color: $govuk-link-hover-colour;
+      }
+    }
+
     &:focus {
       color: govuk-colour("black"); // Focus colour on yellow should really be black.
       position: relative; // Ensure focus sits above everything else.
diff --git a/src/moj/components/side-navigation/_side-navigation.scss b/src/moj/components/side-navigation/_side-navigation.scss
index 143f953e6..fdf4effe5 100644
--- a/src/moj/components/side-navigation/_side-navigation.scss
+++ b/src/moj/components/side-navigation/_side-navigation.scss
@@ -77,15 +77,13 @@
   }
 
   a:hover {
-    border-color: govuk-tint($govuk-link-colour, 25);
+    color: $govuk-link-hover-colour;
   }
 
   a:focus {
     color: $govuk-focus-text-colour;
     background-color: $govuk-focus-colour;
-    box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour;
     border-color: $govuk-focus-text-colour;
-    border-left-color: transparent;
     position: relative;
   }
 
@@ -100,12 +98,15 @@
     font-weight: bold;
   }
 
+  a:hover {
+    color: $govuk-link-hover-colour;
+    border-color: $govuk-link-hover-colour;
+  }
+
   a:focus {
     color: $govuk-focus-text-colour;
     background-color: $govuk-focus-colour;
-    box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour;
     border-color: $govuk-focus-text-colour;
-    border-left-color: transparent;
   }
 
   @include govuk-media-query($from: tablet) {
@@ -117,7 +118,6 @@
     a:focus {
       color: $govuk-focus-text-colour;
       background-color: $govuk-focus-colour;
-      border-color: transparent;
     }
   }
 
diff --git a/src/moj/components/sub-navigation/_sub-navigation.scss b/src/moj/components/sub-navigation/_sub-navigation.scss
index efc665251..94f620ef3 100755
--- a/src/moj/components/sub-navigation/_sub-navigation.scss
+++ b/src/moj/components/sub-navigation/_sub-navigation.scss
@@ -60,7 +60,7 @@
   }
 
   &:hover {
-    color: govuk-tint($govuk-link-colour, 25);
+    color: $govuk-link-hover-colour;
   }
 
   &:focus {
@@ -73,9 +73,14 @@
     background-color: govuk-colour("black");
     content: "";
     display: block;
-    width: 100%;
-    position: absolute; bottom: 0; left: 0; right: 0;
-    height: 5px;
+    height: 100%;
+    position: absolute; bottom: 0; left: 0;
+    width: 5px;
+
+    @include govuk-media-query($from: tablet) {
+      height: 5px;
+      width: 100%;
+    }
   }
 
 }
@@ -101,6 +106,10 @@
 
   }
 
+  &:hover {
+    color: $govuk-link-hover-colour;
+  }
+
   &:focus:before {
     background-color: govuk-colour("black");
   }