fix(ButtonTwoLines): split renders of button and link

Author: TylerAPfledderer

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

@@ -0,0 +1,35 @@
+import { BiCircle } from "react-icons/bi"
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { ButtonLinkTwoLines as ButtonLinkTwoLinesComponent } from "../buttons/ButtonTwoLines"
+import { Stack } from "../flex"
+
+const meta = {
+  title: "Atoms / Form / Buttons / ButtonTwoLines",
+  component: ButtonLinkTwoLinesComponent,
+} satisfies Meta<typeof ButtonLinkTwoLinesComponent>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const ButtonLinkTwoLines: Story = {
+  args: {
+    icon: BiCircle,
+    mainText: "Main Text",
+    helperText: "Helper Text",
+    className: "w-[300px]",
+    href: "#",
+  },
+  render: (args) => (
+    <Stack className="gap-8">
+      <ButtonLinkTwoLinesComponent {...args} />
+      <ButtonLinkTwoLinesComponent
+        {...args}
+        iconAlignment="end"
+        size="sm"
+        reverseTextOrder
+      />
+    </Stack>
+  ),
+}

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

@@ -1,8 +1,8 @@
 import { BiCircle } from "react-icons/bi"
-import { Stack } from "@chakra-ui/react"
 import { Meta, StoryObj } from "@storybook/react"
 
