feat: IconButton component & stories (#1493)

* feat: `IconButton` component & stories

* fix: add `aria-label` attribute to example

src/v2/components/ui/IconButton.stories.tsx

@@ -0,0 +1,89 @@
+import { CircleDashed } from "@phosphor-icons/react/dist/ssr"
+import { Meta, StoryObj } from "@storybook/react"
+import { IconButton, IconButtonProps } from "./IconButton"
+
+type IconButtonExampleProps = Omit<IconButtonProps, "aria-label" | "icon">
+
+const IconButtonExample = (props: IconButtonExampleProps) => (
+  <IconButton
+    {...props}
+    aria-label="IconButton example"
+    icon={<CircleDashed weight="bold" />}
+  />
+)
+
+const meta: Meta<typeof IconButtonExample> = {
+  title: "Design system/IconButton",
+  component: IconButtonExample,
+}
+
+export default meta
+
+type Story = StoryObj<typeof IconButton>
+
+export const Solid: Story = {
+  args: {
+    size: "md",
+    variant: "solid",
+    colorScheme: "primary",
+    isLoading: false,
+    disabled: false,
+  },
+  argTypes: {
+    size: {
+      type: "string",
+      control: "select",
+      options: ["sm", "md", "lg"] satisfies IconButtonProps["size"][],
+    },
+    colorScheme: {
+      type: "string",
+      control: "select",
+      options: [
+        "primary",
+        "secondary",
+        "info",
+        "destructive",
+        "success",
+      ] satisfies IconButtonProps["colorScheme"][],
+    },
+    variant: {
+      control: {
+        disable: true,
+      },
+    },
+    disabled: {
+      type: "boolean",
+      control: "boolean",
+    },
+  },
+}
+
+export const Outline: Story = {
+  args: {
+    ...Solid.args,
+    variant: "outline",
+  },
+  argTypes: {
+    ...Solid.argTypes,
+  },
+}
+
+export const Ghost: Story = {
+  args: {
+    ...Solid.args,
+    variant: "ghost",
+  },
+  argTypes: {
+    ...Solid.argTypes,
+  },
+}
+
+export const Subtle: Story = {
+  args: {
+    ...Solid.args,
+    variant: "subtle",
+  },
+  argTypes: {
+    ...Solid.argTypes,
+  },
+}

src/v2/components/ui/IconButton.tsx

@@ -0,0 +1,48 @@
+import { cn } from "@/lib/utils"
+import { VariantProps, cva } from "class-variance-authority"
+import { ReactNode, forwardRef } from "react"
+import { Button, ButtonProps } from "./Button"
+
+const iconButtonVariants = cva("p-0", {
+  variants: {
+    size: {
+      sm: "size-8",
+      md: "size-10",
+      lg: "size-12",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+})
+
+export interface IconButtonProps
+  extends Omit<
+      ButtonProps,
+      | "size"
+      | "loadingText"
+      | "leftIcon"
+      | "rightIcon"
+      | "asChild"
+      | "children"
+      | "aria-label"
+    >,
+    VariantProps<typeof iconButtonVariants> {
+  "aria-label": string
+  // icon: ButtonProps["leftIcon"] // TODO: uncomment this in the Button refactor PR
+  icon: ReactNode
+}
+
+const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ size, icon, className, ...props }, ref) => (
+    <Button
+      ref={ref}
+      {...props}
+      className={cn(iconButtonVariants({ size, className }))}
+    >
+      {icon}
+    </Button>
+  )
+)
+
+export { IconButton }