@primer/gatsby-theme-doctocat 3.3.0 → 4.0.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @primer/gatsby-theme-doctocat
 
+## 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

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.3.0",
+  "version": "4.0.0",
   "main": "index.js",
   "license": "MIT",
   "scripts": {
@@ -33,8 +33,8 @@
     "@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.3.1",
+    "@primer/react": "^35.2.2",
     "@styled-system/theme-get": "^5.0.12",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^9.1.3",

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/layout.js

@@ -56,8 +56,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'}}>
@@ -97,14 +99,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/nav-drawer.js

@@ -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,6 +1,8 @@
-import {Box, Link, StyledOcticon, themeGet} from '@primer/react'
 import {LinkExternalIcon} from '@primer/octicons-react'
-import {Link as GatsbyLink} from 'gatsby'
+import {Link, themeGet} from '@primer/react'
+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'
@@ -17,81 +19,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

@@ -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/table-of-contents.js

@@ -1,28 +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, depth}) {
   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>
   )
 }
 

package/src/components/table.js

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