@primer/gatsby-theme-doctocat 3.2.0 → 4.0.0

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,25 +32,32 @@ function Sidebar() {
   const scrollContainerProps = usePersistentScroll('sidebar')
 
   return (
-    <Position
+    <Box
       sx={{
         position: 'sticky',
         top: HEADER_HEIGHT,
         height: `calc(100vh - ${HEADER_HEIGHT}px)`,
-        minWidth: 260,
-        bg: 'canvas.subtle'
+        minWidth: 260
       }}
     >
-      <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.subtle',
+          px: 2
+        }}
       >
-        <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,28 +1,16 @@
-import {Box, Link} from '@primer/components'
+import {Box, Link} from '@primer/react'
 import React from 'react'
+import {NavList} from '@primer/react/drafts'
 
-function TableOfContents({items, depth}) {
+function TableOfContents({'aria-labelledby': ariaLabelledBy, items, depth}) {
   return (
-    <Box as="ul" m={0} p={0} css={{listStyle: 'none'}}>
+    <NavList aria-labelledby={ariaLabelledBy}>
       {items.map(item => (
-        <Box as="li" key={item.url} pl={depth > 0 ? 3 : 0}>
-          {item.title ? (
-            <Link
-              href={item.url}
-              sx={{
-                display: 'inline-block',
-                py: 1,
-                fontSize: [2, null, 1],
-                color: 'fg.muted'
-              }}
-            >
-              {item.title}
-            </Link>
-          ) : null}
-          {item.items ? <TableOfContents items={item.items} depth={depth + 1} /> : null}
-        </Box>
+        <NavList.Item key={item.title} href={item.url}>
+          {item.title}
+        </NavList.Item>
       ))}
-    </Box>
+    </NavList>
   )
 }
 

package/src/components/table.js

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

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'

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

@@ -1,5 +1,6 @@
 import {MDXProvider} from '@mdx-js/react'
-import {Link, ThemeProvider} from '@primer/components'
+import {ThemeProvider} from '@primer/react'
+import Link from './link'
 import React from 'react'
 import mdxComponents from '../mdx-components'
 import Blockquote from './blockquote'

package/src/search.worker.js

@@ -3,7 +3,7 @@ import debounce from 'lodash.debounce'
 ;(function searchWorker() {
   let fuse = null
 
-  // [MKT]: I landed on the debouce wait value of 50 based mostly on
+  // [MKT]: I landed on the debounce wait value of 50 based mostly on
   // experimentation. With both `leading` and `trailing` set to `true`, this
   // feels pretty snappy.
   //