From 6eb6963b225fdc3bad25a5532352185c74145ca4 Mon Sep 17 00:00:00 2001
From: Joey Connor <joey.connor@engineering.digital.dwp.gov.uk>
Date: Thu, 23 Jan 2025 14:58:42 +0000
Subject: [PATCH 1/9] feat: add logo prop to the Header component to allow for
 custom logo to be added

chore: add test cases to the Header component to support testing the logo prop

fix: remove unused import
---
 components/header/spec/Header.stories.mdx | 23 ++++++++++++
 components/header/spec/Header.ts          | 43 +++++++++++++++++++++++
 components/header/src/CoatLogo.tsx        |  1 +
 components/header/src/CrownLogo.tsx       |  1 +
 components/header/src/Header.tsx          |  9 +++--
 5 files changed, 75 insertions(+), 2 deletions(-)

diff --git a/components/header/spec/Header.stories.mdx b/components/header/spec/Header.stories.mdx
index 3d737dca0..72d885da2 100644
--- a/components/header/spec/Header.stories.mdx
+++ b/components/header/spec/Header.stories.mdx
@@ -1,3 +1,4 @@
+import { Fragment } from 'react'
 import { Meta, Preview, Props, Story } from '@storybook/addon-docs';
 import { Header } from '../src/Header';
 import readMe from '../README.md';
@@ -286,3 +287,25 @@ your department in order to use their colours.
     />
   </Story>
 </Preview>
+
+#### Remove the logo
+
+<Preview>
+  <Story name="Remove the logo">
+    <Header
+      department="department-for-work-pensions"
+      logo={<Fragment></Fragment>}
+    />
+  </Story>
+</Preview>
+
+#### Customise the logo
+
+<Preview>
+  <Story name="Customise the logo">
+    <Header
+      department="department-for-work-pensions"
+      logo={<div>HEY!</div>}
+    />
+  </Story>
+</Preview>
\ No newline at end of file
diff --git a/components/header/spec/Header.ts b/components/header/spec/Header.ts
index 215f04cf3..22ca69660 100644
--- a/components/header/spec/Header.ts
+++ b/components/header/spec/Header.ts
@@ -51,4 +51,47 @@ describe('Header', () => {
     it('contains the navigation links', async () => expect(screen.getByRole('banner')).toHaveTextContent('Navigation item 2'));
     it('contains the sign-out link', async () => expect(screen.getByRole('banner')).toHaveTextContent('Log out'));
   });
+
+  describe('header logo behaviour', () => {
+    it('displays the crown logo', async () => {
+      const props = {
+        govUK: true
+      };
+      render(h(Header, props, 'Child'));
+
+      expect(screen.getByTestId('crownLogo')).toBeInTheDocument()
+    })
+
+    it('displays the crown logo even if a 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()
+    })
+
+    it('displays the coat logo', () => {
+      const props = {
+        govUK: false
+      };
+
+      render(h(Header, props, 'Child'));
+
+      expect(screen.getByTestId('coatLogo')).toBeInTheDocument()
+    })
+
+    it('displays a custom ReactNode', () => {
+      const props = {
+        govUK: false,
+        logo: h('div', { 'data-testid': 'custom-logo'})
+      };
+
+      render(h(Header, props, 'Child'));
+
+      expect(screen.getByTestId('custom-logo')).toBeInTheDocument()
+    })
+  })
 });
