Style updates for new primer components
Luke Karrys committed
Oct 16, 2023 at 15:34 UTC
b620db5a55cebf83f200627ccf10afe258f184de
10 files changed
+72
-66
content/organizations/index.mdx
-1
@@ -3,7 +3,6 @@ title: Organizations
3
redirect_from:
4
- /getting-started/working-with-orgs
5
- /orgs
6
-edit_on_github: false
6
---
7
8
<>Organizations allow teams of contributors to read and write public and private packages. Organizations are free when they publish public packages. When organizations publish private packages, an npm Teams subscription is required. For more information on npm Teams pricing, see our <Link href="https://www.npmjs.com/pricing">products page</Link>.</>
src/components/breadcrumbs.js
+17
-10
@@ -1,12 +1,25 @@
1
import React from 'react'
2
import {Breadcrumbs as PrimerBreadcrumbs} from '@primer/react'
3
-import {withPrefix} from 'gatsby'
3
+import {Link as GatsbyLink} from 'gatsby'
4
import * as getNav from '../util/get-nav'
5
import {useLocation} from '../layout'
6
7
+const BreadcrumbItem = ({item, path}) => {
8
+ // TODO: hide variant name
9
+ const href = getNav.getLocation(item.url)
10
+ const selected = getNav.isPathForItem(path, getNav.getItem(href))
11
+
12
+ return (
13
+ <PrimerBreadcrumbs.Item as={GatsbyLink} to={href} {...(selected ? {selected} : {})}>
14
+ {item.title}
15
+ </PrimerBreadcrumbs.Item>
16
+ )
17
+}
18
+
19
const Breadcrumbs = () => {
8
- const {pathname} = useLocation()
9
- const items = getNav.getItemBreadcrumbs(pathname)
20
+ const location = useLocation()
21
+ const path = getNav.getLocation(location.pathname)
22
+ const items = getNav.getItemBreadcrumbs(location.pathname)
23
24
if (items.length <= 1) {
25
return null
@@ -15,13 +28,7 @@ const Breadcrumbs = () => {
28
return (
29
<PrimerBreadcrumbs sx={{mb: 4}}>
30
{items.map(item => (
18
- <PrimerBreadcrumbs.Item
19
- key={item.url}
20
- href={withPrefix(item.url)}
21
- selected={getNav.isActiveUrl(pathname, item.url)}
22
- >
23
- {item.title}
24
- </PrimerBreadcrumbs.Item>
31
+ <BreadcrumbItem key={item.url} item={item} path={path} />
32
))}
33
</PrimerBreadcrumbs>
34
)
src/components/header.js
+3
-3
@@ -6,12 +6,12 @@ import MobileSearch from './mobile-search'
6
import NavDrawer from './nav-drawer'
7
import Search from './search'
8
import useSearch from '../hooks/use-search'
9
-import {HEADER_HEIGHT, NPM_RED} from '../constants'
9
+import {HEADER_HEIGHT, HEADER_BAR, NPM_RED} from '../constants'
10
import useSiteMetadata from '../hooks/use-site-metadata'
11
import headerNavItems from '../../content/header-nav.yml'
12
13
const NpmHeaderBar = styled(Box)`
14
- height: 10px;
14
+ height: ${HEADER_BAR}px;
15
background-image: linear-gradient(139deg, #fb8817, #ff4b01, #c12127, #e02aff);
16
`
17
@@ -40,7 +40,7 @@ function Header() {
40
as="header"
41
sx={{
42
display: 'flex',
43
- height: HEADER_HEIGHT,
43
+ height: HEADER_HEIGHT - HEADER_BAR,
44
px: [3, null, null, 4],
45
alignItems: 'center',
46
justifyContent: 'space-between',
src/components/search-results.js
+6
-1
@@ -7,7 +7,12 @@ const Breadcrumbs = ({item, highlighted}) => {
7
const siteMetadata = useSiteMetadata()
8
const hierarchy = getNav.getItemBreadcrumbs(item.path)
9
10
- const text = hierarchy ? hierarchy.slice(0, -1).join(' / ') : siteMetadata.shortName
10
+ const text = hierarchy
11
+ ? hierarchy
12
+ .slice(0, -1)
13
+ .map(s => s.title)
14
+ .join(' / ')
15
+ : siteMetadata.shortName
16
17
return <Text sx={{fontSize: 0, color: highlighted ? 'blue.2' : 'gray.7'}}>{text}</Text>
18
}
src/components/sidebar.js
+1
-1
@@ -34,7 +34,7 @@ const Sidebar = () => (
34
position: 'sticky',
35
top: `${HEADER_HEIGHT}px`,
36
height: `calc(100vh - ${HEADER_HEIGHT}px)`,
37
- minWidth: 260,
37
+ width: 260,
38
}}
39
>
40
<Box
src/components/table-of-contents.js
+24
-31
@@ -1,28 +1,26 @@
1
import React from 'react'
2
-import {Box, Text, Octicon, Details, useDetails} from '@primer/react'
2
+import {Heading, Box, Details, useDetails, Button} from '@primer/react'
3
import {ChevronDownIcon, ChevronRightIcon} from '@primer/octicons-react'
4
import {usePageContext} from '../layout'
5
-import {HEADER_HEIGHT} from '../constants'
5
import {NavList} from '@primer/react/drafts'
6
+import {HEADER_HEIGHT} from '../constants'
7
8
-const TableOfContentsItems = ({items}) => (
8
+const TableOfContentsItems = ({items, depth}) => (
9
<>
10
{items.map(item => (
11
- <NavList.Item key={item.title} href={item.url}>
12
- {item.title}
13
- {item.items ? (
14
- <NavList.SubNav>
15
- <TableOfContentsItems items={item.items} />
16
- </NavList.SubNav>
17
- ) : null}
18
- </NavList.Item>
11
+ <React.Fragment key={item.title}>
12
+ <NavList.Item href={item.url} sx={{pl: depth > 1 ? 4 : 2}}>
13
+ {item.title}
14
+ </NavList.Item>
15
+ {item.items ? <TableOfContentsItems items={item.items} depth={depth + 1} /> : null}
16
+ </React.Fragment>
17
))}
18
</>
19
)
20
23
-const TableOfContents = ({'aria-labelledby': ariaLabelledBy, items}) => (
24
- <NavList aria-labelledby={ariaLabelledBy}>
25
- <TableOfContentsItems items={items} />
21
+const TableOfContents = ({'aria-labelledby': ariaLabelledBy, items, depth = 1}) => (
22
+ <NavList {...(depth === 1 ? {'aria-labelledby': ariaLabelledBy, sx: {ml: -2}} : {})}>
23
+ <TableOfContentsItems items={items} depth={depth} />
24
</NavList>
25
)
26
@@ -37,15 +35,12 @@ const withTableOfContents = Component => {
35
export const Mobile = withTableOfContents(({items}) => {
36
const {getDetailsProps, open} = useDetails({})
37
return (
40
- <Box sx={{display: ['block', null, 'none'], mb: 3}}>
38
+ <Box sx={{display: ['block', null, 'none'], mb: 5}}>
39
<Details {...getDetailsProps()}>
42
- <Text as="summary" sx={{fontWeight: 'bold'}}>
43
- <Octicon icon={open ? ChevronDownIcon : ChevronRightIcon} sx={{mr: 2}} />
40
+ <Button variant="invisible" as="summary" leadingIcon={open ? ChevronDownIcon : ChevronRightIcon}>
41
Table of contents
45
- </Text>
46
- <Box sx={{pt: 1}}>
47
- <TableOfContents items={items} />
48
- </Box>
42
+ </Button>
43
+ <TableOfContents items={items} />
44
</Details>
45
</Box>
46
)
@@ -54,20 +49,18 @@ export const Mobile = withTableOfContents(({items}) => {
49
export const Desktop = withTableOfContents(({items}) => (
50
<Box
51
sx={{
52
+ width: 220,
53
+ flex: '0 0 auto',
54
+ marginLeft: [null, 7, 8, 9],
55
display: ['none', null, 'block'],
56
position: 'sticky',
59
- top: `${HEADER_HEIGHT + 24}px`,
60
- maxHeight: `calc(100vh - ${HEADER_HEIGHT}px - 24px)`,
61
- mt: '6px',
62
- pr: 1,
63
- pl: 1,
64
- pb: 1,
65
- overflow: 'auto',
57
+ top: HEADER_HEIGHT + 48,
58
+ maxHeight: `calc(100vh - ${HEADER_HEIGHT}px - 48px)`,
59
}}
60
>
68
- <Text id="table-of-content-label" sx={{display: 'inline-block', fontWeight: 'bold', mb: 1}}>
61
+ <Heading as="h3" sx={{fontSize: 1, display: 'inline-block', fontWeight: 'bold'}} id="toc-heading">
62
Table of contents
70
- </Text>
71
- <TableOfContents items={items} aria-labelledby="table-of-content-label" />
63
+ </Heading>
64
+ <TableOfContents aria-labelledby="toc-heading" items={items} />
65
</Box>
66
))
src/constants.js
+2
@@ -1,5 +1,7 @@
1
export const HEADER_HEIGHT = 66
2
3
+export const HEADER_BAR = 10
4
+
5
export const SKIP_NAV = {id: 'skip-nav', as: 'main'}
6
7
export const NPM_RED = '#cb0000'
src/layout.js
+1
-1
@@ -43,7 +43,7 @@ const withLayout = Component => {
43
<Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
44
<Head />
45
<Header />
46
- <Box sx={{display: 'flex', flex: '1 1 auto', flexDirection: 'row', zIndex: 0}} role="main">
46
+ <Box css={{zIndex: 0}} sx={{display: 'flex', flex: '1 1 auto', flexDirection: 'row'}} role="main">
47
<Box sx={{display: ['none', null, null, 'block']}}>
48
<Sidebar />
49
</Box>
src/layout/default.js
+9
-17
@@ -12,25 +12,19 @@ const Layout = ({children, pageContext: {frontmatter}}) => {
12
13
return (
14
<Box
15
- role="region"
15
sx={{
17
- display: 'grid',
18
- maxWidth: '100%',
19
- gridTemplateColumns: ['100%', null, 'minmax(0, 65ch) 220px'],
20
- gridTemplateAreas: ['"heading" "content"', null, '"heading table-of-contents" "content table-of-contents"'],
21
- columnGap: [null, null, 6, 7],
22
- rowGap: 3,
16
+ justifyContent: 'center',
17
+ flexDirection: 'row-reverse',
18
+ display: 'flex',
19
+ maxWidth: '1200px',
20
mx: 'auto',
24
- p: [5, 6, null, 7],
25
- alignItems: 'start',
26
- alignSelf: 'start',
21
+ width: '100%',
22
+ p: [4, 5, 6, 7],
23
}}
24
>
29
- <Box css={{gridArea: 'table-of-contents'}}>
30
- <TableOfContents.Desktop />
31
- </Box>
32
- <Box css={{gridArea: 'heading'}}>
33
- <Box {...SKIP_NAV} sx={{mb: 4}}>
25
+ <TableOfContents.Desktop />
26
+ <Box sx={{width: '100%', maxWidth: '960px'}}>
27
+ <Box sx={{mb: 4}} {...SKIP_NAV}>
28
<Breadcrumbs />
29
<Heading as="h1" sx={{fontSize: 7}}>
30
{title}
@@ -38,8 +32,6 @@ const Layout = ({children, pageContext: {frontmatter}}) => {
32
{description ? <Box sx={{fontSize: 3, mb: 3}}>{description}</Box> : null}
33
</Box>
34
<VariantSelect />
41
- </Box>
42
- <Box css={{gridArea: 'content'}}>
35
<TableOfContents.Mobile />
36
{children}
37
<PageFooter />
src/mdx/code.js
+9
-1
@@ -23,7 +23,15 @@ function Code({className: language = '', children}) {
23
as="pre"
24
className={className}
25
style={{...style, overflow: 'auto'}}
26
- sx={{borderRadius: 2, mt: 0, mb: 3, p: 3, border: 0}}
26
+ sx={{
27
+ borderRadius: 2,
28
+ mt: 0,
29
+ mb: 3,
30
+ p: 3,
31
+ borderStyle: 'solid',
32
+ borderWidth: 1,
33
+ borderColor: 'border.muted',
34
+ }}
35
>
36
{/* This is the scroll handle, it is supposed to be focused with keyboard and scroll a wide codebox horizontally */}
37
<div aria-hidden="true" style={{visibility: 'hidden', position: 'absolute', ...size}} ref={scrollRef} />