refactor: connect ShadCN Link to ShadCN ButtonLink

Author: TylerAPfledderer

src/components/Footer.tsx

@@ -9,8 +9,8 @@ import Translation from "@/components/Translation"
 import { cn } from "@/lib/utils/cn"
 import { scrollIntoView } from "@/lib/utils/scrollIntoView"
 
-import { BaseLink } from "../../tailwind/Link"
 import { Button } from "../../tailwind/ui/buttons/Button"
+import { BaseLink } from "../../tailwind/ui/Link"
 
 import { List, ListItem } from "./ui/list"
 

src/components/SkipLink.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from "next-i18next"
 
 import { MAIN_CONTENT_ID } from "@/lib/constants"
 
-import { BaseLink } from "../../tailwind/Link"
+import { BaseLink } from "../../tailwind/ui/Link"
 
 export const SkipLink = () => {
   const { t } = useTranslation()

tailwind/Link.tsx renamed to tailwind/ui/Link.tsx

@@ -4,8 +4,7 @@ import type { Meta, StoryObj } from "@storybook/react"
 import Translation from "@/components/Translation"
 
 import { HStack, VStack } from "../../../src/components/ui/flex"
-import { Button, type ButtonVariantProps } from "../buttons/Button"
-import { ButtonLink } from "../buttons/Button"
+import { Button, ButtonLink, type ButtonVariantProps } from "../buttons/Button"
 
 const meta = {
   title: "Atoms / Form / ShadCn Buttons",
@@ -118,7 +117,7 @@ export const OverrideStyles: Story = {
           <MdNightlight />
         </Button>
         <ButtonLink
-          className="rounded-full px-0 py-0"
+          className="min-h-0 rounded-full px-0 py-0"
           linkProps={{ href: "#" }}
         >
           <Translation id="get-involved" />

tailwind/ui/__stories__/Button.stories.tsx

@@ -2,19 +2,19 @@ import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { Slot } from "@radix-ui/react-slot"
 
-import { BaseLink, type LinkProps } from "@/components/Link"
-
 import { cn } from "@/lib/utils/cn"
 import { type MatomoEventOptions, trackCustomEvent } from "@/lib/utils/matomo"
 import { scrollIntoView } from "@/lib/utils/scrollIntoView"
 
+import { BaseLink, type LinkProps } from "../Link"
+
 const buttonVariants = cva(
   "pointer inline-flex gap-2 items-center justify-center rounded border border-solid border-current text-primary transition focus-visible:outline focus-visible:outline-4 focus-visible:outline-primary-hover focus-visible:-outline-offset-1 disabled:text-disabled disabled:pointer-events-none hover:text-primary-hover [&[data-secondary='true']]:text-body [&>svg]:flex-shrink-0",
   {
     variants: {
       variant: {
         solid:
-          "!text-background bg-primary border-transparent disabled:bg-disabled disabled:text-background hover:text-background hover:bg-primary-hover hover:shadow-button-hover active:shadow-none",
+          "text-background bg-primary border-transparent disabled:bg-disabled disabled:text-background hover:text-background hover:bg-primary-hover hover:shadow-button-hover active:shadow-none",
         outline: "hover:shadow-button-hover active:shadow-none",
         ghost: "border-transparent",
         link: "border-transparent font-bold underline py-0 px-1 active:text-primary",
@@ -120,15 +120,8 @@ const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
       <Button asChild {...buttonProps}>
         <BaseLink
           ref={ref}
-          activeStyle={{}}
-          // TODO: Redress this override when migrating the link component
-          color={
-            buttonProps.variant === "solid" ? "background.base" : undefined
-          }
-          textDecor="none"
-          _hover={{
-            textDecor: "none",
-          }}
+          className="no-underline hover:no-underline"
+          activeClassName=""
           {...linkProps}
           onClick={handleClick}
         >