Update header for NHS.UK frontend v10.0.0

Author: colinrotherham

src/components/navigation/header/Header.tsx

@@ -1,140 +1,149 @@
 'use client';
-import React, { FC, HTMLProps, useContext, useState, useEffect, useMemo, useRef } from 'react';
+import React, {
+  ComponentPropsWithoutRef,
+  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;
+interface HeaderProps extends ComponentPropsWithoutRef<'div'> {
+  containerClasses?: string;
+  logo?: IHeaderContext['logoProps'];
+  service?: IHeaderContext['serviceProps'];
+  organisation?: IHeaderContext['organisationProps'];
   white?: boolean;
 }
 
 const HeaderComponent = ({
   className,
+  containerClasses,
   children,
-  transactional,
-  orgName,
-  orgSplit,
-  orgDescriptor,
-  role = 'banner',
-  serviceName,
+  logo,
+  service,
+  organisation,
   white,
   ...rest
 }: HeaderProps) => {
   const moduleRef = useRef<HTMLDivElement>(null);
 
-  const [hasMenuToggle, setHasMenuToggle] = useState(false);
-  const [hasSearch, setHasSearch] = useState(false);
-  const [hasServiceName, setHasServiceName] = useState(false);
+  const [logoProps, setLogoProps] = useState(logo);
+  const [serviceProps, setServiceProps] = useState(service);
+  const [organisationProps, setOrganisationProps] = useState(organisation);
   const [instance, setInstance] = useState<Header>();
   const [menuOpen, setMenuOpen] = useState(false);
 
   useEffect(() => {
-    if (!moduleRef.current || instance) {
+    if (!logo) {
       return;
     }
 
-    setInstance(new Header(moduleRef.current));
-  }, [moduleRef, instance]);
+    setLogoProps(logo);
+    return () => setLogoProps(undefined);
+  }, [logo]);
+
+  useEffect(() => {
+    if (!service) {
+      return;
+    }
+
+    setServiceProps(service);
+    return () => setServiceProps(undefined);
+  }, [service]);
 
-  const setMenuToggle = (toggle: boolean): void => {
-    setHasMenuToggle(toggle);
-  };
+  useEffect(() => {
+    if (!organisation) {
+      return;
+    }
+
+    setOrganisationProps(organisation);
+    return () => setOrganisationProps(undefined);
+  }, [organisation]);
+
+  useEffect(() => {
+    if (!moduleRef.current || instance) {
+      if (!instance) {
+        return;
+      }
+
+      // Sync menu open state
+      if (menuOpen && !instance.menuIsOpen) {
+        instance.openMenu();
+      }
 
-  const setSearch = (toggle: boolean): void => {
-    setHasSearch(toggle);
-  };
+      // Sync menu close state
+      if (!menuOpen && instance.menuIsOpen) {
+        instance.closeMenu();
+      }
 
-  const toggleMenu = (): void => {
-    setMenuOpen(!menuOpen);
-  };
+      return;
+    }
 
-  const setServiceName = (toggle: boolean): void => {
-    setHasServiceName(toggle);
-  };
+    setInstance(new Header(moduleRef.current));
+  }, [moduleRef, instance, menuOpen]);
 
   const contextValue: IHeaderContext = useMemo(() => {
     return {
-      orgName,
-      orgSplit,
-      orgDescriptor,
-      serviceName,
-      hasSearch,
-      hasMenuToggle,
-      hasServiceName,
-      setMenuToggle,
-      setSearch,
-      setServiceName,
-      toggleMenu,
+      logoProps,
+      serviceProps,
+      organisationProps,
       menuOpen,
-      transactional: transactional ?? false,
+      setMenuOpen,
+      setLogoProps,
+      setServiceProps,
+      setOrganisationProps,
     };
-  }, [
-    orgName,
-    orgSplit,
-    orgDescriptor,
-    serviceName,
-    hasSearch,
-    hasMenuToggle,
-    hasServiceName,
-    setMenuToggle,
-    setSearch,
-    setServiceName,
-    toggleMenu,
-    menuOpen,
-    transactional,
-  ]);
+  }, [logoProps, serviceProps, organisationProps]);
+
+  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': !!organisationProps },
+        { 'nhsuk-header--white': !!white },
         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 {...serviceProps}>{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,36 @@
-import { createContext } from 'react';
+import { Dispatch, SetStateAction, createContext } 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;
+  logoProps?: {
+    href?: string;
+    src?: string;
+    alt?: string;
+    'aria-label'?: string;
+  };
+  serviceProps?: {
+    href?: string;
+    text?: string;
+  };
+  organisationProps?: {
+    name?: string;
+    split?: string;
+    descriptor?: string;
+  };
   menuOpen: boolean;
-  transactional: boolean;
+  setMenuOpen: Dispatch<SetStateAction<IHeaderContext['menuOpen']>>;
+  setLogoProps: Dispatch<SetStateAction<IHeaderContext['logoProps']>>;
+  setServiceProps: Dispatch<SetStateAction<IHeaderContext['serviceProps']>>;
+  setOrganisationProps: Dispatch<SetStateAction<IHeaderContext['organisationProps']>>;
 }
 
 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: () => {},
+  logoProps: undefined,
+  serviceProps: undefined,
+  organisationProps: undefined,
   menuOpen: false,
-  transactional: false,
+  setMenuOpen: () => {},
+  setLogoProps: () => {},
+  setServiceProps: () => {},
+  setOrganisationProps: () => {},
 });