Merge: NHS.UK Frontend v5 Changes

.storybook/preview.ts

@@ -6,7 +6,7 @@ const preview: Preview = {
     actions: { argTypesRegex: '^on[A-Z].*' },
     options: {
       storySort: {
-        order: ['Welcome', 'Migration Guides', 'Components', 'FormBehaviour', 'Deprecated'],
+        order: ['Welcome', 'Migration Guides', 'Components', 'Patterns', 'FormBehaviour', 'Deprecated'],
       },
     },
   },

docs/upgrade-to-3.0.md

@@ -0,0 +1,41 @@
+# Upgrading to 3.0
+
+> v3.0 is an upcoming release, this page is a work in progress.
+
+There are some breaking changes you'll need to be aware of when upgrading to v3.  These are mostly related to us upgrading our dependency on [nhsuk-frontend to v5](https://github.com/nhsuk/nhsuk-frontend/blob/main/CHANGELOG.md#500---16-march-2021) which also includes some breaking changes.
+
+## Review Date component is now a pattern
+
+The `ReviewDate` component has been removed from nhsuk-frontend in version 5.0.0. This component is now a `pattern` in the nhsuk-frontend library. 
+
+The only change is that the Default import has a new path.
+
+Instead of importing the component from `nhsuk-react-components/lib/components/review-date`, you will now import it from `nhsuk-react-components/lib/patterns/review-date`.
+
+There are no functional changes to the component, and it works exactly as it did before.
+
+```tsx
+// Old Import
+import { ReviewDate } from "nhsuk-react-components";
+import ReviewDate from "nhsuk-react-components/lib/components/review-date";
+
+// New Import
+import { ReviewDate } from "nhsuk-react-components";
+import ReviewDate  from "nhsuk-react-components/lib/patterns/review-date";
+```
+
+## NHS Logo PNG Fallback Removed
+
+The .png fallback for the NHS Logo in the header has been removed. This was to support older versions of Internet Explorer, and is no longer required.
+
+## The "Three Columns" option for the Footer component has been removed
+
+This has been removed due to causing accessibility issues in Safari (see the [upstream issue](https://github.com/nhsuk/nhsuk-frontend/issues/575)).
+
+## The `long` variant of the Transactional Service Name component has been removed
+
+In NHS.UK Frontend v5 and above, the header text now defaults to wrapping underneath the logo without the need for a modifier. It is safe to remove the `long` prop from the `<Header.ServiceName>` component.
+
+## The `prefixText` prop has been added to the `DoDontList.Item` component
+
+You can now add prefixed text to each `DoDontList.Item` component by supplying the `prefixText` prop. Items with a `type` of `dont` will automatically have a 'do not' prefix text added in the next major release to align with the NHS.UK frontend library v5.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nhsuk-react-components",
-  "version": "2.2.1",
+  "version": "3.0.0",
   "author": {
     "email": "[email protected]",
     "name": "Thomas Judd-Cooper",
@@ -47,7 +47,7 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^26.6.3",
     "jest-axe": "^4.1.0",
-    "nhsuk-frontend": "4.1.0",
+    "nhsuk-frontend": "5.0.0",
     "nhsuk-frontend-legacy": "npm:[email protected]",
     "prettier": "^2.3.0",
     "react": "^16.14.0",
@@ -64,7 +64,7 @@
     "vite": "^4.2.1"
   },
   "peerDependencies": {
-    "nhsuk-frontend": ">=4.0.0",
+    "nhsuk-frontend": ">=5.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },

src/components/action-link/ActionLink.tsx

@@ -11,7 +11,7 @@ const ActionLink: React.FC<AsElementLink<HTMLAnchorElement>> = ({
 }) => (
   <div className="nhsuk-action-link">
     <Component className={classNames('nhsuk-action-link__link', className)} {...rest}>
-      <ArrowRightCircle />
+      <ArrowRightCircle width={36} height={36} />
       <span className="nhsuk-action-link__text">{children}</span>
     </Component>
   </div>

src/components/action-link/__tests__/__snapshots__/ActionLink.test.tsx.snap

@@ -8,7 +8,10 @@ exports[`ActionLink matches snapshot: ActionLink 1`] = `
     className="nhsuk-action-link__link"
     href="/test"
   >
-    <ArrowRightCircle />
+    <ArrowRightCircle
+      height={36}
+      width={36}
+    />
     <span
       className="nhsuk-action-link__text"
     >

src/components/back-link/BackLink.tsx

@@ -11,7 +11,7 @@ const BackLink: React.FC<AsElementLink<HTMLAnchorElement>> = ({
 }) => (
   <div className="nhsuk-back-link">
     <Component className={classNames('nhsuk-back-link__link', className)} {...rest}>
-      <ChevronLeft />
+      <ChevronLeft height={24} width={24} />
       {children}
     </Component>
   </div>

src/components/back-link/__tests__/__snapshots__/BackLink.test.tsx.snap

@@ -8,7 +8,10 @@ exports[`BackLink matches snapshot: BackLink 1`] = `
     className="nhsuk-back-link__link"
     href="/back"
   >
-    <ChevronLeft />
+    <ChevronLeft
+      height={24}
+      width={24}
+    />
     Back
   </a>
 </div>

src/components/do-dont-list/DoDontList.tsx

@@ -1,9 +1,7 @@
-import React, { HTMLProps, createContext, useContext } from 'react';
+import React, { HTMLProps, createContext, useContext, ReactNode } from 'react';
 import classNames from 'classnames';
 import { Tick, Cross } from '../icons';
 import HeadingLevel, { HeadingLevelType } from '../../util/HeadingLevel';
-import useDevWarning from '../../util/hooks/UseDevWarning';
-import { NHSUKFrontendV5UpgradeWarnings } from '../../deprecated/warnings';
 
 type ListType = 'do' | 'dont';
 
@@ -27,7 +25,6 @@ const DoDontList: DoDontList = ({
   headingLevel,
   ...rest
 }) => {
-  useDevWarning(NHSUKFrontendV5UpgradeWarnings.DoDontListPrefix, () => listType === 'dont');
   return (
     <div className={classNames('nhsuk-do-dont-list', className)} {...rest}>
       <HeadingLevel className="nhsuk-do-dont-list__label" headingLevel={headingLevel}>
@@ -48,13 +45,26 @@ const DoDontList: DoDontList = ({
 
 interface DoDontItemProps extends HTMLProps<HTMLLIElement> {
   listItemType?: ListType;
+  prefixText?: ReactNode;
 }
 
-const DoDontItem: React.FC<DoDontItemProps> = ({ children, listItemType, ...rest }) => {
+const DoDontItem: React.FC<DoDontItemProps> = ({ prefixText, listItemType, children, ...rest }) => {
   const listItem = useContext(DoDontListContext);
+  const defaultPrefix = (listItemType || listItem) === 'do' ? null : 'do not ';
+  const actualPrefix = prefixText === undefined ? defaultPrefix : prefixText;
   return (
     <li {...rest}>
-      {(listItemType || listItem) === 'do' ? <Tick /> : <Cross />}
+      {(listItemType || listItem) === 'do' ? (
+        <>
+          <Tick />
+          {actualPrefix}
+        </>
+      ) : (
+        <>
+          <Cross />
+          {actualPrefix}
+        </>
+      )}
       {children}
     </li>
   );

src/components/do-dont-list/__tests__/DoDontList.test.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 import DoDontList from '..';
-import { NHSUKFrontendV5UpgradeWarnings } from '../../../deprecated/warnings';
 
 describe('DoDontList', () => {
   it('matches snapshot', () => {
@@ -64,6 +63,59 @@ describe('DoDontList', () => {
       doList.unmount();
       dontList.unmount();
     });
+
+    it("dont item includes 'do not' by default", () => {
+      const dontList = mount(
+        <DoDontList listType="dont">
+          <DoDontList.Item>do something bad</DoDontList.Item>
+        </DoDontList>,
+      );
+      expect(dontList.find('.nhsuk-list--cross').text()).toEqual('do not do something bad');
+      dontList.unmount();
+    });
+
+    it('items render custom prefix text', () => {
+      const doList = mount(
+        <DoDontList listType="do">
+          <DoDontList.Item prefixText="do ">something good 1</DoDontList.Item>
+          <DoDontList.Item>something good 2</DoDontList.Item>
+          <DoDontList.Item prefixText={<span>also do </span>}>something good 3</DoDontList.Item>
+          <DoDontList.Item prefixText={undefined}>something good 4</DoDontList.Item>
+          <DoDontList.Item prefixText={null}>something good 5</DoDontList.Item>
+        </DoDontList>,
+      );
+      const dontList = mount(
+        <DoDontList listType="dont">
+          <DoDontList.Item prefixText="do not ">do something bad 1</DoDontList.Item>
+          <DoDontList.Item>do something bad 2</DoDontList.Item>
+          <DoDontList.Item prefixText={<span>don&apos;t do </span>}>
+            something bad 3
+          </DoDontList.Item>
+          <DoDontList.Item prefixText={undefined}>something bad 4</DoDontList.Item>
+          <DoDontList.Item prefixText={null}>something bad 5</DoDontList.Item>
+        </DoDontList>,
+      );
+      expect(doList.find('.nhsuk-list--tick').childAt(0).text()).toBe('do something good 1');
+      expect(doList.find('.nhsuk-list--tick').childAt(1).text()).toBe('something good 2');
+      expect(doList.find('.nhsuk-list--tick').childAt(2).text()).toBe('also do something good 3');
+      expect(doList.find('.nhsuk-list--tick').childAt(3).text()).toBe('something good 4');
+      expect(doList.find('.nhsuk-list--tick').childAt(4).text()).toBe('something good 5');
+
+      expect(dontList.find('.nhsuk-list--cross').childAt(0).text()).toBe(
+        'do not do something bad 1',
+      );
+      expect(dontList.find('.nhsuk-list--cross').childAt(1).text()).toBe(
+        'do not do something bad 2',
+      );
+      expect(dontList.find('.nhsuk-list--cross').childAt(2).text()).toBe(
+        "don't do something bad 3",
+      );
+      expect(dontList.find('.nhsuk-list--cross').childAt(3).text()).toBe('do not something bad 4');
+      expect(dontList.find('.nhsuk-list--cross').childAt(4).text()).toBe('something bad 5');
+
+      doList.unmount();
+      dontList.unmount();
+    });
   });
 });
 
@@ -73,14 +125,6 @@ describe('dont list dev warning', () => {
     jest.clearAllMocks();
   });
 
-  it('should warn when using dont list', () => {
-    const element = mount(<DoDontList listType="dont" />);
-    expect(console.warn).toHaveBeenCalled();
-    expect((console.warn as jest.Mock).mock.calls[0][0]).toBe(
-      NHSUKFrontendV5UpgradeWarnings.DoDontListPrefix,
-    );
-    element.unmount();
-  });
   it('should not warn when using do list', () => {
     const element = mount(<DoDontList listType="do" />);
     expect(console.warn).not.toHaveBeenCalled();

src/components/footer/Footer.tsx

@@ -1,26 +1,12 @@
 import React, { HTMLProps } from 'react';
 import classNames from 'classnames';
 import { Container } from '../layout';
-import useDevWarning from '../../util/hooks/UseDevWarning';
-import { NHSUKFrontendV5UpgradeWarnings } from '../../deprecated/warnings';
 
-interface FooterListProps extends HTMLProps<HTMLOListElement> {
-  columns?: boolean;
-}
+type FooterListProps = HTMLProps<HTMLOListElement>;
 
-const FooterList: React.FC<FooterListProps> = ({ className, columns, ...rest }) => {
-  useDevWarning(NHSUKFrontendV5UpgradeWarnings.FooterColumns, () => columns);
-  return (
-    <ul
-      className={classNames(
-        'nhsuk-footer__list',
-        { 'nhsuk-footer__list--three-columns': columns },
-        className,
-      )}
-      {...rest}
-    />
-  );
-};
+const FooterList: React.FC<FooterListProps> = ({ className, ...rest }) => (
+  <ul className={classNames('nhsuk-footer__list', className)} {...rest} />
+);
 
 const FooterListItem: React.FC<HTMLProps<HTMLAnchorElement>> = ({ className, ...rest }) => (
   <li className="nhsuk-footer__list-item">

src/components/footer/__tests__/Footer.test.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 import Footer from '..';
-import { NHSUKFrontendV5UpgradeWarnings } from '../../../deprecated/warnings';
 
 jest.spyOn(console, 'warn').mockImplementation();
 
@@ -39,27 +38,6 @@ describe('Footer', () => {
       expect(component).toMatchSnapshot('Footer.List');
       component.unmount();
     });
-
-    it('adds class when columns', () => {
-      const component = shallow(<Footer.List columns />);
-      expect(component.hasClass('nhsuk-footer__list--three-columns')).toBeTruthy();
-      component.unmount();
-    });
-
-    it('has dev warning when columns', () => {
-      const element = mount(<Footer.List columns />);
-      expect(console.warn).toHaveBeenCalledTimes(1);
-      expect((console.warn as jest.Mock).mock.calls[0][0]).toBe(
-        NHSUKFrontendV5UpgradeWarnings.FooterColumns,
-      );
-      element.unmount();
-    });
-
-    it('no dev warning when columns is false', () => {
-      const element = mount(<Footer.List />);
-      expect(console.warn).not.toHaveBeenCalled();
-      element.unmount();
-    });
   });
 
   describe('Footer.ListItem', () => {

src/components/header/components/MenuToggle.tsx

@@ -1,6 +1,4 @@
-import React, {
-  HTMLProps, useContext, useEffect, MouseEvent,
-} from 'react';
+import React, { HTMLProps, useContext, useEffect, MouseEvent } from 'react';
 import classNames from 'classnames';
 import HeaderContext, { IHeaderContext } from '../HeaderContext';
 
@@ -28,7 +26,7 @@ const MenuToggle: React.FC<MenuToggleProps> = ({ onClick, ...rest }) => {
     <div className="nhsuk-header__menu">
       <button
         className={classNames('nhsuk-header__menu-toggle', { 'is-active': menuOpen })}
-        aria-label="Open menu"
+        aria-controls="header-navigation"
         aria-expanded={menuOpen ? 'true' : 'false'}
         onClick={onToggleClick}
         {...rest}

src/components/header/components/NHSLogo.tsx

@@ -7,7 +7,7 @@ interface SVGImageWithSrc extends SVGProps<SVGImageElement> {
   src: string;
 }
 
-export type NHSLogoNavProps = AsElementLink<HTMLAnchorElement>
+export type NHSLogoNavProps = AsElementLink<HTMLAnchorElement>;
 
 const SVGImageWithSrc: React.FC<SVGImageWithSrc> = (props) => <image {...props} />;
 
@@ -35,19 +35,18 @@ const NHSLogo: React.FC<NHSLogoNavProps> = ({
         <svg
           className="nhsuk-logo"
           xmlns="http://www.w3.org/2000/svg"
-          xmlnsXlink="http://www.w3.org/1999/xlink"
-          role="img"
-          focusable="false"
           viewBox="0 0 40 16"
+          height={40}
+          width={100}
           aria-labelledby="nhsuk-logo_title"
         >
           <title id="nhsuk-logo_title">{alt}</title>
-          <path className="nhsuk-logo__background" d="M0 0h40v16H0z" />
+          <path className="nhsuk-logo__background" d="M0 0h40v16H0z" fill="#005eb8" />
           <path
             className="nhsuk-logo__text"
+            fill="#fff"
             d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"
           />
-          <SVGImageWithSrc src="https://assets.nhs.uk/images/nhs-logo.png" xlinkHref="" />
         </svg>
         {serviceName ? <span className="nhsuk-header__service-name">{serviceName}</span> : null}
       </Component>

src/components/header/components/Nav.tsx

@@ -5,7 +5,11 @@ import { Close as CloseIcon } from '../../icons';
 import HeaderContext, { IHeaderContext } from '../HeaderContext';
 
 const Nav: React.FC<HTMLProps<HTMLDivElement>> = ({
-  className, children, open, ...rest
+  className,
+  children,
+  open,
+  id = 'header-navigation',
+  ...rest
 }) => {
   const { menuOpen, toggleMenu } = useContext<IHeaderContext>(HeaderContext);
 
@@ -16,6 +20,7 @@ const Nav: React.FC<HTMLProps<HTMLDivElement>> = ({
         { 'js-show': open !== undefined ? open : menuOpen },
         className,
       )}
+      id={id}
       {...rest}
     >
       <Container>