@primer/gatsby-theme-doctocat 2.0.0 → 3.1.0

package/src/components/header.js

@@ -1,13 +1,4 @@
-import {
-  Box,
-  Button,
-  Link,
-  Sticky,
-  StyledOcticon,
-  Text,
-  ThemeProvider,
-  useTheme,
-} from '@primer/components'
+import {Box, Button, Link, Sticky, StyledOcticon, Text, ThemeProvider, useTheme} from '@primer/components'
 import {MarkGithubIcon, SearchIcon, ThreeBarsIcon} from '@primer/octicons-react'
 import {Link as GatsbyLink} from 'gatsby'
 import React from 'react'
@@ -22,9 +13,7 @@ export const HEADER_HEIGHT = 66
 
 function Header({isSearchEnabled}) {
   const {theme} = useTheme()
-  const [isNavDrawerOpen, setIsNavDrawerOpen] = useNavDrawerState(
-    theme.breakpoints[2],
-  )
+  const [isNavDrawerOpen, setIsNavDrawerOpen] = useNavDrawerState(theme.breakpoints[2])
   const [isMobileSearchOpen, setIsMobileSearchOpen] = React.useState(false)
   const siteMetadata = useSiteMetadata()
   return (
@@ -44,7 +33,7 @@ function Header({isSearchEnabled}) {
               sx={{
                 color: 'accent.fg',
                 mr: 3,
-                lineHeight: 'condensedUltra',
+                lineHeight: 'condensedUltra'
               }}
             >
               <StyledOcticon icon={MarkGithubIcon} size="medium" />
@@ -59,8 +48,8 @@ function Header({isSearchEnabled}) {
                   siteMetadata.shortName ? 'none' : 'inline-block',
                   null,
                   null,
-                  'inline-block',
-                ],
+                  'inline-block'
+                ]
               }}
             >
               Primer
