fix: review comments

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>

src/components/AppLayout/__test__/DerivLogo.spec.tsx

@@ -1,38 +1,53 @@
 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/",
         );
     });
 
     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");
     });
 });

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}
+        />
+    ),
 };