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,