Migrate Breadcrumbs to @primer/react-brand (#62084)

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Author: Ebonsignori

src/fixtures/tests/breadcrumbs.ts

@@ -24,7 +24,7 @@ describe('breadcrumbs', () => {
 
   test('short titles are preferred', async () => {
     const $ = await getDOM('/get-started/foo/bar')
-    const links = $('[data-testid=breadcrumbs-in-article] a:last-child')
+    const links = $('[data-testid=breadcrumbs-in-article] li:last-child a')
     expect(links.text()).toBe('Bar')
   })
 

src/frame/components/page-header/Breadcrumbs.module.scss

@@ -1,9 +1,9 @@
+import type { MouseEvent } from 'react'
+import { useRouter } from 'next/router'
 import cx from 'classnames'
+import { Breadcrumbs as BrandBreadcrumbs } from '@primer/react-brand'
 
 import { useMainContext } from '../context/MainContext'
-import { Link } from '@/frame/components/Link'
-
-import styles from './Breadcrumbs.module.scss'
 
 type Props = {
   inHeader?: boolean
@@ -16,55 +16,64 @@ export type BreadcrumbT = {
 
 export const Breadcrumbs = ({ inHeader }: Props) => {
   const { breadcrumbs } = useMainContext()
+  const router = useRouter()
+
+  // BrandBreadcrumbs.Item renders a plain <a>, so intercept clicks to restore
+  // next/link-style client-side navigation. Modifier/middle clicks fall through
+  // to the browser so open-in-new-tab still works, and the <a href> keeps the
+  // links crawlable for SSR.
+  const handleClick = (event: MouseEvent<HTMLAnchorElement>, href: string) => {
+    if (
+      event.defaultPrevented ||
+      event.button !== 0 ||
+      event.metaKey ||
+      event.ctrlKey ||
+      event.shiftKey ||
+      event.altKey ||
+      !href.startsWith('/')
+    ) {
+      return
+    }
+    event.preventDefault()
+    // hrefs already include the locale prefix (e.g. /en/...), so disable
+    // Next.js locale handling to avoid double-prefixing.
+    router.push(href, undefined, { locale: false })
+  }
 
   return (
-    /*
-      NOTE: The breadcrumbs class and the nav tag are used by the
-      Lunr search scripts. The a tag generated by the Link is also used.
-      If these change, please also change
-      updating src/search/scripts/parse-page-sections-into-records.ts.
-    */
-    <nav
+    <BrandBreadcrumbs
       data-testid={inHeader ? 'breadcrumbs-header' : 'breadcrumbs-in-article'}
-      className={cx('f5 breadcrumbs', styles.breadcrumbs)}
       aria-label="Breadcrumb"
       data-container="breadcrumbs"
     >
-      <ul>
-        {Object.values(breadcrumbs)
-          .filter(Boolean)
-          .map((breadcrumb, i, arr) => {
-            const title = `${breadcrumb.title}`
-            return [
-              !breadcrumb.href ? (
-                <span data-testid="breadcrumb-title" key={title} className="px-2">
-                  {breadcrumb.title}
-                </span>
-              ) : (
-                <li className="d-inline-block" key={title}>
-                  <Link
-                    data-testid="breadcrumb-link"
-                    href={breadcrumb.href}
-                    title={title}
-                    className={cx(
-                      'Link--primary mr-2 color-fg-muted',
-                      // Show the last breadcrumb if it's in the header, but not if it's in the article
-                      // If there's only 1 breadcrumb, show it
-                      !inHeader && i === arr.length - 1 && arr.length !== 1 && 'd-none',
-                    )}
-                  >
-                    {breadcrumb.title}
-                  </Link>
-                  {i !== arr.length - 1 ? (
-                    <span className="color-fg-muted pr-2" key={`${i}-slash`}>
-                      /
-                    </span>
-                  ) : null}
-                </li>
-              ),
-            ]
-          })}
-      </ul>
-    </nav>
+      {Object.values(breadcrumbs)
+        .filter(Boolean)
+        .map((breadcrumb, i, arr) => {
+          const title = `${breadcrumb.title}`
+          if (!breadcrumb.href) {
+            return (
+              <li key={title}>
+                <span data-testid="breadcrumb-title">{breadcrumb.title}</span>
+              </li>
+            )
+          }
+          return (
+            <BrandBreadcrumbs.Item
+              data-testid="breadcrumb-link"
+              key={title}
+              href={breadcrumb.href}
+              title={title}
+              onClick={(event) => handleClick(event, breadcrumb.href!)}
+              className={cx(
+                // Show the last breadcrumb if it's in the header, but not if it's in the article.
+                // If there's only 1 breadcrumb, show it.
+                !inHeader && i === arr.length - 1 && arr.length !== 1 && 'd-none',
+              )}
+            >
+              {breadcrumb.title}
+            </BrandBreadcrumbs.Item>
+          )
+        })}
+    </BrandBreadcrumbs>
   )
 }