NHSDigital
diff --git a/‎.storybook/preview.ts‎
Lines changed: 1 addition & 1 deletion b/‎.storybook/preview.ts‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎docs/upgrade-to-3.0.md‎
Lines changed: 41 additions & 0 deletions b/‎docs/upgrade-to-3.0.md‎
Lines changed: 41 additions & 0 deletions
diff --git a/‎package.json‎
Lines changed: 3 additions & 3 deletions b/‎package.json‎
Lines changed: 3 additions & 3 deletions
diff --git a/‎src/components/action-link/ActionLink.tsx‎
Lines changed: 1 addition & 1 deletion b/‎src/components/action-link/ActionLink.tsx‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎src/components/action-link/__tests__/__snapshots__/ActionLink.test.tsx.snap‎
Lines changed: 4 additions & 1 deletion b/‎src/components/action-link/__tests__/__snapshots__/ActionLink.test.tsx.snap‎
Lines changed: 4 additions & 1 deletion
diff --git a/‎src/components/back-link/BackLink.tsx‎
Lines changed: 1 addition & 1 deletion b/‎src/components/back-link/BackLink.tsx‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎src/components/back-link/__tests__/__snapshots__/BackLink.test.tsx.snap‎
Lines changed: 4 additions & 1 deletion b/‎src/components/back-link/__tests__/__snapshots__/BackLink.test.tsx.snap‎
Lines changed: 4 additions & 1 deletion
diff --git a/‎src/components/do-dont-list/DoDontList.tsx‎
Lines changed: 16 additions & 6 deletions b/‎src/components/do-dont-list/DoDontList.tsx‎
Lines changed: 16 additions & 6 deletions
diff --git a/‎src/components/do-dont-list/__tests__/DoDontList.test.tsx‎
Lines changed: 53 additions & 9 deletions b/‎src/components/do-dont-list/__tests__/DoDontList.test.tsx‎
Lines changed: 53 additions & 9 deletions
diff --git a/‎src/components/footer/Footer.tsx‎
Lines changed: 4 additions & 18 deletions b/‎src/components/footer/Footer.tsx‎
Lines changed: 4 additions & 18 deletions
@@ -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'],
       },
     },
   },
 
@@ -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.
@@ -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"
   },
 
@@ -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>
 
@@ -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"
     >
 
@@ -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>
 
@@ -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>
 
@@ -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>
   );
 
@@ -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();
 
@@ -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">
Original file line number	Diff line number	Diff line change
@@ -8,7 +8,10 @@ exports[`ActionLink matches snapshot: ActionLink 1`] = `
`8`	`8`	`className="nhsuk-action-link__link"`
`9`	`9`	`href="/test"`
`10`	`10`	`>`
`11`		`- <ArrowRightCircle />`
	`11`	`+ <ArrowRightCircle`
	`12`	`+ height={36}`
	`13`	`+ width={36}`
	`14`	`+ />`
`12`	`15`	`<span`
`13`	`16`	`className="nhsuk-action-link__text"`
`14`	`17`	`>`