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]>
primer · Dec 9, 2024 · 85a82b1 · 85a82b1
1 parent 10b0aaf
commit 85a82b1
Show file tree

Hide file tree

Showing 15 changed files with 634 additions and 37 deletions.
diff --git a/apps/docs/content/index.mdx b/apps/docs/content/index.mdx
@@ -8,12 +8,12 @@ import {LinkExternalIcon} from '@primer/octicons-react'
 
 <PRCBox
   sx={{
-    p: 5,
     mt: 5,
   }}
 >
-  <Heading as="h4">Primer Brand</Heading>
-  <Text as="p">Read the installation instructions to get started.</Text>
+  <Text as="p" size="300">
+    Read the installation instructions to get started.
+  </Text>
   <PRCBox
     sx={{
       mt: 4,

diff --git a/apps/docs/gatsby-config.js b/apps/docs/gatsby-config.js
@@ -2,9 +2,9 @@ const path = require('path')
 
 module.exports = {
   siteMetadata: {
-    title: 'Primer Brand',
+    title: 'Primer Brand UI',
     header: {
-      title: 'Primer Design System',
+      title: 'Primer Brand UI',
     },
     shortName: '',
     description: 'React components for GitHub marketing pages',

diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.js b/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import styles from './header.module.css'
+import {MarkGithubIcon} from '@primer/octicons-react'
+import {Navigation} from '../../../components/navigation/navigation'
+import {SidePanel} from '../../../components/side-panel/side-panel'
+
+export const HEADER_HEIGHT = 56
+
+export default function Header() {
+  return (
+    <header className={styles.PageHeader}>
+      <a href="https://primer.style/" className={styles.SiteTitle}>
+        <MarkGithubIcon size={24} />
+        <span className={styles.Title}>Primer</span>
+      </a>
+      <Navigation />
+      <div className={styles.SidePanel}>
+        <SidePanel />
+      </div>
+    </header>
+  )
+}
diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css b/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css
@@ -0,0 +1,47 @@
+.PageHeader {
+  position: sticky;
+  top: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: var(--base-size-16) var(--base-size-24) var(--base-size-16)
+    var(--base-size-24);
+  border-bottom: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+  background: var(--brand-color-canvas-default);
+  z-index: 1;
+}
+
+.SiteTitle {
+  display: flex;
+  gap: var(--base-size-8);
+  align-items: center;
+  text-decoration: none;
+}
+
+.SiteTitle svg {
+  fill: var(--brand-color-text-default);
+}
+
+.Title {
+  display: inline-block;
+  font-weight: var(--base-text-weight-semibold);
+  color: var(--brand-color-text-default);
+  font-family: var(--brand-fontStack-sansSerif);
+  padding-inline-end: var(--base-size-12);
+}
+
+.SidePanel {
+  display: none;
+  margin-left: auto;
+}
+
+@media (max-width: 1012px) {
+  .PageHeader {
+    padding: var(--base-size-16);
+  }
+
+  .SidePanel {
+    display: block;
+  }
+}
diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.js b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.js
@@ -0,0 +1,41 @@
+import React from 'react'
+import {Head, Header, Hero, Sidebar} from '@primer/gatsby-theme-doctocat'
+import PageFooter from '@primer/gatsby-theme-doctocat/src/components/page-footer'
+import {Stack} from '@primer/react-brand'
+import styles from './hero-layout.module.css'
+
+function HeroLayout({children, pageContext}) {
+  let {additionalContributors} = pageContext.frontmatter
+
+  if (!additionalContributors) {
+    additionalContributors = []
+  }
+
+  return (
+    <div className={styles.HeroPageWrapper}>
+      <Head />
+      <Header />
+      <div className={styles.HeroLayoutWrapper}>
+        <div className={styles.HeroLayoutSidebarWrapper}>
+          <Sidebar />
+        </div>
+        <main id="skip-nav" className={styles.HeroLayoutMain}>
+          <div className={styles.LandingPageLayout}>
+            <Stack gap={{narrow: 'spacious', regular: 'normal'}}>
+              <Hero />
+              {children}
+              <PageFooter
+                editUrl={pageContext.editUrl}
+                contributors={pageContext.contributors.concat(
+                  additionalContributors.map((login) => ({login})),
+                )}
+              />
+            </Stack>
+          </div>
+        </main>
+      </div>
+    </div>
+  )
+}
+
+export default HeroLayout
diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css
@@ -0,0 +1,38 @@
+.HeroPageWrapper {
+  flex-direction: column;
+  min-height: 100vh;
+  display: flex;
+}
+
+.HeroLayoutWrapper {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: row;
+}
+
+.HeroLayoutSidebarWrapper {
+  display: block;
+
+  @media screen and (max-width: 64rem) {
+    display: none;
+  }
+}
+
+.HeroLayoutMain {
+  padding: var(--base-size-24);
+  width: 100%;
+  @media screen and (max-width: 48rem) {
+    padding-bottom: 0;
+  }
+}
+
+.LandingPageLayout {
+  max-width: var(--breakpoint-xlarge, 80rem);
+  margin: 0 auto;
+  width: 100%;
+  padding: 0 var(--base-size-48);
+
+  @media screen and (max-width: 64rem) {
+    padding: 0;
+  }
+}
diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js
@@ -1,38 +1,31 @@
-import {Box as PRCBox, Heading, Text, ThemeProvider} from '@primer/react'
 import React from 'react'
-import {Container} from '@primer/gatsby-theme-doctocat'
-import heroIllustration from '../primer-components-hero.svg'
-import {version} from '../../../../../../packages/react/package'
+import {Heading, Stack, Text} from '@primer/react-brand'
+import styles from './hero.module.css'
 
 export default function Hero() {
   return (
-    <ThemeProvider colorMode="night" nightScheme="dark_dimmed">
-      <PRCBox bg="canvas.default" py={6}>
-        <Container>
-          <Heading
-            sx={{
-              color: 'accent.fg',
-              fontSize: 7,
-              lineHeight: 'condensed',
-              pb: 3,
-              m: 0,
-            }}
-          >
-            Primer Brand
-          </Heading>
-          <Text
-            as="p"
-            fontFamily="mono"
-            mt={0}
-            mb={2}
-            color="fg.muted"
-            fontSize={2}
-          >
-            v{version}
-          </Text>
-          <img src={heroIllustration} alt="" width="100%" />
-        </Container>
-      </PRCBox>
-    </ThemeProvider>
+    <Stack
+      padding="none"
+      gap="spacious"
+      direction="horizontal"
+      alignItems="center"
+      justifyContent="space-between"
+    >
+      <Stack gap="normal" padding="none">
+        <Heading as="h1" size="3">
+          Primer Brand UI
+        </Heading>
+        <Text as="p" variant="muted" size="300">
+          Primer Brand is GitHub's design system for creating marketing websites and digital experiences.
+        </Text>
+      </Stack>
+      <div className={styles.HeroImage}>
+        <img
+          width="256"
+          alt="3d illustration, showing a side profile of Mona the GitHub Mascot gazing towards the sky"
+          src="https://github.com/user-attachments/assets/e9a4d7f8-8e61-4f45-a1a7-466848df6dda"
+        />
+      </div>
+    </Stack>
   )
 }
diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.module.css b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.module.css
@@ -0,0 +1,6 @@
+.HeroImage {
+  flex-shrink: 0;
+  @media screen and (max-width: 64rem) {
+    display: none;
+  }
+}
diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.js b/apps/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.js
@@ -0,0 +1,60 @@
+import {NavList} from '@primer/react/drafts'
+import {useLocation} from '@reach/router'
+import {Link as GatsbyLink, withPrefix} from 'gatsby'
+import React from 'react'
+import VisuallyHidden from '@primer/gatsby-theme-doctocat/src/components/visually-hidden'
+import styles from './nav-items.module.css'
+
+function NavItem({href, children}) {
+  const location = useLocation()
+  const isCurrent = withPrefix(href) === location.pathname
+  return (
+    <NavList.Item
+      as={GatsbyLink}
+      to={href}
+      aria-current={isCurrent ? 'page' : null}
+    >
+      {children}
+    </NavList.Item>
+  )
+}
+
+function NavItems({items}) {
+  return (
+    <>
+      <VisuallyHidden>
+        <h3>Site navigation</h3>
+      </VisuallyHidden>
+      <div className={styles.NavList__Container}>
+        <NavList aria-label="Site">
+          {items.map((item) => (
+            <React.Fragment key={item.title}>
+              {item.children ? (
+                <NavList.Group title={item.title}>
+                  {item.children.map((child) => (
+                    <NavItem key={child.title} href={child.url}>
+                      {child.title}
+                      {child.children ? (
+                        <NavList.SubNav>
+                          {child.children.map((subChild) => (
+                            <NavItem key={subChild.title} href={subChild.url}>
+                              {subChild.title}
+                            </NavItem>
+                          ))}
+                        </NavList.SubNav>
+                      ) : null}
+                    </NavItem>
+                  ))}
+                </NavList.Group>
+              ) : (
+                <NavItem href={item.url}>{item.title}</NavItem>
+              )}
+            </React.Fragment>
+          ))}
+        </NavList>
+      </div>
+    </>
+  )
+}
+
+export default NavItems
diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.module.css b/apps/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.module.css
@@ -0,0 +1,11 @@
+/* NavList style overrides needed because NavList uses hard-coded pixel values instead of rem-based CSS variables */
+.NavList__Container li span {
+  font-size: var(--brand-text-size-100);
+}
+
+.NavList__Container li a span,
+.NavList__Container li button span {
+  font-size: var(--brand-text-size-200);
+  line-height: var(--brand-text-lineHeight-200);
+}
+/* END NavList overrides */