@primer/gatsby-theme-doctocat 4.7.1 → 5.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @primer/gatsby-theme-doctocat
 
+## 5.1.0
+
+### Minor Changes
+
+- [`0798937`](https://github.com/primer/doctocat/commit/0798937ceb981c88abc95e428a1d73e3237a6460) [#727](https://github.com/primer/doctocat/pull/727) Thanks [@dipree](https://github.com/dipree)! - Add optional tracking option to head
+
+## 5.0.0
+
+### Major Changes
+
+- [`7b07123`](https://github.com/primer/doctocat/commit/7b0712311247b5f8ddf8e306eb89424d162a6e7b) [#479](https://github.com/primer/doctocat/pull/479) Thanks [@joshblack](https://github.com/joshblack)! - Update gatsby to v3
+
 ## 4.7.1
 
 ### Patch Changes

package/babel.config.js

@@ -4,10 +4,10 @@ module.exports = {
       '@babel/preset-env',
       {
         targets: {
-          node: 'current'
-        }
-      }
+          node: 'current',
+        },
+      },
     ],
-    '@babel/preset-react'
-  ]
+    '@babel/preset-react',
+  ],
 }

package/gatsby-config.js

@@ -8,10 +8,10 @@ module.exports = themeOptions => {
       header: {
         title: 'Primer',
         url: 'https://primer.style',
-        logoUrl: 'https://primer.style'
+        logoUrl: 'https://primer.style',
       },
       description: 'A Gatsby theme for creating Primer documentation sites',
-      imageUrl: 'https://user-images.githubusercontent.com/10384315/53922681-2f6d3100-402a-11e9-9719-5d1811c8110a.png'
+      imageUrl: 'https://user-images.githubusercontent.com/10384315/53922681-2f6d3100-402a-11e9-9719-5d1811c8110a.png',
     },
     plugins: [
       'gatsby-plugin-styled-components',
@@ -24,23 +24,23 @@ module.exports = themeOptions => {
         options: {
           extensions: ['.mdx', '.md'],
           defaultLayouts: {
-            default: require.resolve('./src/components/layout.js')
-          }
-        }
+            default: require.resolve('./src/components/layout.js'),
+          },
+        },
       },
       {
         resolve: 'gatsby-source-filesystem',
         options: {
           name: 'content',
-          path: path.resolve('./content')
-        }
+          path: path.resolve('./content'),
+        },
       },
       {
         resolve: 'gatsby-plugin-manifest',
         options: {
-          icon: themeOptions.icon ? path.resolve(themeOptions.icon) : require.resolve('./src/images/favicon.png')
-        }
-      }
-    ]
+          icon: themeOptions.icon ? path.resolve(themeOptions.icon) : require.resolve('./src/images/favicon.png'),
+        },
+      },
+    ],
   }
 }

package/gatsby-node.js

@@ -79,10 +79,10 @@ exports.createPages = async ({graphql, actions}, themeOptions) => {
           // for us here, and does on the first build,
           // but when HMR kicks in the frontmatter is lost.
           // The solution is to include it here explicitly.
-          frontmatter
-        }
+          frontmatter,
+        },
       })
-    })
+    }),
   )
 }
 
@@ -110,7 +110,7 @@ exports.onPostBuild = async ({graphql}) => {
         id: node.context.frontmatter.componentId,
         path: node.path,
         status: node.context.frontmatter.status.toLowerCase(),
-        a11yReviewed: node.context.frontmatter.a11yReviewed || false
+        a11yReviewed: node.context.frontmatter.a11yReviewed || false,
       }
     })
 
@@ -137,12 +137,12 @@ async function fetchContributors(repo, filePath, accessToken = '') {
     const req = {
       method: 'get',
       baseURL: 'https://api.github.com/',
-      url: `/repos/${repo.user}/${repo.project}/commits?path=${filePath}&per_page=100`
+      url: `/repos/${repo.user}/${repo.project}/commits?path=${filePath}&per_page=100`,
     }
 
     if (accessToken && accessToken.length) {
       req.headers = {
-        Authorization: `token ${accessToken}`
+        Authorization: `token ${accessToken}`,
       }
     }
 
@@ -153,8 +153,8 @@ async function fetchContributors(repo, filePath, accessToken = '') {
         login: commit.author && commit.author.login,
         latestCommit: {
           date: commit.commit.author.date,
-          url: commit.html_url
-        }
+          url: commit.html_url,
+        },
       }))
       .filter(contributor => Boolean(contributor.login))
 

package/jest.config.js

@@ -1,6 +1,7 @@
 module.exports = {
+  testEnvironment: 'jsdom',
   collectCoverage: true,
   collectCoverageFrom: ['src/**/*.js'],
   setupFilesAfterEnv: ['<rootDir>/setup-tests.js'],
-  transformIgnorePatterns: ['/node_modules/(?!@primer/behaviors)']
+  transformIgnorePatterns: ['/node_modules/(?!@primer/behaviors)'],
 }

package/package.json

