Skip to content

Commit 85a82b1

Browse files
mperrottirezrah
mperrotti
and
rezrah
authored
Match chrome (header and sidebar nav) to new docs (#790)
* updates header nav content and layout * moves search input to sidebar and updates functionality * fixes dropdown text/icon color * updates site name to Primer Marketing UI * updates site name to Primer Brand UI * update Marketing UI to Brand UI in header nav * updates sidebar spacing to match primer-docs * updates sidebar width to match primer-docs * fix bug where Brand UI wasn't appearing in the header * updates landing page to match primer-docs * updates sidebar nav to use Mona Sans * adjusts layout for wide viewports * rm commented CSS * updates hero header text * revises to match latest primer-docs chrome * Update apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js Co-authored-by: Rez <[email protected]> * Update apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css Co-authored-by: Rez <[email protected]> * Update apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js Co-authored-by: Rez <[email protected]> * Update apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js Co-authored-by: Rez <[email protected]> * Update apps/docs/src/components/navigation/navigation.module.css Co-authored-by: Rez <[email protected]> * Update apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css Co-authored-by: Rez <[email protected]> * Update apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css Co-authored-by: Rez <[email protected]> * Update apps/docs/src/components/side-panel/side-panel.module.css Co-authored-by: Rez <[email protected]> * adds site name to sidebar, minor CSS var usage tweaks * more tweaks * manually style side sheet for narrow viewports * fix dropdown font size * adjust width of main content container of landing page * update top nav items to match * Update apps/docs/src/components/side-panel/side-panel.tsx Co-authored-by: Rez <[email protected]> * Update apps/docs/src/components/side-panel/side-panel.tsx Co-authored-by: Rez <[email protected]> * prevents top nav from sorting * fixes top nav hover styles --------- Co-authored-by: Rez <[email protected]>
1 parent 10b0aaf commit 85a82b1

File tree

15 files changed

+634
-37
lines changed

15 files changed

+634
-37
lines changed

‎apps/docs/content/index.mdx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ import {LinkExternalIcon} from '@primer/octicons-react'
88

99
<PRCBox
1010
sx={{
11-
p: 5,
1211
mt: 5,
1312
}}
1413
>
15-
<Heading as="h4">Primer Brand</Heading>
16-
<Text as="p">Read the installation instructions to get started.</Text>
14+
<Text as="p" size="300">
15+
Read the installation instructions to get started.
16+
</Text>
1717
<PRCBox
1818
sx={{
1919
mt: 4,

‎apps/docs/gatsby-config.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ const path = require('path')
22

33
module.exports = {
44
siteMetadata: {
5-
title: 'Primer Brand',
5+
title: 'Primer Brand UI',
66
header: {
7-
title: 'Primer Design System',
7+
title: 'Primer Brand UI',
88
},
99
shortName: '',
1010
description: 'React components for GitHub marketing pages',

‎apps/docs/src/@primer/gatsby-theme-doctocat/components/header.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react'
2+
import styles from './header.module.css'
3+
import {MarkGithubIcon} from '@primer/octicons-react'
4+
import {Navigation} from '../../../components/navigation/navigation'
5+
import {SidePanel} from '../../../components/side-panel/side-panel'
6+
7+
export const HEADER_HEIGHT = 56
8+
9+
export default function Header() {
10+
return (
11+
<header className={styles.PageHeader}>
12+
<a href="https://primer.style/" className={styles.SiteTitle}>
13+
<MarkGithubIcon size={24} />
14+
<span className={styles.Title}>Primer</span>
15+
</a>
16+
<Navigation />
17+
<div className={styles.SidePanel}>
18+
<SidePanel />
19+
</div>
20+
</header>
21+
)
22+
}

‎apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
.PageHeader {
2+
position: sticky;
3+
top: 0;
4+
width: 100%;
5+
display: flex;
6+
align-items: center;
7+
padding: var(--base-size-16) var(--base-size-24) var(--base-size-16)
8+
var(--base-size-24);
9+
border-bottom: var(--brand-borderWidth-thin) solid
10+
var(--brand-color-border-muted);
11+
background: var(--brand-color-canvas-default);
12+
z-index: 1;
13+
}
14+
15+
.SiteTitle {
16+
display: flex;
17+
gap: var(--base-size-8);
18+
align-items: center;
19+
text-decoration: none;
20+
}
21+
22+
.SiteTitle svg {
23+
fill: var(--brand-color-text-default);
24+
}
25+
26+
.Title {
27+
display: inline-block;
28+
font-weight: var(--base-text-weight-semibold);
29+
color: var(--brand-color-text-default);
30+
font-family: var(--brand-fontStack-sansSerif);
31+
padding-inline-end: var(--base-size-12);
32+
}
33+
34+
.SidePanel {
35+
display: none;
36+
margin-left: auto;
37+
}
38+
39+
@media (max-width: 1012px) {
40+
.PageHeader {
41+
padding: var(--base-size-16);
42+
}
43+
44+
.SidePanel {
45+
display: block;
46+
}
47+
}

‎apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React from 'react'
2+
import {Head, Header, Hero, Sidebar} from '@primer/gatsby-theme-doctocat'
3+
import PageFooter from '@primer/gatsby-theme-doctocat/src/components/page-footer'
4+
import {Stack} from '@primer/react-brand'
5+
import styles from './hero-layout.module.css'
6+
7+
function HeroLayout({children, pageContext}) {
8+
let {additionalContributors} = pageContext.frontmatter
9+
10+
if (!additionalContributors) {
11+
additionalContributors = []
12+
}
13+
14+
return (
15+
<div className={styles.HeroPageWrapper}>
16+
<Head />
17+
<Header />
18+
<div className={styles.HeroLayoutWrapper}>
19+
<div className={styles.HeroLayoutSidebarWrapper}>
20+
<Sidebar />
21+
</div>
22+
<main id="skip-nav" className={styles.HeroLayoutMain}>
23+
<div className={styles.LandingPageLayout}>
24+
<Stack gap={{narrow: 'spacious', regular: 'normal'}}>
25+
<Hero />
26+
{children}
27+
<PageFooter
28+
editUrl={pageContext.editUrl}
29+
contributors={pageContext.contributors.concat(
30+
additionalContributors.map((login) => ({login})),
31+
)}
32+
/>
33+
</Stack>
34+
</div>
35+
</main>
36+
</div>
37+
</div>
38+
)
39+
}
40+
41+
export default HeroLayout

‎apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
.HeroPageWrapper {
2+
flex-direction: column;
3+
min-height: 100vh;
4+
display: flex;
5+
}
6+
7+
.HeroLayoutWrapper {
8+
display: flex;
9+
flex: 1 1 auto;
10+
flex-direction: row;
11+
}
12+
13+
.HeroLayoutSidebarWrapper {
14+
display: block;
15+
16+
@media screen and (max-width: 64rem) {
17+
display: none;
18+
}
19+
}
20+
21+
.HeroLayoutMain {
22+
padding: var(--base-size-24);
23+
width: 100%;
24+
@media screen and (max-width: 48rem) {
25+
padding-bottom: 0;
26+
}
27+
}
28+
29+
.LandingPageLayout {
30+
max-width: var(--breakpoint-xlarge, 80rem);
31+
margin: 0 auto;
32+
width: 100%;
33+
padding: 0 var(--base-size-48);
34+
35+
@media screen and (max-width: 64rem) {
36+
padding: 0;
37+
}
38+
}

‎apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js

Lines changed: 25 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,31 @@
1-
import {Box as PRCBox, Heading, Text, ThemeProvider} from '@primer/react'
21
import React from 'react'
3-
import {Container} from '@primer/gatsby-theme-doctocat'
4-
import heroIllustration from '../primer-components-hero.svg'
5-
import {version} from '../../../../../../packages/react/package'
2+
import {Heading, Stack, Text} from '@primer/react-brand'
3+
import styles from './hero.module.css'
64

75
export default function Hero() {
86
return (
9-
<ThemeProvider colorMode="night" nightScheme="dark_dimmed">
10-
<PRCBox bg="canvas.default" py={6}>
11-
<Container>
12-
<Heading
13-
sx={{
14-
color: 'accent.fg',
15-
fontSize: 7,
16-
lineHeight: 'condensed',
17-
pb: 3,
18-
m: 0,
19-
}}
20-
>
21-
Primer Brand
22-
</Heading>
23-
<Text
24-
as="p"
25-
fontFamily="mono"
26-
mt={0}
27-
mb={2}
28-
color="fg.muted"
29-
fontSize={2}
30-
>
31-
v{version}
32-
</Text>
33-
<img src={heroIllustration} alt="" width="100%" />
34-
</Container>
35-
</PRCBox>
36-
</ThemeProvider>
7+
<Stack
8+
padding="none"
9+
gap="spacious"
10+
direction="horizontal"
11+
alignItems="center"
12+
justifyContent="space-between"
13+
>
14+
<Stack gap="normal" padding="none">
15+
<Heading as="h1" size="3">
16+
Primer Brand UI
17+
</Heading>
18+
<Text as="p" variant="muted" size="300">
19+
Primer Brand is GitHub's design system for creating marketing websites and digital experiences.
20+
</Text>
21+
</Stack>
22+
<div className={styles.HeroImage}>
23+
<img
24+
width="256"
25+
alt="3d illustration, showing a side profile of Mona the GitHub Mascot gazing towards the sky"
26+
src="https://github.com/user-attachments/assets/e9a4d7f8-8e61-4f45-a1a7-466848df6dda"
27+
/>
28+
</div>
29+
</Stack>
3730
)
3831
}

‎apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.module.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.HeroImage {
2+
flex-shrink: 0;
3+
@media screen and (max-width: 64rem) {
4+
display: none;
5+
}
6+
}

‎apps/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.js

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import {NavList} from '@primer/react/drafts'
2+
import {useLocation} from '@reach/router'
3+
import {Link as GatsbyLink, withPrefix} from 'gatsby'
4+
import React from 'react'
5+
import VisuallyHidden from '@primer/gatsby-theme-doctocat/src/components/visually-hidden'
6+
import styles from './nav-items.module.css'
7+
8+
function NavItem({href, children}) {
9+
const location = useLocation()
10+
const isCurrent = withPrefix(href) === location.pathname
11+
return (
12+
<NavList.Item
13+
as={GatsbyLink}
14+
to={href}
15+
aria-current={isCurrent ? 'page' : null}
16+
>
17+
{children}
18+
</NavList.Item>
19+
)
20+
}
21+
22+
function NavItems({items}) {
23+
return (
24+
<>
25+
<VisuallyHidden>
26+
<h3>Site navigation</h3>
27+
</VisuallyHidden>
28+
<div className={styles.NavList__Container}>
29+
<NavList aria-label="Site">
30+
{items.map((item) => (
31+
<React.Fragment key={item.title}>
32+
{item.children ? (
33+
<NavList.Group title={item.title}>
34+
{item.children.map((child) => (
35+
<NavItem key={child.title} href={child.url}>
36+
{child.title}
37+
{child.children ? (
38+
<NavList.SubNav>
39+
{child.children.map((subChild) => (
40+
<NavItem key={subChild.title} href={subChild.url}>
41+
{subChild.title}
42+
</NavItem>
43+
))}
44+
</NavList.SubNav>
45+
) : null}
46+
</NavItem>
47+
))}
48+
</NavList.Group>
49+
) : (
50+
<NavItem href={item.url}>{item.title}</NavItem>
51+
)}
52+
</React.Fragment>
53+
))}
54+
</NavList>
55+
</div>
56+
</>
57+
)
58+
}
59+
60+
export default NavItems

‎apps/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.module.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/* NavList style overrides needed because NavList uses hard-coded pixel values instead of rem-based CSS variables */
2+
.NavList__Container li span {
3+
font-size: var(--brand-text-size-100);
4+
}
5+
6+
.NavList__Container li a span,
7+
.NavList__Container li button span {
8+
font-size: var(--brand-text-size-200);
9+
line-height: var(--brand-text-lineHeight-200);
10+
}
11+
/* END NavList overrides */

0 commit comments

Comments
 (0)