Merge branch 'main' into aizad/FEQ-1566/add-accordion

package.json

@@ -84,6 +84,7 @@
         "storybook": "^8.0.4",
         "ts-jest": "^29.1.2",
         "typescript": "^5.4.3",
+        "usehooks-ts": "^3.0.2",
         "vite": "^5.2.6",
         "vite-plugin-classname": "^0.0.3",
         "vite-plugin-dts": "^3.7.3",
@@ -117,6 +118,17 @@
         "moduleNameMapper": {
             "\\.(css|less|scss|sass)$": "identity-obj-proxy",
             "\\.(gif|ttf|eot|svg|png)$": "<rootDir>/test/__mocks__/fileMock.js"
-        }
+        },
+        "collectCoverageFrom": [
+            "./src/components/*/*.{ts,tsx}",
+            "./src/hooks/*.{ts,tsx}",
+            "!./src/hooks/index.ts",
+            "!./node_modules/**",
+            "!./dist/**",
+            "!./stories/**",
+            "!/vite.config.ts",
+            "!./.storybook/**",
+            "!./coverage/**"
+        ]
     }
 }

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,
             )}

src/components/Tooltip/index.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode, useRef, useState } from "react";
 import clsx from "clsx";
-import { useOnClickOutside } from "../../hooks/useOnClickOutside";
+import { useOnClickOutside } from "usehooks-ts";
 import "./Tooltip.scss";
 
 type TooltipPositionType = "top" | "bottom" | "left" | "right";
@@ -45,7 +45,7 @@ export const Tooltip = ({
         }
     };
 
-    const handleClickOutside = (event: globalThis.MouseEvent) => {
+    const handleClickOutside = (event: MouseEvent | TouchEvent | FocusEvent) => {
         if (
             triggerAction === "click" &&
             active &&

src/hooks/index.ts

@@ -1,2 +1 @@
 export {useDevice} from './useDevice'
-export {useOnClickOutside} from './useOnClickOutside'

src/hooks/useDevice.ts

@@ -1,4 +1,4 @@
-import { useMediaQuery } from "./useMediaQuery";
+import { useMediaQuery } from "usehooks-ts";
 
 /** A custom hook to check for the client device and determine the layout to be rendered */
 export const useDevice = () => {