@@ -1,81 +1,90 @@
 {
   "name": "@primer/gatsby-theme-doctocat",
-  "version": "4.7.1",
+  "version": "5.1.0",
   "main": "index.js",
   "license": "MIT",
   "scripts": {
     "test": "jest",
     "lint": "eslint '**/*.{js,ts,tsx}'",
-    "lint:fix": "yarn lint -- --fix"
+    "lint:fix": "npm run lint -- --fix"
   },
   "prettier": "@github/prettier-config",
+  "resolutions": {
+    "graphql": "^15.4.0",
+    "graphql-compose": "^7.25.0"
+  },
   "devDependencies": {
-    "@github/prettier-config": "^0.0.4",
+    "@github/prettier-config": "^0.0.6",
     "eslint": "^8.0.1",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-github": "^4.10.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-primer-react": "0.7.4",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-primer-react": "^4.0.3",
     "eslint-plugin-react": "^7.26.1",
-    "gatsby": "^2.32.13",
-    "prettier": "^2.4.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "gatsby": "^3.14.6",
+    "jest-environment-jsdom": "^29.7.0",
+    "prettier": "^3.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "peerDependencies": {
-    "gatsby": "2.x",
-    "react": "^16.9.x",
-    "react-dom": "^16.9.x"
+    "gatsby": "3.x",
+    "react": "^18.x",
+    "react-dom": "^18.x"
   },
   "dependencies": {
+    "@babel/core": "^7.19.1",
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
     "@mdx-js/mdx": "^1.0.21",
     "@mdx-js/react": "^1.0.21",
     "@primer/component-metadata": "^0.5.1",
     "@primer/octicons-react": "^17.5.0",
-    "@primer/react": "^35.2.2",
+    "@primer/react": "^36.1.0",
     "@styled-system/theme-get": "^5.0.12",
-    "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^9.1.3",
-    "axios": "^0.21.2",
-    "babel-jest": "^24.9.0",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "axios": "^1.5.0",
+    "babel-jest": "^29.7.0",
+    "babel-plugin-styled-components": "^2.0.7",
     "copy-to-clipboard": "^3.2.0",
     "date-fns": "^2.28.0",
     "details-element-polyfill": "^2.4.0",
     "downshift": "^3.2.10",
     "find-up": "^6.3.0",
     "framer-motion": "^1.4.2",
-    "fuse.js": "^3.4.5",
-    "gatsby-plugin-catch-links": "^2.1.2",
-    "gatsby-plugin-manifest": "^2.2.1",
+    "fuse.js": "^7.0.0",
+    "gatsby-plugin-catch-links": "^3.14.0",
+    "gatsby-plugin-manifest": "^3.14.0",
     "gatsby-plugin-mdx": "^1.0.13",
-    "gatsby-plugin-page-creator": "^2.1.1",
-    "gatsby-plugin-react-helmet": "^3.1.0",
-    "gatsby-plugin-remove-trailing-slashes": "^2.1.2",
-    "gatsby-plugin-styled-components": "^3.1.0",
-    "gatsby-source-filesystem": "^2.1.0",
-    "gatsby-transformer-yaml": "^2.2.0",
-    "get-pkg-repo": "^4.1.0",
+    "gatsby-plugin-page-creator": "^3.14.0",
+    "gatsby-plugin-react-helmet": "^4.14.0",
+    "gatsby-plugin-remove-trailing-slashes": "^3.14.0",
+    "gatsby-plugin-styled-components": "^4.14.0",
+    "gatsby-source-filesystem": "^3.14.0",
+    "gatsby-transformer-yaml": "^3.14.0",
+    "get-pkg-repo": "^5.0.0",
     "github-slugger": "^1.2.1",
-    "html-react-parser": "^1.4.0",
-    "jest": "^24.9.0",
+    "html-react-parser": "^5.0.3",
+    "jest": "^29.7.0",
     "lodash.debounce": "4.0.8",
     "lodash.uniqby": "^4.7.0",
+    "path-browserify": "^1.0.1",
     "pkg-up": "^3.1.0",
     "pluralize": "^8.0.0",
     "preval.macro": "^3.0.0",
     "prism-react-renderer": "^1.2.0",
     "prismjs": "^1.27.0",
     "react-addons-text-content": "^0.0.4",
-    "react-element-to-jsx-string": "^14.0.3",
+    "react-element-to-jsx-string": "^15.0.0",
     "react-focus-on": "^3.3.0",
     "react-helmet": "^6.1.0",
     "react-live": "^2.1.2",
     "react-measure": "^2.3.0",
     "read-pkg-up": "^6.0.0",
     "sentence-case": "^2.1.1",
-    "styled-components": "^4.3.2",
+    "styled-components": "^5.3.11",
     "styled-system": "^5.0.18",
     "worker-loader": "^3.0.2"
   }

package/setup-tests.js

@@ -1,10 +1,17 @@
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 
 // 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()
+    disconnect: jest.fn(),
   }
 })
+
+global.CSS = {
+  escape: jest.fn(),
+  supports: jest.fn().mockImplementation(() => {
+    return false
+  }),
+}

package/src/components/__tests__/contributors.test.js

@@ -3,27 +3,27 @@ import React from 'react'
 import Contributors from '../contributors'
 
 test('renders contributors', () => {
-  const {queryByText} = render(
+  const {queryByText, debug} = render(
     <Contributors
       contributors={[
         {
           login: 'colebemis',
           latestCommit: {
             url: '#',
-            date: '2019-08-15T23:40:19Z'
-          }
+            date: '2019-08-15T23:40:19Z',
+          },
         },
         {
           login: 'emplums',
           latestCommit: {
             url: '#',
-            date: '2019-08-14T00:19:54Z'
-          }
-        }
+            date: '2019-08-14T00:19:54Z',
+          },
+        },
       ]}
-    />
+    />,
   )
