From 5d1c47962c4265faaac593ebe64ee0f6c5de0026 Mon Sep 17 00:00:00 2001
From: Bucky Schwarz <d.w.schwarz@gmail.com>
Date: Wed, 11 Dec 2024 16:23:53 -0500
Subject: [PATCH] Link: export linkStyles to allow styling React Router Links

---
 src/components/Link/Link.tsx  | 32 ++-----------------------------
 src/components/Link/common.ts | 36 +++++++++++++++++++++++++++++++++++
 src/components/index.ts       |  1 +
 src/components/types.ts       |  1 +
 4 files changed, 40 insertions(+), 30 deletions(-)
 create mode 100644 src/components/Link/common.ts

diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx
index eb5c5c34..2dd54f02 100644
--- a/src/components/Link/Link.tsx
+++ b/src/components/Link/Link.tsx
@@ -8,9 +8,7 @@ import {
 } from "react";
 import { Icon, IconName } from "@/components";
 import { styled } from "styled-components";
-
-type TextSize = "xs" | "sm" | "md" | "lg";
-type TextWeight = "normal" | "medium" | "semibold" | "bold";
+import { linkStyles, TextSize, TextWeight } from "./common";
 
 export interface LinkProps<T extends ElementType = "a"> {
   size?: TextSize;
@@ -22,33 +20,7 @@ export interface LinkProps<T extends ElementType = "a"> {
 }
 
 const CuiLink = styled.a<{ $size: TextSize; $weight: TextWeight }>`
-  font: ${({ $size, $weight = "normal", theme }) =>
-    theme.typography.styles.product.text[$weight][$size]};
-  color: ${({ theme }) => theme.click.global.color.text.link.default};
-  margin: 0;
-  text-decoration: none;
-  display: inline-flex;
-  gap: ${({ $size, theme }) =>
-    $size === "xs" || $size === "sm"
-      ? theme.click.link.space.sm.gap
-      : theme.click.link.space.md.gap};
-  margin-right: ${({ $size, theme }) =>
-    $size === "xs" || $size === "sm"
-      ? theme.click.link.space.sm.gap
-      : theme.click.link.space.md.gap};
-  align-items: center;
-
-  &:hover,
-  &:focus {
-    color: ${({ theme }) => theme.click.global.color.text.link.hover};
-    transition: ${({ theme }) => theme.transition.default};
-    text-decoration: underline;
-    cursor: pointer;
-  }
-
-  &:visited {
-    color: ${({ theme }) => theme.click.global.color.text.link.default};
-  }
+  ${linkStyles}
 `;
 
 const IconWrapper = styled.span<{ $size: TextSize }>`
diff --git a/src/components/Link/common.ts b/src/components/Link/common.ts
new file mode 100644
index 00000000..3474b1c8
--- /dev/null
+++ b/src/components/Link/common.ts
@@ -0,0 +1,36 @@
+import { css } from "styled-components";
+
+export type TextSize = "xs" | "sm" | "md" | "lg";
+export type TextWeight = "normal" | "medium" | "semibold" | "bold";
+
+export type StyledLinkProps = { $size: TextSize; $weight: TextWeight };
+
+export const linkStyles = css<StyledLinkProps>`
+  font: ${({ $size, $weight = "normal", theme }) =>
+    theme.typography.styles.product.text[$weight][$size]};
+  color: ${({ theme }) => theme.click.global.color.text.link.default};
+  margin: 0;
+  text-decoration: none;
+  display: inline-flex;
+  gap: ${({ $size, theme }) =>
+    $size === "xs" || $size === "sm"
+      ? theme.click.link.space.sm.gap
+      : theme.click.link.space.md.gap};
+  margin-right: ${({ $size, theme }) =>
+    $size === "xs" || $size === "sm"
+      ? theme.click.link.space.sm.gap
+      : theme.click.link.space.md.gap};
+  align-items: center;
+
+  &:hover,
+  &:focus {
+    color: ${({ theme }) => theme.click.global.color.text.link.hover};
+    transition: ${({ theme }) => theme.transition.default};
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  &:visited {
+    color: ${({ theme }) => theme.click.global.color.text.link.default};
+  }
+`;
diff --git a/src/components/index.ts b/src/components/index.ts
index 1dd2188b..84933dbe 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -34,6 +34,7 @@ export { default as Flags } from "./icons/Flags";
 export { Grid } from "./Grid/Grid";
 export { HoverCard } from "./HoverCard/HoverCard";
 export { Link } from "./Link/Link";
+export { linkStyles } from "./Link/common";
 export { Logo } from "./Logos/Logo";
 export { NumberField } from "./Input/NumberField";
 export { PasswordField } from "./Input/PasswordField";
diff --git a/src/components/types.ts b/src/components/types.ts
index 7b369bac..94f6ada0 100644
--- a/src/components/types.ts
+++ b/src/components/types.ts
@@ -58,6 +58,7 @@ export type {
   GridContextMenuItemProps,
   Rectangle,
 } from "./Grid/types";
+export type { StyledLinkProps } from "./Link/common";
 
 export type States = "default" | "active" | "disabled" | "error" | "hover";
 export type HorizontalDirection = "start" | "end";