From 49cbbe4d896720dbff72380d0f1d41da9e58578f Mon Sep 17 00:00:00 2001
From: Jeffrey Dowdle <jeffrey.dowdle@dpc.vic.gov.au>
Date: Fri, 14 Jun 2024 10:28:59 +1000
Subject: [PATCH 1/2] feat(@dpc-sdp/ripple-ui-core): changed visited link style
 to a util class to fix issues

---
 .../src/components/result-listing/RplSearchResult.css    | 2 --
 .../src/components/result-listing/RplSearchResult.vue    | 2 +-
 .../src/components/text-link/RplTextLink.css             | 7 -------
 packages/ripple-ui-core/src/styles/global.css            | 1 +
 .../ripple-ui-core/src/styles/utilities/_visited.css     | 9 +++++++++
 5 files changed, 11 insertions(+), 10 deletions(-)
 create mode 100644 packages/ripple-ui-core/src/styles/utilities/_visited.css

diff --git a/packages/ripple-ui-core/src/components/result-listing/RplSearchResult.css b/packages/ripple-ui-core/src/components/result-listing/RplSearchResult.css
index 7ddc8f1d05..64a4b876c3 100644
--- a/packages/ripple-ui-core/src/components/result-listing/RplSearchResult.css
+++ b/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);
 
diff --git a/packages/ripple-ui-core/src/components/result-listing/RplSearchResult.vue b/packages/ripple-ui-core/src/components/result-listing/RplSearchResult.vue
index cdba645d91..ea8ab5b243 100644
--- a/packages/ripple-ui-core/src/components/result-listing/RplSearchResult.vue
+++ b/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-visited" @click="handleClick">
           {{ title }}
         </RplTextLink>
       </h2>
diff --git a/packages/ripple-ui-core/src/components/text-link/RplTextLink.css b/packages/ripple-ui-core/src/components/text-link/RplTextLink.css
index 450dd684a4..77dcdc993c 100644
--- a/packages/ripple-ui-core/src/components/text-link/RplTextLink.css
+++ b/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;
diff --git a/packages/ripple-ui-core/src/styles/global.css b/packages/ripple-ui-core/src/styles/global.css
index b7ac9d69eb..0c9f195b51 100644
--- a/packages/ripple-ui-core/src/styles/global.css
+++ b/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';
diff --git a/packages/ripple-ui-core/src/styles/utilities/_visited.css b/packages/ripple-ui-core/src/styles/utilities/_visited.css
new file mode 100644
index 0000000000..21213b5670
--- /dev/null
+++ b/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-visited {
+  &:visited {
+    color: var(--rpl-clr-link-visited);
+  }
+}

From 0ebdecc6659e7df6cecd99e118fc76b0b1c64529 Mon Sep 17 00:00:00 2001
From: Jeffrey Dowdle <jeffrey.dowdle@dpc.vic.gov.au>
Date: Tue, 18 Jun 2024 08:41:04 +1000
Subject: [PATCH 2/2] refactor(@dpc-sdp/ripple-ui-core): updated visited link
 class name to be clearer

---
 .../src/components/result-listing/RplSearchResult.vue           | 2 +-
 packages/ripple-ui-core/src/styles/utilities/_visited.css       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ripple-ui-core/src/components/result-listing/RplSearchResult.vue b/packages/ripple-ui-core/src/components/result-listing/RplSearchResult.vue
index ea8ab5b243..40f142a280 100644
--- a/packages/ripple-ui-core/src/components/result-listing/RplSearchResult.vue
+++ b/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" class="rpl-u-visited" @click="handleClick">
+        <RplTextLink ref="trigger" :url="url" class="rpl-u-link-visited" @click="handleClick">
           {{ title }}
         </RplTextLink>
       </h2>
diff --git a/packages/ripple-ui-core/src/styles/utilities/_visited.css b/packages/ripple-ui-core/src/styles/utilities/_visited.css
index 21213b5670..3f3a14b6b7 100644
--- a/packages/ripple-ui-core/src/styles/utilities/_visited.css
+++ b/packages/ripple-ui-core/src/styles/utilities/_visited.css
@@ -2,7 +2,7 @@
   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-visited {
+.rpl-u-link-visited {
   &:visited {
     color: var(--rpl-clr-link-visited);
   }