refactor: connect ShadCN Link to ShadCN ButtonLink

[TylerAPfledderer]

Syncs the updated Link and ButtonLink components with ShadCN.

• With Chakra now removed, the text-background utility in the "solid" style variant no longer needs the important flag
• Override of the text-decoration is still needed due to explicit declaration of the property in the global styles.
• Left activeClassName="" as this override might still be needed for active page links.

[netlify]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	18fe6a9
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/66adf7817e4d24000851c765
😎 Deploy Preview	https://deploy-preview-13560--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 45 (🔴 down 6 from production) Accessibility: 93 (no change from production) Best Practices: 89 (🔴 down 10 from production) SEO: 92 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[TylerAPfledderer]

@pettinarip replaced the Override story with one for ButtonLink (separate story file)

[pettinarip]

LGTM! good job @TylerAPfledderer 💪🏼

[pettinarip]

Did comment this out to skip a type error that was breaking the build. I see this as a minor issue for now since this component is not currently used. We can tackle the issue in a separate PR.

I also think that <ButtonTwoLines componentType="link" /> is not working. Something we can look into later.

[TylerAPfledderer]

With componentType, the type guarding is not working as expected. Need to re-evaluate the approach.

With size, it is housed in buttonProps when passing props to ButtonLink. Not going to try and make the approach any more strict, but can simply run a merge props of buttonProps with size.

if (props.componentType === "link") {
  const { buttonProps, ...rest } = props

  const mergedButtonProps = merge(buttonProps, { size })
  return (
    <ButtonLink
      className={commonClassStyles}
      buttonProps={mergedButtonProps}
      {...rest}
    >
      <ChildContent
        {...rest}
        size={size}
        isSecondary={buttonProps?.isSecondary}
        isIconLeft={isIconLeft}
      />
    </ButtonLink>
  )
}

What do you think?

[pettinarip]

I think we should follow the same approach we took with the original ButtonLink. In this case, I think we should return just a button to simplify everything. Then, in case you need a buttonlink, the user/dev could do the same we are doing with the buttonlink.

// always a button
<ButtonTwoLines size=".." variant="..." />

// in case you want a buttonlink => compose them with asChild (same as with ButtonLink)
<ButtonTwoLines asChild>
  <BaseLink> ...
</Button>

[TylerAPfledderer]

@pettinarip Good with me! Getting too DRY here, and it's showing its cracks

[pettinarip]

👍🏼