Simplify Button logic

Author: agjs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@programmer_network/yail",
-  "version": "1.0.25",
+  "version": "1.0.26",
   "description": "Programmer Network's official UI library for React",
   "author": "Aleksandar Grbic - (https://programmer.network)",
   "publishConfig": {

src/Components/Button/Button.stories.tsx

@@ -5,9 +5,6 @@ import Button from ".";
 const meta = {
   title: "Core/Button",
   component: Button,
-  parameters: {
-    layout: "centered"
-  },
   tags: ["autodocs"],
   argTypes: {}
 } satisfies Meta<typeof Button>;

src/Components/Button/Button.test.tsx

@@ -43,7 +43,6 @@ describe("Button component", () => {
   test("has correct styles when disabled and filled", () => {
     render(<Button disabled>Disabled Button</Button>);
     const button = screen.getByRole("button");
-    expect(button).toHaveClass("text-primary-background-color");
     expect(button).toHaveClass("!text-bg-primary-background-color");
     expect(button).toHaveClass("!bg-primary");
   });

src/Components/Button/__snapshots__/Button.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Button component > renders correctly - snapshot test 1`] = `
 <DocumentFragment>
   <button
-    class="select-none border-2 border-primary px-3 py-2 text-sm font-semibold uppercase tracking-tight shadow-lg text-primary-background-color bg-primary hover:bg-transparent hover:text-primary"
+    class="relative select-none border-2 border-primary px-3 py-2 text-sm font-semibold uppercase tracking-tight shadow-lg bg-primary text-primary-background-color hover:bg-transparent hover:text-primary"
     type="button"
   >
     <div

src/Components/Button/index.tsx

@@ -14,28 +14,40 @@ const Button: React.FC<IButtonProps> = ({
   isLoading = false,
   outlined = false
 }) => {
+  let buttonClasses =
+    "select-none border-2 border-primary px-3 py-2 text-sm font-semibold uppercase tracking-tight shadow-lg";
+
+  if (outlined) {
+    if (disabled) {
+      buttonClasses +=
+        " cursor-not-allowed opacity-70 !bg-transparent !text-primary";
+    } else {
+      buttonClasses +=
+        " text-primary hover:bg-primary hover:text-primary-background-color";
+    }
+  } else {
+    if (disabled) {
+      buttonClasses +=
+        " cursor-not-allowed opacity-70 !text-bg-primary-background-color !bg-primary";
+    } else {
+      buttonClasses +=
+        " bg-primary text-primary-background-color hover:bg-transparent hover:text-primary";
+      if (isLoading) {
+        buttonClasses += " hover:bg-transparent";
+      }
+    }
+  }
+
+  if (className) {
+    buttonClasses += ` ${className}`;
+  }
+
   return (
     <button
       disabled={disabled}
       onClick={onClick}
       type={type}
-      className={classNames(
-        "select-none border-2 border-primary px-3 py-2 text-sm font-semibold uppercase tracking-tight shadow-lg",
-        className,
-        {
-          "cursor-not-allowed opacity-70": disabled,
-          "text-primary": outlined && !disabled,
-          "text-primary-background-color": !outlined || disabled,
-          "!text-bg-primary-background-color !bg-primary":
-            !outlined && disabled,
-          "hover:bg-transparent": !outlined && isLoading,
-          "bg-primary hover:bg-transparent hover:text-primary":
-            !outlined && !disabled,
-          "hover:bg-primary hover:text-primary-background-color":
-            outlined && !disabled,
-          "!bg-transparent !text-primary": outlined && disabled
-        }
-      )}
+      className={classNames("relative", buttonClasses)}
     >
       <div className='relative flex items-center justify-center'>
         <span