Merge pull request #158 from yaswanth-deriv/yaswanth/FEQ-1913_Add_hoverstyle_prop_to_button

[FEQ]Yaswanth/FEQ_1913/Improve/Add hoverstyle prop to button

Author: shayan-deriv

src/components/Button/Button.scss

@@ -24,6 +24,16 @@ $black-outline-hover: rgba(0, 0, 0, 0.08);
         cursor: not-allowed;
     }
 
+    &__hover--disabled {
+        pointer-events: none;
+        cursor: default;
+
+        &:hover {
+            background-color: inherit;
+            color: inherit;
+        }
+    }
+
     &__size {
         &--sm {
             height: 2.4rem;
@@ -196,4 +206,5 @@ $black-outline-hover: rgba(0, 0, 0, 0.08);
             }
         }
     }
+
 }

src/components/Button/__test__/Button.spec.tsx

@@ -1,92 +1,109 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { Button } from '..';
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { Button } from "..";
 
-describe('Button component', () => {
-  it('renders without crashing', () => {
+describe("Button component", () => {
+  it("renders without crashing", () => {
     render(<Button>Test Button</Button>);
-    expect(screen.getByRole('button', { name: /test button/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /test button/i })).toBeInTheDocument();
   });
 
-  it('applies the "contained" variant classes when variant is "contained"', () => {
+  it("applies the contained variant classes when variant is contained", () => {
     const { container } = render(<Button variant="contained">Test Button</Button>);
-    expect(container.firstChild).toHaveClass('deriv-button__variant--contained');
+    expect(container.firstChild).toHaveClass("deriv-button__variant--contained");
   });
 
-  it('applies the "ghost" variant classes when variant is "ghost"', () => {
+  it("applies the ghost variant classes when variant is ghost", () => {
     const { container } = render(<Button variant="ghost">Test Button</Button>);
-    expect(container.firstChild).toHaveClass('deriv-button__variant--ghost');
+    expect(container.firstChild).toHaveClass("deriv-button__variant--ghost");
   });
 
-  it('applies the "outlined" variant classes when variant is "outlined"', () => {
+  it("applies the outlined variant classes when variant is outlined", () => {
     const { container } = render(<Button variant="outlined">Test Button</Button>);
-    expect(container.firstChild).toHaveClass('deriv-button__variant--outlined');
+    expect(container.firstChild).toHaveClass("deriv-button__variant--outlined");
   });
 
-  it('applies the correct color class based on the "color" prop', () => {
+  it("applies the correct color class based on the color prop", () => {
     const { container } = render(<Button color="primary">Test Button</Button>);
-    expect(container.firstChild).toHaveClass('deriv-button__color--primary');
+    expect(container.firstChild).toHaveClass("deriv-button__color--primary");
   });
 
-  it('applies full width class when "isFullWidth" prop is true', () => {
+  it("applies full width class when isFullWidth prop is true", () => {
     const { container } = render(<Button isFullWidth>Test Button</Button>);
-    expect(container.firstChild).toHaveClass('deriv-button__full-width');
+    expect(container.firstChild).toHaveClass("deriv-button__full-width");
   });
 
-  it('does not apply full width class when "isFullWidth" prop is false', () => {
+  it("does not apply full width class when isFullWidth prop is false", () => {
     const { container } = render(<Button>Test Button</Button>);
-    expect(container.firstChild).not.toHaveClass('deriv-button__full-width');
+    expect(container.firstChild).not.toHaveClass("deriv-button__full-width");
   });
 
-  it('shows loader when "isLoading" prop is true', () => {
+  it("shows loader when isLoading prop is true", () => {
     render(<Button isLoading>Test Button</Button>);
-    expect(screen.getByTestId('dt_derivs-loader')).toBeInTheDocument();
+    expect(screen.getByTestId("dt_derivs-loader")).toBeInTheDocument();
   });
 
-  it('does not show loader when "isLoading" prop is false', () => {
+  it("does not show loader when isLoading prop is false", () => {
     render(<Button>Test Button</Button>);
-    expect(screen.queryByTestId('loader')).toBeNull();
+    expect(screen.queryByTestId("loader")).toBeNull();
   });
 
-  it('disables the button when "disabled" prop is true', () => {
+  it("disables the button when disabled prop is true", () => {
     render(<Button disabled>Test Button</Button>);
-    expect(screen.getByRole('button', { name: /test button/i })).toBeDisabled();
+    expect(screen.getByRole("button", { name: /test button/i })).toBeDisabled();
   });
 
-  it('disables the button when "isLoading" prop is true', () => {
+  it("disables the button when isLoading prop is true", () => {
     render(<Button isLoading>Test Button</Button>);
-    expect(screen.getByRole('button', { name: /test button/i })).toBeDisabled();
+    expect(screen.getByRole("button", { name: /test button/i })).toBeDisabled();
   });
 
-  it('applies the correct size class based on the "size" prop', () => {
+  it("applies the correct size class based on the size prop", () => {
     const { container } = render(<Button size="lg">Test Button</Button>);
-    expect(container.firstChild).toHaveClass('deriv-button__size--lg');
+    expect(container.firstChild).toHaveClass("deriv-button__size--lg");
   });
 
-  it('applies the correct rounded class based on the "rounded" prop', () => {
+  it("applies the correct rounded class based on the rounded prop", () => {
     const { container } = render(<Button rounded="md">Test Button</Button>);
-    expect(container.firstChild).toHaveClass('deriv-button__rounded--md');
+    expect(container.firstChild).toHaveClass("deriv-button__rounded--md");
   });
 
-  it('shows the icon when provided and not loading', () => {
+  it("shows the icon when provided and not loading", () => {
     const Icon = () => <span>Icon</span>;
     render(<Button icon={<Icon />}>Test Button</Button>);
-    expect(screen.getByText('Icon')).toBeInTheDocument();
+    expect(screen.getByText("Icon")).toBeInTheDocument();
   });
 
-  it('does not show the icon when "isLoading" prop is true', () => {
+  it("does not show the icon when isLoading prop is true", () => {
     const Icon = () => <span>Icon</span>;
     render(<Button isLoading icon={<Icon />}>Test Button</Button>);
-    expect(screen.queryByText('Icon')).toBeNull();
+    expect(screen.queryByText("Icon")).toBeNull();
   });
 
-  it('renders children text when not loading', () => {
+  it("renders children text when not loading", () => {
     render(<Button>Test Button</Button>);
-    expect(screen.getByRole('button', { name: /test button/i })).toHaveTextContent('Test Button');
+    expect(screen.getByRole("button", { name: /test button/i })).toHaveTextContent("Test Button");
   });
 
-  it('does not render children text when "isLoading" prop is true', () => {
+  it("does not render children text when isLoading prop is true", () => {
     render(<Button isLoading>Test Button</Button>);
-    expect(screen.queryByText('Test Button')).toBeNull();
+    expect(screen.queryByText("Test Button")).toBeNull();
   });
+
+  it("hover styles are applied when hideHoverStyles is true", () => {
+    render(
+      <Button hideHoverStyles>Hover Button</Button>
+    );
+    const button = screen.getByRole("button");
+    expect(button).toHaveClass("deriv-button__hover--disabled");
+  });
+
+  it("hover styles are not applied when hideHoverStyles is false", () => {
+    render(
+      <Button>Hover Button</Button>
+    );
+    const button = screen.getByRole("button");
+    expect(button).not.toHaveClass("deriv-button__hover--disabled");
+  });
+
 });

src/components/Button/index.tsx

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

stories/Button.stories.ts

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