refactor: change prop name from hashoverstyle to hidehoverstyles

Author: yaswanth-deriv

Diff for: src/components/Button/Button.scss

@@ -24,6 +24,16 @@ $black-outline-hover: rgba(0, 0, 0, 0.08);
         cursor: not-allowed;
     }
 
+    &.deriv-button__hover--disabled {
+        pointer-events: none;
+        cursor: default;
+
+        &:hover {
+            background-color: inherit;
+            color: inherit;
+        }
+    }
+
     &__size {
         &--sm {
             height: 2.4rem;
@@ -197,13 +207,4 @@ $black-outline-hover: rgba(0, 0, 0, 0.08);
         }
     }
 
-    &.deriv-button__disable-hover {
-        pointer-events: none;
-        cursor: default;
-
-        &:hover {
-            background-color: inherit;
-            color: inherit;
-        }
-    }
 }

Diff for: src/components/Button/__test__/Button.spec.tsx

@@ -90,20 +90,20 @@ describe("Button component", () => {
     expect(screen.queryByText("Test Button")).toBeNull();
   });
 
-  it("hover styles are applied when hasHoverStyle is true", () => {
+  it("hover styles are applied when hideHoverStyles is true", () => {
     render(
-      <Button hasHoverStyle={true}>Hover Button</Button>
+      <Button hideHoverStyles={true}>Hover Button</Button>
     );
     const button = screen.getByRole("button");
-    expect(button).not.toHaveClass("deriv-button__disable-hover");
+    expect(button).not.toHaveClass("deriv-button__hover--disabled");
   });
 
-  it("hover styles are not applied when hasHoverStyle is false", () => {
+  it("hover styles are not applied when hideHoverStyles is false", () => {
     render(
-      <Button hasHoverStyle={false}>Hover Button</Button>
+      <Button>Hover Button</Button>
     );
     const button = screen.getByRole("button");
-    expect(button).toHaveClass("deriv-button__disable-hover");
+    expect(button).toHaveClass("deriv-button__hover--disabled");
   });
 
 });

Diff for: src/components/Button/index.tsx

@@ -15,7 +15,7 @@ interface ButtonProps extends ComponentProps<"button"> {
     isLoading?: boolean;
     rounded?: Extract<TGenericSizes, "lg" | "md" | "sm">;
     size?: Extract<TGenericSizes, "lg" | "md" | "sm">;
-    hasHoverStyle?:boolean;
+    hideHoverStyles?:boolean;
     textSize?: ComponentProps<typeof Text>["size"];
     variant?: TVariant;
 }
@@ -66,7 +66,7 @@ export const Button = ({
     isLoading = false,
     rounded = "sm",
     size = "md",
-    hasHoverStyle=true,
+    hideHoverStyles=false,
     textSize,
     variant = "contained",
     ...rest
@@ -82,7 +82,7 @@ export const Button = ({
                 ButtonRounded[rounded],
                 {
                     "deriv-button__full-width": isFullWidth,
-                    "deriv-button__disable-hover": !hasHoverStyle,
+                    "deriv-button__hover--disabled": hideHoverStyles,
                 },
                 className,
             )}

Diff for: stories/Button.stories.ts

@@ -15,7 +15,7 @@ const meta = {
         isLoading: false,
         disabled: false,
         size: "md",
-        hasHoverStyle:true,
+        hideHoverStyles:false,
         isFullWidth: false,
         rounded: "sm",
         type: "button",
@@ -36,7 +36,7 @@ const meta = {
             options: ["true", "false"],
             control: { type: "boolean" },
         },
-        hasHoverStyle: {
+        hideHoverStyles: {
             options: ["true", "false"],
             control: { type: "boolean" },
         },
@@ -91,10 +91,10 @@ export const ContainedPrimary: Story = {
 };
 
 export const ContainedPrimaryWithNoHover: Story = {
-    name: "Contained (Primary No Hover)",
+    name: "Contained (Primary No Hover Style)",
     args: {
         ...meta.args,
-        hasHoverStyle:false,
+        hideHoverStyles:true,
      },
 };