refactor: create button stories for tailwind

Author: TylerAPfledderer

.storybook/preview.tsx

@@ -42,7 +42,6 @@ const preview: Preview = {
   ],
   parameters: {
     i18n,
-    actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {
         color: /(background|color)$/i,

src/components/ui/__stories__/Button.stories.tsx

@@ -0,0 +1,129 @@
+import { MdChevronRight, MdExpandMore, MdNightlight } from "react-icons/md"
+import type { Meta, StoryObj } from "@storybook/react"
+
+import Translation from "@/components/Translation"
+
+import { Button, type ButtonVariantProps } from "../buttons/Button"
+import { ButtonLink } from "../buttons/Button"
+import { HStack, VStack } from "../flex"
+
+const meta = {
+  title: "Atoms / Form / ShadCn Buttons",
+  component: Button,
+  args: {
+    children: "What is Ethereum?",
+  },
+} satisfies Meta<typeof Button>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const variants: ButtonVariantProps["variant"][] = [
+  "solid",
+  "outline",
+  "ghost",
+  "link",
+]
+
+export const StyleVariants: Story = {
+  render: (args) => (
+    <VStack className="gap-4">
+      {variants.map((variant) => (
+        <HStack key={variant} className="gap-4">
+          <Button variant={variant} {...args} />
+          <Button disabled variant={variant} {...args} />
+        </HStack>
+      ))}
+    </VStack>
+  ),
+}
+
+export const IconVariants: Story = {
+  render: (args) => (
+    <HStack>
+      <VStack>
+        <Button {...args} />
+        <Button size="sm" {...args} />
+      </VStack>
+      <VStack>
+        <Button {...args}>
+          <MdExpandMore />
+          {args.children}
+        </Button>
+        <Button size="sm" {...args}>
+          <MdExpandMore />
+          {args.children}
+        </Button>
+      </VStack>
+      <VStack>
+        <Button {...args}>
+          {args.children}
+          <MdChevronRight />
+        </Button>
+        <Button size="sm" {...args}>
+          {args.children}
+          <MdChevronRight />
+        </Button>
+      </VStack>
+      <VStack>
+        <Button aria-label="next" {...args}>
+          <MdChevronRight />
+        </Button>
+        <Button aria-label="next" size="sm" {...args}>
+          <MdChevronRight />
+        </Button>
+      </VStack>
+    </HStack>
+  ),
+}
+
+export const MultiLineText: Story = {
+  args: {
+    children: "Button label can have two lines",
+  },
+  render: (args) => (
+    <HStack>
+      <VStack className="max-w-[171px]">
+        <Button variant="outline" isSecondary {...args} />
+        <Button variant="outline" size="sm" isSecondary {...args} />
+      </VStack>
+      <VStack className="max-w-[171px]">
+        <Button {...args} />
+        <Button size="sm" {...args} />
+      </VStack>
+      <VStack className="max-w-[209px]">
+        <Button {...args}>
+          {args.children}
+          <MdChevronRight />
+        </Button>
+        <Button size="sm" {...args}>
+          {args.children}
+          <MdChevronRight />
+        </Button>
+      </VStack>
+    </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>
+    </>
+  ),
+}

src/components/ui/buttons/Button.tsx

@@ -0,0 +1,149 @@
+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"
+
+const buttonVariants = cva(
+  "inline-flex gap-2 items-center justify-center rounded border-[1px] 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",
+  {
+    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",
+        outline: "hover:shadow-button-hover active:shadow-none",
+        ghost: "border-transparent",
+        link: "border-transparent font-bold underline py-0 px-1 active:text-primary",
+      },
+      size: {
+        md: "min-h-10.5 px-4 py-2 [&>svg]:text-2xl",
+        sm: "text-xs min-h-[31px] py-1.5 px-2 [&>svg]:text-md",
+      },
+    },
+    defaultVariants: {
+      variant: "solid",
+      size: "md",
+    },
+  }
+)
+
+export const checkIsSecondary = ({
+  variant,
+  isSecondary,
+}: {
+  variant: ButtonVariantProps["variant"]
+  isSecondary: boolean
+}) => {
+  // These two variants do not have secondary styling, so prevent overrides
+  return {
+    "data-secondary":
+      !["solid", "link"].includes(variant || "solid") && isSecondary,
+  }
+}
+
+type ButtonVariantProps = VariantProps<typeof buttonVariants>
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    ButtonVariantProps {
+  asChild?: boolean
+  /**
+   * Set string value that matches the `id` attribute value used
+   * on another element in a given page. Selecting the button will then
+   * trigger a scroll to that element.
+   */
+  toId?: string
+  /**
+   * Custom theme prop. If true, `body` color is used instead of
+   * `primary` color in the theming.
+   *
+   * `NOTE`: Does not apply to the `Solid` or `Link` variants
+   */
+  isSecondary?: boolean
+  customEventOptions?: MatomoEventOptions
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      asChild = false,
+      isSecondary = false,
+      onClick,
+      toId,
+      customEventOptions,
+      ...props
+    },
+    ref
+  ) => {
+    const handleOnClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+      toId && scrollIntoView(toId)
+      customEventOptions && trackCustomEvent(customEventOptions)
+
+      onClick?.(e)
+    }
+
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        onClick={handleOnClick}
+        {...checkIsSecondary({
+          variant,
+          isSecondary,
+        })}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+type ButtonLinkProps = ButtonProps & {
+  linkProps: LinkProps
+  customEventOptions?: MatomoEventOptions
+}
+
+const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
+  ({ linkProps, customEventOptions, children, ...buttonProps }, 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",
+          }}
+          {...linkProps}
+          onClick={handleClick}
+        >
+          {children}
+        </BaseLink>
+      </Button>
+    )
+  }
+)
+ButtonLink.displayName = "ButtonLink"
+
+export {
+  Button,
+  ButtonLink,
+  type ButtonLinkProps,
+  type ButtonVariantProps,
+  buttonVariants,
+}