@primer/gatsby-theme-doctocat 3.3.0 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @primer/gatsby-theme-doctocat
 
+## 4.1.0
+
+### Minor Changes
+
+- [`8a4cd71`](https://github.com/primer/doctocat/commit/8a4cd719954443991fbb53e642e62c04839fc7ac) [#476](https://github.com/primer/doctocat/pull/476) Thanks [@jonrohan](https://github.com/jonrohan)! - Adding support for a Lookbook link
+
+## 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

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.1.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/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,4 +1,4 @@
-import {Box, StyledOcticon, Text} from '@primer/react'
+import {Box, Text} from '@primer/react'
 import React from 'react'
 
 export function DoDontContainer({stacked, children}) {

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

@@ -7,11 +7,14 @@ import PageFooter from './page-footer'
 import Sidebar from './sidebar'
 import SourceLink from './source-link'
 import StatusLabel from './status-label'
+import LookbookLink from './lookbook-link'
 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, lookbook, additionalContributors, componentId} =
+    pageContext.frontmatter
 
   if (!additionalContributors) {
     additionalContributors = []
@@ -56,8 +59,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'}}>
@@ -69,7 +74,7 @@ function Layout({children, pageContext}) {
                 {status ? <StatusLabel status={status} /> : null}
               </Box>
               {description ? <Box sx={{fontSize: 3, pb: 2}}>{description}</Box> : null}
-              {source || storybook ? (
+              {source || storybook || lookbook ? (
                 <Box
                   sx={{
                     py: 2,
@@ -81,7 +86,9 @@ function Layout({children, pageContext}) {
                   }}
                 >
                   {source ? <SourceLink href={source} /> : null}
+                  {lookbook ? <LookbookLink href={lookbook} /> : null}
                   {storybook ? <StorybookLink href={storybook} /> : null}
+                  {figma ? <FigmaLink href={figma} /> : null}
                 </Box>
               ) : null}
             </Box>
@@ -97,14 +104,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/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/lookbook-link.js

@@ -0,0 +1,28 @@
+import {Link, Text} from '@primer/react'
+import React from 'react'
+
+function SourceLink({href}) {
+  return (
+    <Link href={href} target="_blank">
+      <LookbookIcon />
+      <Text sx={{ml: 2, display: 'inline-block'}}>View Lookbook</Text>
+    </Link>
+  )
+}
+
+function LookbookIcon() {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      width={16}
+      height={16}
+      fill="currentColor"
+      style={{verticalAlign: 'text-bottom'}}
+    >
+      <path d="M12.3701 0C12.1793 0 12.0588 0.205201 12.1518 0.371843L17.7026 10.3173C17.766 10.4308 17.766 10.5692 17.7026 10.6827L12.1518 20.6282C12.0588 20.7948 12.1793 21 12.3701 21H17.974C18.1099 21 18.2352 20.9265 18.3014 20.8078L23.9524 10.6827C24.0158 10.5692 24.0158 10.4308 23.9524 10.3172L18.3014 0.192237C18.2352 0.07355 18.1099 0 17.974 0H12.3701ZM11.8433 10.3173C11.9067 10.4308 11.9067 10.5692 11.8433 10.6827L6.16371 20.8589C6.06834 21.0298 5.8225 21.0298 5.72712 20.8589L0.04755 10.6827C-0.0158499 10.5692 -0.01585 10.4308 0.0475497 10.3173L5.72712 0.141121C5.8225 -0.029757 6.06834 -0.0297573 6.16371 0.14112L11.8433 10.3173Z" />
+    </svg>
+  )
+}
+
+export default SourceLink

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/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