Merge pull request #218 from deriv-com/bug-fix

chore: added new props to platformSwitcher
deriv-com · Jun 14, 2024 · a475e01 · a475e01
2 parents 2e8cc41 + e109222
commit a475e01
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 1 deletion.
diff --git a/src/components/AppLayout/PlatformSwitcher/__tests__/PlatformSwitcher.spec.tsx b/src/components/AppLayout/PlatformSwitcher/__tests__/PlatformSwitcher.spec.tsx
@@ -7,6 +7,7 @@ const PlatformSwitcherComponent = () => (
         buttonProps={{ icon: <span>icon</span> }}
         bottomLinkLabel="CFD link"
         itemsWrapperClassName="test-class"
+        overlayClassName="test-overlay-class"
     >
         <span>platform switcher child</span>
     </PlatformSwitcher>
@@ -30,4 +31,12 @@ describe("PlatformSwitcher Component", () => {
         await userEvent.click(screen.getByRole("button"));
         expect(screen.getByTestId("dt_context_Menu")).toHaveClass("test-class");
     });
+
+    it("renders the passed className for overlay", async () => {
+        render(<PlatformSwitcherComponent />);
+        await userEvent.click(screen.getByRole("button"));
+        expect(screen.getByTestId("dt_overlay")).toHaveClass(
+            "test-overlay-class",
+        );
+    });
 });
diff --git a/src/components/AppLayout/PlatformSwitcher/index.tsx b/src/components/AppLayout/PlatformSwitcher/index.tsx
@@ -19,6 +19,7 @@ type TPlatformSwitcher = {
     bottomLinkLabel?: string | JSX.Element;
     bottomLinkProps?: ComponentProps<"a">;
     itemsWrapperClassName?: string;
+    overlayClassName?: string;
 };
 
 /**
@@ -32,6 +33,7 @@ type TPlatformSwitcher = {
  * @param {string | JSX.Element} [props.bottomLinkLabel] - Optional label for a bottom link in the context menu, can be a string or JSX element.
  * @param {ComponentProps<"a">} [props.bottomLinkProps] - Optional props for the bottom link, assuming it's rendered as an `<a>` tag.
  * @param {string} props.itemsWrapperClassName - Optional prop for adding additional className to the item's wrapper.
+ * @param {string} props.overlayClassName - Optional prop for adding additional className to the overlay.
  *
  * @example
  * <PlatformSwitcher
@@ -49,6 +51,7 @@ export const PlatformSwitcher = ({
     bottomLinkLabel,
     bottomLinkProps,
     itemsWrapperClassName,
+    overlayClassName,
 }: PropsWithChildren<TPlatformSwitcher>) => {
     const [isExpanded, setExpanded] = useState(false);
     const ref = useRef(null);
@@ -70,7 +73,15 @@ export const PlatformSwitcher = ({
                 }}
                 {...buttonProps}
             />
-            {isExpanded && <div className="deriv-platform-switcher__overlay" />}
+            {isExpanded && (
+                <div
+                    className={clsx(
+                        "deriv-platform-switcher__overlay",
+                        overlayClassName,
+                    )}
+                    data-testid="dt_overlay"
+                />
+            )}
             <ContextMenu
                 ref={ref}
                 className={clsx(

diff --git a/stories/PlatformSwitcher.stories.tsx b/stories/PlatformSwitcher.stories.tsx
@@ -12,6 +12,8 @@ const meta = {
             icon: <DerivTraderLogo width={114.97} height={25} />,
             style: { padding: "0 16px" },
         },
+        overlayClassName: "",
+        itemsWrapperClassName: "",
     },
     argTypes: {
         bottomLinkLabel: {
@@ -29,6 +31,16 @@ const meta = {
             description:
                 "Props for the PlatformSwitcherButton, like `icon` excluding `isExpanded` and `onClick`.",
         },
+        itemsWrapperClassName: {
+            control: false,
+            description:
+                "Optional prop for adding additional className to the item's wrapper.",
+        },
+        overlayClassName: {
+            control: false,
+            description:
+                "Optional prop for adding additional className to the overlay.",
+        },
     },
     parameters: { layout: "centered" },
     tags: ["autodocs"],