Merge branch 'main' of github.com:NHSDigital/nhsuk-react-components into feature/storybook-6-upgrade

Thomas · Thomas · commit 180a3bf4120b · 2021-02-19T15:41:54.000Z
diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml
@@ -3,7 +3,7 @@ name: Build & Deploy Storybook
 on:
   push:
     branches:
-      - master
+      - main
 
 jobs:
   build-and-deploy:
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 NHS.UK Frontend ported to React
 
-[![GitHub Actions CI Status](https://github.com/NHSDigital/nhsuk-react-components/workflows/CI/badge.svg)](https://github.com/NHSDigital/nhsuk-react-components/actions?query=workflow%3A%22CI+Build%22+branch%3Amaster) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-airbnb-brightgreen.svg)](https://github.com/airbnb/javascript) [![Bundle Size](https://img.shields.io/bundlephobia/minzip/nhsuk-react-components.svg)](https://bundlephobia.com/result?p=nhsuk-react-components@1.0.0-rc.1)
+[![GitHub Actions CI Status](https://github.com/NHSDigital/nhsuk-react-components/workflows/CI/badge.svg)](https://github.com/NHSDigital/nhsuk-react-components/actions?query=workflow%3A%22CI+Build%22+branch%3Amain) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-airbnb-brightgreen.svg)](https://github.com/airbnb/javascript) [![Bundle Size](https://img.shields.io/bundlephobia/minzip/nhsuk-react-components.svg)](https://bundlephobia.com/result?p=nhsuk-react-components)
 
 ## Coming from 0.x?
 
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nhsuk-react-components",
-  "version": "1.2.6",
+  "version": "1.2.8",
   "author": {
     "email": "thomas.judd-cooper1@nhs.net",
     "name": "Thomas Judd-Cooper",
@@ -84,7 +84,8 @@
     "test:watch": "jest --watch",
     "lint": "eslint --fix -c .eslintrc.js --ext .ts --ext .tsx src/*.ts src/components/**/*.ts src/util/*.ts",
     "prebuild": "yarn lint && yarn test --coverage",
-    "build-storybook": "build-storybook --no-dll"
+    "build-storybook": "build-storybook --no-dll",
+    "prepare": "yarn build"
   },
   "files": [
     "dist",
diff --git a/src/components/action-link/ActionLink.tsx b/src/components/action-link/ActionLink.tsx
@@ -1,13 +1,19 @@
-import React, { HTMLProps } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import { ArrowRightCircle } from '../icons';
+import type { AsElementLink } from 'util/types/LinkTypes';
 
-const ActionLink: React.FC<HTMLProps<HTMLAnchorElement>> = ({ children, className, ...rest }) => (
+const ActionLink: React.FC<AsElementLink<HTMLAnchorElement>> = ({ 
+  children, 
+  asElement: Component = 'a', 
+  className, 
+  ...rest 
+}) => (
   <div className="nhsuk-action-link">
-    <a className={classNames('nhsuk-action-link__link', className)} {...rest}>
+    <Component className={classNames('nhsuk-action-link__link', className)} {...rest}>
       <ArrowRightCircle />
       <span className="nhsuk-action-link__text">{children}</span>
-    </a>
+    </Component>
   </div>
 );
 
diff --git a/src/components/back-link/BackLink.tsx b/src/components/back-link/BackLink.tsx
@@ -1,13 +1,18 @@
-import React, { HTMLProps } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import { ChevronLeft } from '../icons';
+import type { AsElementLink } from '../../util/types/LinkTypes';
 
-const BackLink: React.FC<HTMLProps<HTMLAnchorElement>> = ({ children, className, ...rest }) => (
+const BackLink: React.FC<AsElementLink<HTMLAnchorElement>> = ({ 
+  children, 
+  className, 
+  asElement: Component = 'a',
+  ...rest }) => (
   <div className="nhsuk-back-link">
-    <a className={classNames('nhsuk-back-link__link', className)} {...rest}>
+    <Component className={classNames('nhsuk-back-link__link', className)} {...rest}>
       <ChevronLeft />
       {children}
-    </a>
+    </Component>
   </div>
 );
 
diff --git a/src/components/breadcrumb/Breadcrumb.tsx b/src/components/breadcrumb/Breadcrumb.tsx
@@ -2,20 +2,21 @@
 import React, { HTMLProps, ReactNode } from 'react';
 import classNames from 'classnames';
 import { Container } from '../layout';
+import type { AsElementLink } from '../../util/types/LinkTypes';
 
-type Item = React.FC<HTMLProps<HTMLAnchorElement>>;
+type Item = React.FC<AsElementLink<HTMLAnchorElement>>;
 
-const Item: Item = ({ className, children, ...rest }) => (
+const Item: Item = ({ className, children, asElement: Component = 'a',  ...rest }) => (
   <li className="nhsuk-breadcrumb__item">
-    <a className={classNames('nhsuk-breadcrumb__link', className)} {...rest}>
+    <Component className={classNames('nhsuk-breadcrumb__link', className)} {...rest}>
       {children}
-    </a>
+    </Component>
   </li>
 );
 
-const Back: Item = ({ className, ...rest }) => (
+const Back: Item = ({ className, asElement: Component = 'a', ...rest }) => (
   <p className={classNames('nhsuk-breadcrumb__back', className)}>
-    <a className="nhsuk-breadcrumb__backlink" {...rest} />
+    <Component className="nhsuk-breadcrumb__backlink" {...rest} />
   </p>
 );
 
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
@@ -1,17 +1,21 @@
 import React, { PureComponent, HTMLProps, useContext } from 'react';
 import classNames from 'classnames';
-import NHSLogo from './components/NHSLogo';
+import NHSLogo, { NHSLogoNavProps } from './components/NHSLogo';
 import OrganisationalLogo, { OrganisationalLogoProps } from './components/OrganisationalLogo';
 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> = props => {
+const BaseHeaderLogo: React.FC<OrganisationalLogoProps & NHSLogoNavProps> = props => {
   const { orgName } = useContext<IHeaderContext>(HeaderContext);
   if (orgName) {
     return <OrganisationalLogo {...props} />;
@@ -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;
diff --git a/src/components/header/components/MenuToggle.tsx b/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';
diff --git a/src/components/header/components/NHSLogo.tsx b/src/components/header/components/NHSLogo.tsx
@@ -1,22 +1,25 @@
-import React, { useContext, HTMLProps, SVGProps } from 'react';
+import React, { useContext, SVGProps } from 'react';
 import classNames from 'classnames';
 import HeaderContext, { IHeaderContext } from '../HeaderContext';
+import type { AsElementLink } from '../../../util/types/LinkTypes';
 
 interface SVGImageWithSrc extends SVGProps<SVGImageElement> {
   src: string;
 }
 
+export interface NHSLogoNavProps extends AsElementLink<HTMLAnchorElement> {}
+
 const SVGImageWithSrc: React.FC<SVGImageWithSrc> = props => <image {...props} />;
 
-const NHSLogo: React.FC<HTMLProps<HTMLAnchorElement>> = ({ className, alt, ...rest }) => {
+const NHSLogo: React.FC<NHSLogoNavProps> = ({ className, alt, asElement: Component = 'a', ...rest }) => {
   const { serviceName, hasMenuToggle, hasSearch } = useContext<IHeaderContext>(HeaderContext);
   return (
     <div
       className={classNames('nhsuk-header__logo', {
         'nhsuk-header__logo--only': !hasMenuToggle && !hasSearch,
       })}
     >
-      <a
+      <Component
         className={classNames(
           'nhsuk-header__link',
           { 'nhsuk-header__link--service': serviceName },
@@ -41,7 +44,7 @@ const NHSLogo: React.FC<HTMLProps<HTMLAnchorElement>> = ({ className, alt, ...re
           <SVGImageWithSrc src="https://assets.nhs.uk/images/nhs-logo.png" xlinkHref="" />
         </svg>
         {serviceName ? <span className="nhsuk-header__service-name">{serviceName}</span> : null}
-      </a>
+      </Component>
     </div>
   );
 };
diff --git a/src/components/header/components/NavContainer.tsx b/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;
diff --git a/src/components/header/components/NavItem.tsx b/src/components/header/components/NavItem.tsx
@@ -1,24 +1,33 @@
-import React, { HTMLProps } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import { ChevronRight as ChevronRightIcon } from '../../icons';
+import type { AsElementLink } from '../../../util/types/LinkTypes';
 
-export interface NavItemProps extends HTMLProps<HTMLAnchorElement> {
+export interface NavItemProps extends AsElementLink<HTMLAnchorElement> {
   mobileOnly?: boolean;
 }
 
-const NavItem: React.FC<NavItemProps> = ({ mobileOnly, className, children, ...rest }) => (
-  <li
-    className={classNames(
-      'nhsuk-header__navigation-item',
-      { 'nhsuk-header__navigation-item--for-mobile': mobileOnly },
-      className,
-    )}
-  >
-    <a className="nhsuk-header__navigation-link" {...rest}>
-      {children}
-      <ChevronRightIcon />
-    </a>
-  </li>
-);
+const NavItem: React.FC<NavItemProps> = ({
+  mobileOnly,
+  className,
+  children,
+  asElement: Component = 'a',
+  ...rest
+}) => {
+  return (
+    <li
+      className={classNames(
+        'nhsuk-header__navigation-item',
+        { 'nhsuk-header__navigation-item--for-mobile': mobileOnly },
+        className,
+      )}
+    >
+      <Component className="nhsuk-header__navigation-link" {...rest}>
+        {children}
+        <ChevronRightIcon />
+      </Component>
+    </li>
+  );
+};
 
 export default NavItem;
diff --git a/src/components/header/components/NavItemList.tsx b/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;
diff --git a/src/components/header/components/NavMenuClose.tsx b/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;
diff --git a/src/components/header/components/NavTitle.tsx b/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;
diff --git a/src/components/header/components/OrganisationalLogo.tsx b/src/components/header/components/OrganisationalLogo.tsx
@@ -1,15 +1,17 @@
-import React, { HTMLProps, useContext } from 'react';
+import React, { useContext } from 'react';
 import HeaderContext, { IHeaderContext } from '../HeaderContext';
+import type { AsElementLink } from '../../../util/types/LinkTypes';
 
-export interface OrganisationalLogoProps extends HTMLProps<HTMLAnchorElement> {
+
+export interface OrganisationalLogoProps extends AsElementLink<HTMLAnchorElement> {
   logoUrl?: string;
 }
 
-const OrganisationalLogo: React.FC<OrganisationalLogoProps> = ({ logoUrl, alt, ...rest }) => {
+const OrganisationalLogo: React.FC<OrganisationalLogoProps> = ({ logoUrl, alt, asElement: Component = 'a', ...rest }) => {
   const { orgName, orgSplit, orgDescriptor } = useContext<IHeaderContext>(HeaderContext);
   return (
     <div className="nhsuk-header__logo">
-      <a className="nhsuk-header__link" {...rest}>
+      <Component className="nhsuk-header__link" {...rest}>
         {logoUrl ? (
           <img className="nhsuk-org-logo" src={logoUrl} alt={alt} />
         ) : (
@@ -44,7 +46,7 @@ const OrganisationalLogo: React.FC<OrganisationalLogoProps> = ({ logoUrl, alt, .
             ) : null}
           </>
         )}
-      </a>
+      </Component>
     </div>
   );
 };
diff --git a/src/components/list-panel/ListPanel.tsx b/src/components/list-panel/ListPanel.tsx
diff --git a/src/components/nav-a-z/NavAZ.tsx b/src/components/nav-a-z/NavAZ.tsx
diff --git a/src/components/promo/Promo.tsx b/src/components/promo/Promo.tsx
diff --git a/src/components/radios/components/Radio.tsx b/src/components/radios/components/Radio.tsx
diff --git a/src/util/types/LinkTypes.ts b/src/util/types/LinkTypes.ts
diff --git a/stories/Header.stories.tsx b/stories/Header.stories.tsx
