From f69f79e7f7e6b099f4c79924bee155f5776b9675 Mon Sep 17 00:00:00 2001
From: Niloofar <niloofar.sadeghi@regentmarkets.com>
Date: Tue, 7 May 2024 17:58:22 +0800
Subject: [PATCH] fix: review comments

---
 .../AppLayout/Header/DerivLogo/index.tsx      | 28 ++++++----
 .../AppLayout/__test__/DerivLogo.spec.tsx     | 51 ++++++++++++-------
 stories/DerivLogo.stories.tsx                 | 27 +++++++++-
 3 files changed, 75 insertions(+), 31 deletions(-)

diff --git a/src/components/AppLayout/Header/DerivLogo/index.tsx b/src/components/AppLayout/Header/DerivLogo/index.tsx
index aa74d1c7..9d7984a1 100644
--- a/src/components/AppLayout/Header/DerivLogo/index.tsx
+++ b/src/components/AppLayout/Header/DerivLogo/index.tsx
@@ -4,30 +4,36 @@ import {
     BrandDerivWordmarkCoralIcon,
 } from "@deriv/quill-icons/Logo";
 
-type TDerivLogo = Omit<ComponentProps<"a">, "href" | "target"> & {
+type TDerivLogo = ComponentProps<"a"> & {
     variant?: "default" | "wallets";
+    logoWidth?: number;
+    logoHeight?: number;
 };
 
 /**
  * Renders the Deriv logo component.
- * @param {TDerivLogo} props - Props for the DerivLogo component.
  * @param {"default" | "wallets"} [variant="default"] - Specifies the variant of the logo.
- * @param {ComponentProps<"a">} rest - Additional props to be spread onto the wrapper.
+ * @param {number} [logoWidth] - Width of the logo.
+ * @param {number} [logoHeight] - Height of the logo.
+ * @param {ComponentProps<'a'>} [props] - HTML a tag props.
  * @returns {JSX.Element} - Rendered Deriv logo component.
  */
-export const DerivLogo = ({ variant = "default", ...rest }: TDerivLogo) => (
-    <a href="https://deriv.com/" target="_blank" {...rest}>
+export const DerivLogo = ({
+    variant = "default",
+    logoHeight,
+    logoWidth,
+    ...props
+}: TDerivLogo) => (
+    <a {...props}>
         {variant == "default" ? (
             <BrandDerivWordmarkCoralIcon
-                title="deriv-logo"
-                width={48.22}
-                height={16}
+                width={logoWidth ?? 48.22}
+                height={logoHeight ?? 16}
             />
         ) : (
             <BrandDerivLogoCoralIcon
-                title="deriv-wallets-logo"
-                width={24}
-                height={24}
+                width={logoWidth ?? 24}
+                height={logoHeight ?? 24}
             />
         )}
     </a>
diff --git a/src/components/AppLayout/__test__/DerivLogo.spec.tsx b/src/components/AppLayout/__test__/DerivLogo.spec.tsx
index f38e18e9..86d61019 100644
--- a/src/components/AppLayout/__test__/DerivLogo.spec.tsx
+++ b/src/components/AppLayout/__test__/DerivLogo.spec.tsx
@@ -1,9 +1,27 @@
 import { render, screen } from "@testing-library/react";
 import { DerivLogo } from "../Header/DerivLogo";
 
-describe("DerivLogo Components", () => {
-    it("redirects to 'https://deriv.com/'", () => {
+describe("DerivLogo Component", () => {
+    it("renders default logo with correct size", () => {
         render(<DerivLogo />);
+        const logo = screen.getByRole("img");
+
+        expect(logo).toBeInTheDocument();
+        expect(logo).toHaveAttribute("width", "48.22");
+        expect(logo).toHaveAttribute("height", "16");
+    });
+
+    it("renders wallets logo with correct size", () => {
+        render(<DerivLogo variant="wallets" />);
+        const logo = screen.getByRole("img");
+
+        expect(logo).toBeInTheDocument();
+        expect(logo).toHaveAttribute("width", "24");
+        expect(logo).toHaveAttribute("height", "24");
+    });
+
+    it("redirects to 'https://deriv.com/'", () => {
+        render(<DerivLogo href="https://deriv.com/" />);
         expect(screen.getByRole("link")).toHaveAttribute(
             "href",
             "https://deriv.com/",
@@ -11,28 +29,25 @@ describe("DerivLogo Components", () => {
     });
 
     it("opens the link in new tab", () => {
-        render(<DerivLogo />);
+        render(<DerivLogo href="https://deriv.com/" target="_blank" />);
         expect(screen.getByRole("link")).toHaveAttribute("target", "_blank");
     });
 
-    it("renders default logo when variant is set to 'default'", () => {
-        render(<DerivLogo />);
-        expect(screen.getByText("deriv-logo")).toBeInTheDocument();
-    });
+    it("renders default logo with passed size", () => {
+        render(<DerivLogo logoHeight={20} logoWidth={20} />);
+        const logo = screen.getByRole("img");
 
-    it("renders wallets logo when variant is set to 'wallets'", () => {
-        render(<DerivLogo variant="wallets" />);
-        expect(screen.getByText("deriv-wallets-logo")).toBeInTheDocument();
+        expect(logo).toBeInTheDocument();
+        expect(logo).toHaveAttribute("width", "20");
+        expect(logo).toHaveAttribute("height", "20");
     });
 
-    it("passes additional props to link element", () => {
-        const testClassName = "test-class";
-        const testStyle = { color: "red" };
-
-        render(<DerivLogo className={testClassName} style={testStyle} />);
+    it("renders wallets logo with passed size", () => {
+        render(<DerivLogo variant="wallets" logoHeight={30} logoWidth={30} />);
+        const logo = screen.getByRole("img");
 
-        const link = screen.getByRole("link");
-        expect(link).toHaveClass(testClassName);
-        expect(link).toHaveStyle(testStyle);
+        expect(logo).toBeInTheDocument();
+        expect(logo).toHaveAttribute("width", "30");
+        expect(logo).toHaveAttribute("height", "30");
     });
 });
diff --git a/stories/DerivLogo.stories.tsx b/stories/DerivLogo.stories.tsx
index 9c5d8a46..efaed731 100644
--- a/stories/DerivLogo.stories.tsx
+++ b/stories/DerivLogo.stories.tsx
@@ -4,12 +4,27 @@ import { Header } from "../src/main";
 const meta = {
     title: "Components/DerivLogo",
     component: Header.DerivLogo,
-    args: { variant: "default" },
+    args: {
+        variant: "wallets",
+        logoHeight: 30,
+        logoWidth: 30,
+        href: "https://deriv.com/",
+        target: "_blank",
+    },
     argTypes: {
         variant: {
             options: ["default", "wallets"],
             control: { type: "select" },
+            description: "Specifies the variant of the logo.",
+        },
+        logoHeight: {
+            description: "Height of the logo.",
+        },
+        logoWidth: {
+            description: "Width of the logo.",
         },
+        href: {},
+        target: {},
     },
     parameters: { layout: "centered" },
     tags: ["autodocs"],
@@ -20,5 +35,13 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     name: "Header.DerivLogo",
-    render: (args) => <Header.DerivLogo variant={args.variant} />,
+    render: (args) => (
+        <Header.DerivLogo
+            variant={args.variant}
+            logoHeight={args.logoHeight}
+            logoWidth={args.logoWidth}
+            href={args.href}
+            target={args.target}
+        />
+    ),
 };