fix: show the custom logo even for GovUK branded pages

daniel-ac-martin · Jan 27, 2025 · f2ca068 · f2ca068
1 parent 8fa1a4f
commit f2ca068
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/components/header/spec/Header.ts b/components/header/spec/Header.ts
@@ -81,15 +81,15 @@ describe('Header', () => {
       expect(screen.getByTestId('crownLogo')).toBeInTheDocument()
     })
 
-    it('displays the crown logo even if a logo prop is provided', async () => {
+    it('displays the custom logo if the govUK prop is true and logo prop is provided', async () => {
       const props = {
         govUK: true,
         logo: h('div', { 'data-testid': 'custom-logo' })
       };
       render(h(Header, props, 'Child'));
 
-      expect(screen.getByTestId('crownLogo')).toBeInTheDocument()
-      expect(screen.queryByTestId('custom-logo')).not.toBeInTheDocument()
+      expect(screen.getByTestId('custom-logo')).toBeInTheDocument()
+      expect(screen.queryByTestId('crownLogo')).not.toBeInTheDocument()
     })
 
     it('displays the coat logo', () => {

diff --git a/components/header/src/Header.tsx b/components/header/src/Header.tsx
@@ -109,9 +109,12 @@ export const Header: FC<HeaderProps> = ({
     forceExternal: true
   }];
 
-  // Use the CoatLogo by default, or the ReactNode / null from the `logo` prop
-  let headerLogo: ReactNode | null | undefined = <CoatLogo aria-hidden="true" focusable="false" className={classes('logotype', ['coat'])} height="30" width="36" />
+  // Use the CrownLogo or CoatLogo by default.
+  const crownLogo: ReactNode = <CrownLogo focusable="false" className={classes('logotype')} height="30" width="148" />
+  const coatLogo: ReactNode = <CoatLogo aria-hidden="true" focusable="false" className={classes('logotype', ['coat'])} height="30" width="36" />
+  let headerLogo: ReactNode | null | undefined = govUK ? crownLogo : coatLogo
 
+  // If the logo prop is null or a valid ReactNode, use that instead of the default CrownLogo or CoatLogo component
   if (_logo === null || isValidElement(_logo)) {
     headerLogo = _logo
   }
@@ -123,9 +126,7 @@ export const Header: FC<HeaderProps> = ({
           <A href={orgHref} classModifiers={[ 'homepage', (orgText && orgText.length > 9) ? 'small' : undefined ]}>
             {
               govUK
-              ? (
-                <CrownLogo focusable="false" className={classes('logotype')} height="30" width="148" />
-              )
+              ? headerLogo
               : (
                 <Fragment>
                   {headerLogo}