-import ButtonTwoLinesComponent from "../buttons/ButtonTwoLines"
+import { ButtonTwoLines as ButtonTwoLinesComponent } from "../buttons/ButtonTwoLines"
+import { Stack } from "../flex"
 
 const meta = {
   title: "Atoms / Form / Buttons / ButtonTwoLines",
@@ -15,14 +15,13 @@ type Story = StoryObj<typeof meta>
 
 export const ButtonTwoLines: Story = {
   args: {
-    componentType: "button",
     icon: BiCircle,
     mainText: "Main Text",
     helperText: "Helper Text",
     className: "w-[300px]",
   },
   render: (args) => (
-    <Stack spacing="8">
+    <Stack className="gap-8">
       <ButtonTwoLinesComponent {...args} />
       <ButtonTwoLinesComponent
         {...args}

src/components/ui/buttons/Button.tsx

@@ -126,8 +126,9 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 )
 Button.displayName = "Button"
 
-type ButtonLinkProps = LinkProps &
+type ButtonLinkProps = Omit<LinkProps, "href"> &
   Pick<ButtonProps, "size" | "variant" | "isSecondary"> & {
+    href: string
     buttonProps?: Omit<ButtonProps, "size" | "variant">
     customEventOptions?: MatomoEventOptions
   }

src/components/ui/buttons/ButtonTwoLines.tsx

@@ -36,76 +36,103 @@ type CommonProps = {
 
 type OmittedTypes = "variant" | "size" | "children"
 
-type ButtonTypeProps = CommonProps &
-  Omit<ButtonProps, OmittedTypes> & {
-    componentType: "button"
-  }
+type ButtonTwoLinesProps = Omit<ButtonProps, OmittedTypes> & CommonProps
 
-type ButtonLinkTypeProps = CommonProps &
-  Omit<ButtonLinkProps, OmittedTypes> & {
-    componentType: "link"
-  }
-
-type ButtonTwoLinesProps = ButtonTypeProps | ButtonLinkTypeProps
-
-const ButtonTwoLines = ({
-  iconAlignment = "start",
+/**
+ * Button that renders two styled lines of text
+ */
+export const ButtonTwoLines = ({
   className,
+  iconAlignment = "start",
   size = "md",
   ...props
 }: ButtonTwoLinesProps) => {
   const isIconLeft = ["left", "start"].includes(iconAlignment)
 
-  const commonClassStyles = cn(
-    isIconLeft ? "text-start justify-start" : "text-end justify-end",
-    size === "md" ? "py-4" : "py-2",
-    className
+  const [childProps, ownProps] = createSplitProps<ButtonTwoLinesProps>()(
+    { ...props, isIconLeft },
+    [
+      "reverseTextOrder",
+      "mainText",
+      "helperText",
+      "variant",
+      "icon",
+      "isIconLeft",
+      "isSecondary",
+      "size",
+    ]
   )
 
-  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>
-    )
-  }
   return (
-    <Button className={commonClassStyles} size={size} {...props}>
-      <ChildContent {...props} size={size} isIconLeft={isIconLeft} />
+    <Button
+      className={cn(
+        isIconLeft ? "justify-start text-start" : "justify-end text-end",
+        size === "md" ? "py-4" : "py-2",
+        className
+      )}
+      {...ownProps}
+    >
+      <ChildContent {...childProps} />
     </Button>
   )
 }
 
-export default ButtonTwoLines
-
-const ChildContent = (
-  props: Omit<ButtonTwoLinesProps, "iconAlignment" | "buttonProps"> & {
-    isIconLeft: boolean
-    isSecondary?: boolean
-  }
-) => {
-  const {
-    reverseTextOrder = false,
-    size,
-    mainText,
-    helperText,
-    icon: Icon,
-    isIconLeft,
-    isSecondary,
-    variant,
-  } = props
+type ButtonLinkTwoLinesProps = Omit<ButtonLinkProps, OmittedTypes> & CommonProps
+
+/**
+ * ButtonLink that renders two styled lines of text
+ */
+export const ButtonLinkTwoLines = ({
+  className,
+  iconAlignment = "start",
+  size = "md",
+  ...props
+}: ButtonLinkTwoLinesProps) => {
+  const isIconLeft = ["left", "start"].includes(iconAlignment)
+
+  const [childProps, ownProps] = createSplitProps<ButtonLinkTwoLinesProps>()(
+    { ...props, isIconLeft },
+    [
+      "reverseTextOrder",
+      "mainText",
+      "helperText",
+      "variant",
+      "icon",
+      "isIconLeft",
+      "isSecondary",
+      "size",
+    ]
+  )
+
+  return (
+    <ButtonLink
+      className={cn(
+        isIconLeft ? "justify-start text-start" : "justify-end text-end",
+        size === "md" ? "py-4" : "py-2",
+        className
+      )}
+      {...ownProps}
+    >
+      <ChildContent {...childProps} />
+    </ButtonLink>
+  )
+}
+
+type ChildContentProps = Omit<CommonProps, "iconAlignment"> & {
+  isIconLeft: boolean
+  isSecondary?: boolean
+}
 
+const ChildContent = ({
+  helperText,
+  icon: Icon,
+  mainText,
+  reverseTextOrder = false,
+  size,
+  variant,
+  isIconLeft,
+  isSecondary,
+}: ChildContentProps) => {
   const ButtonIcon = () => (
     <Icon
       // TODO: Text size here should not be marked important after migration
@@ -141,3 +168,36 @@ const ChildContent = (
     </>
   )
 }
+
+/**
+ * Split props ripped from Ark UI and simplified:
+ * https://github.com/chakra-ui/ark/blob/main/packages/react/src/utils/create-split-props.ts
+ */
+type EnsureKeys<ExpectedKeys extends (keyof ChildContentProps)[]> =
+  keyof ChildContentProps extends ExpectedKeys[number]
+    ? unknown
+    : `Missing required keys: ${Exclude<keyof ChildContentProps, ExpectedKeys[number]> & string}`
+
+function createSplitProps<ParentProps>() {
+  return <
+    Keys extends (keyof ChildContentProps)[],
+    Props = Required<ParentProps>,
+  >(
+    props: Props,
+    keys: Keys & EnsureKeys<Keys>
+  ) =>
+    (keys as string[]).reduce<
+      [ChildContentProps, Omit<Props, Extract<(typeof keys)[number], string>>]
+    >(
+      (previousValue, currentValue) => {
+        const [target, source] = previousValue
+        const key = currentValue
+        if (source[key] !== undefined) {
+          target[key] = source[key]
+        }
+        delete source[key]
+        return [target, source]
+      },
+      [{} as ChildContentProps, { ...props }]
+    )
+}