@primer/gatsby-theme-doctocat 3.2.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/.eslintrc.json +2 -1
  2. package/CHANGELOG.md +40 -1
  3. package/babel.config.js +11 -1
  4. package/gatsby-node.js +2 -2
  5. package/jest.config.js +2 -1
  6. package/package.json +11 -11
  7. package/setup-tests.js +9 -0
  8. package/src/components/caption.js +2 -2
  9. package/src/components/clipboard-copy.js +1 -1
  10. package/src/components/code.js +11 -14
  11. package/src/components/container.js +2 -2
  12. package/src/components/contributors.js +4 -4
  13. package/src/components/details.js +1 -1
  14. package/src/components/do-dont.js +37 -14
  15. package/src/components/drawer.js +6 -6
  16. package/src/components/header.js +20 -16
  17. package/src/components/heading.js +1 -1
  18. package/src/components/hero-layout.js +8 -8
  19. package/src/components/hero.js +3 -3
  20. package/src/components/image-container.js +13 -4
  21. package/src/components/layout.js +41 -34
  22. package/src/components/link.js +10 -0
  23. package/src/components/live-code.js +15 -11
  24. package/src/components/live-preview-wrapper.js +2 -2
  25. package/src/components/mobile-search.js +19 -10
  26. package/src/components/nav-drawer.js +50 -23
  27. package/src/components/nav-dropdown.js +11 -9
  28. package/src/components/nav-items.js +37 -59
  29. package/src/components/page-footer.js +15 -5
  30. package/src/components/search-results.js +6 -11
  31. package/src/components/search.js +11 -9
  32. package/src/components/sidebar.js +17 -10
  33. package/src/components/skip-link.js +1 -1
  34. package/src/components/source-link.js +2 -4
  35. package/src/components/status-label.js +1 -1
  36. package/src/components/storybook-link.js +2 -4
  37. package/src/components/table-of-contents.js +8 -20
  38. package/src/components/table.js +1 -0
  39. package/src/components/text-input.js +2 -2
  40. package/src/components/wrap-page-element.js +1 -1
  41. package/src/components/wrap-root-element.js +2 -1
  42. package/src/search.worker.js +1 -1
package/src/components/layout.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import componentMetadata from '@primer/component-metadata'
2
- import {BorderBox, Box, Flex, Grid, Heading, Position, Text} from '@primer/components'
2
+ import {Box, Heading, Text} from '@primer/react'
3
3
  import React from 'react'
4
4
  import Head from './head'
5
5
  import Header, {HEADER_HEIGHT} from './header'
@@ -26,25 +26,25 @@ function Layout({children, pageContext}) {
26
26
  }
27
27
 
