@primer/gatsby-theme-doctocat 3.1.0 → 3.2.1

package/src/components/live-code.js

@@ -1,4 +1,4 @@
-import {Absolute, BorderBox, Flex, Relative, Text} from '@primer/components'
+import {Box, Text} from '@primer/react'
 import htmlReactParser from 'html-react-parser'
 import githubTheme from '../github'
 import React, {useState} from 'react'
@@ -34,27 +34,38 @@ function wrapWithFragment(jsx) {
   return `<React.Fragment>${jsx}</React.Fragment>`
 }
 
-function LiveCode({code, language, noinline}) {
+const getResolvedScope = metastring => {
+  if (typeof scope === 'function') return scope(metastring)
+  return scope
+}
+
+function LiveCode({code, language, noinline, metastring}) {
   const theme = React.useContext(ThemeContext)
   const [liveCode, setLiveCode] = useState(code)
   const handleChange = updatedLiveCode => setLiveCode(updatedLiveCode)
 
   return (
-    <Flex sx={{flexDirection: 'column', mb: 3}}>
-      <LiveProvider scope={scope} code={liveCode} transformCode={languageTransformers[language]} noInline={noinline}>
-        <Flex
+    <Box sx={{flexDirection: 'column', mb: 3, display: 'flex'}}>
+      <LiveProvider
+        scope={getResolvedScope(metastring)}
+        code={liveCode}
+        transformCode={languageTransformers[language]}
+        noInline={noinline}
+      >
+        <Box
           sx={{
             border: '1px solid',
             borderColor: 'border.default',
             borderTopRightRadius: 2,
-            borderTopLeftRadius: 2
+            borderTopLeftRadius: 2,
+            display: 'flex'
           }}
         >
           <LivePreviewWrapper>
             <LivePreview />
           </LivePreviewWrapper>
-        </Flex>
-        <Relative>
+        </Box>
+        <Box sx={{position: 'relative'}}>
           <LiveEditor
             onChange={handleChange}
             theme={githubTheme}
@@ -70,13 +81,16 @@ function LiveCode({code, language, noinline}) {
               borderColor: theme.colors.border.default
             }}
           />
-          <Absolute sx={{top: 0, right: 0, p: 2}}>
+          <Box sx={{top: 0, right: 0, p: 2, position: 'absolute'}}>
             <ClipboardCopy value={liveCode} />
-          </Absolute>
-        </Relative>
-        <Text as={LiveError} m={0} p={3} fontFamily="mono" fontSize={1} color="fg.onEmphasis" bg="danger.emphasis" />
+          </Box>
+        </Box>
+        <Text
+          as={LiveError}
+          sx={{m: 0, p: 3, fontFamily: 'mono', fontSize: 1, color: 'fg.onEmphasis', bg: 'danger.emphasis'}}
+        />
       </LiveProvider>
-    </Flex>
+    </Box>
   )
 }
 

package/src/components/live-preview-wrapper.js

@@ -1,4 +1,4 @@
-import {BaseStyles, Box} from '@primer/components'
+import {BaseStyles, Box} from '@primer/react'
 import Frame from './frame'
 import React from 'react'
 
