@primer/gatsby-theme-doctocat 4.5.0 → 4.6.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @primer/gatsby-theme-doctocat
 
+## 4.6.0
+
+### Minor Changes
+
+- [`02eb6b3`](https://github.com/primer/doctocat/commit/02eb6b34f8049305baa7cceb815cd085acd7d845) [#603](https://github.com/primer/doctocat/pull/603) Thanks [@josepmartins](https://github.com/josepmartins)! - Navigation updates:
+
+  - Remove monospace font
+  - Remove dark background and update link colors
+  - Use UnderlineNav for top right links to provide the correct styling
+  - Remove "View components" and "React components" from top and leave "Brand" and "About"
+
+### Patch Changes
+
+- [`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.
+  - Remove extra space below the heading when there's no status or external links
+  - Remove extra space when there's no Breadcrumbs
+
+## 4.5.1
+
+### Patch Changes
+
+- [`169049b`](https://github.com/primer/doctocat/commit/169049bd3d8d43ad412e20b842144a04a97ac365) [#605](https://github.com/primer/doctocat/pull/605) Thanks [@mperrotti](https://github.com/mperrotti)! - Updates the base layout with latest designs.
+
 ## 4.5.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/gatsby-theme-doctocat",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "main": "index.js",
   "license": "MIT",
   "scripts": {

package/src/components/header.js

@@ -1,5 +1,5 @@
 import {MarkGithubIcon, SearchIcon, ThreeBarsIcon} from '@primer/octicons-react'
-import {Box, Button, Link, StyledOcticon, Text, ThemeProvider, useTheme} from '@primer/react'
+import {Box, Button, Link, StyledOcticon, Text, ThemeProvider, useTheme, UnderlineNav} from '@primer/react'
 import VisuallyHidden from './visually-hidden'
 import {Link as GatsbyLink} from 'gatsby'
 import React from 'react'
@@ -7,19 +7,19 @@ import primerNavItems from '../primer-nav.yml'
 import useSiteMetadata from '../use-site-metadata'
 import MobileSearch from './mobile-search'
 import NavDrawer, {useNavDrawerState} from './nav-drawer'
-import NavDropdown, {NavDropdownItem} from './nav-dropdown'
 import Search from './search'
 import SkipLink from './skip-link'
 
-export const HEADER_HEIGHT = 66
+export const HEADER_HEIGHT = 56
 
-function Header({isSearchEnabled}) {
+function Header({isSearchEnabled, path}) {
   const {theme} = useTheme()
   const [isNavDrawerOpen, setIsNavDrawerOpen] = useNavDrawerState(theme.breakpoints[2])
   const [isMobileSearchOpen, setIsMobileSearchOpen] = React.useState(false)
   const siteMetadata = useSiteMetadata()
+
   return (
-    <ThemeProvider colorMode="night" nightScheme="dark_dimmed">
+    <ThemeProvider>
       <Box sx={{position: 'sticky', top: 0, zIndex: 1}}>
         <Box
           as="header"
@@ -29,7 +29,9 @@ function Header({isSearchEnabled}) {
             px: [3, null, null, 4],
             alignItems: 'center',
             justifyContent: 'space-between',
-            bg: 'canvas.default'
+            bg: 'canvas.default',
+            border: '1px solid',
+            borderColor: 'border.muted'
           }}
         >
           <SkipLink />
@@ -37,19 +39,19 @@ function Header({isSearchEnabled}) {
             <Link
               href={siteMetadata.header.logoUrl}
               sx={{
-                color: 'accent.fg',
+                color: 'fg.default',
                 mr: 3,
                 lineHeight: 'condensedUltra'
               }}
             >
-              <StyledOcticon icon={MarkGithubIcon} size="medium" />
+              <StyledOcticon icon={MarkGithubIcon} size="24px" />
             </Link>
             {siteMetadata.header.title ? (
               <Link
                 href={siteMetadata.header.url}
                 sx={{
-                  color: 'accent.fg',
-                  fontFamily: 'mono',
+                  color: 'fg.default',
+                  fontWeight: 'bold',
                   display: [
                     // We only hide "Primer" on small viewports if a shortName is defined.
                     siteMetadata.shortName ? 'none' : 'inline-block',
@@ -68,8 +70,7 @@ function Header({isSearchEnabled}) {
                   <Text
                     sx={{
                       display: ['none', null, null, 'inline-block'],
-                      color: 'accent.fg',
-                      fontFamily: 'mono',
+                      color: 'fg.default',
                       mx: 2
                     }}
                   >
@@ -80,24 +81,23 @@ function Header({isSearchEnabled}) {
                   as={GatsbyLink}
                   to="/"
                   sx={{
-                    color: 'accent.fg',
-                    fontFamily: 'mono'
+                    fontWeight: 'bold',
+                    color: 'fg.default'
                   }}
                 >
                   {siteMetadata.shortName}
                 </Link>
               </>
             ) : null}
-
-            {isSearchEnabled ? (
-              <Box sx={{display: ['none', null, null, 'block'], ml: 4}}>
-                <Search />
-              </Box>
-            ) : null}
           </Box>
           <Box>
-            <Box sx={{display: ['none', null, null, 'block']}}>
-              <PrimerNavItems siteMetadata={siteMetadata} items={primerNavItems} />
+            <Box sx={{display: ['none', null, null, 'flex'], alignItems: 'center'}}>
+              <PrimerNavItems path={path} siteMetadata={siteMetadata} items={primerNavItems} />
+              {isSearchEnabled ? (
+                <Box sx={{display: ['none', null, null, 'block'], ml: 3}}>
+                  <Search />
+                </Box>
+              ) : null}
             </Box>
             <Box sx={{display: ['flex', null, null, 'none']}}>
               {isSearchEnabled ? (
@@ -138,49 +138,21 @@ Header.defaultProps = {
   isSearchEnabled: true
 }
 
-function PrimerNavItems({siteMetadata, items}) {
+function PrimerNavItems({siteMetadata, items, path}) {
   return (
     <>
       <VisuallyHidden>
         <h3 aria-labelledby="site-header">{siteMetadata.header.title} </h3>
       </VisuallyHidden>
-      <Box
-        as={'nav'}
-        sx={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: 'fg.default', gap: 2}}
-      >
+      <UnderlineNav aria-label="main navigation" sx={{border: 'none'}}>
         {items.map((item, index) => {
-          if (item.children) {
-            return (
-              <Box key={index}>
-                <NavDropdown title={item.title}>
-                  {item.children.map(child => (
-                    <NavDropdownItem key={child.title} href={child.url}>
-                      {child.title}
-                    </NavDropdownItem>
-                  ))}
-                </NavDropdown>
-              </Box>
-            )
-          }
-
           return (
-            <Link
-              key={index}
-              href={item.url}
-              sx={{
-                display: 'block',
-                color: 'fg.default',
-                fontSize: 2,
-                fontWeight: 'bold',
-                ml: 2,
-                mr: 2
-              }}
-            >
+            <UnderlineNav.Link key={index} href={item.url} selected={item.url === siteMetadata.header.url + path}>
               {item.title}
-            </Link>
+            </UnderlineNav.Link>
           )
         })}
-      </Box>
+      </UnderlineNav>
     </>
   )
 }

package/src/components/heading.js

@@ -59,7 +59,7 @@ function MarkdownHeading({children, ...props}) {
 
 const StyledH1 = styled(StyledHeading).attrs({as: 'h1'})`
   padding-bottom: ${themeGet('space.2')};
-  font-size: ${themeGet('fontSizes.5')};
+  font-size: ${themeGet('fontSizes.7')};
   border-bottom: 1px solid ${themeGet('colors.border.default')};
 `
 
@@ -67,14 +67,17 @@ const StyledH2 = styled(StyledHeading).attrs({as: 'h2'})`
   padding-bottom: ${themeGet('space.2')};
   font-size: ${themeGet('fontSizes.4')};
   border-bottom: 1px solid ${themeGet('colors.border.default')};
+  font-weight: ${themeGet('fontWeights.semibold')};
 `
 
 const StyledH3 = styled(StyledHeading).attrs({as: 'h3'})`
   font-size: ${themeGet('fontSizes.3')};
+  font-weight: ${themeGet('fontWeights.semibold')};
 `
 
 const StyledH4 = styled(StyledHeading).attrs({as: 'h4'})`
   font-size: ${themeGet('fontSizes.2')};
+  font-weight: ${themeGet('fontWeights.semibold')};
 `
 
 const StyledH5 = styled(StyledHeading).attrs({as: 'h5'})`

package/src/components/layout.js

@@ -72,7 +72,7 @@ function Layout({children, pageContext, path}) {
   return (
     <Box sx={{flexDirection: 'column', minHeight: '100vh', display: 'flex'}}>
       <Head title={title} description={description} />
-      <Header />
+      <Header path={path} />
       <Box css={{zIndex: 0}} sx={{flex: '1 1 auto', flexDirection: 'row', display: 'flex'}}>
         <Box sx={{display: ['none', null, null, 'block']}}>
           <Sidebar />
@@ -91,7 +91,7 @@ function Layout({children, pageContext, path}) {
               sx={{
                 width: 220,
                 flex: '0 0 auto',
-                marginLeft: 6,
+                marginLeft: [null, 7, 8, 9],
                 display: ['none', null, 'block'],
                 position: 'sticky',
                 top: HEADER_HEIGHT + 48,
@@ -99,7 +99,7 @@ function Layout({children, pageContext, path}) {
               }}
               css={{gridArea: 'table-of-contents', overflow: 'auto'}}
             >
-              <Heading as="h3" sx={{fontSize: 2, display: 'inline-block', fontWeight: 'bold', pl: 3}} id="toc-heading">
+              <Heading as="h3" sx={{fontSize: 1, display: 'inline-block', fontWeight: 'bold', pl: 3}} id="toc-heading">
                 On this page
               </Heading>
               <TableOfContents aria-labelledby="toc-heading" items={pageContext.tableOfContents.items} />
@@ -107,75 +107,77 @@ function Layout({children, pageContext, path}) {
           ) : null}
           <Box sx={{width: '100%', maxWidth: '960px'}}>
             <Box as="main" id="skip-nav" sx={{mb: 4}}>
-              <Breadcrumbs sx={{mb: 4}}>
-                {breadcrumbData.length > 1
-                  ? breadcrumbData.map(item => (
-                      <Breadcrumbs.Item key={item.url} href={item.url} selected={path === item.url}>
-                        {item.title}
-                      </Breadcrumbs.Item>
-                    ))
-                  : null}
-              </Breadcrumbs>
-              <Box sx={{alignItems: 'center', display: 'flex'}}>
-                <Heading as="h1">{title}</Heading>{' '}
-              </Box>
+              {breadcrumbData.length > 1 ? (
+                <Breadcrumbs sx={{mb: 4}}>
+                  {breadcrumbData.map(item => (
+                    <Breadcrumbs.Item key={item.url} href={item.url} selected={path === item.url}>
+                      {item.title}
+                    </Breadcrumbs.Item>
+                  ))}
+                </Breadcrumbs>
+              ) : null}
+              <Heading as="h1" sx={{fontSize: 7}}>
+                {title}
+              </Heading>
               {description ? <Box sx={{fontSize: 3, mb: 3}}>{description}</Box> : null}
-              <Box
-                sx={{
-                  display: 'flex',
-                  flexWrap: 'wrap',
-                  columnGap: 3,
-                  mb: 7,
-                  mt: 2,
-                  rowGap: 3,
-                  alignItems: 'center',
-                  fontSize: 1
-                }}
-              >
-                {status ? (
-                  <Box
-                    as={'ul'}
-                    sx={{
-                      display: 'flex',
-                      gap: 1,
-                      alignItems: 'center',
-                      m: 0,
-                      p: 0,
-                      paddingInline: 0,
-                      listStyle: 'none'
-                    }}
-                  >
-                    <li>
-                      <StatusLabel status={status} />
-                    </li>
-                    <li>
-                      <AccessibilityLabel a11yReviewed={a11yReviewed} />
-                    </li>
-                  </Box>
-                ) : null}
-                {source || storybook || lookbook || figma || rails || react ? (
-                  <Box
-                    as={'ul'}
-                    sx={{
-                      display: 'flex',
-                      flexWrap: 'wrap',
-                      gap: 4,
-                      alignItems: 'center',
-                      m: 0,
-                      p: 0,
-                      paddingInline: 0,
-                      listStyle: 'none'
-                    }}
-                  >
-                    {source ? <SourceLink href={source} /> : null}
-                    {lookbook ? <LookbookLink href={lookbook} /> : null}
-                    {storybook ? <StorybookLink href={storybook} /> : null}
-                    {react ? <ReactLink href={react} /> : null}
-                    {rails ? <RailsLink href={rails} /> : null}
-                    {figma ? <FigmaLink href={figma} /> : null}
-                  </Box>
-                ) : null}
-              </Box>
+              {status || source || storybook || lookbook || figma || rails || react ? (
+                <Box
+                  sx={{
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    columnGap: 3,
+                    mb: 7,
+                    mt: 2,
+                    rowGap: 3,
+                    alignItems: 'center',
+                    fontSize: 1
+                  }}
+                >
+                  {status ? (
+                    <Box
+                      as={'ul'}
+                      sx={{
+                        display: 'flex',
+                        gap: 1,
+                        alignItems: 'center',
+                        m: 0,
+                        p: 0,
+                        paddingInline: 0,
+                        listStyle: 'none'
+                      }}
+                    >
+                      <li>
+                        <StatusLabel status={status} />
+                      </li>
+                      <li>
+                        <AccessibilityLabel a11yReviewed={a11yReviewed} />
+                      </li>
+                    </Box>
+                  ) : null}
+                  {source || storybook || lookbook || figma || rails || react ? (
+                    <Box
+                      as={'ul'}
+                      sx={{
+                        display: 'flex',
+                        flexWrap: 'wrap',
+                        gap: 4,
+                        alignItems: 'center',
+                        m: 0,
+                        p: 0,
+                        paddingInline: 0,
+                        listStyle: 'none'
+                      }}
+                    >
+                      {source ? <SourceLink href={source} /> : null}
+                      {lookbook ? <LookbookLink href={lookbook} /> : null}
+                      {storybook ? <StorybookLink href={storybook} /> : null}
+                      {react ? <ReactLink href={react} /> : null}
+                      {rails ? <RailsLink href={rails} /> : null}
+                      {figma ? <FigmaLink href={figma} /> : null}
+                    </Box>
+                  ) : null}
+                </Box>
+              ) : null}
             </Box>
             {pageContext.tableOfContents.items ? (
               <Box

package/src/components/nav-items.js

@@ -31,10 +31,10 @@ function NavItem({href, children}) {
 function NavItems({items}) {
   return (
     <>
+      <VisuallyHidden>
+        <h3>Site navigation</h3>
+      </VisuallyHidden>
       <NavList aria-label="Site">
-        <VisuallyHidden>
-          <h3>Site navigation</h3>
-        </VisuallyHidden>
         {items.map(item => (
           <React.Fragment key={item.title}>
             {item.children ? (

package/src/primer-nav.yml

@@ -1,26 +1,4 @@
-- title: Design
-  children:
-    - title: Interface guidelines
-      url: https://primer.style/design
-    - title: Octicons
-      url: https://primer.style/design/foundations/icons
-    - title: Desktop
-      url: https://primer.style/design/native/desktop
-    - title: Mobile
-      url: https://primer.style/design/native/mobile
-    - title: CLI
-      url: https://primer.style/design/native/cli
-- title: Build
-  children:
-    - title: CSS
-      url: https://primer.style/css
-    - title: React
-      url: https://primer.style/react
-    - title: React Brand
-      url: https://primer.style/brand
-    - title: ViewComponents
-      url: https://primer.style/view-components
-- title: Contribute
-  url: https://primer.style/design/guides/contribute
+- title: Brand
+  url: https://primer.style/brand
 - title: About
   url: https://primer.style/design/guides/about