fix: logo prop refactor to component based

src/lib/components/NavBar/NavBar.module.scss

@@ -25,7 +25,8 @@ $variants: ("neutral", "primary", "secondary", "info", "danger", "warning", "suc
 
 .logo {
   height: var(--base-sizing-40x);
-  img {
+  display: flex;
+  * {
     height: 100%;
   }
 }

src/lib/components/NavBar/NavBar.stories.tsx

@@ -9,6 +9,7 @@ const argValues: NavBarProps = {
   logo: {
     href: "https://motif-ui.com/",
     imgPath: LOGO_URL,
+    alt: "logo",
   },
   button: { label: "Login", icon: "person" },
   mainMenu: {

src/lib/components/NavBar/NavBar.test.tsx

@@ -173,6 +173,7 @@ describe("NavBar", () => {
       <NavBar
         logo={{
           imgPath: "some_image",
+          alt: "logo",
           href: "https://motif-ui.com/",
         }}
       />,
@@ -181,6 +182,37 @@ describe("NavBar", () => {
     expect(getByRole("img")).toHaveAttribute("src", "some_image");
   });
 
+  it("should render custom component using logoSlot prop", () => {
+    const { getByRole } = render(
+      <NavBar
+        logoSlot={
+          <a href="https://example.com/">
+            <img src="logo.png" alt="Logo" />
+          </a>
+        }
+      />,
+    );
+
+    expect(getByRole("link")).toHaveAttribute("href", "https://example.com/");
+    expect(getByRole("img")).toHaveAttribute("src", "logo.png");
+  });
+
+  it("should prioritize logoSlot over logo prop when both are provided", () => {
+    const { getByRole, queryByAltText } = render(
+      <NavBar
+        logo={{ imgPath: "logo-prop.png", alt: "Logo prop" }}
+        logoSlot={
+          <a href="https://example.com/">
+            <img src="logo-slot.png" alt="Logo slot" />
+          </a>
+        }
+      />,
+    );
+
+    expect(getByRole("img")).toHaveAttribute("src", "logo-slot.png");
+    expect(queryByAltText("Logo prop")).not.toBeInTheDocument();
+  });
+
   it("should render either an action menu with the props in the actionMenu prop or a main menu with the props in the mainMenu prop", () => {
     const mockClick = jest.fn();
     const { getByText, getByRole, rerender } = render(

src/lib/components/NavBar/NavBar.tsx

@@ -21,6 +21,7 @@ const NavBar = (props: PropsWithRef<NavBarProps, HTMLElement>) => {
     className,
     style,
     logo,
+    logoSlot,
     search,
     button,
     mainMenu,
@@ -35,7 +36,7 @@ const NavBar = (props: PropsWithRef<NavBarProps, HTMLElement>) => {
         {mainMenu && (
           <MotifIconButton name="density_medium" size="xl" onClick={() => setMenuCollapsed(p => !p)} className={styles.hamburger} />
         )}
-        {logo && <NavBarLogo {...logo} />}
+        {(logo || logoSlot) && <NavBarLogo logo={logo}>{logoSlot}</NavBarLogo>}
         <div className={styles.mainMenuContainer}>{mainMenu && <Menu {...mainMenu} main />}</div>
         {search && <NavBarSearch {...search} />}
         {button && <NavBarButton {...button} />}

src/lib/components/NavBar/components/NavBarLogo.tsx

@@ -1,3 +1,4 @@
+import { PropsWithChildren } from "react";
 import styles from "../NavBar.module.scss";
 
 export type NavBarLogoProps = {
@@ -6,14 +7,22 @@ export type NavBarLogoProps = {
   href?: string;
 };
 
-const NavBarLogo = (props: NavBarLogoProps) => {
-  const { href, imgPath, alt } = props;
-  return href ? (
-    <a href={href} className={styles.logo}>
-      <img src={imgPath} alt={alt} />
-    </a>
-  ) : (
-    <img src={imgPath} alt={alt} className={styles.logo} />
+const NavBarLogo = (props: PropsWithChildren<{ logo?: NavBarLogoProps }>) => {
+  const { logo, children } = props;
+  const { alt, imgPath, href } = logo || {};
+  return (
+    <div className={styles.logo}>
+      {children ??
+        (logo &&
+          (href ? (
+            <a href={href}>
+              <img src={imgPath} alt={alt} />
+            </a>
+          ) : (
+            <img src={imgPath} alt={alt} />
+          )))}
+    </div>
   );
 };
+
 export default NavBarLogo;

src/lib/components/NavBar/types.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from "react";
 import { NavBarLogoProps } from "./components/NavBarLogo";
 import { NavBarButtonProps } from "./components/NavBarButton";
 import { MenuProps } from "./components/NavBarMenu/types";
@@ -79,6 +80,10 @@ export type NavBarDefaultableProps = {
    * ```
    */
   logo?: NavBarLogoProps;
+  /**
+   * Custom logo component. Takes precedence over logo prop.
+   */
+  logoSlot?: ReactElement;
 };
 
 export type NavBarContextProps = {