Merge pull request #1221 from dpc-sdp/bugfix/R20-1987-visited-links

[R20-1987] Changed visited link style to a util class

packages/ripple-ui-core/src/components/result-listing/RplSearchResult.css

@@ -1,8 +1,6 @@
 @import '@dpc-sdp/ripple-ui-core/style/breakpoints';
 
 .rpl-search-result {
-  --local-clr-link-visited: var(--rpl-clr-link-visited);
-
   padding-top: var(--rpl-sp-5);
   padding-bottom: var(--rpl-sp-5);
 

packages/ripple-ui-core/src/components/result-listing/RplSearchResult.vue

@@ -51,7 +51,7 @@ const handleClick = () => {
     </div>
     <div ref="container" class="rpl-search-result__heading">
       <h2 class="rpl-search-result__title rpl-type-h3">
-        <RplTextLink ref="trigger" :url="url" @click="handleClick">
+        <RplTextLink ref="trigger" :url="url" class="rpl-u-link-visited" @click="handleClick">
           {{ title }}
         </RplTextLink>
       </h2>

packages/ripple-ui-core/src/components/text-link/RplTextLink.css

@@ -13,13 +13,6 @@
     }
   }
 
-  &:visited {
-    color: var(
-      --local-clr-link-visited,
-      var(--local-clr-link, var(--rpl-clr-link))
-    );
-  }
-
   &:active {
     color: var(--local-clr-link-active, var(--rpl-clr-dark));
     text-decoration: none;

packages/ripple-ui-core/src/styles/global.css

@@ -11,6 +11,7 @@
 @import 'utilities/_accessibility.css';
 @import 'utilities/_container.css';
 @import 'utilities/_focus.css';
+@import 'utilities/_visited.css';
 @import 'generated/_grid.css';
 @import 'utilities/_lists.css';
 @import 'generated/_margin.css';

packages/ripple-ui-core/src/styles/utilities/_visited.css

@@ -0,0 +1,9 @@
+/*
+  For most links, we don't want a visited state to be applied.
+  This utility class can be used to apply a visited state to links that need it.
+*/
+.rpl-u-link-visited {
+  &:visited {
+    color: var(--rpl-clr-link-visited);
+  }
+}