-
+  debug()
   expect(queryByText(/2 contributors/)).toBeInTheDocument()
   expect(queryByText(/Last edited by/)).toBeInTheDocument()
   expect(queryByText(/colebemis/)).toBeInTheDocument()
@@ -53,18 +53,18 @@ test('does not render duplicate contributors', () => {
           login: 'colebemis',
           latestCommit: {
             url: '#',
-            date: '2019-08-15T23:40:19Z'
-          }
+            date: '2019-08-15T23:40:19Z',
+          },
         },
         {
           login: 'colebemis',
           latestCommit: {
             url: '#',
-            date: '2019-08-14T00:19:54Z'
-          }
-        }
+            date: '2019-08-14T00:19:54Z',
+          },
+        },
       ]}
-    />
+    />,
   )
 
   expect(queryByText(/1 contributor/)).toBeInTheDocument()

package/src/components/accessibility-label.js

@@ -1,4 +1,4 @@
-import {Label, StyledOcticon} from '@primer/react'
+import {Label, Octicon} from '@primer/react'
 import {AccessibilityInsetIcon} from '@primer/octicons-react'
 import React from 'react'
 
@@ -14,10 +14,10 @@ function AccessibilityLabel({a11yReviewed, short}) {
             gap: 2,
             backgroundColor: 'done.subtle',
             fontWeight: 'normal',
-            borderColor: 'transparent'
+            borderColor: 'transparent',
           }}
         >
