NCRS-3933 add header with logo on same row as nav items

.storybook/_storybook.scss

@@ -43,3 +43,10 @@
 .ribbonlink-demo {
   padding: 20px;
 }
+
+.header-with-logo-demo {
+  ul {
+      list-style-type: none;
+      padding-left: 20px;
+  }
+}

jest.config.js

@@ -2,6 +2,7 @@ module.exports = {
   roots: ['./src'],
   transform: {
     '^.+\\.tsx?$': 'ts-jest',
+    "^.+\\.(js)$": "babel-jest"
   },
   testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nhsuk-react-components-extensions",
-  "version": "2.0.0-beta.1",
+  "version": "2.1.0-test.3",
   "author": {
     "email": "thomas.judd-cooper1@nhs.net",
     "name": "Thomas Judd-Cooper",
@@ -31,6 +31,7 @@
     "@types/react-input-mask": "^3.0.5",
     "@typescript-eslint/eslint-plugin": "^8.13.0",
     "@typescript-eslint/parser": "^8.13.0",
+    "babel-jest": "^29.7.0",
     "babel-loader": "^8.0.0",
     "css-loader": "^5.0.0",
     "eslint": "^9.14.0",
@@ -82,7 +83,7 @@
     "build:lib": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline && tsc --emitDeclarationOnly",
     "build:sass": "sass src:css",
     "cleanup": "bash scripts/cleanup.sh",
-    "lint": "stylelint src/**/*.scss && eslint --fix src/*.ts src/components/**/*.ts src/components/**/*.tsx",
+    "lint": "stylelint --fix src/**/*.scss src/**/**/*.scss && eslint --fix src/*.ts src/components/**/*.ts src/components/**/*.tsx",
     "prebuild": "yarn lint && yarn test --coverage && yarn cleanup",
     "storybook": "start-storybook",
     "test": "jest",

src/__tests__/index.test.ts

@@ -4,6 +4,7 @@ describe('Index', () => {
   it('contains all expected elements', () => {
     expect(Object.keys(index)).toEqual([
       'AccordionMenu',
+      'HeaderWithLogo',
       'MaskedInput',
       'FormGroup',
       'Label',

src/all.scss

@@ -11,3 +11,5 @@
 @use './components/ribbon-link/RibbonLink';
 @use './components/timeline/Timeline';
 
+@use './components/header-with-logo/headerWithLogo'
+

src/components.scss

@@ -10,3 +10,5 @@
 @use './components/tooltip/Tooltip';
 @use './components/ribbon-link/RibbonLink';
 @use './components/timeline/Timeline';
+
+@use './components/header-with-logo/headerWithLogo';

src/components/header-with-logo/HeaderContext.ts

@@ -0,0 +1,34 @@
+import { 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;
+  menuOpen: boolean;
+  transactional: boolean;
+}
+
+export default createContext<IHeaderContext>({
+
+  orgName: undefined,
+  serviceName: undefined,
+  orgSplit: undefined,
+  orgDescriptor: undefined,
+  setSearch: () => {},
+  setMenuToggle: () => {},
+  setServiceName: () => {},
+  hasSearch: false,
+  hasMenuToggle: false,
+  hasServiceName: false,
+  toggleMenu: () => {},
+  menuOpen: false,
+  transactional: false,
+});

src/components/header-with-logo/HeaderWithLogo.tsx

@@ -0,0 +1,133 @@
+import React, { FC, HTMLProps, useContext, useState, useEffect, useMemo } from 'react';
+import classNames from 'classnames';
+import NHSLogo, { NHSLogoNavProps } from './components/LocalNHSLogo';
+import OrganisationalLogo, { OrganisationalLogoProps } from './components/LocalOrganisationalLogo';
+import HeaderContext, { IHeaderContext } from './HeaderContext';
+import Search from './components/LocalSearch';
+import Nav from './components/LocalNav';
+import NavItem from './components/LocalNavItem';
+import NavDropdownMenu from './components/LocalNavDropdownMenu';
+import { Container } from 'nhsuk-react-components';
+import Content from './components/LocalContent';
+import TransactionalServiceName from './components/LocalTransactionalServiceName';
+import HeaderJs from './header';
+
+const BaseHeaderLogo: 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;
+}
+
+const HeaderWithLogo = ({
+  className,
+  children,
+  transactional,
+  orgName,
+  orgSplit,
+  orgDescriptor,
+  role = 'banner',
+  serviceName,
+  white,
+  ...rest
+}: HeaderProps) => {
+
+  const [hasMenuToggle, setHasMenuToggle] = useState(false);
+  const [hasSearch, setHasSearch] = useState(false);
+  const [hasServiceName, setHasServiceName] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  useEffect(() => {
+    HeaderJs();
+  }, []);
+
+  const setMenuToggle = (toggle: boolean): void => {
+    setHasMenuToggle(toggle);
+  };
+
+  const setSearch = (toggle: boolean): void => {
+    setHasSearch(toggle);
+  };
+
+  const toggleMenu = (): void => {
+    setMenuOpen(!menuOpen);
+  };
+
+  const setServiceName = (toggle: boolean): void => {
+    setHasServiceName(toggle);
+  };
+
+  const contextValue: IHeaderContext = useMemo(() => {
+    return {
+      orgName,
+      orgSplit,
+      orgDescriptor,
+      serviceName,
+      hasSearch,
+      hasMenuToggle,
+      hasServiceName,
+      setMenuToggle,
+      setSearch,
+      setServiceName,
+      toggleMenu,
+      menuOpen,
+      transactional: transactional ?? false,
+    };
+  }, [
+    orgName,
+    orgSplit,
+    orgDescriptor,
+    serviceName,
+    hasSearch,
+    hasMenuToggle,
+    hasServiceName,
+    setMenuToggle,
+    setSearch,
+    setServiceName,
+    toggleMenu,
+    menuOpen,
+    transactional,
+  ]);
+
+  return (
+    <header
+      className={classNames(
+        'nhsuk-header',
+        { 'nhsuk-header__transactional': transactional },
+        { 'nhsuk-header--organisation': orgName },
+        { 'nhsuk-header--white': white },
+        className,
+      )}
+      role={role}
+      {...rest}
+    >
+      <HeaderContext.Provider value={contextValue}>{children}</HeaderContext.Provider>
+    </header>
+  );
+
+};
+
+HeaderWithLogo.Logo = BaseHeaderLogo;
+HeaderWithLogo.Search = Search;
+HeaderWithLogo.Nav = Nav;
+HeaderWithLogo.NavItem = NavItem;
+HeaderWithLogo.NavDropdownMenu = NavDropdownMenu;
+HeaderWithLogo.Container = HeaderContainer;
+HeaderWithLogo.Content = Content;
+HeaderWithLogo.ServiceName = TransactionalServiceName;
+
+export default HeaderWithLogo;