Update breadcrumb for NHS.UK frontend v10.0.0

Author: colinrotherham

src/components/navigation/breadcrumb/Breadcrumb.tsx

@@ -2,26 +2,25 @@ import React, { Children, FC, HTMLProps, ReactNode } from 'react';
 import classNames from 'classnames';
 import { AsElementLink } from '@util/types/LinkTypes';
 import { childIsOfComponentType } from '@util/types/TypeGuards';
+import BackLinkComponent from '../back-link';
 
 type Item = FC<AsElementLink<HTMLAnchorElement>>;
 
 const Item: Item = ({ className, children, asElement: Element = 'a', ...rest }) => (
-  <li className="nhsuk-breadcrumb__item">
+  <li className="nhsuk-breadcrumb__list-item">
     <Element className={classNames('nhsuk-breadcrumb__link', className)} {...rest}>
       {children}
     </Element>
   </li>
 );
 
-type Back = FC<AsElementLink<HTMLAnchorElement>>;
+type Back = typeof BackLinkComponent;
 
-const Back: Back = ({ className, children, asElement: Element = 'a', ...rest }) => (
-  <p className={classNames('nhsuk-breadcrumb__back', className)}>
-    <Element className="nhsuk-breadcrumb__backlink" {...rest}>
-      <span className="nhsuk-u-visually-hidden">Back to &nbsp;</span>
-      {children}
-    </Element>
-  </p>
+const Back: Back = ({ children, ...rest }) => (
+  <BackLinkComponent {...rest}>
+    <span className="nhsuk-u-visually-hidden">Back to&nbsp;</span>
+    {children}
+  </BackLinkComponent>
 );
 
 interface BreadcrumbComponent extends FC<HTMLProps<HTMLDivElement>> {

src/components/navigation/breadcrumb/__tests__/Breadcrumb.test.tsx

@@ -35,13 +35,11 @@ describe('Breadcrumb', () => {
     expect(breadcrumbListItems.length).toBe(2);
 
     breadcrumbListItems.forEach((child) => {
-      expect(child.classList).toContain('nhsuk-breadcrumb__item');
+      expect(child.classList).toContain('nhsuk-breadcrumb__list-item');
     });
 
     expect(container.querySelector('#otherElement')?.textContent).toEqual('Test Element');
-    expect(container.querySelector('.nhsuk-breadcrumb__back')?.textContent).toBe(
-      'Back to  Breadcrumb 2',
-    );
+    expect(container.querySelector('.nhsuk-back-link')?.textContent).toBe('Back to Breadcrumb 2');
   });
 
   it('passes through other children fine', () => {
@@ -75,11 +73,9 @@ describe('Breadcrumb', () => {
         </Breadcrumb>,
       );
 
-      const hiddenSpan = container.querySelector(
-        '.nhsuk-breadcrumb__backlink > .nhsuk-u-visually-hidden',
-      );
+      const hiddenSpan = container.querySelector('.nhsuk-back-link > .nhsuk-u-visually-hidden');
 
-      expect(hiddenSpan?.textContent).toBe('Back to &nbsp;');
+      expect(hiddenSpan?.textContent).toBe('Back to ');
     });
 
     it.each<ElementType | undefined>([undefined, 'button'])(
@@ -93,7 +89,7 @@ describe('Breadcrumb', () => {
           </Breadcrumb>,
         );
 
-        const component = container.querySelector('.nhsuk-breadcrumb__backlink');
+        const component = container.querySelector('.nhsuk-back-link');
 
         expect(component?.nodeName).toBe(asElement?.toString()?.toUpperCase() ?? 'A');
       },

src/components/navigation/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap

@@ -23,7 +23,7 @@ exports[`Breadcrumb renders with children: BreadcrumbWithChildren 1`] = `
       class="nhsuk-breadcrumb__list"
     >
       <li
-        class="nhsuk-breadcrumb__item"
+        class="nhsuk-breadcrumb__list-item"
       >
         <a
           class="nhsuk-breadcrumb__link"
@@ -33,7 +33,7 @@ exports[`Breadcrumb renders with children: BreadcrumbWithChildren 1`] = `
         </a>
       </li>
       <li
-        class="nhsuk-breadcrumb__item"
+        class="nhsuk-breadcrumb__list-item"
       >
         <a
           class="nhsuk-breadcrumb__link"