feat: create link component

jaaydenh · jaaydenh · commit ade45f78b5dc · 2025-01-14T22:24:36.000Z
diff --git a/site/src/components/Link/Link.stories.tsx b/site/src/components/Link/Link.stories.tsx
@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react";
+// import { userEvent, within } from "@storybook/test";
+import { Link } from "./Link";
+
+const meta: Meta<typeof Link> = {
+	title: "components/Link",
+	component: Link,
+	args: {
+		text: "Learn more",
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof Link>;
+
+export const Default: Story = {};
+
+export const Small: Story = {
+	args: {
+		size: "sm",
+	},
+};
+
+// export const Hover: Story = {
+// 	play: async ({ canvasElement, step }) => {
+// 		const screen = within(canvasElement);
+
+// 		await step("activate hover trigger", async () => {
+// 			await userEvent.hover(screen.getByRole("link", { name: /Learn more/i }));
+// 		});
+// 	},
+// };
+
diff --git a/site/src/components/Link/Link.tsx b/site/src/components/Link/Link.tsx
@@ -0,0 +1,40 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import { SquareArrowOutUpRight } from "lucide-react";
+import { forwardRef } from "react";
+import { cn } from "utils/cn";
+
+export const linkVariants = cva(
+	`relative inline-flex items-center no-underline font-medium text-content-link
+	 after:hover:content-[''] after:hover:absolute after:hover:w-full after:hover:h-[1px] after:hover:bg-current after:hover:bottom-px
+	 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link
+	 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-primary focus-visible:rounded-sm
+	 visited:text-content-link`,
+	{
+		variants: {
+			size: {
+				lg: "text-sm mb-px",
+				sm: "text-xs [&_svg]:size-icon-xs [&_svg]:p-px",
+			},
+		},
+		defaultVariants: {
+			size: "lg",
+		},
+	},
+);
+
+export interface LinkProps
+	extends React.AnchorHTMLAttributes<HTMLAnchorElement>,
+		VariantProps<typeof linkVariants> {
+	text: string;
+}
+
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
+	({ className, text, size, ...props }, ref) => {
+		return (
+			<a className={cn(linkVariants({ size }), className)} ref={ref} {...props}>
+				{text}&nbsp;
+				<SquareArrowOutUpRight size={14} aria-hidden="true" />
+			</a>
+		);
+	},
+);
diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPage.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPage.tsx
@@ -11,8 +11,8 @@ import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
 import { EmptyState } from "components/EmptyState/EmptyState";
 import { displayError } from "components/GlobalSnackbar/utils";
 import { displaySuccess } from "components/GlobalSnackbar/utils";
+import { Link } from "components/Link/Link";
 import { Paywall } from "components/Paywall/Paywall";
-import { SquareArrowOutUpRight } from "lucide-react";
 import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import { useOrganizationSettings } from "modules/management/OrganizationSettingsLayout";
 import { type FC, useEffect } from "react";
@@ -107,16 +107,9 @@ export const IdpSyncPage: FC = () => {
 						<p className="flex flex-row gap-1 text-sm text-content-secondary font-medium m-0">
 							Automatically assign groups or roles to a user based on their IdP
 							claims.
-							<a
-								href={docs("/admin/users/idp-sync")}
-								className="flex flex-row text-content-link items-center gap-1 no-underline hover:underline visited:text-content-link"
-							>
-								View docs
-								<SquareArrowOutUpRight size={14} />
-							</a>
+							<Link text="View docs" href={docs("/admin/users/idp-sync")} />
 						</p>
 					</div>
-					{/* <ExportPolicyButton syncSettings={orgSyncSettingsData} /> */}
 				</header>
 				<ChooseOne>
 					<Cond condition={!isIdpSyncEnabled}>
diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPageView.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPageView.tsx
@@ -697,12 +697,7 @@ const TableLoader = () => {
 
 const LegacyGroupSyncHeader: FC = () => {
 	return (
-		<h4
-			css={{
-				fontSize: 20,
-				fontWeight: 500,
-			}}
-		>
+		<h4 className="text-xl font-medium">
 			<div className="flex items-end gap-2">
 				<span>Legacy group sync settings</span>
 				<HelpTooltip>
