From bdbf9dffd0abcea31c4c003d2be0187db84fdbca Mon Sep 17 00:00:00 2001
From: Andrew Holloway <booc0mtaco@users.noreply.github.com>
Date: Mon, 3 Jun 2024 14:33:09 -0500
Subject: [PATCH] feat(Link): add inverse variant (with variant prop) (#1972)

- update snapshots
---
 src/components/Link/Link-v2.module.css          | 11 +++++++++++
 src/components/Link/Link-v2.stories.tsx         | 17 +++++++++++++++++
 src/components/Link/Link-v2.tsx                 |  9 ++++++++-
 .../Link/__snapshots__/Link-v2.test.tsx.snap    | 13 +++++++++++++
 4 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/src/components/Link/Link-v2.module.css b/src/components/Link/Link-v2.module.css
index 338c2fb39..cf66ad809 100644
--- a/src/components/Link/Link-v2.module.css
+++ b/src/components/Link/Link-v2.module.css
@@ -73,6 +73,17 @@
   text-decoration: none;
 }
 
+/**
+ * Variants
+ */
+.link.link--variant-inverse {
+  color: var(--eds-theme-color-text-utility-inverse);
+
+  &:active,
+  &:visited {
+    color: var(--eds-theme-color-text-utility-inverse);
+  }
+}
 
 /**
  * States
diff --git a/src/components/Link/Link-v2.stories.tsx b/src/components/Link/Link-v2.stories.tsx
index 7d8e2e9ea..e84af188a 100644
--- a/src/components/Link/Link-v2.stories.tsx
+++ b/src/components/Link/Link-v2.stories.tsx
@@ -68,6 +68,23 @@ export const Emphasis: StoryObj<Args> = {
   },
 };
 
+/**
+ * We also include an inverse variant, for use on dark backgrounds.
+ */
+export const InverseRanks: StoryObj<Args> = {
+  args: {
+    variant: 'inverse',
+  },
+  // TODO: find a cleaner way to decorate with unavailable tokens using parameters:backgounds:
+  decorators: [
+    (Story) => (
+      <div className="w-96 bg-[var(--eds-color-blue-850)] p-1 text-center">
+        {Story()}
+      </div>
+    ),
+  ],
+};
+
 export const LinkInParagraphContext: StoryObj<ExtendArgs> = {
   render: (
     args: React.JSX.IntrinsicAttributes &
diff --git a/src/components/Link/Link-v2.tsx b/src/components/Link/Link-v2.tsx
index 480123f9d..9f832daa6 100644
--- a/src/components/Link/Link-v2.tsx
+++ b/src/components/Link/Link-v2.tsx
@@ -38,7 +38,12 @@ export type LinkV2Props<ExtendedElement = unknown> =
      * Link size inherits from the surrounding text.
      */
     size?: Extract<Size, 'xs' | 'sm' | 'md' | 'lg' | 'xl'>;
-    // };
+    /**
+     * The variant treatment for links (use "inverse" on dark backgrounds).
+     *
+     * **Default is `"default"`**.
+     */
+    variant?: 'default' | 'inverse';
   } & ExtendedElement;
 
 /**
@@ -57,6 +62,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkV2Props>(
       emphasis = 'default',
       icon,
       size = 'md',
+      variant = 'default',
       ...other
     },
     ref,
@@ -68,6 +74,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkV2Props>(
       emphasis && styles[`link--emphasis-${emphasis}`],
       icon && styles['link--has-right-icon'],
       size && styles[`link--size-${size}`],
+      variant === 'inverse' && styles[`link--variant-${variant}`],
     );
 
     const iconSize = size && (['xl', 'lg'].includes(size) ? '1.5rem' : '1rem');
diff --git a/src/components/Link/__snapshots__/Link-v2.test.tsx.snap b/src/components/Link/__snapshots__/Link-v2.test.tsx.snap
index 32a1e4bf5..1a25930f5 100644
--- a/src/components/Link/__snapshots__/Link-v2.test.tsx.snap
+++ b/src/components/Link/__snapshots__/Link-v2.test.tsx.snap
@@ -32,6 +32,19 @@ exports[`<Link /> Emphasis story renders snapshot 1`] = `
 </div>
 `;
 
+exports[`<Link /> InverseRanks story renders snapshot 1`] = `
+<div
+  class="w-96 bg-[var(--eds-color-blue-850)] p-1 text-center"
+>
+  <a
+    class="link link--emphasis-default link--size-lg link--variant-inverse"
+    href="https://go.czi.team/eds"
+  >
+    Link
+  </a>
+</div>
+`;
+
 exports[`<Link /> LinkInParagraphContext story renders snapshot 1`] = `
 <div>
   Lorem ipsum dolor sit amet,