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
codevise · Nov 22, 2024 · 26ec85f · 26ec85f
1 parent 16cef60
commit 26ec85f
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 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
@@ -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
@@ -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
@@ -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>
   );