@primer/gatsby-theme-doctocat 4.5.1 → 4.6.1

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 (7) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/package.json +1 -1
  3. package/src/components/header.js +29 -52
  4. package/src/components/layout.js +71 -71
  5. package/src/components/nav-drawer.js +4 -3
  6. package/src/components/nav-items.js +3 -3
  7. package/src/primer-nav.yml +3 -25
package/CHANGELOG.md CHANGED
@@ -1,5 +1,29 @@
1
1
  # @primer/gatsby-theme-doctocat
2
2
 
3
+ ## 4.6.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`e2cd01a`](https://github.com/primer/doctocat/commit/e2cd01a79e668c21a762e82a5f1b914be0d0c5b6) [#613](https://github.com/primer/doctocat/pull/613) Thanks [@josepmartins](https://github.com/josepmartins)! - - Fix the primer navigation about link
8
+ - Removes mono space font in the nav drawer + fontweight bold to match top left navigation
9
+
10
+ ## 4.6.0
11
+
12
+ ### Minor Changes
13
+
14
+ - [`02eb6b3`](https://github.com/primer/doctocat/commit/02eb6b34f8049305baa7cceb815cd085acd7d845) [#603](https://github.com/primer/doctocat/pull/603) Thanks [@josepmartins](https://github.com/josepmartins)! - Navigation updates:
15
+
16
+ - Remove monospace font
17
+ - Remove dark background and update link colors
18
+ - Use UnderlineNav for top right links to provide the correct styling
19
+ - Remove "View components" and "React components" from top and leave "Brand" and "About"
20
+
21
+ ### Patch Changes
22
+
23
+ - [`ba972b1`](https://github.com/primer/doctocat/commit/ba972b167844f92a8a7c584f7cacf8f595b1db4d) [#610](https://github.com/primer/doctocat/pull/610) Thanks [@josepmartins](https://github.com/josepmartins)! - - Move the heading out of the sidebar Navigation. This fixes the extra divider on top of the navigation.
24
+ - Remove extra space below the heading when there's no status or external links
25
+ - Remove extra space when there's no Breadcrumbs
26
+
3
27
  ## 4.5.1
4
28
 
5
29
  ### Patch Changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/gatsby-theme-doctocat",
3
- "version": "4.5.1",
3
+ "version": "4.6.1",
4
4
  "main": "index.js",
5
5
  "license": "MIT",
6
6
  "scripts": {
package/src/components/header.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import {MarkGithubIcon, SearchIcon, ThreeBarsIcon} from '@primer/octicons-react'
2
- import {Box, Button, Link, StyledOcticon, Text, ThemeProvider, useTheme} from '@primer/react'
2
+ import {Box, Button, Link, StyledOcticon, Text, ThemeProvider, useTheme, UnderlineNav} from '@primer/react'
3
3
  import VisuallyHidden from './visually-hidden'
4
4
  import {Link as GatsbyLink} from 'gatsby'
5
5
  import React from 'react'
@@ -7,19 +7,19 @@ import primerNavItems from '../primer-nav.yml'
7
7
  import useSiteMetadata from '../use-site-metadata'
8
8
  import MobileSearch from './mobile-search'
9
9
  import NavDrawer, {useNavDrawerState} from './nav-drawer'
10
- import NavDropdown, {NavDropdownItem} from './nav-dropdown'
11
10
  import Search from './search'
12
11
  import SkipLink from './skip-link'
13
12
 
14
- export const HEADER_HEIGHT = 66
13
+ export const HEADER_HEIGHT = 56
15
14
 
16
- function Header({isSearchEnabled}) {
15
+ function Header({isSearchEnabled, path}) {
17
16
  const {theme} = useTheme()
18
17
  const [isNavDrawerOpen, setIsNavDrawerOpen] = useNavDrawerState(theme.breakpoints[2])
19
18
  const [isMobileSearchOpen, setIsMobileSearchOpen] = React.useState(false)
20
19
  const siteMetadata = useSiteMetadata()
20
+
21
21
  return (
22
- <ThemeProvider colorMode="night" nightScheme="dark_dimmed">
22
+ <ThemeProvider>
23
23
  <Box sx={{position: 'sticky', top: 0, zIndex: 1}}>
24
24
  <Box
25
25
  as="header"
@@ -29,7 +29,9 @@ function Header({isSearchEnabled}) {
29
29
  px: [3, null, null, 4],
30
30
  alignItems: 'center',
31
31
  justifyContent: 'space-between',
32
- bg: 'canvas.default'
32
+ bg: 'canvas.default',
33
+ border: '1px solid',
34
+ borderColor: 'border.muted'
33
35
  }}
34
36
  >
35
37
  <SkipLink />
@@ -37,19 +39,19 @@ function Header({isSearchEnabled}) {
37
39
  <Link
38
40
  href={siteMetadata.header.logoUrl}
39
41
  sx={{
40
- color: 'accent.fg',
42
+ color: 'fg.default',
41
43
  mr: 3,
42
44
  lineHeight: 'condensedUltra'
43
45
  }}
44
46
  >
45
- <StyledOcticon icon={MarkGithubIcon} size="medium" />
47
+ <StyledOcticon icon={MarkGithubIcon} size="24px" />
46
48
  </Link>
47
49
  {siteMetadata.header.title ? (
48
50
  <Link
49
51
  href={siteMetadata.header.url}
50
52
  sx={{
51
- color: 'accent.fg',
52
- fontFamily: 'mono',
53
+ color: 'fg.default',
54
+ fontWeight: 'bold',
53
55
  display: [
54
56
  // We only hide "Primer" on small viewports if a shortName is defined.
55
57
  siteMetadata.shortName ? 'none' : 'inline-block',
@@ -68,8 +70,7 @@ function Header({isSearchEnabled}) {
68
70
  <Text
69
71
  sx={{
70
72
  display: ['none', null, null, 'inline-block'],
71
- color: 'accent.fg',
72
- fontFamily: 'mono',
73
+ color: 'fg.default',
73
74
  mx: 2
74
75
  }}
75
76
  >
@@ -80,24 +81,23 @@ function Header({isSearchEnabled}) {
80
81
  as={GatsbyLink}
81
82
  to="/"
82
83
  sx={{
83
- color: 'accent.fg',
84
- fontFamily: 'mono'
84
+ fontWeight: 'bold',
85
+ color: 'fg.default'
85
86
  }}
86
87
  >
87
88
  {siteMetadata.shortName}
88
89
  </Link>
89
90
  </>
90
91
  ) : null}
91
-
92
- {isSearchEnabled ? (
93
- <Box sx={{display: ['none', null, null, 'block'], ml: 4}}>
94
- <Search />
95
- </Box>
96
- ) : null}
97
92
  </Box>
98
93
  <Box>
99
- <Box sx={{display: ['none', null, null, 'block']}}>
100
- <PrimerNavItems siteMetadata={siteMetadata} items={primerNavItems} />
94
+ <Box sx={{display: ['none', null, null, 'flex'], alignItems: 'center'}}>
95
+ <PrimerNavItems path={path} siteMetadata={siteMetadata} items={primerNavItems} />
96
+ {isSearchEnabled ? (
97
+ <Box sx={{display: ['none', null, null, 'block'], ml: 3}}>
98
+ <Search />
99
+ </Box>
100
+ ) : null}
101
101
  </Box>
102
102
  <Box sx={{display: ['flex', null, null, 'none']}}>
103
103
  {isSearchEnabled ? (
@@ -138,49 +138,26 @@ Header.defaultProps = {
138
138
  isSearchEnabled: true
139
139
  }
140
140
 
141
- function PrimerNavItems({siteMetadata, items}) {
141
+ function PrimerNavItems({siteMetadata, items, path}) {
142
142
  return (
143
143
  <>
144
144
  <VisuallyHidden>
145
145
  <h3 aria-labelledby="site-header">{siteMetadata.header.title} </h3>
146
146
  </VisuallyHidden>
147
- <Box
148
- as={'nav'}
149
- sx={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: 'fg.default', gap: 2}}
150
- >
147
+ <UnderlineNav aria-label="main navigation" sx={{border: 'none'}}>
151
148
  {items.map((item, index) => {
152
- if (item.children) {
153
- return (
154
- <Box key={index}>
155
- <NavDropdown title={item.title}>
156
- {item.children.map(child => (
157
- <NavDropdownItem key={child.title} href={child.url}>
158
- {child.title}
159
- </NavDropdownItem>
160
- ))}
161
- </NavDropdown>
162
- </Box>
163
- )
164
- }
165
-
166
149
  return (
167
- <Link
150
+ <UnderlineNav.Link
168
151
  key={index}
169
152
  href={item.url}
170
- sx={{
171
- display: 'block',
172
- color: 'fg.default',
173
- fontSize: 2,
174
- fontWeight: 'bold',
175
- ml: 2,
176
- mr: 2
177
- }}
153
+ selected={item.url === siteMetadata.header.url + path}
154
+ sx={{fontSize: 2, lineHeight: 'condensed'}}
178
155
  >
179
156
  {item.title}
180
- </Link>
157
+ </UnderlineNav.Link>
181
158
  )
182
159
  })}
183
- </Box>
160
+ </UnderlineNav>
184
161
  </>
185
162
  )
186
163
  }
package/src/components/layout.js CHANGED
@@ -72,7 +72,7 @@ function Layout({children, pageContext, path}) {
72
72
  return (
73
73
  <Box sx={{flexDirection: 'column', minHeight: '100vh', display: 'flex'}}>
74
74
  <Head title={title} description={description} />
75
- <Header />
75
+ <Header path={path} />
76
76
  <Box css={{zIndex: 0}} sx={{flex: '1 1 auto', flexDirection: 'row', display: 'flex'}}>
77
77
  <Box sx={{display: ['none', null, null, 'block']}}>
78
78
  <Sidebar />
@@ -107,77 +107,77 @@ function Layout({children, pageContext, path}) {
107
107
  ) : null}
108
108
  <Box sx={{width: '100%', maxWidth: '960px'}}>
109
109
  <Box as="main" id="skip-nav" sx={{mb: 4}}>
110
- <Breadcrumbs sx={{mb: 4}}>
111
- {breadcrumbData.length > 1
112
- ? breadcrumbData.map(item => (
113
- <Breadcrumbs.Item key={item.url} href={item.url} selected={path === item.url}>
114
- {item.title}
115
- </Breadcrumbs.Item>
116
- ))
117
- : null}
118
- </Breadcrumbs>
119
- <Box sx={{alignItems: 'center', display: 'flex'}}>
120
- <Heading as="h1" sx={{fontSize: 7}}>
121
- {title}
122
- </Heading>
123
- </Box>
110
+ {breadcrumbData.length > 1 ? (
111
+ <Breadcrumbs sx={{mb: 4}}>
112
+ {breadcrumbData.map(item => (
113
+ <Breadcrumbs.Item key={item.url} href={item.url} selected={path === item.url}>
114
+ {item.title}
115
+ </Breadcrumbs.Item>
116
+ ))}
117
+ </Breadcrumbs>
118
+ ) : null}
119
+ <Heading as="h1" sx={{fontSize: 7}}>
120
+ {title}
121
+ </Heading>
124
122
  {description ? <Box sx={{fontSize: 3, mb: 3}}>{description}</Box> : null}
125
- <Box
126
- sx={{
127
- display: 'flex',
128
- flexWrap: 'wrap',
129
- columnGap: 3,
130
- mb: 7,
131
- mt: 2,
132
- rowGap: 3,
133
- alignItems: 'center',
134
- fontSize: 1
135
- }}
136
- >
137
- {status ? (
138
- <Box
139
- as={'ul'}
140
- sx={{
141
- display: 'flex',
142
- gap: 1,
143
- alignItems: 'center',
144
- m: 0,
145
- p: 0,
146
- paddingInline: 0,
147
- listStyle: 'none'
148
- }}
149
- >
150
- <li>
151
- <StatusLabel status={status} />
152
- </li>
153
- <li>
154
- <AccessibilityLabel a11yReviewed={a11yReviewed} />
155
- </li>
156
- </Box>
157
- ) : null}
158
- {source || storybook || lookbook || figma || rails || react ? (
159
- <Box
160
- as={'ul'}
161
- sx={{
162
- display: 'flex',
163
- flexWrap: 'wrap',
164
- gap: 4,
165
- alignItems: 'center',
166
- m: 0,
167
- p: 0,
168
- paddingInline: 0,
169
- listStyle: 'none'
170
- }}
171
- >
172
- {source ? <SourceLink href={source} /> : null}
173
- {lookbook ? <LookbookLink href={lookbook} /> : null}
174
- {storybook ? <StorybookLink href={storybook} /> : null}
175
- {react ? <ReactLink href={react} /> : null}
176
- {rails ? <RailsLink href={rails} /> : null}
177
- {figma ? <FigmaLink href={figma} /> : null}
178
- </Box>
179
- ) : null}
180
- </Box>
123
+ {status || source || storybook || lookbook || figma || rails || react ? (
124
+ <Box
125
+ sx={{
126
+ display: 'flex',
127
+ flexWrap: 'wrap',
128
+ columnGap: 3,
129
+ mb: 7,
130
+ mt: 2,
131
+ rowGap: 3,
132
+ alignItems: 'center',
133
+ fontSize: 1
134
+ }}
135
+ >
136
+ {status ? (
137
+ <Box
138
+ as={'ul'}
139
+ sx={{
140
+ display: 'flex',
141
+ gap: 1,
142
+ alignItems: 'center',
143
+ m: 0,
144
+ p: 0,
145
+ paddingInline: 0,
146
+ listStyle: 'none'
147
+ }}
148
+ >
149
+ <li>
150
+ <StatusLabel status={status} />
151
+ </li>
152
+ <li>
153
+ <AccessibilityLabel a11yReviewed={a11yReviewed} />
154
+ </li>
155
+ </Box>
156
+ ) : null}
157
+ {source || storybook || lookbook || figma || rails || react ? (
158
+ <Box
159
+ as={'ul'}
160
+ sx={{
161
+ display: 'flex',
162
+ flexWrap: 'wrap',
163
+ gap: 4,
164
+ alignItems: 'center',
165
+ m: 0,
166
+ p: 0,
167
+ paddingInline: 0,
168
+ listStyle: 'none'
169
+ }}
170
+ >
171
+ {source ? <SourceLink href={source} /> : null}
172
+ {lookbook ? <LookbookLink href={lookbook} /> : null}
173
+ {storybook ? <StorybookLink href={storybook} /> : null}
174
+ {react ? <ReactLink href={react} /> : null}
175
+ {rails ? <RailsLink href={rails} /> : null}
176
+ {figma ? <FigmaLink href={figma} /> : null}
177
+ </Box>
178
+ ) : null}
179
+ </Box>
180
+ ) : null}
181
181
  </Box>
182
182
  {pageContext.tableOfContents.items ? (
183
183
  <Box
package/src/components/nav-drawer.js CHANGED
@@ -60,7 +60,7 @@ function NavDrawer({isOpen, onDismiss}) {
60
60
  }}
61
61
  >
62
62
  <Box sx={{py: 3, pl: 4, pr: 3, alignItems: 'center', justifyContent: 'space-between', display: 'flex'}}>
63
- <Link href="https://primer.style" sx={{fontFamily: 'mono', color: 'inherit'}}>
63
+ <Link href="https://primer.style" sx={{fontWeight: 'bold', color: 'inherit'}}>
64
64
  Primer
65
65
  </Link>
66
66
  <Button aria-label="Close" onClick={onDismiss}>
@@ -86,7 +86,7 @@ function NavDrawer({isOpen, onDismiss}) {
86
86
  <Link
87
87
  as={GatsbyLink}
88
88
  to="/"
89
- sx={{display: 'inline-block', color: 'inherit', fontFamily: 'mono', mx: 4, mt: 4}}
89
+ sx={{display: 'inline-block', color: 'inherit', fontWeight: 'bold', mx: 4, mt: 4}}
90
90
  >
91
91
  {siteMetadata.title}
92
92
  </Link>
@@ -111,7 +111,8 @@ function PrimerNavItems({items}) {
111
111
  borderRadius: 0,
112
112
  borderTopWidth: index !== 0 ? 1 : 0,
113
113
  borderColor: 'border.muted',
114
- p: 4,
114
+ px: 4,
115
+ py: 3,
115
116
  borderStyle: 'solid'
116
117
  }}
117
118
  >
package/src/components/nav-items.js CHANGED
@@ -31,10 +31,10 @@ function NavItem({href, children}) {
31
31
  function NavItems({items}) {
32
32
  return (
33
33
  <>
34
+ <VisuallyHidden>
35
+ <h3>Site navigation</h3>
36
+ </VisuallyHidden>
34
37
  <NavList aria-label="Site">
35
- <VisuallyHidden>
36
- <h3>Site navigation</h3>
37
- </VisuallyHidden>
38
38
  {items.map(item => (
39
39
  <React.Fragment key={item.title}>
40
40
  {item.children ? (
package/src/primer-nav.yml CHANGED
@@ -1,26 +1,4 @@
1
- - title: Design
2
- children:
3
- - title: Interface guidelines
4
- url: https://primer.style/design
5
- - title: Octicons
6
- url: https://primer.style/design/foundations/icons
7
- - title: Desktop
8
- url: https://primer.style/design/native/desktop
9
- - title: Mobile
10
- url: https://primer.style/design/native/mobile
11
- - title: CLI
12
- url: https://primer.style/design/native/cli
13
- - title: Build
14
- children:
15
- - title: CSS
16
- url: https://primer.style/css
17
- - title: React
18
- url: https://primer.style/react
19
- - title: React Brand
20
- url: https://primer.style/brand
21
- - title: ViewComponents
22
- url: https://primer.style/view-components
23
- - title: Contribute
24
- url: https://primer.style/design/guides/contribute
1
+ - title: Brand
2
+ url: https://primer.style/brand
25
3
  - title: About
26
- url: https://primer.style/design/guides/about
4
+ url: https://primer.style/design/about