28
28
  return (
29
- <Flex sx={{flexDirection: 'column', minHeight: '100vh'}}>
29
+ <Box sx={{flexDirection: 'column', minHeight: '100vh', display: 'flex'}}>
30
30
  <Head title={title} description={description} />
31
31
  <Header />
32
- <Flex css={{zIndex: 0}} sx={{flex: '1 1 auto', flexDirection: 'row'}}>
33
- <Box display={['none', null, null, 'block']}>
32
+ <Box css={{zIndex: 0}} sx={{flex: '1 1 auto', flexDirection: 'row', display: 'flex'}}>
33
+ <Box sx={{display: ['none', null, null, 'block']}}>
34
34
  <Sidebar />
35
35
  </Box>
36
36
  <Box
37
37
  id="skip-nav"
38
- display="flex"
39
- width="100%"
40
- p={[4, 5, 6, 7]}
41
38
  sx={{
42
39
  justifyContent: 'center',
43
- flexDirection: 'row-reverse'
40
+ flexDirection: 'row-reverse',
41
+ display: 'flex',
42
+ width: '100%',
43
+ p: [4, 5, 6, 7]
44
44
  }}
45
45
  >
46
46
  {pageContext.tableOfContents.items ? (
47
- <Position
47
+ <Box
48
48
  sx={{
49
49
  width: 220,
50
50
  flex: '0 0 auto',
@@ -56,53 +56,60 @@ function Layout({children, pageContext}) {
56
56
  }}
57
57
  css={{gridArea: 'table-of-contents', overflow: 'auto'}}
58
58
  >
59
- <Text display="inline-block" fontWeight="bold" mb={1}>
59
+ <Text sx={{display: 'inline-block', fontWeight: 'bold', pl: 3}} id="toc-heading">
60
60
  On this page
61
61
  </Text>
62
- <TableOfContents items={pageContext.tableOfContents.items} />
63
- </Position>
62
+ <TableOfContents aria-labelledby="toc-heading" items={pageContext.tableOfContents.items} />
63
+ </Box>
64
64
  ) : null}
65
- <Box width="100%" maxWidth="960px">
66
- <Box mb={4}>
67
- <Flex sx={{alignItems: 'center'}}>
65
+ <Box sx={{width: '100%', maxWidth: '960px'}}>
66
+ <Box sx={{mb: 4}}>
67
+ <Box sx={{alignItems: 'center', display: 'flex'}}>
68
68
  <Heading as="h1" sx={{mr: 2}}>
69
69
  {title}
70
70
  </Heading>{' '}
71
71
  {status ? <StatusLabel status={status} /> : null}
72
- </Flex>
73
- {description ? (
74
- <Box pb={2} sx={{fontSize: 3}}>
75
- {description}
76
- </Box>
77
- ) : null}
72
+ </Box>
73
+ {description ? <Box sx={{fontSize: 3, pb: 2}}>{description}</Box> : null}
78
74
  {source || storybook ? (
79
- <Grid
75
+ <Box
80
76
  sx={{
81
77
  py: 2,
82
78
  gridGap: [1, null, 3],
83
79
  gridAutoFlow: ['row', null, 'column'],
84
80
  gridAutoColumns: 'max-content',
85
- gridAutoRows: 'max-content'
81
+ gridAutoRows: 'max-content',
82
+ display: 'grid'
86
83
  }}
87
84
  >
88
85
  {source ? <SourceLink href={source} /> : null}
89
86
  {storybook ? <StorybookLink href={storybook} /> : null}
90
- </Grid>
87
+ </Box>
91
88
  ) : null}
92
89
  </Box>
93
90
  {pageContext.tableOfContents.items ? (
94
- <BorderBox
95
- sx={{display: ['block', null, 'none'], mb: 5, borderColor: 'border.muted', bg: 'canvas.subtle'}}
91
+ <Box
92
+ sx={{
93
+ display: ['block', null, 'none'],
94
+ mb: 5,
95
+ borderColor: 'border.muted',
96
+ bg: 'canvas.subtle',
97
+ borderWidth: '1px',
98
+ borderStyle: 'solid',
99
+ borderRadius: 2
100
+ }}
96
101
  >
97
- <Box p={3}>
98
- <Flex sx={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
99
- <Text fontWeight="bold">On this page</Text>
100
- </Flex>
102
+ <Box sx={{px: 3, py: 2}}>
103
+ <Box
104
+ sx={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', display: 'flex'}}
105
+ >
106
+ <Text sx={{fontWeight: 'bold'}}>On this page</Text>
107
+ </Box>
101
108
  </Box>
102
- <Box p={3} borderTop="1px solid" borderColor="border.muted">
109
+ <Box sx={{borderTop: '1px solid', borderColor: 'border.muted'}}>
103
110
  <TableOfContents items={pageContext.tableOfContents.items} />
104
111
  </Box>
105
- </BorderBox>
112
+ </Box>
106
113
  ) : null}
107
114
  {children}
108
115
  <PageFooter
@@ -111,8 +118,8 @@ function Layout({children, pageContext}) {
111
118
  />
112
119
  </Box>
113
120
  </Box>
114
- </Flex>
115
- </Flex>
121
+ </Box>
122
+ </Box>
116
123
  )
117
124
  }
118
125
 
package/src/components/link.js ADDED
@@ -0,0 +1,10 @@
1
+ import styled from 'styled-components'
2
+ import themeGet from '@styled-system/theme-get'
3
+
4
+ const Link = styled.a`
5
+ text-decoration: underline;
6
+ text-underline-offset: 25%;
7
+ color: ${themeGet('colors.accent.fg')};
8
+ `
9
+
10
+ export default Link
package/src/components/live-code.js CHANGED
@@ -1,4 +1,4 @@
1
- import {Absolute, BorderBox, Flex, Relative, Text} from '@primer/components'
1
+ import {Box, Text} from '@primer/react'
2
2
  import htmlReactParser from 'html-react-parser'
3
3
  import githubTheme from '../github'
4
4
  import React, {useState} from 'react'
@@ -45,26 +45,27 @@ function LiveCode({code, language, noinline, metastring}) {
45
45
  const handleChange = updatedLiveCode => setLiveCode(updatedLiveCode)
46
46
 
47
47
  return (
48
- <Flex sx={{flexDirection: 'column', mb: 3}}>
48
+ <Box sx={{flexDirection: 'column', mb: 3, display: 'flex'}}>
49
49
  <LiveProvider
50
50
  scope={getResolvedScope(metastring)}
51
51
  code={liveCode}
52
52
  transformCode={languageTransformers[language]}
53
53
  noInline={noinline}
54
54
  >
55
- <Flex
55
+ <Box
56
56
  sx={{
57
57
  border: '1px solid',
58
58
  borderColor: 'border.default',
59
59
  borderTopRightRadius: 2,
60
- borderTopLeftRadius: 2
60
+ borderTopLeftRadius: 2,
61
+ display: 'flex'
61
62
  }}
62
63
  >
63
64
  <LivePreviewWrapper>
64
65
  <LivePreview />
65
66
  </LivePreviewWrapper>
66
- </Flex>
67
- <Relative>
67
+ </Box>
68
+ <Box sx={{position: 'relative'}}>
68
69
  <LiveEditor
69
70
  onChange={handleChange}
70
71
  theme={githubTheme}
@@ -80,13 +81,16 @@ function LiveCode({code, language, noinline, metastring}) {
80
81
  borderColor: theme.colors.border.default
81
82
  }}
82
83
  />
83
- <Absolute sx={{top: 0, right: 0, p: 2}}>
84
+ <Box sx={{top: 0, right: 0, p: 2, position: 'absolute'}}>
84
85
  <ClipboardCopy value={liveCode} />
85
- </Absolute>
86
- </Relative>
87
- <Text as={LiveError} m={0} p={3} fontFamily="mono" fontSize={1} color="fg.onEmphasis" bg="danger.emphasis" />
86
+ </Box>
87
+ </Box>
88
+ <Text
89
+ as={LiveError}
90
+ sx={{m: 0, p: 3, fontFamily: 'mono', fontSize: 1, color: 'fg.onEmphasis', bg: 'danger.emphasis'}}
91
+ />
88
92
  </LiveProvider>
89
- </Flex>
93
+ </Box>
90
94
  )
91
95
  }
92
96
 
package/src/components/live-preview-wrapper.js CHANGED
@@ -1,4 +1,4 @@
1
- import {BaseStyles, Box} from '@primer/components'
1
+ import {BaseStyles, Box} from '@primer/react'
2
2
  import Frame from './frame'
3
3
  import React from 'react'
4
4
 
@@ -8,7 +8,7 @@ function LivePreviewWrapper({children}) {
8
8
  return (
9
9
  <Frame>
10
10
  <BaseStyles>
11
- <Box p={3}>{children}</Box>
11
+ <Box sx={{p: 3}}>{children}</Box>
12
12
  </BaseStyles>
13
13
  </Frame>
14
14
  )
package/src/components/mobile-search.js CHANGED
@@ -1,4 +1,4 @@
1
- import {Absolute, Box, Button, Fixed, Flex} from '@primer/components'
1
+ import {Box, Button} from '@primer/react'
2
2
  import {XIcon} from '@primer/octicons-react'
3
3
  import Downshift from 'downshift'
4
4
  import {AnimatePresence, motion} from 'framer-motion'
@@ -6,8 +6,8 @@ import {navigate} from 'gatsby'
6
6
  import React from 'react'
7
7
  import {FocusOn} from 'react-focus-on'
8
8
  import useSearch from '../use-search'
9
- import TextInput from './text-input'
10
9
  import SearchResults from './search-results'
10
+ import TextInput from './text-input'
11
11
 
12
12
  function stateReducer(state, changes) {
13
13
  switch (changes.type) {
@@ -38,14 +38,22 @@ function MobileSearch({isOpen, onDismiss}) {
38
38
  <AnimatePresence>
39
39
  {isOpen ? (
40
40
  <FocusOn returnFocus={true} onEscapeKey={() => handleDismiss()}>
41
- <Fixed sx={{top: 0, left: 0, right: 0, bottom: 0, zIndex: 1}}>
42
- <Absolute
41
+ <Box sx={{top: 0, left: 0, right: 0, bottom: 0, zIndex: 1, position: 'fixed'}}>
42
+ <Box
43
43
  as={motion.div}
44
44
  initial={{opacity: 0}}
45
45
  animate={{opacity: 1}}
46
46
  exit={{opacity: 0}}
47
47
  onClick={handleDismiss}
48
- sx={{top: 0, left: 0, right: 0, bottom: 0, bg: 'primer.canvas.backdrop', zIndex: -1}}
48
+ sx={{
49
+ top: 0,
50
+ left: 0,
51
+ right: 0,
52
+ bottom: 0,
53
+ bg: 'primer.canvas.backdrop',
54
+ zIndex: -1,
55
+ position: 'absolute'
56
+ }}
49
57
  />
50
58
  <Downshift
51
59
  inputValue={query}
@@ -61,13 +69,14 @@ function MobileSearch({isOpen, onDismiss}) {
61
69
  stateReducer={stateReducer}
62
70
  >
63
71
  {({getInputProps, getItemProps, getMenuProps, getRootProps, isOpen: isMenuOpen, highlightedIndex}) => (
64
- <Flex
72
+ <Box
65
73
  {...getRootProps({
66
74
  flexDirection: 'column',
67
75
  height: isMenuOpen ? '100%' : 'auto'
68
76
  })}
77
+ sx={{display: 'flex'}}
69
78
  >
70
- <Flex sx={{bg: 'canvas.default', color: 'fg.default', p: 3, flex: '0 0 auto'}}>
79
+ <Box sx={{bg: 'canvas.default', color: 'fg.default', p: 3, flex: '0 0 auto', display: 'flex'}}>
71
80
  <motion.div
72
81
  initial={{scaleX: 0.1}}
73
82
  animate={{scaleX: 1}}
@@ -85,7 +94,7 @@ function MobileSearch({isOpen, onDismiss}) {
85
94
  <Button aria-label="Cancel" onClick={handleDismiss} sx={{ml: 3}}>
86
95
  <XIcon />
87
96
  </Button>
88
- </Flex>
97
+ </Box>
89
98
  {isMenuOpen ? (
90
99
  <Box
91
100
  {...getMenuProps({
@@ -108,10 +117,10 @@ function MobileSearch({isOpen, onDismiss}) {
108
117
  />
109
118
  </Box>
110
119
  ) : null}
111
- </Flex>
120
+ </Box>
112
121
  )}
113
122
  </Downshift>
114
- </Fixed>
123
+ </Box>
115
124
  </FocusOn>
116
125
  ) : null}
117
126
  </AnimatePresence>
package/src/components/nav-drawer.js CHANGED
@@ -1,4 +1,4 @@
1
- import {BorderBox, Flex, Link, Text, Button, ThemeProvider} from '@primer/components'
1
+ import {Box, Button, Link, Text, ThemeProvider} from '@primer/react'
2
2
  import {ChevronDownIcon, ChevronUpIcon, XIcon} from '@primer/octicons-react'
3
3
  import {Link as GatsbyLink} from 'gatsby'
4
4
  import debounce from 'lodash.debounce'
@@ -43,40 +43,60 @@ function NavDrawer({isOpen, onDismiss}) {
43
43
  const siteMetadata = useSiteMetadata()
44
44
  return (
45
45
  <Drawer isOpen={isOpen} onDismiss={onDismiss}>
46
- <Flex
46
+ <Box
47
47
  style={{overflow: 'auto', WebkitOverflowScrolling: 'touch'}}
48
- sx={{flexDirection: 'column', height: '100%', bg: 'canvas.default'}}
48
+ sx={{flexDirection: 'column', height: '100%', bg: 'canvas.default', display: 'flex'}}
49
49
  >
50
- <Flex sx={{flexDirection: 'column', flex: '0 0 auto', color: 'fg.default', bg: 'canvas.default'}}>
51
- <BorderBox sx={{borderWidth: 0, borderRadius: 0, borderBottomWidth: 1, borderColor: 'border.muted'}}>
52
- <Flex sx={{py: 3, pl: 4, pr: 3, alignItems: 'center', justifyContent: 'space-between'}}>
50
+ <Box
51
+ sx={{flexDirection: 'column', flex: '0 0 auto', color: 'fg.default', bg: 'canvas.default', display: 'flex'}}
52
+ >
53
+ <Box
54
+ sx={{
55
+ borderWidth: 0,
56
+ borderRadius: 0,
57
+ borderBottomWidth: 1,
58
+ borderColor: 'border.muted',
59
+ borderStyle: 'solid'
60
+ }}
61
+ >
62
+ <Box sx={{py: 3, pl: 4, pr: 3, alignItems: 'center', justifyContent: 'space-between', display: 'flex'}}>
53
63
  <Link href="https://primer.style" sx={{fontFamily: 'mono', color: 'inherit'}}>
54
64
  Primer
55
65
  </Link>
56
66
  <Button aria-label="Close" onClick={onDismiss}>
57
67
  <XIcon />
58
68
  </Button>
59
- </Flex>
60
- </BorderBox>
61
- <Flex sx={{flexDirection: 'column'}}>
69
+ </Box>
70
+ </Box>
71
+ <Box sx={{flexDirection: 'column', display: 'flex'}}>
62
72
  <PrimerNavItems items={primerNavItems} />
63
- </Flex>
64
- </Flex>
73
+ </Box>
74
+ </Box>
65
75
  {navItems.length > 0 ? (
66
76
  <ThemeProvider colorMode="day">
67
- <Flex sx={{flexDirection: 'column', flex: '1 0 auto', color: 'fg.default', bg: 'canvas.default'}}>
77
+ <Box
78
+ sx={{
79
+ flexDirection: 'column',
80
+ flex: '1 0 auto',
81
+ color: 'fg.default',
82
+ bg: 'canvas.default',
83
+ display: 'flex'
84
+ }}
85
+ >
68
86
  <Link
69
87
  as={GatsbyLink}
70
88
  to="/"
71
- sx={{display: 'inline-block', color: 'inherit', fontFamily: 'mono', mx: 4, my: 4}}
89
+ sx={{display: 'inline-block', color: 'inherit', fontFamily: 'mono', mx: 4, mt: 4}}
72
90
  >
73
91
  {siteMetadata.title}
74
92
  </Link>
75
- <NavItems items={navItems} />
76
- </Flex>
93
+ <Box sx={{px: 2}}>
94
+ <NavItems items={navItems} />
95
+ </Box>
96
+ </Box>
77
97
  </ThemeProvider>
78
98
  ) : null}
79
- </Flex>
99
+ </Box>
80
100
  </Drawer>
81
101
  )
82
102
  }
@@ -84,27 +104,34 @@ function NavDrawer({isOpen, onDismiss}) {
84
104
  function PrimerNavItems({items}) {
85
105
  return items.map((item, index) => {
86
106
  return (
87
- <BorderBox
107
+ <Box
88
108
  key={item.title}
89
- sx={{borderWidth: 0, borderRadius: 0, borderTopWidth: index !== 0 ? 1 : 0, borderColor: 'border.muted', p: 4}}
109
+ sx={{
110
+ borderWidth: 0,
111
+ borderRadius: 0,
112
+ borderTopWidth: index !== 0 ? 1 : 0,
113
+ borderColor: 'border.muted',
114
+ p: 4,
115
+ borderStyle: 'solid'
116
+ }}
90
117
  >
91
118
  {item.children ? (
92
119
  <Details key={index}>
93
120
  {({open, toggle}) => (
94
121
  <>
95
122
  <summary onClick={toggle} style={{cursor: 'pointer'}}>
96
- <Flex sx={{alignItems: 'center', justifyContent: 'space-between'}}>
123
+ <Box sx={{alignItems: 'center', justifyContent: 'space-between', display: 'flex'}}>
97
124
  <Text>{item.title}</Text>
98
125
  {open ? <ChevronUpIcon /> : <ChevronDownIcon />}
99
- </Flex>
126
+ </Box>
100
127
  </summary>
101
- <Flex sx={{flexDirection: 'column', mt: 2}}>
128
+ <Box sx={{flexDirection: 'column', mt: 2, display: 'flex'}}>
102
129
  {item.children.map(child => (
103
130
  <Link key={child.title} href={child.url} sx={{py: 1, mt: 2, fontSize: 1, color: 'inherit'}}>
104
131
  {child.title}
105
132
  </Link>
106
133
  ))}
107
- </Flex>
134
+ </Box>
108
135
  </>
109
136
  )}
110
137
  </Details>
@@ -113,7 +140,7 @@ function PrimerNavItems({items}) {
113
140
  {item.title}
114
141
  </Link>
115
142
  )}
116
- </BorderBox>
143
+ </Box>
117
144
  )
118
145
  })
119
146
  }
package/src/components/nav-dropdown.js CHANGED
@@ -1,4 +1,4 @@
1
- import {Box, Details, StyledOcticon, Text, themeGet, useDetails} from '@primer/components'
1
+ import {Box, Details, StyledOcticon, Text, themeGet, useDetails} from '@primer/react'
2
2
  import {TriangleDownIcon} from '@primer/octicons-react'
3
3
  import React from 'react'
4
4
  import styled from 'styled-components'
@@ -11,15 +11,17 @@ function NavDropdown({title, children}) {
11
11
  <Text>{title}</Text>
12
12
  <StyledOcticon icon={TriangleDownIcon} sx={{ml: 1}} />
13
13
  </summary>
14
- <Box position="absolute">
14
+ <Box sx={{position: 'absolute'}}>
15
15
  <Box
16
- bg="canvas.overlay"
17
- p={2}
18
- mt={2}
19
- borderWidth="1px"
20
- borderStyle="solid"
21
- borderColor="border.default"
22
- borderRadius="12px"
16
+ sx={{
17
+ bg: 'canvas.overlay',
18
+ p: 2,
19
+ mt: 2,
20
+ borderWidth: '1px',
21
+ borderStyle: 'solid',
22
+ borderColor: 'border.default',
23
+ borderRadius: '12px'
24
+ }}
23
25
  >
24
26
  {children}
25
27
  </Box>
package/src/components/nav-items.js CHANGED
@@ -1,6 +1,8 @@
1
- import {Box, Link, StyledOcticon, themeGet} from '@primer/components'
2
1
  import {LinkExternalIcon} from '@primer/octicons-react'
3
- import {Link as GatsbyLink} from 'gatsby'
2
+ import {Link, themeGet} from '@primer/react'
3
+ import {NavList} from '@primer/react/drafts'
4
+ import {useLocation} from '@reach/router'
5
+ import {Link as GatsbyLink, withPrefix} from 'gatsby'
4
6
  import preval from 'preval.macro'
5
7
  import React from 'react'
6
8
  import styled from 'styled-components'
@@ -17,70 +19,46 @@ const repositoryUrl = preval`
17
19
  }
18
20
  `
19
21
 
20
- const NavLink = styled(Link)`
21
- &.active {
22
- font-weight: ${themeGet('fontWeights.bold')};
23
- color: ${themeGet('colors.fg.default')};
24
- }
25
- `
22
+ function NavItem({href, children}) {
23
+ const location = useLocation()
24
+ const isCurrent = withPrefix(href) === location.pathname
25
+ return (
26
+ <NavList.Item as={GatsbyLink} to={href} aria-current={isCurrent ? 'page' : null}>
27
+ {children}
28
+ </NavList.Item>
29
+ )
30
+ }
26
31
 
27
32
  function NavItems({items}) {
28
33
  return (
29
- <>
34
+ <NavList>
30
35
  {items.map(item => (
31
- <Box
32
- key={item.title}
33
- borderWidth={0}
34
- borderRadius={0}
35
- borderTopWidth={1}
36
- borderStyle="solid"
37
- borderColor="border.muted"
38
- p={4}
39
- >
40
- <Box display="flex" flexDirection="column">
41
- <NavLink
42
- as={GatsbyLink}
43
- to={item.url}
44
- activeClassName="active"
45
- partiallyActive={true}
46
- sx={{color: 'inherit'}}
47
- >
48
- {item.title}
49
- </NavLink>
50
- {item.children ? (
51
- <Box display="flex" flexDirection="column" mt={2}>
52
- {item.children.map(child => (
53
- <NavLink
54
- key={child.title}
55
- as={GatsbyLink}
56
- to={child.url}
57
- activeClassName="active"
58
- sx={{
59
- display: 'block',
60
- py: 1,
61
- mt: 2,
62
- fontSize: 1
63
- }}
64
- >
65
- {child.title}
66
- </NavLink>
67
- ))}
68
- </Box>
69
- ) : null}
70
- </Box>
71
- </Box>
36
+ <React.Fragment key={item.title}>
37
+ {item.children ? (
38
+ <NavList.Group title={item.title}>
39
+ {item.children.map(child => (
40
+ <NavItem key={child.title} href={child.url}>
41
+ {child.title}
42
+ </NavItem>
43
+ ))}
44
+ </NavList.Group>
45
+ ) : (
46
+ <NavItem href={item.url}>{item.title}</NavItem>
47
+ )}
48
+ </React.Fragment>
72
49
  ))}
73
50
  {repositoryUrl ? (
74
- <Box borderWidth={0} borderTopWidth={1} borderRadius={0} borderStyle="solid" borderColor="border.default" p={4}>
75
- <Link href={repositoryUrl} sx={{color: 'inherit'}}>
76
- <Box display="flex" justifyContent="space-between" alignItems="center">
77
- GitHub
78
- <StyledOcticon icon={LinkExternalIcon} sx={{color: 'fg.muted'}} />
79
- </Box>
80
- </Link>
81
- </Box>
51
+ <>
52
+ <NavList.Divider />
53
+ <NavList.Item href={repositoryUrl}>
54
+ GitHub
55
+ <NavList.TrailingVisual>
56
+ <LinkExternalIcon />
57
+ </NavList.TrailingVisual>
58
+ </NavList.Item>
59
+ </>
82
60
  ) : null}
83
- </>
61
+ </NavList>
84
62
  )
85
63
  }
86
64
 
package/src/components/page-footer.js CHANGED
@@ -1,12 +1,22 @@
1
- import {BorderBox, Grid, StyledOcticon, Link} from '@primer/components'
1
+ import {Box, Link, StyledOcticon} from '@primer/react'
2
2
  import {PencilIcon} from '@primer/octicons-react'
3
3
  import React from 'react'
4
4
  import Contributors from './contributors'
5
5
 
6
6
  function PageFooter({editUrl, contributors}) {
7
7
  return editUrl || contributors.length > 0 ? (
8
- <BorderBox sx={{borderWidth: 0, borderTopWidth: 1, borderRadius: 0, mt: 8, py: 5}}>
9
- <Grid sx={{gridGap: 4}}>
8
+ <Box
9
+ sx={{
10
+ borderWidth: 0,
11
+ borderTopWidth: 1,
12
+ borderRadius: 0,
13
+ mt: 8,
14
+ py: 5,
15
+ borderStyle: 'solid',
16
+ borderColor: 'border.default'
17
+ }}
18
+ >
19
+ <Box sx={{gridGap: 4, display: 'grid'}}>
10
20
  {editUrl ? (
11
21
  <Link href={editUrl}>
12
22
  <StyledOcticon icon={PencilIcon} sx={{mr: 2}} />
@@ -15,8 +25,8 @@ function PageFooter({editUrl, contributors}) {
15
25
  ) : null}
16
26
 
17
27
  {contributors.length > 0 ? <Contributors contributors={contributors} /> : null}
18
- </Grid>
19
- </BorderBox>
28
+ </Box>
29
+ </Box>
20
30
  ) : null
21
31
  }
22
32
 
package/src/components/search-results.js CHANGED
@@ -1,4 +1,4 @@
1
- import {Flex, Text, Box} from '@primer/components'
1
+ import {Box, Text} from '@primer/react'
2
2
  import React from 'react'
3
3
  import sentenceCase from 'sentence-case'
4
4
  import useSiteMetadata from '../use-site-metadata'
@@ -7,15 +7,11 @@ function SearchResults({results, getItemProps, highlightedIndex}) {
7
7
  const siteMetadata = useSiteMetadata()
8
8
 
9
9
  if (results.length === 0) {
10
- return (
11
- <Box p={3} fontSize={1} color="fg.muted" width="100%">
12
- No results
13
- </Box>
14
- )
10
+ return <Box sx={{p: 3, fontSize: 1, color: 'fg.muted', width: '100%'}}>No results</Box>
15
11
  }
16
12
 
17
13
  return results.map((item, index) => (
18
- <Flex
14
+ <Box
19
15
  key={item.path}
20
16
  {...getItemProps({
21
17
  item,
@@ -29,12 +25,11 @@ function SearchResults({results, getItemProps, highlightedIndex}) {
29
25
  style: {cursor: 'pointer'},
30
26
  borderRadius: 2
31
27
  })}
28
+ sx={{display: 'flex'}}
32
29
  >
33
- <Text fontSize={0} color="fg.muted">
34
- {getBreadcrumbs(siteMetadata.shortName, item.path).join(' / ')}
35
- </Text>
30
+ <Text sx={{fontSize: 0, color: 'fg.muted'}}>{getBreadcrumbs(siteMetadata.shortName, item.path).join(' / ')}</Text>
36
31
  {item.title}
37
- </Flex>
32
+ </Box>
38
33
  ))
39
34
  }
40
35