-          <StyledOcticon icon={AccessibilityInsetIcon} sx={{fill: 'done.fg'}} />
+          <Octicon icon={AccessibilityInsetIcon} sx={{fill: 'done.fg'}} />
           {short ? 'Reviewed' : 'Reviewed for accessibility'}
         </Label>
       ) : (
@@ -26,7 +26,7 @@ function AccessibilityLabel({a11yReviewed, short}) {
           sx={{
             backgroundColor: 'neutral.subtle',
             fontWeight: 'normal',
-            borderColor: 'transparent'
+            borderColor: 'transparent',
           }}
         >
           {short ? 'Not reviewed' : 'Not reviewed for accessibility'}

package/src/components/clipboard-copy.js

@@ -1,4 +1,4 @@
-import {Button, StyledOcticon} from '@primer/react'
+import {Button, Octicon} from '@primer/react'
 import {CheckIcon, CopyIcon} from '@primer/octicons-react'
 import copy from 'copy-to-clipboard'
 import React from 'react'
@@ -24,9 +24,9 @@ function ClipboardCopy({value}) {
       sx={{px: 2}}
     >
       {copied ? (
-        <StyledOcticon icon={CheckIcon} sx={{color: 'success.fg'}} />
+        <Octicon icon={CheckIcon} sx={{color: 'success.fg'}} />
       ) : (
-        <StyledOcticon icon={CopyIcon} sx={{color: 'fg.muted'}} />
+        <Octicon icon={CopyIcon} sx={{color: 'fg.muted'}} />
       )}
     </Button>
   )

package/src/components/code.js

@@ -24,7 +24,7 @@ function Code({className, children, live, highlight, noinline, metastring}) {
         display: 'table',
         tableLayout: 'fixed',
         width: '100%',
-        position: 'relative'
+        position: 'relative',
       }}
     >
       <Box sx={{top: 0, right: 0, p: 2, position: 'absolute'}}>

package/src/components/contributors.js

@@ -17,15 +17,11 @@ function Contributors({contributors}) {
           {uniqueContributors.length} {pluralize('contributor', uniqueContributors.length)}
         </Text>
         {uniqueContributors.map(contributor => (
-          <Link
-            key={contributor.login}
-            href={`https://github.com/${contributor.login}`}
-            sx={{mr: 2, lineHeight: 'condensedUltra'}}
-          >
-            <Tooltip key={contributor.login} aria-label={contributor.login}>
+          <Tooltip key={contributor.login} aria-label={contributor.login} sx={{mr: 2, lineHeight: 'condensedUltra'}}>
+            <Link key={contributor.login} href={`https://github.com/${contributor.login}`}>
               <Avatar src={`https://github.com/${contributor.login}.png?size=40`} alt={contributor.login} />
-            </Tooltip>
-          </Link>
+            </Link>
+          </Tooltip>
         ))}
       </Box>
 

package/src/components/details.js

@@ -62,7 +62,7 @@ function Details({children, overlay, render = getRenderer(children), ...rest}) {
 }
 
 Details.defaultProps = {
-  overlay: false
+  overlay: false,
 }
 
 export default Details

package/src/components/do-dont.js

@@ -10,7 +10,7 @@ export function DoDontContainer({stacked, children}) {
 }
 
 DoDontContainer.defaultProps = {
-  stacked: false
+  stacked: false,
 }
 
 export function Do(props) {
@@ -34,7 +34,7 @@ function DoDontBase({children, title, bg, borderColor, indented}) {
           backgroundColor: bg,
           borderRadius: '2',
           color: 'fg.onEmphasis',
-          paddingX: '2'
+          paddingX: '2',
         }}
       >
         <Text sx={{fontWeight: 'bold', fontSize: '1', color: 'fg.onEmphasis'}}>{title}</Text>
@@ -48,7 +48,7 @@ function DoDontBase({children, title, bg, borderColor, indented}) {
               borderLeftWidth: '4px',
               borderLeftStyle: 'solid',
               borderLeftColor: borderColor,
-              paddingLeft: '3'
+              paddingLeft: '3',
             }}
           >
             {children}

package/src/components/frame.js

@@ -3,14 +3,13 @@ import ReactDOM from 'react-dom'
 import {StyleSheetManager} from 'styled-components'
 import Measure from 'react-measure'
 
-function Frame({children}) {
+function Frame({title = 'Code frame', children}) {
   const [height, setHeight] = React.useState('auto')
   const [iframeRef, setIframeRef] = React.useState(null)
   const contentDocument = iframeRef ? iframeRef.contentWindow.document : null
 
   return (
-    // eslint-disable-next-line jsx-a11y/iframe-has-title
-    <iframe ref={setIframeRef} style={{width: '100%', border: 0, borderRadius: 6, height}}>
+    <iframe ref={setIframeRef} style={{width: '100%', border: 0, borderRadius: 6, height}} title={title}>
       {
         // By default, styled-components injects styles in the head of the page.
         // However, styles from the page's head don't apply inside iframes.
@@ -29,7 +28,7 @@ function Frame({children}) {
                 {({measureRef}) => <div ref={measureRef}>{children}</div>}
               </Measure>
             </StyleSheetManager>,
-            contentDocument.body
+            contentDocument.body,
           )
       }
     </iframe>

package/src/components/head.js

@@ -15,6 +15,12 @@ function Head(props) {
       <meta property="og:description" content={description} />
       <meta property="og:image" content={siteMetadata.imageUrl} />
       <meta property="twitter:card" content="summary_large_image" />
+      {siteMetadata.primerTracking ? (
+        <>
+          <meta name="ha-url" content="https://collector.githubapp.com/primer/collect" />
+          <script src="https://analytics.githubassets.com/hydro-marketing.min.js"></script>
+        </>
+      ) : null}
     </Helmet>
   )
 }

package/src/components/header.js

@@ -1,5 +1,5 @@
 import {MarkGithubIcon, SearchIcon, ThreeBarsIcon} from '@primer/octicons-react'
-import {Box, Button, Link, StyledOcticon, Text, ThemeProvider, useTheme, UnderlineNav} from '@primer/react'
+import {Box, Button, Link, Octicon, Text, ThemeProvider, useTheme, UnderlineNav} from '@primer/react'
 import VisuallyHidden from './visually-hidden'
 import {Link as GatsbyLink} from 'gatsby'
 import React from 'react'
@@ -33,7 +33,7 @@ function Header({isSearchEnabled, path}) {
             justifyContent: 'space-between',
             bg: 'canvas.default',
             border: '1px solid',
-            borderColor: 'border.muted'
+            borderColor: 'border.muted',
           }}
         >
           <SkipLink />
@@ -43,10 +43,10 @@ function Header({isSearchEnabled, path}) {
               sx={{
                 color: 'fg.default',
                 mr: 3,
-                lineHeight: 'condensedUltra'
+                lineHeight: 'condensedUltra',
               }}
             >
-              <StyledOcticon icon={MarkGithubIcon} size="24px" />
+              <Octicon icon={MarkGithubIcon} size="24px" />
             </Link>
             {siteMetadata.header.title ? (
               <Link
@@ -59,8 +59,8 @@ function Header({isSearchEnabled, path}) {
                     siteMetadata.shortName ? 'none' : 'inline-block',
                     null,
                     null,
-                    'inline-block'
-                  ]
+                    'inline-block',
+                  ],
                 }}
               >
                 {siteMetadata.header.title}
@@ -73,7 +73,7 @@ function Header({isSearchEnabled, path}) {
                     sx={{
                       display: ['none', null, null, 'inline-block'],
                       color: 'fg.default',
-                      mx: 2
+                      mx: 2,
                     }}
                   >
                     /
@@ -84,7 +84,7 @@ function Header({isSearchEnabled, path}) {
                   to="/"
                   sx={{
                     fontWeight: 'bold',
-                    color: 'fg.default'
+                    color: 'fg.default',
                   }}
                 >
                   {siteMetadata.shortName}
@@ -109,7 +109,7 @@ function Header({isSearchEnabled, path}) {
                     aria-expanded={isMobileSearchOpen}
                     onClick={() => setIsMobileSearchOpen(true)}
                     sx={{
-                      ml: 3
+                      ml: 3,
                     }}
                   >
                     <SearchIcon />
@@ -122,7 +122,7 @@ function Header({isSearchEnabled, path}) {
                 aria-expanded={isNavDrawerOpen}
                 onClick={() => setIsNavDrawerOpen(true)}
                 sx={{
-                  ml: 3
+                  ml: 3,
                 }}
               >
                 <ThreeBarsIcon />
@@ -137,30 +137,26 @@ function Header({isSearchEnabled, path}) {
 }
 
 Header.defaultProps = {
-  isSearchEnabled: true
+  isSearchEnabled: true,
 }
 
 function PrimerNavItems({siteMetadata, items, path, pathPrefix}) {
-  console.log('header url', siteMetadata.header.url)
-  console.log('pathPrefix', pathPrefix)
-  console.log('path', path)
-
   return (
     <>
       <VisuallyHidden>
         <h3 aria-labelledby="site-header">{siteMetadata.header.title} </h3>
       </VisuallyHidden>
-      <UnderlineNav aria-label="main navigation" sx={{border: 'none'}}>
+      <UnderlineNav aria-label="Main navigation" sx={{border: 'none'}}>
         {items.map((item, index) => {
           return (
-            <UnderlineNav.Link
+            <UnderlineNav.Item
               key={index}
               href={item.url}
               selected={item.url === siteMetadata.header.url + (pathPrefix || '') + (path || '')}
               sx={{fontSize: 2, lineHeight: 'condensed'}}
             >
               {item.title}
-            </UnderlineNav.Link>
+            </UnderlineNav.Item>
           )
         })}
       </UnderlineNav>

package/src/components/heading.js

@@ -1,4 +1,4 @@
-import {Heading, Link, StyledOcticon} from '@primer/react'
+import {Heading, Link, Octicon} from '@primer/react'
 import {LinkIcon} from '@primer/octicons-react'
 import themeGet from '@styled-system/theme-get'
 import GithubSlugger from 'github-slugger'
@@ -8,8 +8,8 @@ import styled from 'styled-components'
 import {HEADER_HEIGHT} from './header'
 
 const StyledHeading = styled(Heading)`
-  margin-top: ${themeGet('space.4')};
-  margin-bottom: ${themeGet('space.3')};
+  margin-top: ${themeGet('space.8')};
+  margin-bottom: ${themeGet('space.4')};
   scroll-margin-top: ${HEADER_HEIGHT + 24}px;
   line-height: ${themeGet('lineHeights.condensed')};
 
@@ -37,19 +37,19 @@ function MarkdownHeading({children, ...props}) {
         sx={{
           color: 'inherit',
           '&:hover, &:focus': {
-            textDecoration: 'none'
-          }
+            textDecoration: 'none',
+          },
         }}
       >
         {children}
-        <StyledOcticon
+        <Octicon
           icon={LinkIcon}
           className="octicon-link"
           sx={{
             ml: 2,
             color: 'fg.muted',
             // !important is needed here to override default icon styles
-            verticalAlign: 'middle !important'
+            verticalAlign: 'middle !important',
           }}
         />
       </Link>
@@ -58,13 +58,13 @@ function MarkdownHeading({children, ...props}) {
 }
 
 const StyledH1 = styled(StyledHeading).attrs({as: 'h1'})`
-  padding-bottom: ${themeGet('space.2')};
+  padding-bottom: ${themeGet('space.3')};
   font-size: ${themeGet('fontSizes.7')};
   border-bottom: 1px solid ${themeGet('colors.border.default')};
 `
 
 const StyledH2 = styled(StyledHeading).attrs({as: 'h2'})`
-  padding-bottom: ${themeGet('space.2')};
+  padding-bottom: ${themeGet('space.3')};
   font-size: ${themeGet('fontSizes.4')};
   border-bottom: 1px solid ${themeGet('colors.border.default')};
   font-weight: ${themeGet('fontWeights.semibold')};

package/src/components/image-container.js

@@ -10,7 +10,7 @@ function ImageContainer({children}) {
         borderWidth: '1px',
         borderStyle: 'solid',
         borderColor: 'border.default',
-        borderRadius: 2
+        borderRadius: 2,
       }}
     >
       <Box sx={{img: {maxWidth: '100%'}, justifyContent: 'center', display: 'flex'}}>{children}</Box>

package/src/components/layout.js

@@ -54,7 +54,7 @@ function Layout({children, pageContext, path}) {
     storybook,
     lookbook,
     additionalContributors,
-    componentId
+    componentId,
   } = pageContext.frontmatter
 
   if (!additionalContributors) {
@@ -86,7 +86,7 @@ function Layout({children, pageContext, path}) {
             maxWidth: '1200px',
             mx: 'auto',
             width: '100%',
-            p: [4, 5, 6, 7]
+            p: [4, 5, 6, 7],
           }}
         >
           {pageContext.tableOfContents.items ? (
@@ -98,7 +98,7 @@ function Layout({children, pageContext, path}) {
                 display: ['none', null, 'block'],
                 position: 'sticky',
                 top: HEADER_HEIGHT + 48,
-                maxHeight: `calc(100vh - ${HEADER_HEIGHT}px - 48px)`
+                maxHeight: `calc(100vh - ${HEADER_HEIGHT}px - 48px)`,
               }}
               css={{gridArea: 'table-of-contents', overflow: 'auto'}}
             >
@@ -133,7 +133,7 @@ function Layout({children, pageContext, path}) {
                     mt: 2,
                     rowGap: 3,
                     alignItems: 'center',
-                    fontSize: 1
+                    fontSize: 1,
                   }}
                 >
                   {status ? (
@@ -146,7 +146,7 @@ function Layout({children, pageContext, path}) {
                         m: 0,
                         p: 0,
                         paddingInline: 0,
-                        listStyle: 'none'
+                        listStyle: 'none',
                       }}
                     >
                       <li>
@@ -168,7 +168,7 @@ function Layout({children, pageContext, path}) {
                         m: 0,
                         p: 0,
                         paddingInline: 0,
-                        listStyle: 'none'
+                        listStyle: 'none',
                       }}
                     >
                       {source ? <SourceLink href={source} /> : null}
@@ -191,7 +191,7 @@ function Layout({children, pageContext, path}) {
                   bg: 'canvas.subtle',
                   borderWidth: '1px',
                   borderStyle: 'solid',
-                  borderRadius: 2
+                  borderRadius: 2,
                 }}
               >
                 <Box sx={{px: 3, py: 2}}>

package/src/components/list.js

@@ -23,4 +23,7 @@ const List = styled.ul`
   }
 `
 
+export const UL = List
+export const OL = styled(List).attrs({as: 'ol'})``
+
 export default List

package/src/components/live-code.js

@@ -13,7 +13,7 @@ import themeGet from '@styled-system/theme-get'
 
 const languageTransformers = {
   html: html => htmlToJsx(html),
-  jsx: jsx => wrapWithFragment(jsx)
+  jsx: jsx => wrapWithFragment(jsx),
 }
 
 function htmlToJsx(html) {
@@ -93,7 +93,7 @@ function LiveCode({code, language, highlight, noinline, metastring}) {
             borderColor: 'border.default',
             borderTopRightRadius: 2,
             borderTopLeftRadius: 2,
-            display: 'flex'
+            display: 'flex',
           }}
         >
           <LivePreviewWrapper>
@@ -114,7 +114,7 @@ function LiveCode({code, language, highlight, noinline, metastring}) {
                 borderBottomRightRadius: theme.radii[2],
                 border: '1px solid',
                 borderTop: 0,
-                borderColor: theme.colors.border.default
+                borderColor: theme.colors.border.default,
               }}
             />
           </LineHighlighter>

package/src/components/mobile-search.js

@@ -52,7 +52,7 @@ function MobileSearch({isOpen, onDismiss}) {
                 bottom: 0,
                 bg: 'primer.canvas.backdrop',
                 zIndex: -1,
-                position: 'absolute'
+                position: 'absolute',
               }}
             />
             <Downshift
@@ -72,7 +72,7 @@ function MobileSearch({isOpen, onDismiss}) {
                 <Box
                   {...getRootProps({
                     flexDirection: 'column',
-                    height: isMenuOpen ? '100%' : 'auto'
+                    height: isMenuOpen ? '100%' : 'auto',
                   })}
                   sx={{display: 'flex'}}
                 >
@@ -88,7 +88,7 @@ function MobileSearch({isOpen, onDismiss}) {
                         leadingVisual={SearchIcon}
                         {...getInputProps({
                           placeholder: `Search`,
-                          sx: {width: '100%'}
+                          sx: {width: '100%'},
                         })}
                       />
                     </motion.div>
@@ -107,8 +107,8 @@ function MobileSearch({isOpen, onDismiss}) {
                         flex: '1 1 auto',
                         style: {
                           overflow: 'auto',
-                          WebkitOverflowScrolling: 'touch'
-                        }
+                          WebkitOverflowScrolling: 'touch',
+                        },
                       })}
                     >
                       <SearchResults

package/src/components/nav-drawer.js

@@ -56,7 +56,7 @@ function NavDrawer({isOpen, onDismiss}) {
               borderRadius: 0,
               borderBottomWidth: 1,
               borderColor: 'border.muted',
-              borderStyle: 'solid'
+              borderStyle: 'solid',
             }}
           >
             <Box sx={{py: 3, pl: 4, pr: 3, alignItems: 'center', justifyContent: 'space-between', display: 'flex'}}>
@@ -80,7 +80,7 @@ function NavDrawer({isOpen, onDismiss}) {
                 flex: '1 0 auto',
                 color: 'fg.default',
                 bg: 'canvas.default',
-                display: 'flex'
+                display: 'flex',
               }}
             >
               <Link
@@ -113,14 +113,21 @@ function PrimerNavItems({items}) {
           borderColor: 'border.muted',
           px: 4,
           py: 3,
-          borderStyle: 'solid'
+          borderStyle: 'solid',
         }}
       >
         {item.children ? (
           <Details key={index}>
             {({open, toggle}) => (
               <>
-                <summary onClick={toggle} style={{cursor: 'pointer'}}>
+                {/*eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
+                <summary
+                  //The following line of code has only an onClick event and no keyboard event and its a non static
+                  //element. This is because we don't want it to be a tabstop thats tedious for keyboard users and sr's.
+                  //This needs to be a hard exception
+                  onClick={toggle}
+                  style={{cursor: 'pointer'}}
+                >
                   <Box sx={{alignItems: 'center', justifyContent: 'space-between', display: 'flex'}}>
                     <Text>{item.title}</Text>
                     {open ? <ChevronUpIcon /> : <ChevronDownIcon />}

package/src/components/nav-dropdown.js

@@ -12,8 +12,8 @@ function NavDropdown({title, children}) {
           fontSize: 2,
           color: 'fg.default',
           ':hover:not([disabled])': {
-            backgroundColor: 'canvas.subtle'
-          }
+            backgroundColor: 'canvas.subtle',
+          },
         }}
       >
         {title}

package/src/components/note.js

@@ -16,22 +16,22 @@ const Note = styled.div`
     variants: {
       info: {
         borderColor: 'accent.muted',
-        bg: 'accent.subtle'
+        bg: 'accent.subtle',
       },
       warning: {
         borderColor: 'attention.muted',
-        bg: 'attention.subtle'
+        bg: 'attention.subtle',
       },
       danger: {
         borderColor: 'danger.muted',
-        bg: 'danger.subtle'
-      }
-    }
+        bg: 'danger.subtle',
+      },
+    },
   })}
 `
 
 Note.defaultProps = {
-  variant: 'info'
+  variant: 'info',
 }
 
 export default Note

package/src/components/page-footer.js

@@ -1,5 +1,5 @@
 import {PencilIcon} from '@primer/octicons-react'
-import {Box, Link, StyledOcticon} from '@primer/react'
+import {Box, Link, Octicon} from '@primer/react'
 import React from 'react'
 import Contributors from './contributors'
 import VisuallyHidden from './visually-hidden'
@@ -16,7 +16,7 @@ function PageFooter({editUrl, contributors}) {
         mt: 8,
         py: 5,
         borderStyle: 'solid',
-        borderColor: 'border.default'
+        borderColor: 'border.default',
       }}
     >
       <VisuallyHidden>
@@ -25,7 +25,7 @@ function PageFooter({editUrl, contributors}) {
       <Box sx={{gridGap: 4, display: 'grid'}}>
         {editUrl ? (
           <Link href={editUrl}>
-            <StyledOcticon icon={PencilIcon} sx={{mr: 2}} />
+            <Octicon icon={PencilIcon} sx={{mr: 2}} />
             Edit this page on GitHub
           </Link>
         ) : null}
@@ -37,7 +37,7 @@ function PageFooter({editUrl, contributors}) {
 }
 
 PageFooter.defaultProps = {
-  contributors: []
+  contributors: [],
 }
 
 export default PageFooter

package/src/components/search-results.js

@@ -23,7 +23,7 @@ function SearchResults({results, getItemProps, highlightedIndex}) {
         fontSize: 1,
         bg: highlightedIndex === index ? 'neutral.muted' : 'transparent',
         style: {cursor: 'pointer'},
-        borderRadius: 2
+        borderRadius: 2,
       })}
       sx={{display: 'flex'}}
     >
@@ -42,7 +42,7 @@ function getBreadcrumbs(siteTitle, path) {
       // The last title will be displayed separately, so we exclude it
       // from the breadcrumbs to avoid displaying it twice.
       .slice(0, -1)
-      .map(sentenceCase)
+      .map(sentenceCase),
   ]
 }
 

package/src/components/search.js

@@ -51,8 +51,8 @@ function Search() {
             {...getInputProps({
               placeholder: `Search ${siteMetadata.title}`,
               sx: {
-                width: 300
-              }
+                width: 300,
+              },
             })}
           />
           {isOpen ? (
@@ -61,7 +61,7 @@ function Search() {
                 position: 'absolute',
                 left: 0,
                 right: 0,
-                pt: 2
+                pt: 2,
               })}
             >
               <ThemeProvider colorMode="day">
@@ -76,7 +76,7 @@ function Search() {
                     bg: 'canvas.overlay',
                     borderRadius: '12px',
                     borderWidth: '1px',
-                    borderStyle: 'solid'
+                    borderStyle: 'solid',
                   }}
                 >
                   <SearchResults results={results} getItemProps={getItemProps} highlightedIndex={highlightedIndex} />

package/src/components/sidebar.js

@@ -10,7 +10,7 @@ function usePersistentScroll(id) {
   const handleScroll = React.useCallback(
     // Save scroll position in session storage on every scroll change
     event => window.sessionStorage.setItem(id, event.target.scrollTop),
-    [id]
+    [id],
   )
 
   React.useLayoutEffect(() => {
@@ -24,7 +24,7 @@ function usePersistentScroll(id) {
   // Return props to spread onto the scroll container
   return {
     ref,
-    onScroll: handleScroll
+    onScroll: handleScroll,
   }
 }
 
@@ -37,7 +37,7 @@ function Sidebar() {
         position: 'sticky',
         top: HEADER_HEIGHT,
         height: `calc(100vh - ${HEADER_HEIGHT}px)`,
-        width: 260
+        width: 260,
       }}
     >
       <Box
@@ -50,7 +50,7 @@ function Sidebar() {
           height: '100%',
           borderStyle: 'solid',
           borderColor: 'border.subtle',
-          px: 2
+          px: 2,
         }}
       >
         <Box sx={{flexDirection: 'column', display: 'flex'}}>

package/src/components/skip-link.js

@@ -11,7 +11,7 @@ function SkipLinkBase(props) {
         p: 3,
         color: 'fg.onEmphasis',
         backgroundColor: 'accent.emphasis',
-        fontSize: 1
+        fontSize: 1,
       }}
     >
       Skip to content

package/src/components/status-label.js

@@ -1,4 +1,4 @@
-import {Label, StyledOcticon} from '@primer/react'
+import {Label, Octicon} from '@primer/react'
 import {DotFillIcon} from '@primer/octicons-react'
 import React from 'react'
 
@@ -6,14 +6,14 @@ const STATUS_COLORS = {
   alpha: 'severe.fg',
   beta: 'attention.fg',
   stable: 'success.fg',
-  deprecated: 'danger.fg'
+  deprecated: 'danger.fg',
 }
 
 const STATUS_BACKGROUND = {
   alpha: 'severe.subtle',
   beta: 'attention.subtle',
   stable: 'success.subtle',
-  deprecated: 'danger.subtle'
+  deprecated: 'danger.subtle',
 }
 
 function getStatusColor(status) {
@@ -34,10 +34,10 @@ function StatusLabel({status}) {
         gap: 1,
         backgroundColor: getStatusBackgroundColor(status),
         borderColor: 'transparent',
-        fontWeight: 'normal'
+        fontWeight: 'normal',
       }}
     >
-      <StyledOcticon icon={DotFillIcon} sx={{color: getStatusColor(status)}} />
+      <Octicon icon={DotFillIcon} sx={{color: getStatusColor(status)}} />
       {status}
     </Label>
   )

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

@@ -14,7 +14,7 @@ import HorizontalRule from './horizontal-rule'
 import Image from './image'
 import ImageContainer from './image-container'
 import InlineCode from './inline-code'
-import List from './list'
+import {OL, UL} from './list'
 import Note from './note'
 import Paragraph from './paragraph'
 import Superscript from './superscript'
@@ -37,8 +37,8 @@ const components = {
   h4: H4,
   h5: H5,
   h6: H6,
-  ul: List,
-  ol: List.withComponent('ol'),
+  ul: UL,
+  ol: OL,
   dl: DescriptionList,
 
   // Custom components
@@ -48,7 +48,7 @@ const components = {
   DoDontContainer,
   Caption,
   ImageContainer,
-  ...mdxComponents
+  ...mdxComponents,
 }
 
 function wrapRootElement({element}) {

package/src/github.js

@@ -1,63 +1,63 @@
 export default {
   plain: {
     color: '#393A34',
-    backgroundColor: '#f6f8fa'
+    backgroundColor: '#f6f8fa',
   },
   styles: [
     {
       types: ['comment', 'prolog', 'doctype', 'cdata'],
       style: {
         color: '#999988',
-        fontStyle: 'italic'
-      }
+        fontStyle: 'italic',
+      },
     },
     {
       types: ['namespace'],
       style: {
-        opacity: 0.7
-      }
+        opacity: 0.7,
+      },
     },
     {
       types: ['string', 'attr-value'],
       style: {
-        color: '#e3116c'
-      }
+        color: '#e3116c',
+      },
     },
     {
       types: ['punctuation', 'operator'],
       style: {
-        color: '#393A34'
-      }
+        color: '#393A34',
+      },
     },
     {
       types: ['entity', 'url', 'symbol', 'number', 'boolean', 'variable', 'constant', 'property', 'regex', 'inserted'],
       style: {
-        color: '#36acaa'
-      }
+        color: '#36acaa',
+      },
     },
     {
       types: ['atrule', 'keyword', 'attr-name', 'selector'],
       style: {
-        color: '#00a4db'
-      }
+        color: '#00a4db',
+      },
     },
     {
       types: ['function', 'deleted', 'tag'],
       style: {
-        color: '#d73a49'
-      }
+        color: '#d73a49',
+      },
     },
     {
       types: ['function-variable'],
       style: {
-        color: '#6f42c1'
-      }
+        color: '#6f42c1',
+      },
     },
     {
       types: ['tag', 'selector', 'keyword'],
       style: {
-        color: '#00009f'
-      }
-    }
-  ]
+        color: '#00009f',
+      },
+    },
+  ],
 }

package/src/search.worker.js

@@ -18,7 +18,7 @@ import debounce from 'lodash.debounce'
       postMessage({results: results, query: query})
     },
     50,
-    {leading: true, trailing: true}
+    {leading: true, trailing: true},
   )
 
   onmessage = function ({data}) {
@@ -26,7 +26,7 @@ import debounce from 'lodash.debounce'
       fuse = new Fuse(data.list, {
         threshold: 0.2,
         keys: ['title', 'rawBody'],
-        tokenize: true
+        tokenize: true,
       })
     } else if (data.query) {
       performSearch(data.query)

package/src/use-search.js

@@ -1,5 +1,5 @@
 import {graphql, useStaticQuery} from 'gatsby'
-import path from 'path'
+import path from 'path-browserify'
 import React from 'react'
 import SearchWorker from 'worker-loader!./search.worker.js'
 
@@ -40,10 +40,10 @@ function useSearch(query) {
   const list = React.useMemo(() => {
     const results = data.allMdx.nodes.map(node => ({
       path: ensureAbsolute(
-        path.join(node.parent.relativeDirectory, node.parent.name === 'index' ? '/' : node.parent.name)
+        path.join(node.parent.relativeDirectory, node.parent.name === 'index' ? '/' : node.parent.name),
       ),
       title: node.frontmatter.title,
-      rawBody: node.rawBody
+      rawBody: node.rawBody,
     }))
 
     if (data.allCustomSearchDoc.nodes) {