Merge pull request #14521 from TylerAPfledderer/fix/ButtonTwoLines-split-renders

fix(ButtonTwoLines): split rendering of button or link

Author: pettinarip

src/components/BugBountyCards.tsx

@@ -14,7 +14,10 @@ const CardRow = ({ children }: ChildOnlyProp) => (
   <Flex className="mx-4 my-16 flex-wrap justify-between">{children}</Flex>
 )
 
-const SubmitBugBountyButton = ({ children, ...props }: ButtonLinkProps) => (
+const SubmitBugBountyButton = ({
+  children,
+  ...props
+}: Omit<ButtonLinkProps, "href">) => (
   <ButtonLink
     className="m-4"
     href="https://forms.gle/Gnh4gzGh66Yc3V7G8"

src/components/Buttons/ButtonTwoLines/index.tsx

@@ -1,4 +1,3 @@
 export { default as Button, type ButtonProps, checkIsSecondary } from "./Button"
 export { default as ButtonLink, type ButtonLinkProps } from "./ButtonLink"
-export { default as ButtonTwoLines } from "./ButtonTwoLines"
 export { default as IconButton } from "./IconButton"

src/components/Buttons/index.ts

@@ -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__/ButtonLinkTwoLines.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/__stories__/ButtonTwoLines.stories.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
   }