revert(pages/learn): revert import location for links, buttons

Author: TylerAPfledderer

src/pages/learn.tsx

@@ -5,6 +5,7 @@ import type { HTMLAttributes, ReactNode } from "react"
 
 import type { BasePageProps, ChildOnlyProp, Lang, ToCItem } from "@/lib/types"
 
+import ButtonLink from "@/components/Buttons/ButtonLink"
 import OriginalCard, {
   type CardProps as OriginalCardProps,
 } from "@/components/Card"
@@ -14,6 +15,7 @@ import { HubHero } from "@/components/Hero"
 import type { HubHeroProps } from "@/components/Hero/HubHero"
 import { Image, type ImageProps } from "@/components/Image"
 import LeftNavBar from "@/components/LeftNavBar"
+import InlineLink from "@/components/Link"
 import MainArticle from "@/components/MainArticle"
 import { ContentContainer } from "@/components/MdComponents"
 import PageMetadata from "@/components/PageMetadata"
@@ -24,9 +26,6 @@ import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
 import { getLocaleTimestamp } from "@/lib/utils/time"
 import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 
-import InlineLink from "../../tailwind/Link"
-import { ButtonLink } from "../../tailwind/ui/buttons/Button"
-
 import developersEthBlocks from "@/public/images/developers-eth-blocks.png"
 import dogeComputer from "@/public/images/doge-computer.png"
 import enterprise from "@/public/images/enterprise-eth.png"

tailwind/ui/__stories__/Button.stories.tsx

@@ -117,7 +117,10 @@ export const OverrideStyles: Story = {
         <Button aria-label="toggle" className="px-1.5">
           <MdNightlight />
         </Button>
-        <ButtonLink className="rounded-full px-0 py-0" href="#">
+        <ButtonLink
+          className="rounded-full px-0 py-0"
+          linkProps={{ href: "#" }}
+        >
           <Translation id="get-involved" />
         </ButtonLink>
       </VStack>

tailwind/ui/buttons/Button.tsx

@@ -106,13 +106,13 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 )
 Button.displayName = "Button"
 
-type ButtonLinkProps = LinkProps & {
-  buttonProps?: ButtonProps
+type ButtonLinkProps = ButtonProps & {
+  linkProps: LinkProps
   customEventOptions?: MatomoEventOptions
 }
 
 const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
-  ({ buttonProps, customEventOptions, children, ...linkProps }, ref) => {
+  ({ linkProps, customEventOptions, children, ...buttonProps }, ref) => {
     const handleClick = () => {
       customEventOptions && trackCustomEvent(customEventOptions)
     }
@@ -123,7 +123,7 @@ const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
           activeStyle={{}}
           // TODO: Redress this override when migrating the link component
           color={
-            buttonProps?.variant === "solid" ? "background.base" : undefined
+            buttonProps.variant === "solid" ? "background.base" : undefined
           }
           textDecor="none"
           _hover={{

tailwind/ui/buttons/ButtonTwoLines.tsx

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