Update header for NHS.UK frontend v10.0.0

Author: colinrotherham

src/components/navigation/header/Header.tsx

@@ -1,140 +1,112 @@
 'use client';
-import React, { FC, HTMLProps, useContext, useState, useEffect, useMemo, useRef } from 'react';
+import React, { HTMLProps, useState, useEffect, useMemo, useRef, Children } from 'react';
 import classNames from 'classnames';
-import NHSLogo, { NHSLogoNavProps } from './components/NHSLogo';
-import OrganisationalLogo, { OrganisationalLogoProps } from './components/OrganisationalLogo';
+import { Container } from '@components/layout';
+import { childIsOfComponentType } from '@util/types/TypeGuards';
 import HeaderContext, { IHeaderContext } from './HeaderContext';
+import Account from './components/Account';
+import AccountItem from './components/AccountItem';
+import Logo from './components/Logo';
+import Navigation from './components/Navigation';
+import NavigationItem from './components/NavigationItem';
 import Search from './components/Search';
-import Nav from './components/Nav';
-import NavItem from './components/NavItem';
-import NavDropdownMenu from './components/NavDropdownMenu';
-import { Container } from '@components/layout';
-import Content from './components/Content';
-import TransactionalServiceName from './components/TransactionalServiceName';
+import ServiceName from './components/ServiceName';
 import { Header } from 'nhsuk-frontend';
 
-const HeaderLogo: FC<OrganisationalLogoProps & NHSLogoNavProps> = (props) => {
-  const { orgName } = useContext<IHeaderContext>(HeaderContext);
-  if (orgName) {
-    return <OrganisationalLogo {...props} />;
-  }
-  return <NHSLogo {...props} />;
-};
-
-const HeaderContainer: FC<HTMLProps<HTMLDivElement>> = ({ className, ...rest }) => (
-  <Container className={classNames('nhsuk-header__container', className)} {...rest} />
-);
-
-interface HeaderProps extends HTMLProps<HTMLDivElement> {
-  transactional?: boolean;
-  orgName?: string;
-  orgSplit?: string;
-  orgDescriptor?: string;
-  serviceName?: string;
-  white?: boolean;
+interface HeaderProps
+  extends HTMLProps<HTMLDivElement>,
+    Pick<IHeaderContext, 'logo' | 'service' | 'organisation'> {
+  containerClasses?: string;
 }
 
-const HeaderComponent = ({
-  className,
-  children,
-  transactional,
-  orgName,
-  orgSplit,
-  orgDescriptor,
-  role = 'banner',
-  serviceName,
-  white,
-  ...rest
-}: HeaderProps) => {
+const HeaderComponent = ({ className, containerClasses, children, ...rest }: HeaderProps) => {
   const moduleRef = useRef<HTMLDivElement>(null);
 
-  const [hasMenuToggle, setHasMenuToggle] = useState(false);
-  const [hasSearch, setHasSearch] = useState(false);
-  const [hasServiceName, setHasServiceName] = useState(false);
+  const [logo, setLogo] = useState(rest.logo);
+  const [service, setService] = useState(rest.service);
+  const [organisation, setOrganisation] = useState(rest.organisation);
   const [instance, setInstance] = useState<Header>();
-  const [menuOpen, setMenuOpen] = useState(false);
 
   useEffect(() => {
-    if (!moduleRef.current || instance) {
+    if (!rest.logo) {
       return;
     }
 
-    setInstance(new Header(moduleRef.current));
-  }, [moduleRef, instance]);
+    setLogo(rest.logo);
+    return () => setLogo(undefined);
+  }, [rest.logo]);
+
+  useEffect(() => {
+    if (!rest.service) {
+      return;
+    }
 
-  const setMenuToggle = (toggle: boolean): void => {
-    setHasMenuToggle(toggle);
-  };
+    setService(rest.service);
+    return () => setService(undefined);
+  }, [rest.service]);
 
-  const setSearch = (toggle: boolean): void => {
-    setHasSearch(toggle);
-  };
+  useEffect(() => {
+    if (!rest.organisation) {
+      return;
+    }
 
-  const toggleMenu = (): void => {
-    setMenuOpen(!menuOpen);
-  };
+    setOrganisation(rest.organisation);
+    return () => setOrganisation(undefined);
+  }, [rest.organisation]);
 
-  const setServiceName = (toggle: boolean): void => {
-    setHasServiceName(toggle);
-  };
+  useEffect(() => {
+    if (!moduleRef.current || instance) {
+      return;
+    }
+
+    setInstance(new Header(moduleRef.current));
+  }, [moduleRef, instance]);
 
   const contextValue: IHeaderContext = useMemo(() => {
     return {
-      orgName,
-      orgSplit,
-      orgDescriptor,
-      serviceName,
-      hasSearch,
-      hasMenuToggle,
-      hasServiceName,
-      setMenuToggle,
-      setSearch,
-      setServiceName,
-      toggleMenu,
-      menuOpen,
-      transactional: transactional ?? false,
+      logo,
+      service,
+      organisation,
+      setLogo,
+      setService,
+      setOrganisation,
     };
-  }, [
-    orgName,
-    orgSplit,
-    orgDescriptor,
-    serviceName,
-    hasSearch,
-    hasMenuToggle,
-    hasServiceName,
-    setMenuToggle,
-    setSearch,
-    setServiceName,
-    toggleMenu,
-    menuOpen,
-    transactional,
-  ]);
+  }, [logo, service, organisation]);
+
+  const items = Children.toArray(children);
+  const [childLogo] = items.filter((child) => childIsOfComponentType(child, Logo));
+  const [childSearch] = items.filter((child) => childIsOfComponentType(child, Search));
+  const [childNavigation] = items.filter((child) => childIsOfComponentType(child, Navigation));
+  const [childAccount] = items.filter((child) => childIsOfComponentType(child, Account));
 
   return (
     <header
       className={classNames(
         'nhsuk-header',
-        { 'nhsuk-header__transactional': transactional },
-        { 'nhsuk-header--organisation': orgName },
-        { 'nhsuk-header--white': white },
+        { 'nhsuk-header--organisation': organisation },
         className,
       )}
-      role={role}
+      data-module="nhsuk-header"
+      role="banner"
       ref={moduleRef}
-      {...rest}
     >
-      <HeaderContext.Provider value={contextValue}>{children}</HeaderContext.Provider>
+      <HeaderContext.Provider value={contextValue}>
+        <Container className={classNames('nhsuk-header__container', containerClasses)}>
+          <ServiceName {...service}>{childLogo}</ServiceName>
+          {childSearch}
+          {childAccount}
+        </Container>
+        {childNavigation}
+      </HeaderContext.Provider>
     </header>
   );
 };
 