diff --git a/components/header/src/CoatLogo.tsx b/components/header/src/CoatLogo.tsx
index dae9b5b49..84f73777d 100644
--- a/components/header/src/CoatLogo.tsx
+++ b/components/header/src/CoatLogo.tsx
@@ -10,6 +10,7 @@ export const CoatLogo: FC<LogoProps> = (props) => (
     width="86.095"
     height="71.134"
     role="img"
+    data-testid="coatLogo"
     {...props}
   >
     <g transform="translate(.0021394 -7.478)" fill="#fff">
diff --git a/components/header/src/CrownLogo.tsx b/components/header/src/CrownLogo.tsx
index eef6b0456..a08916cd0 100644
--- a/components/header/src/CrownLogo.tsx
+++ b/components/header/src/CrownLogo.tsx
@@ -9,6 +9,7 @@ export const CrownLogo: FC<LogoProps> = (props) => (
     width="148"
     role="img"
     aria-label="GOV.UK"
+    data-testid="crownLogo"
     {...props}
   >
     <title>GOV.UK</title>
diff --git a/components/header/src/Header.tsx b/components/header/src/Header.tsx
index 816823bd0..62a84aa73 100644
--- a/components/header/src/Header.tsx
+++ b/components/header/src/Header.tsx
@@ -1,4 +1,4 @@
-import { FC, Fragment, createElement as h } from 'react';
+import { FC, Fragment, createElement as h, ReactNode } from 'react';
 import { StandardProps, classBuilder } from '@not-govuk/component-helpers';
 import { Link, LinkProps } from '@not-govuk/link';
 import { WidthContainer } from '@not-govuk/width-container';
@@ -35,6 +35,8 @@ export type HeaderProps = StandardProps & {
   signOutHref?: string
   /** Sign out link text */
   signOutText?: string
+  /** Logo ReactNode */
+  logo?: ReactNode 
 };
 
 const departmentMap: Record<string, string> = {
@@ -94,6 +96,7 @@ export const Header: FC<HeaderProps> = ({
   serviceName,
   signOutHref,
   signOutText = 'Sign out',
+  logo,
   ...attrs
 }) => {
   const classes = classBuilder('govuk-header', classBlock, classModifiers, className);
@@ -106,6 +109,8 @@ export const Header: FC<HeaderProps> = ({
     forceExternal: true
   }];
 
+  const headerLogo = logo || <CoatLogo aria-hidden="true" focusable="false" className={classes('logotype', ['coat'])} height="30" width="36" />
+
   return (
     <header {...attrs} className={classes()} data-module="govuk-header">
       <WidthContainer maxWidth={maxContentsWidth} className={classes('container', department)}>
@@ -118,7 +123,7 @@ export const Header: FC<HeaderProps> = ({
               )
               : (
                 <Fragment>
-                <CoatLogo aria-hidden="true" focusable="false" className={classes('logotype', ['coat'])} height="30" width="36" />
+                {headerLogo}
                 <span className={classes('logotype-text')}>
                   {orgText}
                 </span>

From 42b8068853cc13c79a7416bb048abec228b4be27 Mon Sep 17 00:00:00 2001
From: Joey Connor <joey.connor@engineering.digital.dwp.gov.uk>
Date: Mon, 27 Jan 2025 10:31:47 +0000
Subject: [PATCH 2/9] fix: update code style to use the _logo variable name,
 and update the test case to mock the <CrownLogo> and <CoatLogo> components

---
 components/header/spec/Header.ts    | 19 +++++++++++++++++++
 components/header/src/CoatLogo.tsx  |  1 -
 components/header/src/CrownLogo.tsx |  1 -
 components/header/src/Header.tsx    |  4 ++--
 4 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/components/header/spec/Header.ts b/components/header/spec/Header.ts
index 22ca69660..99644a8b5 100644
--- a/components/header/spec/Header.ts
+++ b/components/header/spec/Header.ts
@@ -2,12 +2,31 @@ import { createElement as h } from 'react';
 import { render, screen } from '@not-govuk/component-test-helpers';
 import Header from '../src/Header';
 
+jest.mock('../src/CrownLogo', () => ({
+  CrownLogo: () =>  h('svg', {
+    'data-testid': 'crownLogo',
+    children: h('title', {
+      children: 'GOV.UK'
+    })
+  })
+}))
+
+jest.mock('../src/CoatLogo', () => ({
+  CoatLogo: () => h('svg', {
+    'data-testid': 'coatLogo'
+  })
+}))
+
 describe('Header', () => {
   describe('when given valid props', () => {
     beforeEach(async () => {
       render(h(Header, {}));
     });
 
+    afterEach(() => {
+      jest.clearAllMocks()
+    })
+
     it('renders an element', async () => expect(screen.getByRole('banner')).toBeInTheDocument());
     it('is NOT GOV.UK branded', async () => expect(screen.getByRole('banner')).not.toHaveTextContent('GOV.UK'));
     it('does NOT contain the sign-out link', async () => expect(screen.getByRole('banner')).not.toHaveTextContent('Sign out'));
diff --git a/components/header/src/CoatLogo.tsx b/components/header/src/CoatLogo.tsx
index 84f73777d..dae9b5b49 100644
--- a/components/header/src/CoatLogo.tsx
+++ b/components/header/src/CoatLogo.tsx
@@ -10,7 +10,6 @@ export const CoatLogo: FC<LogoProps> = (props) => (
     width="86.095"
     height="71.134"
     role="img"
-    data-testid="coatLogo"
     {...props}
   >
     <g transform="translate(.0021394 -7.478)" fill="#fff">
diff --git a/components/header/src/CrownLogo.tsx b/components/header/src/CrownLogo.tsx
index a08916cd0..eef6b0456 100644
--- a/components/header/src/CrownLogo.tsx
+++ b/components/header/src/CrownLogo.tsx
@@ -9,7 +9,6 @@ export const CrownLogo: FC<LogoProps> = (props) => (
     width="148"
     role="img"
     aria-label="GOV.UK"
-    data-testid="crownLogo"
     {...props}
   >
     <title>GOV.UK</title>
diff --git a/components/header/src/Header.tsx b/components/header/src/Header.tsx
index 62a84aa73..a60966195 100644
--- a/components/header/src/Header.tsx
+++ b/components/header/src/Header.tsx
@@ -109,7 +109,7 @@ export const Header: FC<HeaderProps> = ({
     forceExternal: true
   }];
 
-  const headerLogo = logo || <CoatLogo aria-hidden="true" focusable="false" className={classes('logotype', ['coat'])} height="30" width="36" />
+  const _logo = logo || <CoatLogo aria-hidden="true" focusable="false" className={classes('logotype', ['coat'])} height="30" width="36" />
 
   return (
     <header {...attrs} className={classes()} data-module="govuk-header">
@@ -123,7 +123,7 @@ export const Header: FC<HeaderProps> = ({
               )
               : (
                 <Fragment>
-                {headerLogo}
+                {_logo}
                 <span className={classes('logotype-text')}>
                   {orgText}
                 </span>

From 8fa1a4f8c6b0e54277908f216b892ccd02a922e8 Mon Sep 17 00:00:00 2001
From: Joey Connor <joey.connor@engineering.digital.dwp.gov.uk>
Date: Mon, 27 Jan 2025 12:56:10 +0000
Subject: [PATCH 3/9] fix: improve the logo props to allow for null to be
 passed in to represent no logo

---
 components/header/spec/Header.stories.mdx |  2 +-
 components/header/spec/Header.ts          | 13 +++++++++++++
 components/header/src/Header.tsx          | 23 ++++++++++++++---------
 3 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/components/header/spec/Header.stories.mdx b/components/header/spec/Header.stories.mdx
index 72d885da2..528364949 100644
--- a/components/header/spec/Header.stories.mdx
+++ b/components/header/spec/Header.stories.mdx
@@ -294,7 +294,7 @@ your department in order to use their colours.
   <Story name="Remove the logo">
     <Header
       department="department-for-work-pensions"
-      logo={<Fragment></Fragment>}
+      logo={null}
     />
   </Story>
 </Preview>
diff --git a/components/header/spec/Header.ts b/components/header/spec/Header.ts
index 99644a8b5..95181deb2 100644
--- a/components/header/spec/Header.ts
+++ b/components/header/spec/Header.ts
@@ -112,5 +112,18 @@ describe('Header', () => {
 
       expect(screen.getByTestId('custom-logo')).toBeInTheDocument()
     })
+
+    it('displays no logo', () => {
+      const props = {
+        govUK: false,
+        logo: null
+      };
+
+      render(h(Header, props, 'Child'));
+
+      expect(screen.queryByTestId('custom-logo')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('coatLogo')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('crownLogo')).not.toBeInTheDocument()
+    })
   })
 });
diff --git a/components/header/src/Header.tsx b/components/header/src/Header.tsx
index a60966195..b23891c27 100644
--- a/components/header/src/Header.tsx
+++ b/components/header/src/Header.tsx
@@ -1,4 +1,4 @@
-import { FC, Fragment, createElement as h, ReactNode } from 'react';
+import { FC, Fragment, createElement as h, ReactNode, isValidElement } from 'react';
 import { StandardProps, classBuilder } from '@not-govuk/component-helpers';
 import { Link, LinkProps } from '@not-govuk/link';
 import { WidthContainer } from '@not-govuk/width-container';
@@ -35,8 +35,8 @@ export type HeaderProps = StandardProps & {
   signOutHref?: string
   /** Sign out link text */
   signOutText?: string
-  /** Logo ReactNode */
-  logo?: ReactNode 
+  /** Logo ReactNode or null */
+  logo?: ReactNode | null
 };
 
 const departmentMap: Record<string, string> = {
@@ -96,7 +96,7 @@ export const Header: FC<HeaderProps> = ({
   serviceName,
   signOutHref,
   signOutText = 'Sign out',
-  logo,
+  logo: _logo,
   ...attrs
 }) => {
   const classes = classBuilder('govuk-header', classBlock, classModifiers, className);
@@ -109,7 +109,12 @@ export const Header: FC<HeaderProps> = ({
     forceExternal: true
   }];
 
-  const _logo = logo || <CoatLogo aria-hidden="true" focusable="false" className={classes('logotype', ['coat'])} height="30" width="36" />
+  // 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" />
+
+  if (_logo === null || isValidElement(_logo)) {
+    headerLogo = _logo
+  }
 
   return (
     <header {...attrs} className={classes()} data-module="govuk-header">
@@ -123,10 +128,10 @@ export const Header: FC<HeaderProps> = ({
               )
               : (
                 <Fragment>
-                {_logo}
-                <span className={classes('logotype-text')}>
-                  {orgText}
-                </span>
+                  {headerLogo}
+                  <span className={classes('logotype-text')}>
+                    {orgText}
+                  </span>
                 </Fragment>
               )
             }

From f2ca0689b2fb8c7a160c89e3bc2b27b50e953416 Mon Sep 17 00:00:00 2001
From: Joey Connor <joey.connor@engineering.digital.dwp.gov.uk>
Date: Mon, 27 Jan 2025 13:05:15 +0000
Subject: [PATCH 4/9] fix: show the custom logo even for GovUK branded pages

---
 components/header/spec/Header.ts |  6 +++---
 components/header/src/Header.tsx | 11 ++++++-----
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/components/header/spec/Header.ts b/components/header/spec/Header.ts
index 95181deb2..3d78eb3e5 100644
--- 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
index b23891c27..9d91b8e3d 100644
--- 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}

From d4f9b04cd21f795b073ab1d34ecc816706d0f194 Mon Sep 17 00:00:00 2001
From: Joey Connor <joey.connor@engineering.digital.dwp.gov.uk>
Date: Mon, 27 Jan 2025 13:16:05 +0000
Subject: [PATCH 5/9] feat: update storybook for Header component to reflect
 new options

---
 components/header/spec/Header.stories.mdx | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/components/header/spec/Header.stories.mdx b/components/header/spec/Header.stories.mdx
index 528364949..ae2bffdd0 100644
--- a/components/header/spec/Header.stories.mdx
+++ b/components/header/spec/Header.stories.mdx
@@ -301,11 +301,26 @@ your department in order to use their colours.
 
 #### Customise the logo
 
+
+##### GovUK Header
+
 <Preview>
-  <Story name="Customise the logo">
+  <Story name="GovUK Header with custom logo">
+    <Header
+      govUK={true}
+      logo={<span>Logo</span>}
+    />
+  </Story>
+</Preview>
+
+##### NotGovUK Header
+
+<Preview>
+  <Story name="NotGovUK Header with custom logo">
     <Header
       department="department-for-work-pensions"
-      logo={<div>HEY!</div>}
+      logo={<span>Logo</span>}
     />
   </Story>
-</Preview>
\ No newline at end of file
+</Preview>
+

From 0b0d0308031e6388cda389e9eb505abcbf1df449 Mon Sep 17 00:00:00 2001
From: Joey Connor <wildtangent@users.noreply.github.com>
Date: Fri, 31 Jan 2025 13:41:48 +0000
Subject: [PATCH 6/9] Update components/header/src/Header.tsx

Co-authored-by: Daniel A.C. Martin <daniel-ac-martin@users.noreply.github.com>
---
 components/header/src/Header.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/header/src/Header.tsx b/components/header/src/Header.tsx
index 9d91b8e3d..c6ec095b1 100644
--- a/components/header/src/Header.tsx
+++ b/components/header/src/Header.tsx
@@ -35,8 +35,8 @@ export type HeaderProps = StandardProps & {
   signOutHref?: string
   /** Sign out link text */
   signOutText?: string
-  /** Logo ReactNode or null */
-  logo?: ReactNode | null
+  /** Custom logo, use null to remove */
+  logo?: ReactNode
 };
 
 const departmentMap: Record<string, string> = {

From 6083e7acdc423dde0d7ec3df63e2fca254fabf0f Mon Sep 17 00:00:00 2001
From: Joey Connor <wildtangent@users.noreply.github.com>
Date: Fri, 31 Jan 2025 13:42:40 +0000
Subject: [PATCH 7/9] Update components/header/src/Header.tsx

Co-authored-by: Daniel A.C. Martin <daniel-ac-martin@users.noreply.github.com>
---
 components/header/src/Header.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/components/header/src/Header.tsx b/components/header/src/Header.tsx
index c6ec095b1..0e8f74004 100644
--- a/components/header/src/Header.tsx
+++ b/components/header/src/Header.tsx
@@ -112,12 +112,11 @@ export const Header: FC<HeaderProps> = ({
   // 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
-  }
+  const logo = (
+    _logo !== undefined
+    ? _logo
+    : (govUK ? crownLogo : coatLogo)
+  );
 
   return (
     <header {...attrs} className={classes()} data-module="govuk-header">

From 1011b5a7c27d8c83ac914aa280089785a4d69c49 Mon Sep 17 00:00:00 2001
From: Joey Connor <wildtangent@users.noreply.github.com>
Date: Fri, 31 Jan 2025 13:42:50 +0000
Subject: [PATCH 8/9] Update components/header/src/Header.tsx

Co-authored-by: Daniel A.C. Martin <daniel-ac-martin@users.noreply.github.com>
---
 components/header/src/Header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/header/src/Header.tsx b/components/header/src/Header.tsx
index 0e8f74004..c1a4f1239 100644
--- a/components/header/src/Header.tsx
+++ b/components/header/src/Header.tsx
@@ -128,7 +128,7 @@ export const Header: FC<HeaderProps> = ({
               ? headerLogo
               : (
                 <Fragment>
-                  {headerLogo}
+                  {logo}
                   <span className={classes('logotype-text')}>
                     {orgText}
                   </span>

From 7e1e2555d96cc14e6a61b1af95dc29d5094e09ad Mon Sep 17 00:00:00 2001
From: Joey Connor <wildtangent@users.noreply.github.com>
Date: Fri, 31 Jan 2025 13:43:00 +0000
Subject: [PATCH 9/9] Update components/header/src/Header.tsx

Co-authored-by: Daniel A.C. Martin <daniel-ac-martin@users.noreply.github.com>
---
 components/header/src/Header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/header/src/Header.tsx b/components/header/src/Header.tsx
index c1a4f1239..de2c1981b 100644
--- a/components/header/src/Header.tsx
+++ b/components/header/src/Header.tsx
@@ -125,7 +125,7 @@ export const Header: FC<HeaderProps> = ({
           <A href={orgHref} classModifiers={[ 'homepage', (orgText && orgText.length > 9) ? 'small' : undefined ]}>
             {
               govUK
-              ? headerLogo
+              ? logo
               : (
                 <Fragment>
                   {logo}