feat: make use of mui button

zimmerman-team · Sep 13, 2024 · 04f747a · 04f747a
1 parent 6d3b6d1
commit 04f747a
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 34 deletions.
diff --git a/src/components/buttons/button.stories.ts b/src/components/buttons/button.stories.ts
@@ -21,6 +21,7 @@ type Story = StoryObj<typeof meta>;
 export const Filled: Story = {
   args: {
     filled: true,
+    padding: "0px",
     label: "Button",
     radius: "circle",
     backgroundColor: "#000",

diff --git a/src/components/buttons/button.tsx b/src/components/buttons/button.tsx
@@ -1,25 +1,44 @@
 /** @jsxImportSource @emotion/react */
 
 import React from "react";
-import { css } from "@emotion/react";
+import Button from "@mui/material/Button";
 
-type ButtonProps = {
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  gap?: string;
+  label: string;
+  color?: string;
   filled: boolean;
+  padding?: string;
+  fontSize?: string;
+  fontFamily?: string;
   backgroundColor?: string;
   size?: "small" | "medium" | "large";
-  label: string;
-  onClick?: () => void;
+  radius: "rounded" | "sharp" | "circle";
+  textTransform?: "uppercase" | "lowercase" | "capitalize";
   icon?: {
     component: React.ReactNode;
     position: "left" | "right";
   };
-  color?: string;
-  radius: "rounded" | "sharp" | "circle";
-};
+}
 
 export default function MyButton(props: Readonly<ButtonProps>) {
-  const { filled, backgroundColor, size, label, onClick, icon, color, radius } =
-    props;
+  const {
+    gap,
+    size,
+    icon,
+    label,
+    color,
+    filled,
+    radius,
+    padding,
+    onClick,
+    fontSize,
+    fontFamily,
+    textTransform,
+    backgroundColor,
+    ...otherProps // HTML5 button attributes
+  } = props;
+
   const radiusSize = {
     rounded: "30px",
     sharp: "5px",
@@ -35,33 +54,37 @@ export default function MyButton(props: Readonly<ButtonProps>) {
     medium: "40px",
     large: "50px",
   };
+
   return (
-    <button
-      css={css`
-        padding: 7px 24px;
-        background-color: ${filled ? backgroundColor : "transparent"};
-        font-size: 14px;
-        font-family: "Inter", sans-serif;
-        border-radius: ${radiusSize[radius]};
-        border: ${!filled ? `1px solid ${backgroundColor}` : "none"};
-        outline: none;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: ${icon?.position === "left" ? "row" : "row-reverse"};
-        cursor: pointer;
-        color: ${filled ? color : backgroundColor};
-        gap: 5px;
-        width: ${buttonWidth[size!]};
-        height: ${buttonHeight[size!]};
-        white-space: nowrap;
-        &:hover {
-          color: ${color};
-        }
-      `}
+    <Button
+      {...otherProps}
       onClick={onClick}
+      startIcon={icon && icon.position === "left" ? icon.component : undefined}
+      endIcon={icon && icon.position === "right" ? icon.component : undefined}
+      sx={{
+        display: "flex",
+        outline: "none",
+        gap: gap ?? "5px",
+        whiteSpace: "nowrap",
+        alignItems: "center",
+        justifyContent: "center",
+        width: buttonWidth[size!],
+        height: buttonHeight[size!],
+        fontSize: fontSize ?? "14px",
+        padding: padding ?? "7px 24px",
+        borderRadius: radiusSize[radius],
+        color: filled ? color : backgroundColor,
+        textTransform: textTransform ?? "lowercase",
+        fontFamily: fontFamily ?? '"Inter", sans-serif',
+        backgroundColor: filled ? backgroundColor : "transparent",
+        border: !filled ? `1px solid ${backgroundColor}` : "none",
+        flexDirection: icon?.position === "left" ? "row" : "row-reverse",
+        ":hover": {
+          cursor: "pointer",
+        },
+      }}
     >
-      {icon && icon.component} {label}
-    </button>
+      {label}
+    </Button>
   );
 }