feat: update button props

src/components/buttons/button.stories.ts

@@ -2,28 +2,22 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { fn, userEvent, within, expect } from "@storybook/test";
 import Button from "./button";
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
   title: "Example/Button",
   component: Button,
   parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: "centered",
   },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ["autodocs"],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
   argTypes: {
     backgroundColor: { control: "color" },
   },
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
   args: { onClick: fn() },
 } satisfies Meta<typeof Button>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Filled: Story = {
   args: {
     filled: true,
@@ -37,7 +31,6 @@ export const Filled: Story = {
     const canvas = within(canvasElement);
     const user = userEvent.setup();
     expect(canvas.getByRole("button")).toBeInTheDocument();
-    // await user.click(canvas.getByRole("button"));
-    // expect(meta.args.onClick).toHaveBeenCalled();
+    await user.click(canvas.getByRole("button"));
   },
 };

src/components/buttons/button.tsx

@@ -25,6 +25,16 @@ export default function Button(props: ButtonProps) {
     sharp: "5px",
     circle: "50%",
   };
+  const buttonWidth = {
+    small: "100px",
+    medium: "200px",
+    large: "300px",
+  };
+  const buttonHeight = {
+    small: "30px",
+    medium: "40px",
+    large: "50px",
+  };
   return (
     <button
       css={css`
@@ -40,8 +50,10 @@ export default function Button(props: ButtonProps) {
         justify-content: center;
         flex-direction: ${icon?.position === "left" ? "row" : "row-reverse"};
         cursor: pointer;
-        color: ${color};
+        color: ${filled ? color : backgroundColor};
         gap: 5px;
+        width: ${buttonWidth[size!]};
+        height: ${buttonHeight[size!]};
         &:hover {
           color: ${color};
         }