@@ -8,7 +8,7 @@ function LivePreviewWrapper({children}) {
   return (
     <Frame>
       <BaseStyles>
-        <Box p={3}>{children}</Box>
+        <Box sx={{p: 3}}>{children}</Box>
       </BaseStyles>
     </Frame>
   )

package/src/components/mobile-search.js

@@ -1,4 +1,4 @@
-import {Absolute, Box, Button, Fixed, Flex} from '@primer/components'
+import {Box, Button} from '@primer/react'
 import {XIcon} from '@primer/octicons-react'
 import Downshift from 'downshift'
 import {AnimatePresence, motion} from 'framer-motion'
@@ -6,8 +6,8 @@ import {navigate} from 'gatsby'
 import React from 'react'
 import {FocusOn} from 'react-focus-on'
 import useSearch from '../use-search'
-import TextInput from './text-input'
 import SearchResults from './search-results'
+import TextInput from './text-input'
 
 function stateReducer(state, changes) {
   switch (changes.type) {
@@ -38,14 +38,22 @@ function MobileSearch({isOpen, onDismiss}) {
     <AnimatePresence>
       {isOpen ? (
         <FocusOn returnFocus={true} onEscapeKey={() => handleDismiss()}>
-          <Fixed sx={{top: 0, left: 0, right: 0, bottom: 0, zIndex: 1}}>
-            <Absolute
+          <Box sx={{top: 0, left: 0, right: 0, bottom: 0, zIndex: 1, position: 'fixed'}}>
+            <Box
               as={motion.div}
               initial={{opacity: 0}}
               animate={{opacity: 1}}
               exit={{opacity: 0}}
               onClick={handleDismiss}
-              sx={{top: 0, left: 0, right: 0, bottom: 0, bg: 'primer.canvas.backdrop', zIndex: -1}}
+              sx={{
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                bg: 'primer.canvas.backdrop',
+                zIndex: -1,
+                position: 'absolute'
+              }}
             />
             <Downshift
               inputValue={query}
@@ -61,13 +69,14 @@ function MobileSearch({isOpen, onDismiss}) {
               stateReducer={stateReducer}
             >
               {({getInputProps, getItemProps, getMenuProps, getRootProps, isOpen: isMenuOpen, highlightedIndex}) => (
-                <Flex
+                <Box
                   {...getRootProps({
                     flexDirection: 'column',
                     height: isMenuOpen ? '100%' : 'auto'
                   })}
+                  sx={{display: 'flex'}}
                 >
-                  <Flex sx={{bg: 'canvas.default', color: 'fg.default', p: 3, flex: '0 0 auto'}}>
+                  <Box sx={{bg: 'canvas.default', color: 'fg.default', p: 3, flex: '0 0 auto', display: 'flex'}}>
                     <motion.div
                       initial={{scaleX: 0.1}}
                       animate={{scaleX: 1}}
@@ -85,7 +94,7 @@ function MobileSearch({isOpen, onDismiss}) {
                     <Button aria-label="Cancel" onClick={handleDismiss} sx={{ml: 3}}>
                       <XIcon />
                     </Button>
-                  </Flex>
+                  </Box>
                   {isMenuOpen ? (
                     <Box
                       {...getMenuProps({
@@ -108,10 +117,10 @@ function MobileSearch({isOpen, onDismiss}) {
                       />
                     </Box>
                   ) : null}
-                </Flex>
+                </Box>
               )}
             </Downshift>
-          </Fixed>
+          </Box>
         </FocusOn>
       ) : null}
     </AnimatePresence>

package/src/components/nav-drawer.js

@@ -1,4 +1,4 @@
-import {BorderBox, Flex, Link, Text, Button, ThemeProvider} from '@primer/components'
+import {Box, Button, Link, Text, ThemeProvider} from '@primer/react'
 import {ChevronDownIcon, ChevronUpIcon, XIcon} from '@primer/octicons-react'
 import {Link as GatsbyLink} from 'gatsby'
 import debounce from 'lodash.debounce'
@@ -43,28 +43,46 @@ function NavDrawer({isOpen, onDismiss}) {
   const siteMetadata = useSiteMetadata()
   return (
     <Drawer isOpen={isOpen} onDismiss={onDismiss}>
-      <Flex
+      <Box
         style={{overflow: 'auto', WebkitOverflowScrolling: 'touch'}}
-        sx={{flexDirection: 'column', height: '100%', bg: 'canvas.default'}}
+        sx={{flexDirection: 'column', height: '100%', bg: 'canvas.default', display: 'flex'}}
       >
-        <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'}}>
+        <Box
+          sx={{flexDirection: 'column', flex: '0 0 auto', color: 'fg.default', bg: 'canvas.default', display: 'flex'}}
+        >
+          <Box
+            sx={{
+              borderWidth: 0,
+              borderRadius: 0,
+              borderBottomWidth: 1,
+              borderColor: 'border.muted',
+              borderStyle: 'solid'
+            }}
+          >
+            <Box sx={{py: 3, pl: 4, pr: 3, alignItems: 'center', justifyContent: 'space-between', display: 'flex'}}>
               <Link href="https://primer.style" sx={{fontFamily: 'mono', color: 'inherit'}}>
                 Primer
               </Link>
               <Button aria-label="Close" onClick={onDismiss}>
                 <XIcon />
               </Button>
-            </Flex>
-          </BorderBox>
-          <Flex sx={{flexDirection: 'column'}}>
+            </Box>
+          </Box>
+          <Box sx={{flexDirection: 'column', display: 'flex'}}>
             <PrimerNavItems items={primerNavItems} />
-          </Flex>
-        </Flex>
+          </Box>
+        </Box>
         {navItems.length > 0 ? (
           <ThemeProvider colorMode="day">
-            <Flex sx={{flexDirection: 'column', flex: '1 0 auto', color: 'fg.default', bg: 'canvas.default'}}>
+            <Box
+              sx={{
+                flexDirection: 'column',
+                flex: '1 0 auto',
+                color: 'fg.default',
+                bg: 'canvas.default',
+                display: 'flex'
+              }}
+            >
               <Link
                 as={GatsbyLink}
                 to="/"
@@ -73,10 +91,10 @@ function NavDrawer({isOpen, onDismiss}) {
                 {siteMetadata.title}
               </Link>
               <NavItems items={navItems} />
-            </Flex>
+            </Box>
           </ThemeProvider>
         ) : null}
-      </Flex>
+      </Box>
     </Drawer>
   )
 }
@@ -84,27 +102,34 @@ function NavDrawer({isOpen, onDismiss}) {
 function PrimerNavItems({items}) {
   return items.map((item, index) => {
     return (
-      <BorderBox
+      <Box
         key={item.title}
-        sx={{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,
+          borderStyle: 'solid'
+        }}
       >
         {item.children ? (
           <Details key={index}>
             {({open, toggle}) => (
               <>
                 <summary onClick={toggle} style={{cursor: 'pointer'}}>
-                  <Flex sx={{alignItems: 'center', justifyContent: 'space-between'}}>
+                  <Box sx={{alignItems: 'center', justifyContent: 'space-between', display: 'flex'}}>
                     <Text>{item.title}</Text>
                     {open ? <ChevronUpIcon /> : <ChevronDownIcon />}
-                  </Flex>
+                  </Box>
                 </summary>
-                <Flex sx={{flexDirection: 'column', mt: 2}}>
+                <Box sx={{flexDirection: 'column', mt: 2, display: 'flex'}}>
                   {item.children.map(child => (
                     <Link key={child.title} href={child.url} sx={{py: 1, mt: 2, fontSize: 1, color: 'inherit'}}>
                       {child.title}
                     </Link>
                   ))}
-                </Flex>
+                </Box>
               </>
             )}
           </Details>
@@ -113,7 +138,7 @@ function PrimerNavItems({items}) {
             {item.title}
           </Link>
         )}
-      </BorderBox>
+      </Box>
     )
   })
 }

package/src/components/nav-dropdown.js

@@ -1,4 +1,4 @@
-import {Box, Details, StyledOcticon, Text, themeGet, useDetails} from '@primer/components'
+import {Box, Details, StyledOcticon, Text, themeGet, useDetails} from '@primer/react'
 import {TriangleDownIcon} from '@primer/octicons-react'
 import React from 'react'
 import styled from 'styled-components'
@@ -11,15 +11,17 @@ function NavDropdown({title, children}) {
         <Text>{title}</Text>
         <StyledOcticon icon={TriangleDownIcon} sx={{ml: 1}} />
       </summary>
-      <Box position="absolute">
+      <Box sx={{position: 'absolute'}}>
         <Box
-          bg="canvas.overlay"
-          p={2}
-          mt={2}
-          borderWidth="1px"
-          borderStyle="solid"
-          borderColor="border.default"
-          borderRadius="12px"
+          sx={{
+            bg: 'canvas.overlay',
+            p: 2,
+            mt: 2,
+            borderWidth: '1px',
+            borderStyle: 'solid',
+            borderColor: 'border.default',
+            borderRadius: '12px'
+          }}
         >
           {children}
         </Box>

package/src/components/nav-items.js

@@ -1,4 +1,4 @@
-import {Box, Link, StyledOcticon, themeGet} from '@primer/components'
+import {Box, Link, StyledOcticon, themeGet} from '@primer/react'
 import {LinkExternalIcon} from '@primer/octicons-react'
 import {Link as GatsbyLink} from 'gatsby'
 import preval from 'preval.macro'
@@ -30,14 +30,16 @@ function NavItems({items}) {
       {items.map(item => (
         <Box
           key={item.title}
-          borderWidth={0}
-          borderRadius={0}
-          borderTopWidth={1}
-          borderStyle="solid"
-          borderColor="border.muted"
-          p={4}
+          sx={{
+            borderWidth: 0,
+            borderRadius: 0,
+            borderTopWidth: 1,
+            borderStyle: 'solid',
+            borderColor: 'border.muted',
+            p: 4
+          }}
         >
-          <Box display="flex" flexDirection="column">
+          <Box sx={{display: 'flex', flexDirection: 'column'}}>
             <NavLink
               as={GatsbyLink}
               to={item.url}
@@ -48,7 +50,7 @@ function NavItems({items}) {
               {item.title}
             </NavLink>
             {item.children ? (
-              <Box display="flex" flexDirection="column" mt={2}>
+              <Box sx={{display: 'flex', flexDirection: 'column', mt: 2}}>
                 {item.children.map(child => (
                   <NavLink
                     key={child.title}
@@ -71,9 +73,18 @@ function NavItems({items}) {
         </Box>
       ))}
       {repositoryUrl ? (
-        <Box borderWidth={0} borderTopWidth={1} borderRadius={0} borderStyle="solid" borderColor="border.default" p={4}>
+        <Box
+          sx={{
+            borderWidth: 0,
+            borderTopWidth: 1,
+            borderRadius: 0,
+            borderStyle: 'solid',
+            borderColor: 'border.default',
+            p: 4
+          }}
+        >
           <Link href={repositoryUrl} sx={{color: 'inherit'}}>
-            <Box display="flex" justifyContent="space-between" alignItems="center">
+            <Box sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
               GitHub
               <StyledOcticon icon={LinkExternalIcon} sx={{color: 'fg.muted'}} />
             </Box>

package/src/components/page-footer.js

@@ -1,12 +1,22 @@
-import {BorderBox, Grid, StyledOcticon, Link} from '@primer/components'
+import {Box, Link, StyledOcticon} from '@primer/react'
 import {PencilIcon} from '@primer/octicons-react'
 import React from 'react'
 import Contributors from './contributors'
 
 function PageFooter({editUrl, contributors}) {
   return editUrl || contributors.length > 0 ? (
-    <BorderBox sx={{borderWidth: 0, borderTopWidth: 1, borderRadius: 0, mt: 8, py: 5}}>
-      <Grid sx={{gridGap: 4}}>
+    <Box
+      sx={{
+        borderWidth: 0,
+        borderTopWidth: 1,
+        borderRadius: 0,
+        mt: 8,
+        py: 5,
+        borderStyle: 'solid',
+        borderColor: 'border.default'
+      }}
+    >
+      <Box sx={{gridGap: 4, display: 'grid'}}>
         {editUrl ? (
           <Link href={editUrl}>
             <StyledOcticon icon={PencilIcon} sx={{mr: 2}} />
@@ -15,8 +25,8 @@ function PageFooter({editUrl, contributors}) {
         ) : null}
 
         {contributors.length > 0 ? <Contributors contributors={contributors} /> : null}
-      </Grid>
-    </BorderBox>
+      </Box>
+    </Box>
   ) : null
 }
 

package/src/components/search-results.js

@@ -1,4 +1,4 @@
-import {Flex, Text, Box} from '@primer/components'
+import {Box, Text} from '@primer/react'
 import React from 'react'
 import sentenceCase from 'sentence-case'
 import useSiteMetadata from '../use-site-metadata'
@@ -7,15 +7,11 @@ function SearchResults({results, getItemProps, highlightedIndex}) {
   const siteMetadata = useSiteMetadata()
 
   if (results.length === 0) {
-    return (
-      <Box p={3} fontSize={1} color="fg.muted" width="100%">
-        No results
-      </Box>
-    )
+    return <Box sx={{p: 3, fontSize: 1, color: 'fg.muted', width: '100%'}}>No results</Box>
   }
 
   return results.map((item, index) => (
-    <Flex
+    <Box
       key={item.path}
       {...getItemProps({
         item,
@@ -29,12 +25,11 @@ function SearchResults({results, getItemProps, highlightedIndex}) {
         style: {cursor: 'pointer'},
         borderRadius: 2
       })}
+      sx={{display: 'flex'}}
     >
-      <Text fontSize={0} color="fg.muted">
-        {getBreadcrumbs(siteMetadata.shortName, item.path).join(' / ')}
-      </Text>
+      <Text sx={{fontSize: 0, color: 'fg.muted'}}>{getBreadcrumbs(siteMetadata.shortName, item.path).join(' / ')}</Text>
       {item.title}
-    </Flex>
+    </Box>
   ))
 }
 

package/src/components/search.js

@@ -1,11 +1,11 @@
-import {BorderBox, Position, ThemeProvider} from '@primer/components'
+import {Box, ThemeProvider} from '@primer/react'
 import Downshift from 'downshift'
 import {navigate} from 'gatsby'
 import React from 'react'
 import useSearch from '../use-search'
 import useSiteMetadata from '../use-site-metadata'
-import TextInput from './text-input'
 import SearchResults from './search-results'
+import TextInput from './text-input'
 
 function stateReducer(state, changes) {
   switch (changes.type) {
@@ -44,7 +44,7 @@ function Search() {
       stateReducer={stateReducer}
     >
       {({getInputProps, getItemProps, getMenuProps, getRootProps, isOpen, highlightedIndex}) => (
-        <Position {...getRootProps({position: 'relative'})}>
+        <Box {...getRootProps({position: 'relative'})}>
           <TextInput
             {...getInputProps({
               placeholder: `Search ${siteMetadata.title}`,
@@ -54,7 +54,7 @@ function Search() {
             })}
           />
           {isOpen ? (
-            <Position
+            <Box
               {...getMenuProps({
                 position: 'absolute',
                 left: 0,
@@ -63,7 +63,7 @@ function Search() {
               })}
             >
               <ThemeProvider colorMode="day">
-                <BorderBox
+                <Box
                   style={{overflow: 'auto'}}
                   sx={{
                     minWidth: 300,
@@ -72,15 +72,17 @@ function Search() {
                     boxShadow: 'shadow.large',
                     borderColor: 'border.muted',
                     bg: 'canvas.overlay',
-                    borderRadius: '12px'
+                    borderRadius: '12px',
+                    borderWidth: '1px',
+                    borderStyle: 'solid'
                   }}
                 >
                   <SearchResults results={results} getItemProps={getItemProps} highlightedIndex={highlightedIndex} />
-                </BorderBox>
+                </Box>
               </ThemeProvider>
-            </Position>
+            </Box>
           ) : null}
-        </Position>
+        </Box>
       )}
     </Downshift>
   )

package/src/components/sidebar.js

@@ -1,4 +1,4 @@
-import {BorderBox, Flex, Position} from '@primer/components'
+import {Box} from '@primer/react'
 import React from 'react'
 import navItems from '../nav.yml'
 import {HEADER_HEIGHT} from './header'
@@ -32,7 +32,7 @@ function Sidebar() {
   const scrollContainerProps = usePersistentScroll('sidebar')
 
   return (
-    <Position
+    <Box
       sx={{
         position: 'sticky',
         top: HEADER_HEIGHT,
@@ -41,16 +41,23 @@ function Sidebar() {
         bg: 'canvas.subtle'
       }}
     >
-      <BorderBox
+      <Box
         {...scrollContainerProps}
         style={{overflow: 'auto'}}
-        sx={{borderWidth: 0, borderRightWidth: 1, borderRadius: 0, height: '100%'}}
+        sx={{
+          borderWidth: 0,
+          borderRightWidth: 1,
+          borderRadius: 0,
+          height: '100%',
+          borderStyle: 'solid',
+          borderColor: 'border.default'
+        }}
       >
-        <Flex sx={{flexDirection: 'column'}}>
+        <Box sx={{flexDirection: 'column', display: 'flex'}}>
           <NavItems items={navItems} />
-        </Flex>
-      </BorderBox>
-    </Position>
+        </Box>
+      </Box>
+    </Box>
   )
 }
 

package/src/components/skip-link.js

@@ -1,4 +1,4 @@
-import {Link} from '@primer/components'
+import {Link} from '@primer/react'
 import styled from 'styled-components'
 import React from 'react'
 

package/src/components/source-link.js

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

package/src/components/status-label.js

@@ -1,4 +1,4 @@
-import {Label} from '@primer/components'
+import {Label} from '@primer/react'
 import React from 'react'
 
 const STATUS_COLORS = {

package/src/components/storybook-link.js

@@ -1,13 +1,11 @@
-import {Link, Text} from '@primer/components'
+import {Link, Text} from '@primer/react'
 import React from 'react'
 
 function SourceLink({href}) {
   return (
     <Link href={href}>
       <StorybookIcon />
-      <Text 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,11 +1,11 @@
-import {Box, Link} from '@primer/components'
+import {Box, Link} from '@primer/react'
 import React from 'react'
 
 function TableOfContents({items, depth}) {
   return (
-    <Box as="ul" m={0} p={0} css={{listStyle: 'none'}}>
+    <Box as="ul" sx={{m: 0, p: 0, listStyle: 'none'}}>
       {items.map(item => (
-        <Box as="li" key={item.url} pl={depth > 0 ? 3 : 0}>
+        <Box as="li" key={item.url} sx={{pl: depth > 0 ? 3 : 0}}>
           {item.title ? (
             <Link
               href={item.url}

package/src/components/text-input.js

@@ -1,10 +1,10 @@
-import {TextInput as PrimerTextInput, themeGet} from '@primer/components'
+import {TextInput as PrimerTextInput, themeGet} from '@primer/react'
 import styled from 'styled-components'
 
 const TextInput = styled(PrimerTextInput)`
   /* The font-size of inputs should never be less than 16px.
    * Otherwise, iOS browsers will zoom in when the input is focused.
-   * TODO: Update font-size of TextInput in @primer/components.
+   * TODO: Update font-size of TextInput in @primer/react.
    */
   font-size: ${themeGet('fontSizes.2')} !important;
 `

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

@@ -1,4 +1,4 @@
-import {BaseStyles, themeGet} from '@primer/components'
+import {BaseStyles, themeGet} from '@primer/react'
 import React from 'react'
 import {createGlobalStyle} from 'styled-components'
 import SkipLink from './skip-link'