From 26ec85f7a894455fa28c01090456c4924c1e4513 Mon Sep 17 00:00:00 2001
From: Tim Fischbach <tfischbach@codevise.de>
Date: Fri, 22 Nov 2024 08:57:50 +0100
Subject: [PATCH] Allow overriding navigation bar logo settings via prop

Can be used to construct custom navigation bar widgets based on
default navigation that are not limited to only showing theme logos.

REDMINE-20856
---
 .../Defaultnavigation-spec.js                 | 47 +++++++++++++++++++
 .../defaultNavigation/DefaultNavigation.js    |  8 +++-
 .../src/widgets/defaultNavigation/Logo.js     | 12 ++---
 3 files changed, 59 insertions(+), 8 deletions(-)

diff --git a/entry_types/scrolled/package/spec/widgets/defaultNavigation/Defaultnavigation-spec.js b/entry_types/scrolled/package/spec/widgets/defaultNavigation/Defaultnavigation-spec.js
index c782566ea..f2f8817a2 100644
--- a/entry_types/scrolled/package/spec/widgets/defaultNavigation/Defaultnavigation-spec.js
+++ b/entry_types/scrolled/package/spec/widgets/defaultNavigation/Defaultnavigation-spec.js
@@ -32,6 +32,53 @@ describe('DefaultNavigation', () => {
     });
   });
 
+  it('uses theme logo by default', () => {
+    const {getByRole} = renderInEntry(
+      <DefaultNavigation configuration={{}} />,
+      {
+        seed: {
+          themeAssets: {
+            logoDesktop: 'logo-desktop.png'
+          },
+          themeOptions: {
+            logoUrl: 'https://example.com',
+            logoAltText: 'My logo'
+          }
+        }
+      }
+    );
+
+    expect(getByRole('link', {name: 'My logo'})).toBeInTheDocument();
+    expect(getByRole('link', {name: 'My logo'})).toHaveAttribute('href', 'https://example.com');
+    expect(getByRole('img', {name: 'My logo'})).toHaveAttribute('src', 'logo-desktop.png');
+  });
+
+  it('takes logo props', () => {
+    const {getByRole} = renderInEntry(
+      <DefaultNavigation configuration={{}}
+                         logo={{
+                           srcDesktop: "other-logo.png",
+                           url: "https://other.example.com",
+                           altText: "Other logo"
+                         }} />,
+      {
+        seed: {
+          themeAssets: {
+            logoDesktop: 'logo.png'
+          },
+          themeOptions: {
+            logoUrl: 'https://exmaple.com',
+            logoAltText: 'My logo'
+          }
+        }
+      }
+    );
+
+    expect(getByRole('link', {name: 'Other logo'})).toBeInTheDocument();
+    expect(getByRole('link', {name: 'Other logo'})).toHaveAttribute('href', 'https://other.example.com');
+    expect(getByRole('img', {name: 'Other logo'})).toHaveAttribute('src', 'other-logo.png');
+  });
+
   it('supports extra buttons component', () => {
     const ExtraButtons = () => <button>Extra</button>;
     const {queryByRole} = renderInEntry(
diff --git a/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.js b/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.js
index 63345f48b..e887aba9c 100644
--- a/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.js
+++ b/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.js
@@ -26,7 +26,11 @@ import {Scroller} from './Scroller';
 
 import styles from './DefaultNavigation.module.css';
 
-export function DefaultNavigation({configuration, ExtraButtons, MobileMenu}) {
+export function DefaultNavigation({
+  configuration,
+  ExtraButtons, MobileMenu,
+  logo
+}) {
   const [navExpanded, setNavExpanded] = useState(true);
   const [mobileNavHidden, setMobileNavHidden] = useState(true);
   const [readingProgress, setReadingProgress] = useState(0);
@@ -132,7 +136,7 @@ export function DefaultNavigation({configuration, ExtraButtons, MobileMenu}) {
                                                          mobileNavHidden={mobileNavHidden}/>}
 
           <SkipLinks />
-          <Logo />
+          <Logo {...logo} />
 
           {renderNav()}
           {MobileMenu && <MobileMenu configuration={configuration}
diff --git a/entry_types/scrolled/package/src/widgets/defaultNavigation/Logo.js b/entry_types/scrolled/package/src/widgets/defaultNavigation/Logo.js
index 0f2e0da0e..853ab04ba 100644
--- a/entry_types/scrolled/package/src/widgets/defaultNavigation/Logo.js
+++ b/entry_types/scrolled/package/src/widgets/defaultNavigation/Logo.js
@@ -5,22 +5,22 @@ import {useTheme} from 'pageflow-scrolled/frontend';
 
 import styles from './DefaultNavigation.module.css';
 
-export function Logo() {
+export function Logo({srcMobile, srcDesktop, url, altText}) {
   const theme = useTheme();
   return (
     <a target="_blank"
        rel="noopener noreferrer"
-       href={theme.options.logoUrl}
+       href={url || theme.options.logoUrl}
        className={classNames(
          styles.logo,
          {[styles.centerMobileLogo]:
            theme.options.defaultNavigationMobileLogoPosition === 'center'}
        )}>
       <picture>
-        <source media="(max-width: 780px)" srcSet={theme.assets.logoMobile} />
-        <source media="(min-width: 781px)" srcSet={theme.assets.logoDesktop} />
-        <img src={theme.assets.logoDesktop}
-             alt={theme.options.logoAltText} />
+        <source media="(max-width: 780px)" srcSet={srcMobile || theme.assets.logoMobile} />
+        <source media="(min-width: 781px)" srcSet={srcDesktop || theme.assets.logoDesktop} />
+        <img src={srcDesktop || theme.assets.logoDesktop}
+             alt={altText || theme.options.logoAltText} />
       </picture>
     </a>
   );