feat(Link): add inverse variant (with variant prop) (#1972)

- update snapshots
chanzuckerberg · Jun 3, 2024 · bdbf9df · bdbf9df
1 parent dc3ae44
commit bdbf9df
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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,