Merge pull request #11047 from TylerAPfledderer/feat/ButtonTwoLines

feat(components): add `ButtonTwoLines` component

Author: pettinarip

src/components/ButtonTwoLines/ButtonTwoLines.stories.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { BiCircle } from "react-icons/bi"
+import { Stack } from "@chakra-ui/react"
+import ButtonTwoLinesComponent from "."
+
+type ComponentType = typeof ButtonTwoLinesComponent
+
+const meta = {
+  title: "Atoms / Form / Buttons / ButtonTwoLines",
+  component: ButtonTwoLinesComponent,
+} satisfies Meta<ComponentType>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const ButtonTwoLines: Story = {
+  args: {
+    icon: BiCircle,
+    mainText: "Main Text",
+    helperText: "Helper Text",
+    w: "300px",
+  },
+  render: (args) => (
+    <Stack spacing="8">
+      <ButtonTwoLinesComponent {...args} />
+      <ButtonTwoLinesComponent
+        {...args}
+        iconAlignment="right"
+        size="sm"
+        reverseTextOrder
+      />
+    </Stack>
+  ),
+}

src/components/ButtonTwoLines/index.tsx

@@ -0,0 +1,104 @@
+import * as React from "react"
+import { Icon, Stack, Text } from "@chakra-ui/react"
+import type { IconType } from "react-icons/lib"
+import Button, { type IProps as ButtonProps } from "../Button"
+import ButtonLink, { type IProps as ButtonLinkProps } from "../ButtonLink"
+
+type CommonProps = {
+  icon: IconType | typeof Icon
+  iconAlignment?: "left" | "right"
+  /**
+   * Reduced choices of the button variant.
+   *
+   * This component only accepts the `solid` or `outline` variant
+   */
+  variant?: "solid" | "outline"
+  /**
+   * Reduced choices of the button size
+   *
+   * This component only accepts the `md` or `sm` sizes
+   */
+  size?: "md" | "sm"
+  mainText: string
+  helperText: string
+  /**
+   * Should the main text be below the helper text instead of ab?
+   */
+  reverseTextOrder?: boolean
+}
+
+type OmittedTypes = "variant" | "size"
+
+type ButtonTypeProps = CommonProps &
+  Omit<ButtonProps, OmittedTypes> & {
+    href?: never
+  }
+
+type ButtonLinkTypeProps = CommonProps &
+  Omit<ButtonLinkProps, OmittedTypes> & {
+    toId?: never
+  }
+
+type ButtonTwoLinesProps = ButtonTypeProps | ButtonLinkTypeProps
+
+const hasHref = (props: ButtonTwoLinesProps): props is ButtonLinkTypeProps => {
+  return "href" in props
+}
+
+const ButtonTwoLines = (props: ButtonTwoLinesProps) => {
+  const {
+    icon: Icon,
+    iconAlignment = "left",
+    mainText,
+    helperText,
+    reverseTextOrder = false,
+    size = "md",
+    ...rest
+  } = props
+
+  const isIconLeft = iconAlignment === "left"
+
+  const vertPadding: ButtonTwoLinesProps["py"] = size === "md" ? "4" : "2"
+
+  const buttonStyles: ButtonProps = {
+    [isIconLeft ? "leftIcon" : "rightIcon"]: <Icon />,
+    textAlign: isIconLeft ? "start" : "end",
+    justifyContent: isIconLeft ? "flex-start" : "flex-end",
+  }
+
+  const Component = hasHref(props) ? ButtonLink : Button
+
+  return (
+    <Component
+      {...buttonStyles}
+      size={size}
+      py={vertPadding}
+      {...rest}
+      sx={{
+        ".chakra-button__icon svg": {
+          // Force icon to be the same size for both button sizes
+          fontSize: "2xl",
+        },
+      }}
+    >
+      <Stack
+        spacing={0}
+        flexDir={reverseTextOrder ? "column-reverse" : "column"}
+      >
+        <Text
+          as="span"
+          fontSize="md"
+          fontWeight={size === "md" ? "bold" : "normal"}
+        >
+          {mainText}
+        </Text>
+        {/* TODO: use `size='xs'` instead when the Text theme is added  */}
+        <Text as="span" fontSize="xs">
+          {helperText}
+        </Text>
+      </Stack>
+    </Component>
+  )
+}
+
+export default ButtonTwoLines