@primer/gatsby-theme-doctocat 3.2.1 → 4.0.1

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @primer/gatsby-theme-doctocat
 
+## 4.0.1
+
+### Patch Changes
+
+- [`1e22900`](https://github.com/primer/doctocat/commit/1e229008d374b8b56d19ce33f315256c4301efb4) [#434](https://github.com/primer/doctocat/pull/434) Thanks [@rezrah](https://github.com/rezrah)! - - Updated external links in frontmatter to open in new tab
+  - Added support for Figma links in frontmatter
+
+* [`9585e40`](https://github.com/primer/doctocat/commit/9585e40d62b0bfcb8aff6d98cdd490b5058f6748) [#475](https://github.com/primer/doctocat/pull/475) Thanks [@JoshBowdenConcepts](https://github.com/JoshBowdenConcepts)! - Adding Primer Brand link to the main navigation
+
+## 4.0.0
+
+### Major Changes
+
+- [`1022d1c`](https://github.com/primer/doctocat/commit/1022d1c92588f1e4fed4bdacec30fd5d11256412) [#362](https://github.com/primer/doctocat/pull/362) Thanks [@siddharthkp](https://github.com/siddharthkp)! - Drop support for node 12
+
+* [`5f4426c`](https://github.com/primer/doctocat/commit/5f4426cc0cec6201600241bc753e5c7c9bf188a6) [#427](https://github.com/primer/doctocat/pull/427) Thanks [@colebemis](https://github.com/colebemis)! - Items in [`nav.yml`](https://primer.style/doctocat/usage/customization#side-navigation) that contain `children` no longer render as links, meaning the `url` property will be ignored.
+
+  ```diff
+  # nav.yml
+  – title: Components
+  - url: /components
+    children:
+     — title: Avatar
+       url: /Avatar
+  ```
+
+### Patch Changes
+
+- [`facde5a`](https://github.com/primer/doctocat/commit/facde5a56119b160f98b8b01302e3508392c2146) [#330](https://github.com/primer/doctocat/pull/330) Thanks [@siddharthkp](https://github.com/siddharthkp)! - Vertically-center align images in table
+
+## 3.3.0
+
+### Minor Changes
+
+- [`82bd051`](https://github.com/primer/doctocat/commit/82bd051ab35e5939a9ad5a3e89c26e2a63ce5df2) [#376](https://github.com/primer/doctocat/pull/376) Thanks [@vdepizzol](https://github.com/vdepizzol)! - New visual styles for Do/Dont components
+
+### Patch Changes
+
+- [`0d35f17`](https://github.com/primer/doctocat/commit/0d35f17a34ebfc468e15a23783a55379b8f0e125) [#402](https://github.com/primer/doctocat/pull/402) Thanks [@ichelsea](https://github.com/ichelsea)! - Added underlines to links in markdown documents
+
 ## 3.2.1
 
 ### Patch Changes
@@ -183,4 +223,4 @@
 
 - [`5fb29c9`](https://github.com/primer/doctocat/commit/5fb29c9000dd2a26919f661d969142fa1938d329) [#187](https://github.com/primer/doctocat/pull/187) Thanks [@mvasilkov](https://github.com/mvasilkov)! - Fix typo in an internal import
 
-* [`cab38c3`](https://github.com/primer/doctocat/commit/cab38c38eb00a9645991147b28a47a535dcd1d41) [#190](https://github.com/primer/doctocat/pull/190) Thanks [@colebemis](https://github.com/colebemis)! - Update the navigation dropdown icon from a `chrevon` to a `caret` to follow our [progressive disclosure guidelines](https://primer.style/design/ui-patterns/progressive-disclosure#progressive-disclosure-ui-patterns)
+* [`cab38c3`](https://github.com/primer/doctocat/commit/cab38c38eb00a9645991147b28a47a535dcd1d41) [#190](https://github.com/primer/doctocat/pull/190) Thanks [@colebemis](https://github.com/colebemis)! - Update the navigation dropdown icon from a `chevron` to a `caret` to follow our [progressive disclosure guidelines](https://primer.style/design/ui-patterns/progressive-disclosure#progressive-disclosure-ui-patterns)

package/gatsby-node.js

@@ -30,7 +30,7 @@ exports.createPages = async ({graphql, actions}, themeOptions) => {
     }
   `)
 
-  if (!process.env.GITHUB_TOKEN && !process.env.NOW_GITHUB_DEPLOYMENT && !process.env.VERCEL_GITHUB_DEPLOYMENT) {
+  if (!process.env.GITHUB_TOKEN) {
     console.error(`Non-deploy build and no GITHUB_TOKEN environment variable set; skipping GitHub API calls`)
   }
 
@@ -48,7 +48,7 @@ exports.createPages = async ({graphql, actions}, themeOptions) => {
       const editUrl = getEditUrl(repo, fileRelativePath, defaultBranch)
 
       let contributors = []
-      if (process.env.GITHUB_TOKEN || process.env.NOW_GITHUB_DEPLOYMENT || process.env.VERCEL_GITHUB_DEPLOYMENT) {
+      if (process.env.GITHUB_TOKEN) {
         contributors = await fetchContributors(repo, fileRelativePath, process.env.GITHUB_TOKEN)
       }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/gatsby-theme-doctocat",
-  "version": "3.2.1",
+  "version": "4.0.1",
   "main": "index.js",
   "license": "MIT",
   "scripts": {
@@ -15,9 +15,9 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-primer-react": "0.7.3",
+    "eslint-plugin-primer-react": "0.7.4",
     "eslint-plugin-react": "^7.26.1",
-    "gatsby": "^2.24.52",
+    "gatsby": "^2.32.13",
     "prettier": "^2.4.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
@@ -33,18 +33,18 @@
     "@mdx-js/mdx": "^1.0.21",
     "@mdx-js/react": "^1.0.21",
     "@primer/component-metadata": "^0.4.0",
-    "@primer/react": "^34.5.0",
-    "@primer/octicons-react": "^16.0.0",
+    "@primer/octicons-react": "^16.3.1",
+    "@primer/react": "^35.2.2",
     "@styled-system/theme-get": "^5.0.12",
-    "@testing-library/jest-dom": "^4.1.0",
+    "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^9.1.3",
     "axios": "^0.21.2",
     "babel-jest": "^24.9.0",
     "copy-to-clipboard": "^3.2.0",
-    "date-fns": "^2.0.1",
+    "date-fns": "^2.28.0",
     "details-element-polyfill": "^2.4.0",
     "downshift": "^3.2.10",
-    "find-up": "^4.1.0",
+    "find-up": "^6.3.0",
     "framer-motion": "^1.4.2",
     "fuse.js": "^3.4.5",
     "gatsby-plugin-catch-links": "^2.1.2",
@@ -66,12 +66,12 @@
     "pluralize": "^8.0.0",
     "preval.macro": "^3.0.0",
     "prism-react-renderer": "^1.2.0",
-    "prismjs": "^1.25.0",
+    "prismjs": "^1.27.0",
     "react-addons-text-content": "^0.0.4",
     "react-element-to-jsx-string": "^14.0.3",
     "react-focus-on": "^3.3.0",
-    "react-frame-component": "^4.1.1",
-    "react-helmet": "^5.2.1",
+    "react-frame-component": "^5.2.1",
+    "react-helmet": "^6.1.0",
     "react-live": "^2.1.2",
     "react-measure": "^2.3.0",
     "read-pkg-up": "^6.0.0",

package/setup-tests.js

@@ -1 +1,10 @@
 import '@testing-library/jest-dom/extend-expect'
+
+// JSDOM doesn't mock ResizeObserver
+// Copied from https://github.com/primer/react/blob/3fdae477d8067c5131d316548ce5b08aa1017355/src/utils/test-helpers.tsx
+global.ResizeObserver = jest.fn().mockImplementation(() => {
+  return {
+    observe: jest.fn(),
+    disconnect: jest.fn()
+  }
+})

package/src/components/code.js

@@ -6,12 +6,14 @@ import Prism from '../prism'
 import ClipboardCopy from './clipboard-copy'
 import LiveCode from './live-code'
 
-function Code({className, children, live, noinline, metastring}) {
+function Code({className, children, live, highlight, noinline, metastring}) {
   const language = className ? className.replace(/language-/, '') : ''
   const code = children.trim()
 
   if (live) {
-    return <LiveCode code={code} language={language} noinline={noinline} metastring={metastring} />
+    return (
+      <LiveCode code={code} highlight={highlight} language={language} noinline={noinline} metastring={metastring} />
+    )
   }
 
   return (

package/src/components/do-dont.js

@@ -1,5 +1,4 @@
-import {Box, StyledOcticon, Text} from '@primer/react'
-import {CheckCircleFillIcon, XCircleFillIcon} from '@primer/octicons-react'
+import {Box, Text} from '@primer/react'
 import React from 'react'
 
 export function DoDontContainer({stacked, children}) {
@@ -15,22 +14,48 @@ DoDontContainer.defaultProps = {
 }
 
 export function Do(props) {
-  return <DoDontBase {...props} title="Do" icon={CheckCircleFillIcon} iconBg="success.fg" />
+  return <DoDontBase {...props} title="Do" bg="success.fg" borderColor="success.muted" />
 }
 
 export function Dont(props) {
-  return <DoDontBase {...props} title="Don't" icon={XCircleFillIcon} iconBg="danger.fg" />
+  return <DoDontBase {...props} title="Don’t" bg="danger.fg" borderColor="danger.muted" />
 }
 
-function DoDontBase({children, title, icon: Icon, iconBg}) {
+function DoDontBase({children, title, bg, borderColor, indented}) {
   return (
     <Box sx={{display: 'flex', flexDirection: 'column'}}>
-      <Box sx={{display: 'flex', alignSelf: 'start', flexDirection: 'row', alignItems: 'center', mb: '2'}}>
-        <StyledOcticon icon={Icon} sx={{color: iconBg}} />
-        <Text sx={{fontWeight: 'bold', color: 'fg.default', ml: 2}}>{title}</Text>
+      <Box
+        sx={{
+          display: 'flex',
+          alignSelf: 'start',
+          flexDirection: 'row',
+          alignItems: 'center',
+          mb: '2',
+          backgroundColor: bg,
+          borderRadius: '2',
+          color: 'fg.onEmphasis',
+          paddingX: '2'
+        }}
+      >
+        <Text sx={{fontWeight: 'bold', fontSize: '1', color: 'fg.onEmphasis'}}>{title}</Text>
       </Box>
       <Box sx={{'& *:last-child': {mb: 0}, img: {maxWidth: '100%'}, display: 'flex', flexDirection: 'column'}}>
-        {children}
+        {indented ? (
+          <Box
+            as="blockquote"
+            sx={{
+              margin: '0',
+              borderLeftWidth: '4px',
+              borderLeftStyle: 'solid',
+              borderLeftColor: borderColor,
+              paddingLeft: '3'
+            }}
+          >
+            {children}
+          </Box>
+        ) : (
+          children
+        )}
       </Box>
     </Box>
   )

package/src/components/figma-link.js

@@ -0,0 +1,32 @@
+import {Link, Text} from '@primer/react'
+import React from 'react'
+
+function SourceLink({href}) {
+  return (
+    <Link href={href} target="_blank">
+      <FigmaLogo />
+      <Text sx={{ml: 2, display: 'inline-block'}}>View Figma</Text>
+    </Link>
+  )
+}
+
+function FigmaLogo() {
+  return (
+    <svg
+      width={16}
+      height={16}
+      aria-hidden="true"
+      style={{verticalAlign: 'text-bottom'}}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 172 247"
+    >
+      <g stroke="currentColor" strokeWidth="15.081">
+        <path d="M164 46.5c0 21.263-17.237 38.5-38.5 38.5H86V8h39.5C146.763 8 164 25.237 164 46.5ZM8 46.5C8 67.763 25.237 85 46.5 85H86V8H46.5C25.237 8 8 25.237 8 46.5ZM8 123.501c0 21.263 17.237 38.5 38.5 38.5H86v-77H46.5c-21.263 0-38.5 17.237-38.5 38.5Z" />
+        <path d="M8 200.5C8 221.763 25.485 239 46.748 239 68.288 239 86 221.539 86 200v-38H46.5C25.237 162 8 179.237 8 200.5ZM86 123.501c0 21.263 17.237 38.5 38.5 38.5h1c21.263 0 38.5-17.237 38.5-38.5s-17.237-38.5-38.5-38.5h-1c-21.263 0-38.5 17.237-38.5 38.5Z" />
+      </g>
+    </svg>
+  )
+}
+
+export default SourceLink

package/src/components/layout.js

@@ -8,10 +8,12 @@ import Sidebar from './sidebar'
 import SourceLink from './source-link'
 import StatusLabel from './status-label'
 import StorybookLink from './storybook-link'
+import FigmaLink from './figma-link'
 import TableOfContents from './table-of-contents'
 
 function Layout({children, pageContext}) {
-  let {title, description, status, source, storybook, additionalContributors, componentId} = pageContext.frontmatter
+  let {title, description, figma, status, source, storybook, additionalContributors, componentId} =
+    pageContext.frontmatter
 
   if (!additionalContributors) {
     additionalContributors = []
@@ -56,8 +58,10 @@ function Layout({children, pageContext}) {
               }}
               css={{gridArea: 'table-of-contents', overflow: 'auto'}}
             >
-              <Text sx={{display: 'inline-block', fontWeight: 'bold', mb: 1}}>On this page</Text>
-              <TableOfContents items={pageContext.tableOfContents.items} />
+              <Text sx={{display: 'inline-block', fontWeight: 'bold', pl: 3}} id="toc-heading">
+                On this page
+              </Text>
+              <TableOfContents aria-labelledby="toc-heading" items={pageContext.tableOfContents.items} />
             </Box>
           ) : null}
           <Box sx={{width: '100%', maxWidth: '960px'}}>
@@ -82,6 +86,7 @@ function Layout({children, pageContext}) {
                 >
                   {source ? <SourceLink href={source} /> : null}
                   {storybook ? <StorybookLink href={storybook} /> : null}
+                  {figma ? <FigmaLink href={figma} /> : null}
                 </Box>
               ) : null}
             </Box>
@@ -97,14 +102,14 @@ function Layout({children, pageContext}) {
                   borderRadius: 2
                 }}
               >
-                <Box sx={{p: 3}}>
+                <Box sx={{px: 3, py: 2}}>
                   <Box
                     sx={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', display: 'flex'}}
                   >
                     <Text sx={{fontWeight: 'bold'}}>On this page</Text>
                   </Box>
                 </Box>
-                <Box sx={{p: 3, borderTop: '1px solid', borderColor: 'border.muted'}}>
+                <Box sx={{borderTop: '1px solid', borderColor: 'border.muted'}}>
                   <TableOfContents items={pageContext.tableOfContents.items} />
                 </Box>
               </Box>

package/src/components/link.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components'
+import themeGet from '@styled-system/theme-get'
+
+const Link = styled.a`
+  text-decoration: underline;
+  text-underline-offset: 25%;
+  color: ${themeGet('colors.accent.fg')};
+`
+
+export default Link

package/src/components/live-code.js

@@ -8,6 +8,8 @@ import {ThemeContext} from 'styled-components'
 import scope from '../live-code-scope'
 import ClipboardCopy from './clipboard-copy'
 import LivePreviewWrapper from './live-preview-wrapper'
+import styled from 'styled-components'
+import themeGet from '@styled-system/theme-get'
 
 const languageTransformers = {
   html: html => htmlToJsx(html),
@@ -39,10 +41,43 @@ const getResolvedScope = metastring => {
   return scope
 }
 
-function LiveCode({code, language, noinline, metastring}) {
+function parseHighlightRange(highlight) {
+  // Captures numbers separated by a dash: 2-3, 34-5, 2-101
+  const numbersWithDash = new RegExp('([0-9]+)-([0-9]+)')
+
+  const match = numbersWithDash.exec(highlight)
+  if (!match) return null
+
+  return {firstLine: match[1], lastLine: match[2]}
+}
+
+const LineWrapper = styled.div`
+  // Using negative and positive nth-child values to select the children.
+  pre .token-line:nth-child(n + ${props => props.range.firstLine}):nth-child(-n + ${props => props.range.lastLine}) {
+    // 16px is the padding of the react-live <pre> element that wraps the .token-line elements.
+    // The margin/padding combo extends the token-line elements so the background color reaches the border.
+    margin: 0px -16px;
+    padding: 0px 16px;
+    background-color: ${themeGet('colors.accent.subtle')};
+    // We use box-shadow instead of a border to avoid flickering when toggling the highlighting on/off.
+    box-shadow: inset 3px 0px 0px 0px ${themeGet('colors.accent.fg')};
+  }
+`
+
+function LineHighlighter({enabled, range, children}) {
+  if (!enabled || !range) return children
+
+  return <LineWrapper range={range}>{children}</LineWrapper>
+}
+
+function LiveCode({code, language, highlight, noinline, metastring}) {
   const theme = React.useContext(ThemeContext)
   const [liveCode, setLiveCode] = useState(code)
-  const handleChange = updatedLiveCode => setLiveCode(updatedLiveCode)
+  const [pristine, setPristine] = useState(true)
+  const handleChange = updatedLiveCode => {
+    setLiveCode(updatedLiveCode)
+    setPristine(false)
+  }
 
   return (
     <Box sx={{flexDirection: 'column', mb: 3, display: 'flex'}}>
@@ -66,21 +101,23 @@ function LiveCode({code, language, noinline, metastring}) {
           </LivePreviewWrapper>
         </Box>
         <Box sx={{position: 'relative'}}>
-          <LiveEditor
-            onChange={handleChange}
-            theme={githubTheme}
-            ignoreTabKey={true}
-            padding={theme.space[3]}
-            style={{
-              fontFamily: theme.fonts.mono,
-              fontSize: '85%',
-              borderBottomLeftRadius: theme.radii[2],
-              borderBottomRightRadius: theme.radii[2],
-              border: '1px solid',
-              borderTop: 0,
-              borderColor: theme.colors.border.default
-            }}
-          />
+          <LineHighlighter range={parseHighlightRange(highlight)} enabled={pristine}>
+            <LiveEditor
+              onChange={handleChange}
+              theme={githubTheme}
+              ignoreTabKey={true}
+              padding={theme.space[3]}
+              style={{
+                fontFamily: theme.fonts.mono,
+                fontSize: '85%',
+                borderBottomLeftRadius: theme.radii[2],
+                borderBottomRightRadius: theme.radii[2],
+                border: '1px solid',
+                borderTop: 0,
+                borderColor: theme.colors.border.default
+              }}
+            />
+          </LineHighlighter>
           <Box sx={{top: 0, right: 0, p: 2, position: 'absolute'}}>
             <ClipboardCopy value={liveCode} />
           </Box>

package/src/components/nav-drawer.js

@@ -21,7 +21,7 @@ export function useNavDrawerState(breakpoint) {
     if (window.innerWidth >= breakpoint) {
       setOpen(false)
     }
-  }, [setOpen])
+  }, [setOpen, breakpoint])
 
   const debouncedOnResize = React.useCallback(debounce(onResize, 250), [onResize])
 
@@ -86,11 +86,13 @@ function NavDrawer({isOpen, onDismiss}) {
               <Link
                 as={GatsbyLink}
                 to="/"
-                sx={{display: 'inline-block', color: 'inherit', fontFamily: 'mono', mx: 4, my: 4}}
+                sx={{display: 'inline-block', color: 'inherit', fontFamily: 'mono', mx: 4, mt: 4}}
               >
                 {siteMetadata.title}
               </Link>
-              <NavItems items={navItems} />
+              <Box sx={{px: 2}}>
+                <NavItems items={navItems} />
+              </Box>
             </Box>
           </ThemeProvider>
         ) : null}

package/src/components/nav-items.js

@@ -1,9 +1,9 @@
-import {Box, Link, StyledOcticon, themeGet} from '@primer/react'
 import {LinkExternalIcon} from '@primer/octicons-react'
-import {Link as GatsbyLink} from 'gatsby'
+import {NavList} from '@primer/react/drafts'
+import {useLocation} from '@reach/router'
+import {Link as GatsbyLink, withPrefix} from 'gatsby'
 import preval from 'preval.macro'
 import React from 'react'
-import styled from 'styled-components'
 
 // This code needs to run at build-time so it can access the file system.
 const repositoryUrl = preval`
@@ -17,81 +17,46 @@ const repositoryUrl = preval`
   }
 `
 
-const NavLink = styled(Link)`
-  &.active {
-    font-weight: ${themeGet('fontWeights.bold')};
-    color: ${themeGet('colors.fg.default')};
-  }
-`
+function NavItem({href, children}) {
+  const location = useLocation()
+  const isCurrent = withPrefix(href) === location.pathname
+  return (
+    <NavList.Item as={GatsbyLink} to={href} aria-current={isCurrent ? 'page' : null}>
+      {children}
+    </NavList.Item>
+  )
+}
 
 function NavItems({items}) {
   return (
-    <>
+    <NavList>
       {items.map(item => (
-        <Box
-          key={item.title}
-          sx={{
-            borderWidth: 0,
-            borderRadius: 0,
-            borderTopWidth: 1,
-            borderStyle: 'solid',
-            borderColor: 'border.muted',
-            p: 4
-          }}
-        >
-          <Box sx={{display: 'flex', flexDirection: 'column'}}>
-            <NavLink
-              as={GatsbyLink}
-              to={item.url}
-              activeClassName="active"
-              partiallyActive={true}
-              sx={{color: 'inherit'}}
-            >
-              {item.title}
-            </NavLink>
-            {item.children ? (
-              <Box sx={{display: 'flex', flexDirection: 'column', mt: 2}}>
-                {item.children.map(child => (
-                  <NavLink
-                    key={child.title}
-                    as={GatsbyLink}
-                    to={child.url}
-                    activeClassName="active"
-                    sx={{
-                      display: 'block',
-                      py: 1,
-                      mt: 2,
-                      fontSize: 1
-                    }}
-                  >
-                    {child.title}
-                  </NavLink>
-                ))}
-              </Box>
-            ) : null}
-          </Box>
-        </Box>
+        <React.Fragment key={item.title}>
+          {item.children ? (
+            <NavList.Group title={item.title}>
+              {item.children.map(child => (
+                <NavItem key={child.title} href={child.url}>
+                  {child.title}
+                </NavItem>
+              ))}
+            </NavList.Group>
+          ) : (
+            <NavItem href={item.url}>{item.title}</NavItem>
+          )}
+        </React.Fragment>
       ))}
       {repositoryUrl ? (
-        <Box
-          sx={{
-            borderWidth: 0,
-            borderTopWidth: 1,
-            borderRadius: 0,
-            borderStyle: 'solid',
-            borderColor: 'border.default',
-            p: 4
-          }}
-        >
-          <Link href={repositoryUrl} sx={{color: 'inherit'}}>
-            <Box sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
-              GitHub
-              <StyledOcticon icon={LinkExternalIcon} sx={{color: 'fg.muted'}} />
-            </Box>
-          </Link>
-        </Box>
+        <>
+          <NavList.Divider />
+          <NavList.Item href={repositoryUrl}>
+            GitHub
+            <NavList.TrailingVisual>
+              <LinkExternalIcon />
+            </NavList.TrailingVisual>
+          </NavList.Item>
+        </>
       ) : null}
-    </>
+    </NavList>
   )
 }
 

package/src/components/sidebar.js

@@ -19,7 +19,7 @@ function usePersistentScroll(id) {
     if (scrollPosition && ref.current) {
       ref.current.scrollTop = scrollPosition
     }
-  }, [])
+  }, [id])
 
   // Return props to spread onto the scroll container
   return {
@@ -37,8 +37,7 @@ function Sidebar() {
         position: 'sticky',
         top: HEADER_HEIGHT,
         height: `calc(100vh - ${HEADER_HEIGHT}px)`,
-        minWidth: 260,
-        bg: 'canvas.subtle'
+        minWidth: 260
       }}
     >
       <Box
@@ -50,7 +49,8 @@ function Sidebar() {
           borderRadius: 0,
           height: '100%',
           borderStyle: 'solid',
-          borderColor: 'border.default'
+          borderColor: 'border.subtle',
+          px: 2
         }}
       >
         <Box sx={{flexDirection: 'column', display: 'flex'}}>

package/src/components/source-link.js

@@ -4,7 +4,7 @@ import React from 'react'
 
 function SourceLink({href}) {
   return (
-    <Link href={href}>
+    <Link href={href} target="_blank">
       <MarkGithubIcon />
       <Text sx={{ml: 2, display: 'inline-block'}}>View source</Text>
     </Link>

package/src/components/storybook-link.js

@@ -3,9 +3,9 @@ import React from 'react'
 
 function SourceLink({href}) {
   return (
-    <Link href={href}>
+    <Link href={href} target="_blank">
       <StorybookIcon />
-      <Text sx={{ml: 2, display: 'inline-block'}}>View storybook</Text>
+      <Text sx={{ml: 2, display: 'inline-block'}}>View Storybook</Text>
     </Link>
   )
 }

package/src/components/table-of-contents.js

@@ -1,33 +1,16 @@
-import {Box, Link} from '@primer/react'
 import React from 'react'
+import {NavList} from '@primer/react/drafts'
 
-function TableOfContents({items, depth}) {
+function TableOfContents({'aria-labelledby': ariaLabelledBy, items}) {
   return (
-    <Box as="ul" sx={{m: 0, p: 0, listStyle: 'none'}}>
+    <NavList aria-labelledby={ariaLabelledBy}>
       {items.map(item => (
-        <Box as="li" key={item.url} sx={{pl: depth > 0 ? 3 : 0}}>
-          {item.title ? (
-            <Link
-              href={item.url}
-              sx={{
-                display: 'inline-block',
-                py: 1,
-                fontSize: [2, null, 1],
-                color: 'fg.muted'
-              }}
-            >
-              {item.title}
-            </Link>
-          ) : null}
-          {item.items ? <TableOfContents items={item.items} depth={depth + 1} /> : null}
-        </Box>
+        <NavList.Item key={item.title} href={item.url}>
+          {item.title}
+        </NavList.Item>
       ))}
-    </Box>
+    </NavList>
   )
 }
 
-TableOfContents.defaultProps = {
-  depth: 0
-}
-
 export default TableOfContents

package/src/components/table.js

@@ -28,6 +28,7 @@ const Table = styled.table`
 
   img {
     background-color: transparent;
+    vertical-align: middle;
   }
 `
 

package/src/components/wrap-root-element.js

@@ -1,5 +1,6 @@
 import {MDXProvider} from '@mdx-js/react'
-import {Link, ThemeProvider} from '@primer/react'
+import {ThemeProvider} from '@primer/react'
+import Link from './link'
 import React from 'react'
 import mdxComponents from '../mdx-components'
 import Blockquote from './blockquote'

package/src/primer-nav.yml

@@ -20,6 +20,8 @@
       url: https://primer.style/css
     - title: React
       url: https://primer.style/react
+    - title: React Brand
+      url: https://primer.style/brand
     - title: ViewComponents
       url: https://primer.style/view-components
 - title: Contribute

package/src/search.worker.js

@@ -3,7 +3,7 @@ import debounce from 'lodash.debounce'
 ;(function searchWorker() {
   let fuse = null
 
-  // [MKT]: I landed on the debouce wait value of 50 based mostly on
+  // [MKT]: I landed on the debounce wait value of 50 based mostly on
   // experimentation. With both `leading` and `trailing` set to `true`, this
   // feels pretty snappy.
   //