fix(ClickableTile): ensure links are correct color when link has been visited (#8159)

* fix(ClickableTile): don't use Link component

* style(Tile): update visited styles for clickable links

* docs(Tile): add a link to normal tile for verification

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: tw15egan

packages/components/src/components/tile/_tile.scss

@@ -76,7 +76,9 @@
   }
 
   .#{$prefix}--tile--clickable:hover,
-  .#{$prefix}--tile--clickable:active {
+  .#{$prefix}--tile--clickable:active,
+  .#{$prefix}--tile--clickable:visited,
+  .#{$prefix}--tile--clickable:visited:hover {
     color: $text-01;
     text-decoration: none;
   }

packages/react/src/components/Tile/Tile-story.js

@@ -25,6 +25,7 @@ import {
 } from '../Tile';
 import TileGroup from '../TileGroup';
 import RadioTile from '../RadioTile';
+import Link from '../Link';
 import mdx from './Tile.mdx';
 
 const radioValues = {
@@ -40,7 +41,10 @@ const props = {
   }),
   clickable: () => ({
     disabled: boolean('disabled (disabled)', false),
-    href: text('Href for clickable UI (href)', 'javascript:void(0)'),
+    href: text(
+      'Href for clickable UI (href)',
+      'https://www.carbondesignsystem.com/'
+    ),
     light: boolean('Light variant (light)', false),
   }),
   selectable: () => ({
@@ -106,7 +110,14 @@ export default {
 
 export const Default = () => {
   const regularProps = props.regular();
-  return <Tile {...regularProps}>Default tile</Tile>;
+  return (
+    <Tile {...regularProps}>
+      Default tile
+      <br />
+      <br />
+      <Link href="https://www.carbondesignsystem.com">Link</Link>
+    </Tile>
+  );
 };
 
 Default.parameters = {