refactor: connect ShadCN Link to ShadCN ButtonLink

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/ui/__stories__/Button.stories.tsx

@@ -1,11 +1,8 @@
-import { MdChevronRight, MdExpandMore, MdNightlight } from "react-icons/md"
+import { MdChevronRight, MdExpandMore } from "react-icons/md"
 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"
 
 const meta = {
   title: "Atoms / Form / ShadCn Buttons",
@@ -105,25 +102,3 @@ export const MultiLineText: Story = {
     </HStack>
   ),
 }
-
-export const OverrideStyles: Story = {
-  render: () => (
-    <>
-      <p>
-        Show custom styling examples here for visual testing of overrides from
-        the theme config
-      </p>
-      <VStack>
-        <Button aria-label="toggle" className="px-1.5">
-          <MdNightlight />
-        </Button>
-        <ButtonLink
-          className="rounded-full px-0 py-0"
-          linkProps={{ href: "#" }}
-        >
-          <Translation id="get-involved" />
-        </ButtonLink>
-      </VStack>
-    </>
-  ),
-}

tailwind/ui/__stories__/ButtonLink.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react/*"
+
+import { ButtonLink as ButtonLinkComponent } from "../buttons/Button"
+
+const meta = {
+  title: "Atoms / Form / ShadCn Buttons",
+  component: ButtonLinkComponent,
+} satisfies Meta<typeof ButtonLinkComponent>
+
+export default meta
+
+export const ButtonLink: StoryObj<typeof meta> = {
+  args: {
+    linkProps: {
+      href: "#",
+    },
+    children: "What is Ethereum?",
+  },
+}

tailwind/ui/buttons/Button.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",
@@ -107,7 +107,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 Button.displayName = "Button"
 
 type ButtonLinkProps = ButtonProps & {
-  linkProps: LinkProps
+  linkProps: Omit<LinkProps, "onClick">
   customEventOptions?: MatomoEventOptions
 }
 
@@ -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}
         >