Merge pull request #57 from simonireilly/issue/56-nav-bar-refactor

Decompose Components into smaller functional components

Author: Luke Pearson

src/components/header/Header.tsx

@@ -6,10 +6,14 @@ import HeaderContext, { IHeaderContext } from './HeaderContext';
 import Search from './components/Search';
 import Nav from './components/Nav';
 import NavItem from './components/NavItem';
+import NavItemList from './components/NavItemList';
+import NavMenuClose from './components/NavMenuClose';
 import { Container } from '../layout';
 import Content from './components/Content';
 import MenuToggle from './components/MenuToggle';
 import TransactionalServiceName from './components/TransactionalServiceName';
+import NavTitle from './components/NavTitle';
+import NavContainer from './components/NavContainer';
 
 const BaseHeaderLogo: React.FC<OrganisationalLogoProps & NHSLogoNavProps> = props => {
   const { orgName } = useContext<IHeaderContext>(HeaderContext);
@@ -46,8 +50,16 @@ class Header extends PureComponent<HeaderProps, HeaderState> {
 
   static Nav = Nav;
 
+  static NavTitle = NavTitle;
+
+  static NavContainer = NavContainer;
+
+  static NavItemList = NavItemList;
+
   static NavItem = NavItem;
 
+  static NavMenuClose = NavMenuClose;
+
   static Container = HeaderContainer;
 
   static Content = Content;

src/components/header/components/MenuToggle.tsx

@@ -1,6 +1,6 @@
 import React, { HTMLProps, useContext, useEffect, MouseEvent } from 'react';
-import HeaderContext, { IHeaderContext } from '../HeaderContext';
 import classNames from 'classnames';
+import HeaderContext, { IHeaderContext } from '../HeaderContext';
 
 export interface MenuToggleProps extends HTMLProps<HTMLButtonElement> {
   type?: 'button' | 'submit' | 'reset';

src/components/header/components/NavContainer.tsx

@@ -0,0 +1,30 @@
+import React, { HTMLProps, useContext } from 'react';
+import classNames from 'classnames';
+import { Container } from '../../layout';
+import HeaderContext, { IHeaderContext } from '../HeaderContext';
+
+const NavContainer: React.FC<HTMLProps<HTMLDivElement>> = ({
+  className,
+  children,
+  open,
+  ...rest
+}) => {
+  const { menuOpen } = useContext<IHeaderContext>(HeaderContext);
+
+  return (
+    <nav
+      className={classNames(
+        'nhsuk-header__navigation',
+        { 'js-show': open !== undefined ? open : menuOpen },
+        className,
+      )}
+      {...rest}
+    >
+      <Container>
+        {children}
+      </Container>
+    </nav>
+  );
+};
+
+export default NavContainer;

src/components/header/components/NavItemList.tsx

@@ -0,0 +1,20 @@
+import React, { HTMLProps } from 'react';
+import classNames from 'classnames';
+
+const NavItemList: React.FC<HTMLProps<HTMLUListElement>> = ({
+  children,
+  className,
+  ...rest
+}) => (
+  <ul
+    className={classNames(
+      'nhsuk-header__navigation-list',
+      className,
+    )}
+    {...rest}
+  >
+    {children}
+  </ul>
+);
+
+export default NavItemList;

src/components/header/components/NavMenuClose.tsx

@@ -0,0 +1,30 @@
+import React, { HTMLProps, useContext } from 'react';
+import classNames from 'classnames';
+import { Close as CloseIcon } from '../../icons';
+import HeaderContext, { IHeaderContext } from '../HeaderContext';
+
+const NavMenuClose: React.FC<HTMLProps<HTMLButtonElement>> = ({
+  className,
+  ...rest
+}) => {
+  const { toggleMenu } = useContext<IHeaderContext>(HeaderContext);
+
+  return (
+    <button
+      className={
+        classNames(
+          'nhsuk-header__navigation-close',
+          className,
+        )
+      }
+      {...rest}
+      type="button"
+      onClick={toggleMenu}
+    >
+      <CloseIcon />
+      <span className="nhsuk-u-visually-hidden">Close menu</span>
+    </button>
+  );
+};
+
+export default NavMenuClose;

src/components/header/components/NavTitle.tsx

@@ -0,0 +1,20 @@
+import React, { HTMLProps } from 'react';
+import classNames from 'classnames';
+
+const NavTitle: React.FC<HTMLProps<HTMLParagraphElement>> = ({
+  children,
+  className,
+  ...rest
+}) => (
+  <p
+    className={classNames(
+      'nhsuk-header__navigation-title',
+      className,
+    )}
+    {...rest}
+  >
+    {children}
+  </p>
+);
+
+export default NavTitle;

stories/Header.stories.tsx

@@ -163,4 +163,36 @@ stories
         </Header.Nav>
       </Header>
     );
-  });
+  })
+  .add('Header with custom NavMenuClose and NavItemList component', () => (
+    <Header
+      orgName="Anytown Anyplace"
+      orgSplit="Anywhere"
+      orgDescriptor="NHS Foundation Trust"
+      white
+    >
+      <Header.Container>
+        <Header.Logo href="/" />
+        <Header.Content>
+          <Header.MenuToggle />
+          <Header.Search />
+        </Header.Content>
+      </Header.Container>
+      <Header.NavContainer>
+        <Header.NavTitle>
+          <span>Menu</span>
+          <Header.NavMenuClose />
+        </Header.NavTitle>
+        <Header.NavItemList>
+          <Header.NavItem href="/" mobileOnly>
+            Home
+          </Header.NavItem>
+          <Header.NavItem href="/conditions">Health A-Z</Header.NavItem>
+          <Header.NavItem href="/live-well">Live Well</Header.NavItem>
+          <Header.NavItem href="/social-care-and-support">Care and support</Header.NavItem>
+          <Header.NavItem href="/news">Health news</Header.NavItem>
+          <Header.NavItem href="/service-search">Services near you</Header.NavItem>
+        </Header.NavItemList>
+      </Header.NavContainer>
+    </Header>
+  ));