@primer/gatsby-theme-doctocat 4.5.1 → 4.6.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 (6) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/package.json +1 -1
  3. package/src/components/header.js +27 -55
  4. package/src/components/layout.js +71 -71
  5. package/src/components/nav-items.js +3 -3
  6. package/src/primer-nav.yml +2 -24
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @primer/gatsby-theme-doctocat
2
2
 
3
+ ## 4.6.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`02eb6b3`](https://github.com/primer/doctocat/commit/02eb6b34f8049305baa7cceb815cd085acd7d845) [#603](https://github.com/primer/doctocat/pull/603) Thanks [@josepmartins](https://github.com/josepmartins)! - Navigation updates:
8
+
9
+ - Remove monospace font
10
+ - Remove dark background and update link colors
11
+ - Use UnderlineNav for top right links to provide the correct styling
12
+ - Remove "View components" and "React components" from top and leave "Brand" and "About"
13
+
14
+ ### Patch Changes
15
+
16
+ - [`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.
17
+ - Remove extra space below the heading when there's no status or external links
18
+ - Remove extra space when there's no Breadcrumbs
19
+
3
20
  ## 4.5.1
4
21
 
5
22
  ### 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.0",
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,21 @@ 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
168
- key={index}
169
- 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
- }}
178
- >
150
+ <UnderlineNav.Link key={index} href={item.url} selected={item.url === siteMetadata.header.url + path}>
179
151
  {item.title}
180
- </Link>
152
+ </UnderlineNav.Link>
181
153
  )
182
154
  })}
183
- </Box>
155
+ </UnderlineNav>
184
156
  </>
185
157
  )
186
158
  }
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-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
4
  url: https://primer.style/design/guides/about