Merge pull request #2176 from tf/nav-logo-prop

Allow overriding navigation bar logo settings via prop
codevise · Nov 22, 2024 · 37de1e5 · 37de1e5
2 parents 16cef60 + 26ec85f
commit 37de1e5
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>
   );