@primer/gatsby-theme-doctocat 4.4.3 → 4.5.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @primer/gatsby-theme-doctocat
 
+## 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
+
+- [`c5156b0`](https://github.com/primer/doctocat/commit/c5156b06c8f72ec267fb186be2705c421462f409) [#602](https://github.com/primer/doctocat/pull/602) Thanks [@mperrotti](https://github.com/mperrotti)! - Add breadcrumb nav to default layout
+
+* [`4960db2`](https://github.com/primer/doctocat/commit/4960db2a305fe39a529585036c5943119a0c326e) [#594](https://github.com/primer/doctocat/pull/594) Thanks [@kendallgassner](https://github.com/kendallgassner)! - Add visually hidden header to the top navigation. Utilize the ActionMenu component in top nav.
+
 ## 4.4.3
 
 ### Patch Changes

package/package.json

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

package/src/components/header.js

@@ -1,5 +1,6 @@
 import {MarkGithubIcon, SearchIcon, ThreeBarsIcon} from '@primer/octicons-react'
 import {Box, Button, Link, StyledOcticon, Text, ThemeProvider, useTheme} from '@primer/react'
+import VisuallyHidden from './visually-hidden'
 import {Link as GatsbyLink} from 'gatsby'
 import React from 'react'
 import primerNavItems from '../primer-nav.yml'
@@ -96,7 +97,7 @@ function Header({isSearchEnabled}) {
           </Box>
           <Box>
             <Box sx={{display: ['none', null, null, 'block']}}>
-              <PrimerNavItems items={primerNavItems} />
+              <PrimerNavItems siteMetadata={siteMetadata} items={primerNavItems} />
             </Box>
             <Box sx={{display: ['flex', null, null, 'none']}}>
               {isSearchEnabled ? (
@@ -137,39 +138,50 @@ Header.defaultProps = {
   isSearchEnabled: true
 }
 
-function PrimerNavItems({items}) {
+function PrimerNavItems({siteMetadata, items}) {
   return (
-    <Box sx={{display: 'flex', alignItems: 'center', color: 'fg.default'}}>
-      {items.map((item, index) => {
-        if (item.children) {
+    <>
+      <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}}
+      >
+        {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 (
-            <Box key={index} sx={{ml: 4}}>
-              <NavDropdown title={item.title}>
-                {item.children.map(child => (
-                  <NavDropdownItem key={child.title} href={child.url}>
-                    {child.title}
-                  </NavDropdownItem>
-                ))}
-              </NavDropdown>
-            </Box>
+            <Link
+              key={index}
+              href={item.url}
+              sx={{
+                display: 'block',
+                color: 'fg.default',
+                fontSize: 2,
+                fontWeight: 'bold',
+                ml: 2,
+                mr: 2
+              }}
+            >
+              {item.title}
+            </Link>
           )
-        }
-
-        return (
-          <Link
-            key={index}
-            href={item.url}
-            sx={{
-              display: 'block',
-              color: 'inherit',
-              ml: 4
-            }}
-          >
-            {item.title}
-          </Link>
-        )
-      })}
-    </Box>
+        })}
+      </Box>
+    </>
   )
 }
 

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

@@ -1,5 +1,5 @@
 import componentMetadata from '@primer/component-metadata'
-import {Box, Heading, Text} from '@primer/react'
+import {Box, Breadcrumbs, Heading, Text} from '@primer/react'
 import React from 'react'
 import Head from './head'
 import Header, {HEADER_HEIGHT} from './header'
@@ -14,8 +14,33 @@ import LookbookLink from './lookbook-link'
 import StorybookLink from './storybook-link'
 import FigmaLink from './figma-link'
 import TableOfContents from './table-of-contents'
+import navItems from '../nav.yml'
 
-function Layout({children, pageContext}) {
+const getPageAncestry = (url, object) => {
+  const result = []
+  const buildArray = (node, path) => {
+    if (node.url === path) {
+      result.push({title: node.title, url: node.url})
+    } else if (node.children) {
+      for (const child of node.children) {
+        buildArray(child, path)
+        if (result.length > 0) {
+          result.unshift({title: node.title, url: node.url})
+          break
+        }
+      }
+    }
+  }
+  for (const node of object) {
+    buildArray(node, url)
+    if (result.length > 0) {
+      break
+    }
+  }
+  return result
+}
+
+function Layout({children, pageContext, path}) {
   let {
     title,
     description,
@@ -42,6 +67,7 @@ function Layout({children, pageContext}) {
     title ||= component.displayName
     description ||= component.description
   }
+  const breadcrumbData = getPageAncestry(path, navItems).filter(item => item.url)
 
   return (
     <Box sx={{flexDirection: 'column', minHeight: '100vh', display: 'flex'}}>
@@ -65,7 +91,7 @@ function Layout({children, pageContext}) {
               sx={{
                 width: 220,
                 flex: '0 0 auto',
-                marginLeft: 6,
+                marginLeft: [null, 7, 8, 9],
                 display: ['none', null, 'block'],
                 position: 'sticky',
                 top: HEADER_HEIGHT + 48,
@@ -73,7 +99,7 @@ function Layout({children, pageContext}) {
               }}
               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} />
@@ -81,8 +107,19 @@ function Layout({children, pageContext}) {
           ) : 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>{' '}
+                <Heading as="h1" sx={{fontSize: 7}}>
+                  {title}
+                </Heading>
               </Box>
               {description ? <Box sx={{fontSize: 3, mb: 3}}>{description}</Box> : null}
               <Box

package/src/components/nav-dropdown.js

@@ -1,36 +1,31 @@
-import {Box, Details, StyledOcticon, Text, themeGet, useDetails} from '@primer/react'
-import {TriangleDownIcon} from '@primer/octicons-react'
+import {ActionMenu, ActionList, themeGet, useDetails} from '@primer/react'
 import React from 'react'
 import styled from 'styled-components'
 
 function NavDropdown({title, children}) {
   const {getDetailsProps} = useDetails({closeOnOutsideClick: true})
   return (
-    <Details {...getDetailsProps()}>
-      <summary style={{cursor: 'pointer'}}>
-        <Text>{title}</Text>
-        <StyledOcticon icon={TriangleDownIcon} sx={{ml: 1}} />
-      </summary>
-      <Box sx={{position: 'absolute'}}>
-        <Box
-          sx={{
-            bg: 'canvas.overlay',
-            p: 2,
-            mt: 2,
-            borderWidth: '1px',
-            borderStyle: 'solid',
-            borderColor: 'border.default',
-            borderRadius: '12px'
-          }}
-        >
-          {children}
-        </Box>
-      </Box>
-    </Details>
+    <ActionMenu {...getDetailsProps()}>
+      <ActionMenu.Button
+        variant="invisible"
+        sx={{
+          fontSize: 2,
+          color: 'fg.default',
+          ':hover:not([disabled])': {
+            backgroundColor: 'canvas.subtle'
+          }
+        }}
+      >
+        {title}
+      </ActionMenu.Button>
+      <ActionMenu.Overlay width="auto">
+        <ActionList>{children}</ActionList>
+      </ActionMenu.Overlay>
+    </ActionMenu>
   )
 }
 
-export const NavDropdownItem = styled.a`
+export const NavDropdownItem = styled(ActionList.LinkItem)`
   display: block;
   padding: ${themeGet('space.2')};
   color: inherit;