-HeaderComponent.Logo = HeaderLogo;
+HeaderComponent.Account = Account;
+HeaderComponent.AccountItem = AccountItem;
+HeaderComponent.Logo = Logo;
 HeaderComponent.Search = Search;
-HeaderComponent.Nav = Nav;
-HeaderComponent.NavItem = NavItem;
-HeaderComponent.NavDropdownMenu = NavDropdownMenu;
-HeaderComponent.Container = HeaderContainer;
-HeaderComponent.Content = Content;
-HeaderComponent.ServiceName = TransactionalServiceName;
+HeaderComponent.Navigation = Navigation;
+HeaderComponent.NavigationItem = NavigationItem;
 
 export default HeaderComponent;

src/components/navigation/header/HeaderContext.ts

@@ -1,34 +1,31 @@
-import { createContext } from 'react';
+import { createContext, type Dispatch, type SetStateAction } from 'react';
 
 export interface IHeaderContext {
-  orgName: string | undefined;
-  serviceName: string | undefined;
-  orgSplit: string | undefined;
-  orgDescriptor: string | undefined;
-  setSearch: (toggle: boolean) => void;
-  setMenuToggle: (toggle: boolean) => void;
-  setServiceName: (toggle: boolean) => void;
-  toggleMenu: () => void;
-  hasSearch: boolean;
-  hasMenuToggle: boolean;
-  hasServiceName: boolean;
-  menuOpen: boolean;
-  transactional: boolean;
+  logo?: {
+    href?: string;
+    src?: string;
+    'aria-label'?: string;
+  };
+  service?: {
+    href?: string;
+    text?: string;
+  };
+  organisation?: {
+    name?: string;
+    split?: string;
+    descriptor?: string;
+  };
+  setLogo: Dispatch<SetStateAction<IHeaderContext['logo']>>;
+  setService: Dispatch<SetStateAction<IHeaderContext['service']>>;
+  setOrganisation: Dispatch<SetStateAction<IHeaderContext['organisation']>>;
 }
 
 export default createContext<IHeaderContext>({
   /* eslint-disable @typescript-eslint/no-empty-function */
-  orgName: undefined,
-  serviceName: undefined,
-  orgSplit: undefined,
-  orgDescriptor: undefined,
-  setSearch: () => {},
-  setMenuToggle: () => {},
-  setServiceName: () => {},
-  hasSearch: false,
-  hasMenuToggle: false,
-  hasServiceName: false,
-  toggleMenu: () => {},
-  menuOpen: false,
-  transactional: false,
+  logo: undefined,
+  service: undefined,
+  organisation: undefined,
+  setLogo: () => {},
+  setService: () => {},
+  setOrganisation: () => {},
 });