Review and fix duplicate link styles

Author: colinrotherham

packages/components/action-link/_index.scss

@@ -75,4 +75,9 @@
       width: 24px;
     }
   }
+
+  &:visited .nhsuk-icon__arrow-right-circle,
+  &:hover .nhsuk-icon__arrow-right-circle {
+    fill: $color_nhsuk-green;
+  }
 }

packages/components/back-link/_index.scss

@@ -30,7 +30,7 @@
   position: relative;
   text-decoration: none;
 
-  @include nhsuk-link-style-default;
+  @include nhsuk-link-style-no-visited-state;
   @include nhsuk-font-size(16);
 
   .nhsuk-icon__chevron-left {
@@ -45,22 +45,7 @@
     }
   }
 
-  &:visited {
-    color: $nhsuk-link-color;
-  }
-
   &:hover {
-    color: $nhsuk-link-hover-color;
     text-decoration: underline;
-
-    .nhsuk-icon__chevron-left {
-      fill: $nhsuk-link-hover-color;
-    }
-  }
-
-  &:focus {
-    .nhsuk-icon__chevron-left {
-      fill: $nhsuk-focus-text-color;
-    }
   }
 }

packages/components/breadcrumb/_index.scss

@@ -54,19 +54,7 @@
 }
 
 .nhsuk-breadcrumb__link {
-  &:visited {
-    color: $nhsuk-link-color;
-
-    &:hover {
-      color: $nhsuk-link-hover-color;
-    }
-  }
-
-  &:focus {
-    &:hover {
-      color: $nhsuk-focus-text-color;
-    }
-  }
+  @include nhsuk-link-style-no-visited-state;
 }
 
 .nhsuk-breadcrumb__back {
@@ -95,11 +83,9 @@
 .nhsuk-breadcrumb__backlink {
   text-decoration: none;
 
-  &:visited {
-    color: $nhsuk-link-color;
+  @include nhsuk-link-style-no-visited-state;
 
-    &:hover {
-      color: $nhsuk-link-hover-color;
-    }
+  &:hover {
+    text-decoration: underline;
   }
 }

packages/core/tools/_links.scss

@@ -13,17 +13,24 @@
 ///   @include nhsuk-link-style-default;
 
 @mixin nhsuk-link-style-default {
-  color: $nhsuk-link-color;
+  & {
+    color: $nhsuk-link-color;
+
+    .nhsuk-icon {
+      fill: $nhsuk-link-color;
+    }
+  }
 
   &:visited {
     color: $nhsuk-link-visited-color;
-  }
 
-  &:hover {
-    color: $nhsuk-link-hover-color;
-    text-decoration: none;
+    .nhsuk-icon {
+      fill: $nhsuk-link-visited-color;
+    }
   }
 
+  @include nhsuk-link-style-hover;
+
   &:focus {
     @include nhsuk-focused-text;
 
@@ -42,6 +49,10 @@
 
   &:active {
     color: $nhsuk-link-active-color;
+
+    .nhsuk-icon {
+      fill: $nhsuk-link-active-color;
+    }
   }
 }
 
@@ -53,26 +64,13 @@
 ///   @include nhsuk-link-style-white;
 
 @mixin nhsuk-link-style-white {
-  color: $color_nhsuk-white;
-
-  &:visited {
-    color: $color_nhsuk-white;
-  }
+  @include nhsuk-link-style-default;
+  @include nhsuk-link-style-hover;
 
+  &,
+  &:visited,
   &:hover {
     color: $color_nhsuk-white;
-    text-decoration: none;
-  }
-
-  &:focus {
-    color: $nhsuk-focus-text-color;
-    outline: $nhsuk-focus-width solid transparent;
-    outline-offset: $nhsuk-focus-width;
-    text-decoration: none;
-  }
-
-  &:active {
-    color: $nhsuk-link-active-color;
   }
 }
 
@@ -83,7 +81,12 @@
 
 @mixin nhsuk-link-style-hover {
   &:hover {
+    color: $nhsuk-link-hover-color;
     text-decoration: none;
+
+    .nhsuk-icon {
+      fill: $nhsuk-link-hover-color;
+    }
   }
 }
 
@@ -106,25 +109,17 @@
 ///   }
 
 @mixin nhsuk-link-style-no-visited-state {
-  &:link {
-    color: $nhsuk-link-color;
-  }
+  @include nhsuk-link-style-default;
 
   &:visited {
     color: $nhsuk-link-color;
-  }
-
-  &:hover {
-    color: $nhsuk-link-hover-color;
-  }
 
-  &:active {
-    color: $nhsuk-link-active-color;
+    .nhsuk-icon {
+      fill: $nhsuk-link-color;
+    }
   }
 
-  &:focus {
-    color: $nhsuk-focus-text-color;
-  }
+  @include nhsuk-link-style-hover;
 }
 
 /// Text link styles
@@ -142,9 +137,13 @@
 ///   }
 
 @mixin nhsuk-link-style-text {
-  &:link,
+  &,
   &:visited {
     color: $nhsuk-text-color;
+
+    .nhsuk-icon {
+      fill: $nhsuk-text-color;
+    }
   }
 
   // Force a colour change on hover to work around a bug in Safari
@@ -154,7 +153,8 @@
   }
 
   &:active,
-  &:focus {
+  &:focus,
+  &:focus:hover {
     color: $nhsuk-text-color;
   }
 }