updating table-of-contents pages with actionlist (#23338)

Author: gracepark

components/landing/TableOfContents.tsx

@@ -1,6 +1,7 @@
 import { useRouter } from 'next/router'
 import cx from 'classnames'
 
+import { ActionList } from '@primer/components'
 import { Link } from 'components/Link'
 import { BumpLink } from 'components/ui/BumpLink'
 import type { TocItem } from 'components/context/ProductLandingContext'
@@ -16,47 +17,57 @@ export const TableOfContents = (props: Props) => {
   return (
     <ul
       data-testid="table-of-contents"
-      className={cx(variant === 'compact' ? 'list-style-inside pl-2' : 'list-style-none')}
+      className={cx(variant === 'compact' ? 'list-style-outside pl-2' : 'list-style-none')}
     >
-      {(items || []).map((item) => {
-        if (!item) {
-          return null
-        }
-
-        const { fullPath: href, title, intro, childTocItems } = item
-        const isActive = router.pathname === href
-        return variant === 'compact' ? (
-          <li key={href} className="f4 my-1">
-            <Link href={href}>{title}</Link>
-            {(childTocItems || []).length > 0 && (
-              <ul
-                className={cx(
-                  variant === 'compact' ? 'list-style-circle pl-5 my-3' : 'list-style-none'
-                )}
-              >
-                {(childTocItems || []).map((childItem) => {
-                  if (!childItem) {
-                    return null
-                  }
-                  return (
-                    <li key={childItem.fullPath} className="f4 mt-1">
-                      <Link href={childItem.fullPath}>{childItem.title}</Link>
+      <ActionList
+        items=
+          {(items || []).filter(item => typeof item !== 'undefined').map((item) => {
+            const { fullPath: href, title, intro, childTocItems } = item
+            const isActive = router.pathname === href
+            return (variant === 'compact') ? {
+                key: href,
+                text: title,
+                renderItem: () => (
+                  <ActionList.Item>
+                    <li key={href} className="f4 d-list-item width-full">
+                      <Link className="d-block width-full" href={href}>{title}</Link>
+                      {(childTocItems || []).length > 0 && (
+                        <ul
+                          className={cx(
+                            variant === 'compact' ? 'list-style-circle pl-5 my-3' : 'list-style-none'
+                          )}
+                        >
+                          {(childTocItems || []).map((childItem) => {
+                            if (!childItem) {
+                              return null
+                            }
+                            return (
+                              <li key={childItem.fullPath} className="f4 d-block width-full">
+                                <Link className="d-block width-full" href={childItem.fullPath}>{childItem.title}</Link>
+                              </li>
+                            )
+                          })}
+                        </ul>
+                      )}
                     </li>
-                  )
-                })}
-              </ul>
-            )}
-          </li>
-        ) : (
-          <li key={href} className={cx('mb-3 border-bottom pb-2', isActive && 'color-fg-muted')}>
-            <BumpLink as={Link} href={href} title={<h2 className="h4">{title}</h2>}>
-              {intro && (
-                <p className="f4 color-fg-muted" dangerouslySetInnerHTML={{ __html: intro }} />
-              )}
-            </BumpLink>
-          </li>
-        )
-      })}
+                  </ActionList.Item>
+                )
+            } : {
+              key: href,
+              title: title,
+              renderItem: () => (
+                <ActionList.Item className={cx('border-bottom')}>
+                  <li key={href} className={cx('mt-2', isActive && 'color-fg-muted')}>
+                    <BumpLink as={Link} href={href} title={<h2 className="py-1 h4">{title}</h2>}>
+                      {intro && (
+                        <p className="f4 color-fg-muted" dangerouslySetInnerHTML={{ __html: intro }} />
+                      )}
+                    </BumpLink>
+                  </li>
+                </ActionList.Item>
+              )
+            }
+          })} />
     </ul>
   )
 }

stylesheets/extended-markdown.scss

@@ -28,3 +28,7 @@
     margin-bottom: 0;
   }
 }
+
+.warning {
+  font-weight: normal;
+}