@@ -68,12 +57,7 @@ function Header({isSearchEnabled}) {
 
             {siteMetadata.shortName ? (
               <>
-                <Text
-                  display={['none', null, null, 'inline-block']}
-                  color="accent.fg"
-                  fontFamily="mono"
-                  mx={2}
-                >
+                <Text display={['none', null, null, 'inline-block']} color="accent.fg" fontFamily="mono" mx={2}>
                   /
                 </Text>
                 <Link
@@ -81,7 +65,7 @@ function Header({isSearchEnabled}) {
                   to="/"
                   sx={{
                     color: 'accent.fg',
-                    fontFamily: 'mono',
+                    fontFamily: 'mono'
                   }}
                 >
                   {siteMetadata.shortName}
@@ -107,15 +91,12 @@ function Header({isSearchEnabled}) {
                     aria-expanded={isMobileSearchOpen}
                     onClick={() => setIsMobileSearchOpen(true)}
                     sx={{
-                      ml: 3,
+                      ml: 3
                     }}
                   >
                     <SearchIcon />
                   </Button>
-                  <MobileSearch
-                    isOpen={isMobileSearchOpen}
-                    onDismiss={() => setIsMobileSearchOpen(false)}
-                  />
+                  <MobileSearch isOpen={isMobileSearchOpen} onDismiss={() => setIsMobileSearchOpen(false)} />
                 </>
               ) : null}
               <Button
@@ -123,15 +104,12 @@ function Header({isSearchEnabled}) {
                 aria-expanded={isNavDrawerOpen}
                 onClick={() => setIsNavDrawerOpen(true)}
                 sx={{
-                  ml: 3,
+                  ml: 3
                 }}
               >
                 <ThreeBarsIcon />
               </Button>
-              <NavDrawer
-                isOpen={isNavDrawerOpen}
-                onDismiss={() => setIsNavDrawerOpen(false)}
-              />
+              <NavDrawer isOpen={isNavDrawerOpen} onDismiss={() => setIsNavDrawerOpen(false)} />
             </Box>
           </Box>
         </Box>
@@ -141,7 +119,7 @@ function Header({isSearchEnabled}) {
 }
 
 Header.defaultProps = {
-  isSearchEnabled: true,
+  isSearchEnabled: true
 }
 
 function PrimerNavItems({items}) {
@@ -169,7 +147,7 @@ function PrimerNavItems({items}) {
             sx={{
               display: 'block',
               color: 'inherit',
-              ml: 4,
+              ml: 4
             }}
           >
             {item.title}

package/src/components/heading.js

@@ -35,7 +35,7 @@ function MarkdownHeading({children, ...props}) {
         sx={{
           p: 2,
           ml: -32,
-          color: 'fg.default',
+          color: 'fg.default'
         }}
       >
         <LinkIcon className="octicon-link" verticalAlign="middle" />

package/src/components/hero-layout.js

@@ -15,10 +15,10 @@ function HeroLayout({children, pageContext}) {
   }
 
   return (
-    <Flex flexDirection="column" minHeight="100vh">
+    <Flex sx={{flexDirection: 'column', minHeight: '100vh'}}>
       <Head />
       <Header />
-      <Flex flex="1 1 auto" flexDirection="row">
+      <Flex sx={{flex: '1 1 auto', flexDirection: 'row'}}>
         <Box display={['none', null, null, 'block']}>
           <Sidebar />
         </Box>
@@ -28,9 +28,7 @@ function HeroLayout({children, pageContext}) {
             {children}
             <PageFooter
               editUrl={pageContext.editUrl}
-              contributors={pageContext.contributors.concat(
-                additionalContributors.map(login => ({login})),
-              )}
+              contributors={pageContext.contributors.concat(additionalContributors.map(login => ({login})))}
             />
           </Container>
         </Box>

package/src/components/hero.js

@@ -10,7 +10,7 @@ function Hero() {
     <ThemeProvider colorMode="night" nightScheme="dark_dimmed">
       <Box bg="canvas.default" py={6}>
         <Container>
-          <Heading as="h1" color="accent.fg" fontSize={7} m={0}>
+          <Heading as="h1" sx={{color: 'accent.fg', fontSize: 7, m: 0}}>
             {title}
           </Heading>
           <Text as="p" m={0} color="fg.default" fontSize={4}>

package/src/components/image-container.js

@@ -3,10 +3,8 @@ import React from 'react'
 
 function ImageContainer({children}) {
   return (
-    <BorderBox p={6} bg="gray.1">
-      <Flex justifyContent="center" sx={{img: {maxWidth: '100%'}}}>
-        {children}
-      </Flex>
+    <BorderBox sx={{p: 6, bg: 'gray.1'}}>
+      <Flex sx={{img: {maxWidth: '100%'}, justifyContent: 'center'}}>{children}</Flex>
     </BorderBox>
   )
 }

package/src/components/layout.js

@@ -1,13 +1,5 @@
 import componentMetadata from '@primer/component-metadata'
-import {
-  BorderBox,
-  Box,
-  Flex,
-  Grid,
-  Heading,
-  Position,
-  Text,
-} from '@primer/components'
+import {BorderBox, Box, Flex, Grid, Heading, Position, Text} from '@primer/components'
 import React from 'react'
 import Head from './head'
 import Header, {HEADER_HEIGHT} from './header'
@@ -19,15 +11,7 @@ import StorybookLink from './storybook-link'
 import TableOfContents from './table-of-contents'
 
 function Layout({children, pageContext}) {
-  let {
-    title,
-    description,
-    status,
-    source,
-    storybook,
-    additionalContributors,
-    componentId,
-  } = pageContext.frontmatter
+  let {title, description, status, source, storybook, additionalContributors, componentId} = pageContext.frontmatter
 
   if (!additionalContributors) {
     additionalContributors = []
@@ -42,10 +26,10 @@ function Layout({children, pageContext}) {
   }
 
   return (
-    <Flex flexDirection="column" minHeight="100vh">
+    <Flex sx={{flexDirection: 'column', minHeight: '100vh'}}>
       <Head title={title} description={description} />
       <Header />
-      <Flex flex="1 1 auto" flexDirection="row" css={{zIndex: 0}}>
+      <Flex css={{zIndex: 0}} sx={{flex: '1 1 auto', flexDirection: 'row'}}>
         <Box display={['none', null, null, 'block']}>
           <Sidebar />
         </Box>
@@ -56,17 +40,21 @@ function Layout({children, pageContext}) {
           p={[4, 5, 6, 7]}
           sx={{
             justifyContent: 'center',
-            flexDirection: 'row-reverse',
+            flexDirection: 'row-reverse'
           }}
         >
           {pageContext.tableOfContents.items ? (
             <Position
-              sx={{width: 220, flex: '0 0 auto', marginLeft: 6}}
-              display={['none', null, 'block']}
+              sx={{
+                width: 220,
+                flex: '0 0 auto',
+                marginLeft: 6,
+                display: ['none', null, 'block'],
+                position: 'sticky',
+                top: HEADER_HEIGHT + 48,
+                maxHeight: `calc(100vh - ${HEADER_HEIGHT}px - 48px)`
+              }}
               css={{gridArea: 'table-of-contents', overflow: 'auto'}}
-              position="sticky"
-              top={HEADER_HEIGHT + 24}
-              maxHeight={`calc(100vh - ${HEADER_HEIGHT}px - 24px)`}
             >
               <Text display="inline-block" fontWeight="bold" mb={1}>
                 On this page
@@ -77,7 +65,7 @@ function Layout({children, pageContext}) {
           <Box width="100%" maxWidth="960px">
             <Box mb={4}>
               <Flex sx={{alignItems: 'center'}}>
-                <Heading as="h1" mr={2}>
+                <Heading as="h1" sx={{mr: 2}}>
                   {title}
                 </Heading>{' '}
                 {status ? <StatusLabel status={status} /> : null}
@@ -89,11 +77,13 @@ function Layout({children, pageContext}) {
               ) : null}
               {source || storybook ? (
                 <Grid
-                  py={2}
-                  gridGap={[1, null, 3]}
-                  gridAutoFlow={['row', null, 'column']}
-                  gridAutoColumns="max-content"
-                  gridAutoRows="max-content"
+                  sx={{
+                    py: 2,
+                    gridGap: [1, null, 3],
+                    gridAutoFlow: ['row', null, 'column'],
+                    gridAutoColumns: 'max-content',
+                    gridAutoRows: 'max-content'
+                  }}
                 >
                   {source ? <SourceLink href={source} /> : null}
                   {storybook ? <StorybookLink href={storybook} /> : null}
@@ -102,17 +92,10 @@ function Layout({children, pageContext}) {
             </Box>
             {pageContext.tableOfContents.items ? (
               <BorderBox
-                display={['block', null, 'none']}
-                mb={5}
-                borderColor="border.muted"
-                bg="canvas.subtle"
+                sx={{display: ['block', null, 'none'], mb: 5, borderColor: 'border.muted', bg: 'canvas.subtle'}}
               >
                 <Box p={3}>
-                  <Flex
-                    flexDirection="row"
-                    justifyContent="space-between"
-                    alignItems="center"
-                  >
+                  <Flex sx={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
                     <Text fontWeight="bold">On this page</Text>
                   </Flex>
                 </Box>
@@ -124,9 +107,7 @@ function Layout({children, pageContext}) {
             {children}
             <PageFooter
               editUrl={pageContext.editUrl}
-              contributors={pageContext.contributors.concat(
-                additionalContributors.map((login) => ({login})),
-              )}
+              contributors={pageContext.contributors.concat(additionalContributors.map(login => ({login})))}
             />
           </Box>
         </Box>

package/src/components/live-code.js

@@ -11,7 +11,7 @@ import LivePreviewWrapper from './live-preview-wrapper'
 
 const languageTransformers = {
   html: html => htmlToJsx(html),
-  jsx: jsx => wrapWithFragment(jsx),
+  jsx: jsx => wrapWithFragment(jsx)
 }
 
 function htmlToJsx(html) {
@@ -40,19 +40,14 @@ function LiveCode({code, language, noinline}) {
   const handleChange = updatedLiveCode => setLiveCode(updatedLiveCode)
 
   return (
-    <Flex flexDirection="column" mb={3}>
-      <LiveProvider
-        scope={scope}
-        code={liveCode}
-        transformCode={languageTransformers[language]}
-        noInline={noinline}
-      >
+    <Flex sx={{flexDirection: 'column', mb: 3}}>
+      <LiveProvider scope={scope} code={liveCode} transformCode={languageTransformers[language]} noInline={noinline}>
         <Flex
           sx={{
             border: '1px solid',
             borderColor: 'border.default',
             borderTopRightRadius: 2,
-            borderTopLeftRadius: 2,
+            borderTopLeftRadius: 2
           }}
         >
           <LivePreviewWrapper>
@@ -72,22 +67,14 @@ function LiveCode({code, language, noinline}) {
               borderBottomRightRadius: theme.radii[2],
               border: '1px solid',
               borderTop: 0,
-              borderColor: theme.colors.border.default,
+              borderColor: theme.colors.border.default
             }}
           />
-          <Absolute top={0} right={0} p={2}>
+          <Absolute sx={{top: 0, right: 0, p: 2}}>
             <ClipboardCopy value={liveCode} />
           </Absolute>
         </Relative>
-        <Text
-          as={LiveError}
-          m={0}
-          p={3}
-          fontFamily="mono"
-          fontSize={1}
-          color="fg.onEmphasis"
-          bg="danger.emphasis"
-        />
+        <Text as={LiveError} m={0} p={3} fontFamily="mono" fontSize={1} color="fg.onEmphasis" bg="danger.emphasis" />
       </LiveProvider>
     </Flex>
   )

package/src/components/mobile-search.js

@@ -1,10 +1,10 @@
-import { Absolute, Box, Button, Fixed, Flex } from '@primer/components'
-import { XIcon } from '@primer/octicons-react'
+import {Absolute, Box, Button, Fixed, Flex} from '@primer/components'
+import {XIcon} from '@primer/octicons-react'
 import Downshift from 'downshift'
-import { AnimatePresence, motion } from 'framer-motion'
-import { navigate } from 'gatsby'
+import {AnimatePresence, motion} from 'framer-motion'
+import {navigate} from 'gatsby'
 import React from 'react'
-import { FocusOn } from 'react-focus-on'
+import {FocusOn} from 'react-focus-on'
 import useSearch from '../use-search'
 import TextInput from './text-input'
 import SearchResults from './search-results'
@@ -38,19 +38,14 @@ function MobileSearch({isOpen, onDismiss}) {
     <AnimatePresence>
       {isOpen ? (
         <FocusOn returnFocus={true} onEscapeKey={() => handleDismiss()}>
-          <Fixed top={0} left={0} right={0} bottom={0} zIndex={1}>
+          <Fixed sx={{top: 0, left: 0, right: 0, bottom: 0, zIndex: 1}}>
             <Absolute
               as={motion.div}
               initial={{opacity: 0}}
               animate={{opacity: 1}}
               exit={{opacity: 0}}
-              top={0}
-              left={0}
-              right={0}
-              bottom={0}
-              bg="primer.canvas.backdrop"
-              zIndex={-1}
               onClick={handleDismiss}
+              sx={{top: 0, left: 0, right: 0, bottom: 0, bg: 'primer.canvas.backdrop', zIndex: -1}}
             />
             <Downshift
               inputValue={query}
@@ -65,26 +60,14 @@ function MobileSearch({isOpen, onDismiss}) {
               itemToString={item => (item ? item.title : '')}
               stateReducer={stateReducer}
             >
-              {({
-                getInputProps,
-                getItemProps,
-                getMenuProps,
-                getRootProps,
-                isOpen: isMenuOpen,
-                highlightedIndex,
-              }) => (
+              {({getInputProps, getItemProps, getMenuProps, getRootProps, isOpen: isMenuOpen, highlightedIndex}) => (
                 <Flex
                   {...getRootProps({
                     flexDirection: 'column',
-                    height: isMenuOpen ? '100%' : 'auto',
+                    height: isMenuOpen ? '100%' : 'auto'
                   })}
                 >
-                  <Flex
-                    bg="canvas.default"
-                    color="fg.default"
-                    p={3}
-                    flex="0 0 auto"
-                  >
+                  <Flex sx={{bg: 'canvas.default', color: 'fg.default', p: 3, flex: '0 0 auto'}}>
                     <motion.div
                       initial={{scaleX: 0.1}}
                       animate={{scaleX: 1}}
@@ -95,15 +78,11 @@ function MobileSearch({isOpen, onDismiss}) {
                       <TextInput
                         {...getInputProps({
                           placeholder: `Search`,
-                          width: '100%',
+                          sx: {width: '100%'}
                         })}
                       />
                     </motion.div>
-                    <Button
-                      aria-label="Cancel"
-                      onClick={handleDismiss}
-                      sx={{ml: 3}}
-                    >
+                    <Button aria-label="Cancel" onClick={handleDismiss} sx={{ml: 3}}>
                       <XIcon />
                     </Button>
                   </Flex>
@@ -118,8 +97,8 @@ function MobileSearch({isOpen, onDismiss}) {
                         flex: '1 1 auto',
                         style: {
                           overflow: 'auto',
-                          WebkitOverflowScrolling: 'touch',
-                        },
+                          WebkitOverflowScrolling: 'touch'
+                        }
                       })}
                     >
                       <SearchResults

package/src/components/nav-drawer.js

@@ -1,11 +1,4 @@
-import {
-  BorderBox,
-  Flex,
-  Link,
-  Text,
-  Button,
-  ThemeProvider,
-} from '@primer/components'
+import {BorderBox, Flex, Link, Text, Button, ThemeProvider} from '@primer/components'
 import {ChevronDownIcon, ChevronUpIcon, XIcon} from '@primer/octicons-react'
 import {Link as GatsbyLink} from 'gatsby'
 import debounce from 'lodash.debounce'
@@ -30,9 +23,7 @@ export function useNavDrawerState(breakpoint) {
     }
   }, [setOpen])
 
-  const debouncedOnResize = React.useCallback(debounce(onResize, 250), [
-    onResize,
-  ])
+  const debouncedOnResize = React.useCallback(debounce(onResize, 250), [onResize])
 
   React.useEffect(() => {
     if (isOpen) {
@@ -53,35 +44,13 @@ function NavDrawer({isOpen, onDismiss}) {
   return (
     <Drawer isOpen={isOpen} onDismiss={onDismiss}>
       <Flex
-        flexDirection="column"
-        height="100%"
-        bg="canvas.default"
         style={{overflow: 'auto', WebkitOverflowScrolling: 'touch'}}
+        sx={{flexDirection: 'column', height: '100%', bg: 'canvas.default'}}
       >
-        <Flex
-          flexDirection="column"
-          flex="0 0 auto"
-          color="fg.default"
-          bg="canvas.default"
-        >
-          <BorderBox
-            borderWidth={0}
-            borderRadius={0}
-            borderBottomWidth={1}
-            borderColor="border.muted"
-          >
-            <Flex
-              py={3}
-              pl={4}
-              pr={3}
-              alignItems="center"
-              justifyContent="space-between"
-            >
-              <Link
-                href="https://primer.style"
-                fontFamily="mono"
-                color="inherit"
-              >
+        <Flex sx={{flexDirection: 'column', flex: '0 0 auto', color: 'fg.default', bg: 'canvas.default'}}>
+          <BorderBox sx={{borderWidth: 0, borderRadius: 0, borderBottomWidth: 1, borderColor: 'border.muted'}}>
+            <Flex sx={{py: 3, pl: 4, pr: 3, alignItems: 'center', justifyContent: 'space-between'}}>
+              <Link href="https://primer.style" sx={{fontFamily: 'mono', color: 'inherit'}}>
                 Primer
               </Link>
               <Button aria-label="Close" onClick={onDismiss}>
@@ -89,26 +58,17 @@ function NavDrawer({isOpen, onDismiss}) {
               </Button>
             </Flex>
           </BorderBox>
-          <Flex flexDirection="column">
+          <Flex sx={{flexDirection: 'column'}}>
             <PrimerNavItems items={primerNavItems} />
           </Flex>
         </Flex>
         {navItems.length > 0 ? (
           <ThemeProvider colorMode="day">
-            <Flex
-              flexDirection="column"
-              flex="1 0 auto"
-              color="fg.default"
-              bg="canvas.default"
-            >
+            <Flex sx={{flexDirection: 'column', flex: '1 0 auto', color: 'fg.default', bg: 'canvas.default'}}>
               <Link
                 as={GatsbyLink}
                 to="/"
-                display="inline-block"
-                color="inherit"
-                fontFamily="mono"
-                mx={4}
-                my={4}
+                sx={{display: 'inline-block', color: 'inherit', fontFamily: 'mono', mx: 4, my: 4}}
               >
                 {siteMetadata.title}
               </Link>
@@ -126,32 +86,21 @@ function PrimerNavItems({items}) {
     return (
       <BorderBox
         key={item.title}
-        borderWidth={0}
-        borderRadius={0}
-        borderTopWidth={index !== 0 ? 1 : 0}
-        borderColor="border.muted"
-        p={4}
+        sx={{borderWidth: 0, borderRadius: 0, borderTopWidth: index !== 0 ? 1 : 0, borderColor: 'border.muted', p: 4}}
       >
         {item.children ? (
           <Details key={index}>
             {({open, toggle}) => (
               <>
                 <summary onClick={toggle} style={{cursor: 'pointer'}}>
-                  <Flex alignItems="center" justifyContent="space-between">
+                  <Flex sx={{alignItems: 'center', justifyContent: 'space-between'}}>
                     <Text>{item.title}</Text>
                     {open ? <ChevronUpIcon /> : <ChevronDownIcon />}
                   </Flex>
                 </summary>
-                <Flex flexDirection="column" mt={2}>
+                <Flex sx={{flexDirection: 'column', mt: 2}}>
                   {item.children.map(child => (
-                    <Link
-                      key={child.title}
-                      href={child.url}
-                      py={1}
-                      mt={2}
-                      fontSize={1}
-                      color="inherit"
-                    >
+                    <Link key={child.title} href={child.url} sx={{py: 1, mt: 2, fontSize: 1, color: 'inherit'}}>
                       {child.title}
                     </Link>
                   ))}
@@ -160,7 +109,7 @@ function PrimerNavItems({items}) {
             )}
           </Details>
         ) : (
-          <Link key={index} href={item.url} color="inherit" display="block">
+          <Link key={index} href={item.url} sx={{color: 'inherit', display: 'block'}}>
             {item.title}
           </Link>
         )}

package/src/components/nav-dropdown.js

@@ -1,12 +1,5 @@
-import {
-  Box,
-  Details,
-  StyledOcticon,
-  Text,
-  themeGet,
-  useDetails
-} from '@primer/components'
-import { TriangleDownIcon } from '@primer/octicons-react'
+import {Box, Details, StyledOcticon, Text, themeGet, useDetails} from '@primer/components'
+import {TriangleDownIcon} from '@primer/octicons-react'
 import React from 'react'
 import styled from 'styled-components'
 
@@ -16,7 +9,7 @@ function NavDropdown({title, children}) {
     <Details {...getDetailsProps()}>
       <summary style={{cursor: 'pointer'}}>
         <Text>{title}</Text>
-        <StyledOcticon icon={TriangleDownIcon} ml={1} />
+        <StyledOcticon icon={TriangleDownIcon} sx={{ml: 1}} />
       </summary>
       <Box position="absolute">
         <Box