Merge pull request #13560 from TylerAPfledderer/refactor/shadcn-ButtonLink

refactor: connect ShadCN `Link` to ShadCN `ButtonLink`

Author: pettinarip

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

@@ -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__/Button.stories.tsx

@@ -0,0 +1,17 @@
+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: {
+    href: "#",
+    children: "What is Ethereum?",
+  },
+}

tailwind/ui/__stories__/ButtonLink.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",
@@ -106,29 +106,22 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 )
 Button.displayName = "Button"
 
-type ButtonLinkProps = ButtonProps & {
-  linkProps: LinkProps
+type ButtonLinkProps = Omit<LinkProps, "onClick"> & {
+  buttonProps?: ButtonProps
   customEventOptions?: MatomoEventOptions
 }
 
 const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
-  ({ linkProps, customEventOptions, children, ...buttonProps }, ref) => {
+  ({ buttonProps, customEventOptions, children, ...linkProps }, ref) => {
     const handleClick = () => {
       customEventOptions && trackCustomEvent(customEventOptions)
     }
     return (
       <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}
         >

tailwind/ui/buttons/Button.tsx

@@ -63,9 +63,20 @@ const ButtonTwoLines = ({
   )
 
   if (props.componentType === "link") {
+    const { buttonProps, ...rest } = props
     return (
-      <ButtonLink className={commonClassStyles} size={size} {...props}>
-        <ChildContent {...props} size={size} isIconLeft={isIconLeft} />
+      <ButtonLink
+        className={commonClassStyles}
+        // size={size}
+        buttonProps={buttonProps}
+        {...rest}
+      >
+        <ChildContent
+          {...rest}
+          size={size}
+          isSecondary={buttonProps?.isSecondary}
+          isIconLeft={isIconLeft}
+        />
       </ButtonLink>
     )
   }
@@ -79,7 +90,10 @@ const ButtonTwoLines = ({
 export default ButtonTwoLines
 
 const ChildContent = (
-  props: Omit<ButtonTwoLinesProps, "iconAlignment"> & { isIconLeft: boolean }
+  props: Omit<ButtonTwoLinesProps, "iconAlignment" | "buttonProps"> & {
+    isIconLeft: boolean
+    isSecondary?: boolean
+  }
 ) => {
   const {
     reverseTextOrder = false,