Updating breadcrumbs (#22626)

* updating breadcrumbs

* fix tests

* one more

components/page-header/Breadcrumbs.tsx

@@ -2,6 +2,7 @@ import cx from 'classnames'
 import { useRouter } from 'next/router'
 import { useMainContext } from '../context/MainContext'
 import { Link } from 'components/Link'
+import styles from './Header.module.scss'
 
 export type BreadcrumbT = {
   title: string
@@ -21,13 +22,16 @@ export const Breadcrumbs = () => {
       If these change, please also change
       updating script/search/parse-page-sections-into-records.js.
     */
-    <nav data-testid="breadcrumbs" className="f5 breadcrumbs" aria-label="Breadcrumb">
+    <nav
+      data-testid="breadcrumbs"
+      className={cx('f5 breadcrumbs', styles.collapsebreadcrumbs)}
+      aria-label="Breadcrumb"
+    >
       {Object.values(breadcrumbs).map((breadcrumb, i, arr) => {
         if (!breadcrumb) {
           return null
         }
-
-        const title = `${breadcrumb.documentType}: ${breadcrumb.title}`
+        const title = `${breadcrumb.title}`
         return [
           !breadcrumb.href ? (
             <span data-testid="breadcrumb-title" key={title} title={title} className="px-2">
@@ -39,19 +43,16 @@ export const Breadcrumbs = () => {
               data-testid="breadcrumb-link"
               href={breadcrumb.href}
               title={title}
-              className={cx(
-                'd-inline-block px-2',
-                pathWithLocale === breadcrumb.href && 'color-fg-muted'
-              )}
+              className={cx('pr-3', pathWithLocale === breadcrumb.href && 'color-fg-muted')}
             >
               {breadcrumb.title}
+              {i !== arr.length - 1 ? (
+                <span className="color-fg-muted pl-3" key={`${i}-slash`}>
+                  /
+                </span>
+              ) : null}
             </Link>
           ),
-          i !== arr.length - 1 ? (
-            <span className="color-fg-muted" key={`${i}-slash`}>
-              /
-            </span>
-          ) : null,
         ]
       })}
     </nav>

components/page-header/Header.module.scss

@@ -2,6 +2,12 @@
   clip-path: inset(-5px -5px -5px 0px);
 }
 
+@media only screen and (max-width: 1750px) {
+  .collapsebreadcrumbs a:not(:first-child):not(:last-child) {
+    display: none;
+  }
+}
+
 .header {
   display: unset;
 }

components/page-header/Header.tsx

@@ -49,8 +49,8 @@ export const Header = () => {
       {error !== '404' && <HeaderNotifications />}
       <header
         className={cx(
-          'color-bg-default px-3 px-md-6 pt-3 pb-3 position-sticky top-0 z-3',
-          scroll ? 'color-shadow-medium' : 'color-shadow-small'
+          'color-bg-default px-3 px-md-6 pt-3 pb-3 position-sticky top-0 z-3 border-bottom',
+          scroll && 'color-shadow-small'
         )}
       >
         {/* desktop header */}

tests/rendering/breadcrumbs.js

@@ -20,10 +20,10 @@ describe('breadcrumbs', () => {
       const $breadcrumbs = $('[data-testid=breadcrumbs] a')
 
       expect($breadcrumbs).toHaveLength(8)
-      expect($breadcrumbs[0].attribs.title).toBe('product: Account and profile')
-      expect($breadcrumbs[1].attribs.title).toBe('category: User accounts')
-      expect($breadcrumbs[2].attribs.title).toBe('mapTopic: Manage email preferences')
-      expect($breadcrumbs[3].attribs.title).toBe('article: Add an email address')
+      expect($breadcrumbs[0].attribs.title).toBe('Account and profile')
+      expect($breadcrumbs[1].attribs.title).toBe('User accounts')
+      expect($breadcrumbs[2].attribs.title).toBe('Manage email preferences')
+      expect($breadcrumbs[3].attribs.title).toBe('Add an email address')
     })
 
     test('maptopic pages include their own grayed-out breadcrumb', async () => {
@@ -33,9 +33,9 @@ describe('breadcrumbs', () => {
       const $breadcrumbs = $('[data-testid=breadcrumbs] a')
 
       expect($breadcrumbs).toHaveLength(6)
-      expect($breadcrumbs[0].attribs.title).toBe('product: Account and profile')
-      expect($breadcrumbs[1].attribs.title).toBe('category: User accounts')
-      expect($breadcrumbs[2].attribs.title).toBe('mapTopic: Manage email preferences')
+      expect($breadcrumbs[0].attribs.title).toBe('Account and profile')
+      expect($breadcrumbs[1].attribs.title).toBe('User accounts')
+      expect($breadcrumbs[2].attribs.title).toBe('Manage email preferences')
       expect($breadcrumbs[2].attribs.class.includes('color-fg-muted')).toBe(true)
     })
 
@@ -45,7 +45,7 @@ describe('breadcrumbs', () => {
       )
       const $breadcrumbs = $('[data-testid=breadcrumbs] a')
       expect($breadcrumbs).toHaveLength(8)
-      expect($breadcrumbs[0].attribs.title).toBe('product: Account and profile')
+      expect($breadcrumbs[0].attribs.title).toBe('Account and profile')
     })
 
     test('works for ghec billing page', async () => {
@@ -54,7 +54,7 @@ describe('breadcrumbs', () => {
       )
       const $breadcrumbs = $('[data-testid=breadcrumbs] a')
       expect($breadcrumbs).toHaveLength(6)
-      expect($breadcrumbs[0].attribs.title).toBe('product: Billing and payments')
+      expect($breadcrumbs[0].attribs.title).toBe('Billing and payments')
     })
 
     test('works for pages that have overlapping product names', async () => {
@@ -64,16 +64,16 @@ describe('breadcrumbs', () => {
       )
       const $breadcrumbs = $('[data-testid=breadcrumbs] a')
       expect($breadcrumbs).toHaveLength(6)
-      expect($breadcrumbs[0].attribs.title).toBe('product: GitHub CLI')
-      expect($breadcrumbs[1].attribs.title).toBe('category: GitHub CLI')
-      expect($breadcrumbs[2].attribs.title).toBe('article: About GitHub CLI')
+      expect($breadcrumbs[0].attribs.title).toBe('GitHub CLI')
+      expect($breadcrumbs[1].attribs.title).toBe('GitHub CLI')
+      expect($breadcrumbs[2].attribs.title).toBe('About GitHub CLI')
     })
 
     test('parses Liquid variables inside titles', async () => {
       const $ = await getDOM('/en/enterprise/admin/enterprise-support')
       const $breadcrumbs = $('[data-testid=breadcrumbs] a')
       expect($breadcrumbs).toHaveLength(4)
-      expect($breadcrumbs[1].attribs.title).toBe('category: Working with support')
+      expect($breadcrumbs[1].attribs.title).toBe('Working with support')
     })
 
     test('English breadcrumbs link to English pages', async () => {
@@ -107,9 +107,9 @@ describe('breadcrumbs', () => {
       expect($breadcrumbTitles[0].children[0].data).toBe('Early Access documentation')
       expect($breadcrumbTitles[1].children[0].data).toBe('GitHub')
       expect($breadcrumbLinks[0].attribs.title).toBe(
-        'category: Enforcing best practices with GitHub Policies'
+        'Enforcing best practices with GitHub Policies'
       )
-      expect($breadcrumbLinks[1].attribs.title).toBe('article: About GitHub Policies')
+      expect($breadcrumbLinks[1].attribs.title).toBe('About GitHub Policies')
       expect($breadcrumbLinks[1].attribs.class.includes('color-fg-muted')).toBe(true)
     })
   })