feat(PrimaryButton): size variants

kripod · Dec 16, 2023 · acf90b6 · acf90b6
1 parent d53c7c8
commit acf90b6
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/src/components/PrimaryButton.stories.tsx b/src/components/PrimaryButton.stories.tsx
@@ -16,6 +16,16 @@ export const Basic = {
   },
 } satisfies Story;
 
+export const Sizes = {
+  render: () => (
+    <div className="flex flex-col items-start gap-y-4">
+      <PrimaryButton size="sm">Small</PrimaryButton>
+      <PrimaryButton size="md">Medium</PrimaryButton>
+      <PrimaryButton size="lg">Large</PrimaryButton>
+    </div>
+  ),
+} satisfies Story;
+
 export const Block = {
   args: {
     ...Basic.args,

diff --git a/src/components/PrimaryButton.tsx b/src/components/PrimaryButton.tsx
@@ -14,12 +14,23 @@ export type PrimaryButtonElementType = ReactElementType<
 >;
 
 export type PrimaryButtonProps<T extends PrimaryButtonElementType = "button"> =
-  Merge<React.ComponentPropsWithoutRef<T>, { as?: T }>;
+  Merge<
+    React.ComponentPropsWithoutRef<T>,
+    {
+      as?: T;
+      size?: "sm" | "md" | "lg";
+    }
+  >;
 
 export const PrimaryButton = forwardRefWithGenerics(function PrimaryButton<
   T extends PrimaryButtonElementType = "button",
 >(
-  { as = "button" as T, className, ...props }: PrimaryButtonProps<T>,
+  {
+    as = "button" as T,
+    size = "md",
+    className,
+    ...props
+  }: PrimaryButtonProps<T>,
   ref: React.ForwardedRef<React.ElementRef<T>>,
 ) {
   const Element: PrimaryButtonElementType = as;
@@ -30,7 +41,12 @@ export const PrimaryButton = forwardRefWithGenerics(function PrimaryButton<
       }
       className={clsx(
         className,
-        "inline-flex h-10 items-center justify-center rounded-lg bg-ui-primary-3 px-4 text-center text-base font-semibold leading-none text-ui-primary-0 transition-colors hover:bg-ui-primary-4",
+        {
+          "h-8 px-3 text-sm leading-none": size === "sm",
+          "h-10 px-4 text-base leading-none": size === "md",
+          "h-14 px-6 text-xl leading-none": size === "lg",
+        },
+        "inline-flex items-center justify-center rounded-lg bg-ui-primary-3 text-center font-semibold text-ui-primary-0 transition-colors hover:bg-ui-primary-4",
       )}
       {...props}
     />