Update to NavList for minitocs (github#29885)

* update to NavList for minitocs * fix minitoc tests
ImUnlikely · Aug 12, 2022 · b5ea7bb · b5ea7bb
1 parent b552180
commit b5ea7bb
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 21 deletions.
diff --git a/components/ui/MiniTocs/MiniTocs.tsx b/components/ui/MiniTocs/MiniTocs.tsx
@@ -1,5 +1,5 @@
 import cx from 'classnames'
-import { ActionList, Heading } from '@primer/react'
+import { Heading, NavList } from '@primer/react'
 
 import type { MiniTocItem } from 'components/context/ArticleContext'
 import { Link } from 'components/Link'
@@ -12,21 +12,13 @@ export type MiniTocsPropsT = {
 
 const renderTocItem = (item: MiniTocItem) => {
   return (
-    <ActionList.Item
+    <NavList.Item
       as="li"
       key={item.contents.href}
       className={item.platform}
       sx={{
         listStyle: 'none',
         padding: '2px',
-        ':hover': {
-          bg: 'var(--color-canvas-inset) !important',
-        },
-        'ul > li': {
-          ':hover': {
-            bg: 'var(--color-neutral-subtle) !important',
-          },
-        },
       }}
     >
       <div className={cx('lh-condensed d-block width-full')}>
@@ -37,7 +29,7 @@ const renderTocItem = (item: MiniTocItem) => {
           <ul className="ml-3">{item.items.map(renderTocItem)}</ul>
         ) : null}
       </div>
-    </ActionList.Item>
+    </NavList.Item>
   )
 }
 
@@ -50,13 +42,13 @@ export function MiniTocs({ pageTitle, miniTocItems }: MiniTocsPropsT) {
         <Link href="#in-this-article">{t('miniToc')}</Link>
       </Heading>
 
-      <ActionList variant="full" className="my-2" key={pageTitle} as="div">
+      <NavList className="my-2" key={pageTitle}>
         <div>
           {miniTocItems.map((items, i) => {
             return <ul key={pageTitle + i}>{renderTocItem(items)}</ul>
           })}
         </div>
-      </ActionList>
+      </NavList>
     </>
   )
 }
diff --git a/tests/rendering/server.js b/tests/rendering/server.js
@@ -326,16 +326,16 @@ describe('server', () => {
     test('renders mini TOC in articles with more than one heading', async () => {
       const $ = await getDOM('/en/github/getting-started-with-github/githubs-products')
       expect($('h2#in-this-article').length).toBe(1)
-      expect($('h2#in-this-article + div div ul').length).toBeGreaterThan(1)
+      expect($('h2#in-this-article + nav ul').length).toBeGreaterThan(1)
     })
 
     test('renders mini TOC in articles that includes h3s when specified by frontmatter', async () => {
       const $ = await getDOM(
         '/en/admin/policies/enforcing-policies-for-your-enterprise/enforcing-policies-for-security-settings-in-your-enterprise'
       )
       expect($('h2#in-this-article').length).toBe(1)
-      expect($('h2#in-this-article + div div ul').length).toBeGreaterThan(0) // non-indented items
-      expect($('h2#in-this-article + div div ul li div div ul.ml-3').length).toBeGreaterThan(0) // indented items
+      expect($('h2#in-this-article + nav div ul').length).toBeGreaterThan(0) // non-indented items
+      expect($('h2#in-this-article + nav div ul li div div ul.ml-3').length).toBeGreaterThan(0) // indented items
     })
 
     test('does not render mini TOC in articles with only one heading', async () => {
@@ -358,13 +358,13 @@ describe('server', () => {
     // TODO
     test('renders mini TOC with correct links when headings contain markup', async () => {
       const $ = await getDOM('/en/actions/using-workflows/workflow-syntax-for-github-actions')
-      expect($('h2#in-this-article + div div ul a[href="#on"]').length).toBe(1)
+      expect($('h2#in-this-article + nav div ul a[href="#on"]').length).toBe(1)
     })
 
     // TODO
     test('renders mini TOC with correct links when headings contain markup in localized content', async () => {
       const $ = await getDOM('/ja/actions/using-workflows/workflow-syntax-for-github-actions')
-      expect($('h2#in-this-article + div div ul a[href="#on"]').length).toBe(1)
+      expect($('h2#in-this-article + nav div ul a[href="#on"]').length).toBe(1)
     })
   })
 
@@ -916,11 +916,11 @@ describe('extended Markdown', () => {
   test('renders expected mini TOC headings in platform-specific content', async () => {
     const $ = await getDOM('/en/github/using-git/associating-text-editors-with-git')
     expect($('h2#in-this-article').length).toBe(1)
-    expect($('h2#in-this-article + div div ul li.extended-markdown.mac').length).toBeGreaterThan(1)
+    expect($('h2#in-this-article + nav div ul li.extended-markdown.mac').length).toBeGreaterThan(1)
     expect(
-      $('h2#in-this-article + div div ul li.extended-markdown.windows').length
+      $('h2#in-this-article + nav div ul li.extended-markdown.windows').length
     ).toBeGreaterThan(1)
-    expect($('h2#in-this-article + div div ul li.extended-markdown.linux').length).toBeGreaterThan(
+    expect($('h2#in-this-article + nav div ul li.extended-markdown.linux').length).toBeGreaterThan(
       1
     )
   })