Remove unnnecessary header context

Author: colinrotherham

docs/upgrade-to-6.0.md

@@ -239,22 +239,26 @@ The custom `autoSelectNext` prop is no longer supported.
 
 The updated header component from NHS.UK frontend v10.x has been added. You will need to make the following changes:
 
+- move `Header.Logo` props to `<Header logo={{ href: '/' }}>`
+- move `Header.ServiceName` props to `<Header service={{ text: "Manage patients" }}>`
 - remove the wrapping `Header.Container` component
 - remove the wrapping `Header.Content` component
+- remove the automatically created `Header.Logo` component
 - remove the automatically created `Header.ServiceName` component
 - remove the automatically created `Header.NavDropdownMenu` component
 - rename the `Header.Nav` component to `Header.Navigation`
 - rename the `Header.NavItem` component to `Header.NavigationItem`
 
 ```patch
-  <Header>
+- <Header>
++ <Header service={{ text: "Manage patients", href: '/' }}>
 -   <Header.Container>
 -     <Header.Logo href="/" />
+-     <Header.ServiceName href="/">Manage patients</Header.ServiceName>
 -     <Header.Content>
 -       <Header.Search />
 -     </Header.Content>
 -   </Header.Container>
-+   <Header.Logo href="/" />
 +   <Header.Search />
 -   <Header.Nav>
 -     <Header.NavItem href="#">Example 1</Header.NavItem>

src/components/navigation/header/Header.tsx

@@ -19,16 +19,14 @@ import {
   HeaderNavigationItem,
   HeaderSearch,
   HeaderServiceName,
+  type HeaderServiceNameProps,
 } from './components/index.js';
 import { HeaderContext, type IHeaderContext } from './HeaderContext.js';
 import { Container } from '#components/layout/index.js';
 import { childIsOfComponentType } from '#util/types/index.js';
 
-export interface HeaderProps extends ComponentPropsWithoutRef<'div'> {
+export interface HeaderProps extends ComponentPropsWithoutRef<'div'>, HeaderServiceNameProps {
   containerClasses?: string;
-  logo?: IHeaderContext['logoProps'];
-  service?: IHeaderContext['serviceProps'];
-  organisation?: IHeaderContext['organisationProps'];
   white?: boolean;
 }
 
@@ -37,41 +35,10 @@ const HeaderComponent = forwardRef<HTMLElement, HeaderProps>((props, forwardedRe
     props;
 
   const [moduleRef] = useState(() => forwardedRef || createRef<HTMLElement>());
-
-  const [logoProps, setLogoProps] = useState(logo);
-  const [serviceProps, setServiceProps] = useState(service);
-  const [organisationProps, setOrganisationProps] = useState(organisation);
   const [instanceError, setInstanceError] = useState<Error>();
   const [instance, setInstance] = useState<HeaderModule>();
   const [menuOpen, setMenuOpen] = useState(false);
 
-  useEffect(() => {
-    if (!logo) {
-      return;
-    }
-
-    setLogoProps(logo);
-    return () => setLogoProps(undefined);
-  }, [logo]);
-
-  useEffect(() => {
-    if (!service) {
-      return;
-    }
-
-    setServiceProps(service);
-    return () => setServiceProps(undefined);
-  }, [service]);
-
-  useEffect(() => {
-    if (!organisation) {
-      return;
-    }
-
-    setOrganisationProps(organisation);
-    return () => setOrganisationProps(undefined);
-  }, [organisation]);
-
   useEffect(() => {
     if (!('current' in moduleRef) || !moduleRef.current || instance) {
       if (!instance) {
@@ -97,20 +64,10 @@ const HeaderComponent = forwardRef<HTMLElement, HeaderProps>((props, forwardedRe
   }, [moduleRef, instance, menuOpen]);
 
   const contextValue: IHeaderContext = useMemo(() => {
-    return {
-      logoProps,
-      serviceProps,
-      organisationProps,
-      menuOpen,
-      setMenuOpen,
-      setLogoProps,
-      setServiceProps,
-      setOrganisationProps,
-    };
-  }, [logoProps, serviceProps, organisationProps, menuOpen]);
+    return { menuOpen, setMenuOpen };
+  }, [menuOpen]);
 
   const items = Children.toArray(children);
-  const childLogo = items.find((child) => childIsOfComponentType(child, HeaderLogo));
   const childSearch = items.find((child) => childIsOfComponentType(child, HeaderSearch));
   const childNavigation = items.find((child) => childIsOfComponentType(child, HeaderNavigation));
   const childAccount = items.find((child) => childIsOfComponentType(child, HeaderAccount));
@@ -123,7 +80,7 @@ const HeaderComponent = forwardRef<HTMLElement, HeaderProps>((props, forwardedRe
     <header
       className={classNames(
         'nhsuk-header',
-        { 'nhsuk-header--organisation': !!organisationProps },
+        { 'nhsuk-header--organisation': !!organisation },
         { 'nhsuk-header--white': !!white },
         className,
       )}
@@ -134,7 +91,9 @@ const HeaderComponent = forwardRef<HTMLElement, HeaderProps>((props, forwardedRe
     >
       <HeaderContext.Provider value={contextValue}>
         <Container className={classNames('nhsuk-header__container', containerClasses)}>
-          <HeaderServiceName {...serviceProps}>{childLogo}</HeaderServiceName>
+          <HeaderServiceName logo={logo} organisation={organisation} service={service}>
+            <HeaderLogo logo={logo} organisation={organisation} />
+          </HeaderServiceName>
           {childSearch}
           {childAccount}
         </Container>
@@ -149,7 +108,6 @@ HeaderComponent.displayName = 'Header';
 export const Header = Object.assign(HeaderComponent, {
   Account: HeaderAccount,
   AccountItem: HeaderAccountItem,
-  Logo: HeaderLogo,
   Search: HeaderSearch,
   Navigation: HeaderNavigation,
   NavigationItem: HeaderNavigationItem,

src/components/navigation/header/HeaderContext.ts

@@ -3,35 +3,11 @@
 import { createContext, type Dispatch, type SetStateAction } from 'react';
 
 export interface IHeaderContext {
-  logoProps?: {
-    'href'?: string;
-    'src'?: string;
-    'alt'?: string;
-    'aria-label'?: string;
-  };
-  serviceProps?: {
-    href?: string;
-    text?: string;
-  };
-  organisationProps?: {
-    name?: string;
-    split?: string;
-    descriptor?: string;
-  };
   menuOpen: boolean;
   setMenuOpen: Dispatch<SetStateAction<IHeaderContext['menuOpen']>>;
-  setLogoProps: Dispatch<SetStateAction<IHeaderContext['logoProps']>>;
-  setServiceProps: Dispatch<SetStateAction<IHeaderContext['serviceProps']>>;
-  setOrganisationProps: Dispatch<SetStateAction<IHeaderContext['organisationProps']>>;
 }
 
 export const HeaderContext = createContext<IHeaderContext>({
-  logoProps: undefined,
-  serviceProps: undefined,
-  organisationProps: undefined,
   menuOpen: false,
   setMenuOpen: () => {},
-  setLogoProps: () => {},
-  setServiceProps: () => {},
-  setOrganisationProps: () => {},
 });

src/components/navigation/header/__tests__/Header.test.tsx

@@ -5,8 +5,7 @@ import { renderClient, renderServer } from '#util/components';
 describe('Header', () => {
   it('matches snapshot', async () => {
     const { container } = await renderClient(
-      <Header>
-        <Header.Logo href="/" />
+      <Header logo={{ href: '/' }}>
         <Header.Search />
         <Header.Navigation>
           <Header.NavigationItem href="/conditions">Health A-Z</Header.NavigationItem>
@@ -27,8 +26,7 @@ describe('Header', () => {
 
   it('matches snapshot (via server)', async () => {
     const { container, element } = await renderServer(
-      <Header>
-        <Header.Logo href="/" />
+      <Header logo={{ href: '/' }}>
         <Header.Search />
         <Header.Navigation>
           <Header.NavigationItem href="/conditions">Health A-Z</Header.NavigationItem>
@@ -58,12 +56,9 @@ describe('Header', () => {
   it('forwards refs', async () => {
     const ref = createRef<HTMLElement>();
 
-    const { modules } = await renderClient(
-      <Header ref={ref}>
-        <Header.Logo href="/" />
-      </Header>,
-      { moduleName: 'nhsuk-header' },
-    );
+    const { modules } = await renderClient(<Header logo={{ href: '/' }} ref={ref} />, {
+      moduleName: 'nhsuk-header',
+    });
 
     const [headerEl] = modules;
 
@@ -106,12 +101,9 @@ describe('Header', () => {
 
   describe('Header.Logo', () => {
     it('renders logo only', async () => {
-      const { container } = await renderClient(
-        <Header>
-          <Header.Logo />
-        </Header>,
-        { moduleName: 'nhsuk-header' },
-      );
+      const { container } = await renderClient(<Header />, {
+        moduleName: 'nhsuk-header',
+      });
 
       const linkEl = container.querySelector('.nhsuk-header__service a');
       const logoEl = container.querySelector('.nhsuk-header__logo');
@@ -121,12 +113,9 @@ describe('Header', () => {
     });
 
     it('renders logo only (with link)', async () => {
-      const { container } = await renderClient(
-        <Header>
-          <Header.Logo href="/" />
-        </Header>,
-        { moduleName: 'nhsuk-header' },
-      );
+      const { container } = await renderClient(<Header logo={{ href: '/' }} />, {
+        moduleName: 'nhsuk-header',
+      });
 
       const linkEl = container.querySelector('.nhsuk-header__service a');
       const logoEl = container.querySelector('.nhsuk-header__logo');
@@ -138,9 +127,7 @@ describe('Header', () => {
 
     it('renders logo and organisation name', async () => {
       const { container } = await renderClient(
-        <Header organisation={{ name: 'Test organisation' }}>
-          <Header.Logo />
-        </Header>,
+        <Header organisation={{ name: 'Test organisation' }} />,
         { moduleName: 'nhsuk-header' },
       );
 
@@ -157,9 +144,7 @@ describe('Header', () => {
 
     it('renders logo (with link) and organisation name', async () => {
       const { container } = await renderClient(
-        <Header organisation={{ name: 'Test organisation' }}>
-          <Header.Logo href="/" />
-        </Header>,
+        <Header logo={{ href: '/' }} organisation={{ name: 'Test organisation' }} />,
         { moduleName: 'nhsuk-header' },
       );
 
@@ -177,9 +162,7 @@ describe('Header', () => {
 
     it('renders logo (custom src) and organisation name', async () => {
       const { container } = await renderClient(
-        <Header organisation={{ name: 'Test organisation' }}>
-          <Header.Logo src="custom.svg" />
-        </Header>,
+        <Header logo={{ src: 'custom.svg' }} organisation={{ name: 'Test organisation' }} />,
         { moduleName: 'nhsuk-header' },
       );
 
@@ -196,9 +179,10 @@ describe('Header', () => {
 
     it('renders logo (with link, custom src) and organisation name', async () => {
       const { container } = await renderClient(
-        <Header organisation={{ name: 'Test organisation' }}>
-          <Header.Logo href="/" src="custom.svg" />
-        </Header>,
+        <Header
+          logo={{ href: '/', src: 'custom.svg' }}
+          organisation={{ name: 'Test organisation' }}
+        />,
         { moduleName: 'nhsuk-header' },
       );
 
@@ -217,14 +201,13 @@ describe('Header', () => {
     it('renders logo (with link) and organisation name (split, with descriptor)', async () => {
       const { container } = await renderClient(
         <Header
+          logo={{ href: '/' }}
           organisation={{
             name: 'Anytown Anyplace',
             split: 'Anywhere',
             descriptor: 'NHS Foundation Trust',
           }}
-        >
-          <Header.Logo href="/" />
-        </Header>,
+        />,
         { moduleName: 'nhsuk-header' },
       );
 
@@ -245,7 +228,6 @@ describe('Header', () => {
     it('matches snapshot', async () => {
       const { container } = await renderClient(
         <Header>
-          <Header.Logo />
           <Header.Account>
             <Header.AccountItem href="#" icon={true}>
               [email protected]
@@ -267,7 +249,6 @@ describe('Header', () => {
 
       const { container } = await renderClient(
         <Header>
-          <Header.Logo />
           <Header.Account>
             <Header.AccountItem href="#" icon={true} ref={ref1}>
               [email protected]
@@ -305,7 +286,6 @@ describe('Header', () => {
 
       const { container } = await renderClient(
         <Header>
-          <Header.Logo />
           <Header.Account>
             <Header.AccountItem asElement={CustomLink} href="#" icon={true}>
               [email protected]

src/components/navigation/header/__tests__/__snapshots__/Header.test.tsx.snap

@@ -276,24 +276,30 @@ exports[`Header matches snapshot (via server): server 1`] = `
       <div
         class="nhsuk-header__service"
       >
-        <svg
-          aria-label="NHS"
-          class="nhsuk-header__logo"
-          focusable="false"
-          height="40"
-          role="img"
-          viewBox="0 0 200 80"
-          width="100"
-          xmlns="http://www.w3.org/2000/svg"
+        <a
+          aria-label="NHS homepage"
+          class="nhsuk-header__service-logo"
+          href="/"
         >
-          <title>
-            NHS
-          </title>
-          <path
-            d="M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z"
-            fill="currentcolor"
-          />
-        </svg>
+          <svg
+            aria-label="NHS"
+            class="nhsuk-header__logo"
+            focusable="false"
+            height="40"
+            role="img"
+            viewBox="0 0 200 80"
+            width="100"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <title>
+              NHS
+            </title>
+            <path
+              d="M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z"
+              fill="currentcolor"
+            />
+          </svg>
+        </a>
       </div>
       <search
         class="nhsuk-header__search"