gatsby-theme-carbon 4.0.6 → 4.0.7

package/gatsby-node.mjs

@@ -103,9 +103,14 @@ export const createSchemaCustomization = ({ actions, schema }) => {
       title: String
       path: String!
     }
+    type NavItemsSubLevelYaml {
+      title: String
+      path: String
+      pages: [NavItemsYamlPage]
+    }
     type NavItemsYaml implements Node {
       title: String!
-      pages: [NavItemsYamlPage]!
+      pages: [NavItemsSubLevelYaml]!
       hasDivider: Boolean
     }`,
     schema.buildObjectType({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-theme-carbon",
-  "version": "4.0.6",
+  "version": "4.0.7",
   "main": "index.js",
   "author": "vpicone <vp@vincepic.one> (@vpicone)",
   "repository": {

package/src/components/LeftNav/LeftNav.js

@@ -1,4 +1,10 @@
-import React, { useContext, useRef, useEffect } from 'react';
+import React, {
+  useContext,
+  useRef,
+  useEffect,
+  useCallback,
+  useState,
+} from 'react';
 import { SideNav, SideNavItems } from '@carbon/react';
 import { useNavItems } from '../../util/NavItems';
 
@@ -9,6 +15,7 @@ import LeftNavResourceLinks from './ResourceLinks';
 import LeftNavWrapper from './LeftNavWrapper';
 import * as styles from './LeftNav.module.scss';
 import useMetadata from '../../util/hooks/useMetadata';
+import LeftNavTree from './LeftNavTree';
 
 const LeftNav = (props) => {
   const {
@@ -18,24 +25,57 @@ const LeftNav = (props) => {
     toggleNavState,
   } = useContext(NavContext);
 
+  const [isTreeView, setIsTreeView] = useState();
+
   const sideNavRef = useRef();
   const sideNavListRef = useRef();
 
+  const navItems = useNavItems();
+
+  const hasNestedLevels = useCallback(() => {
+    let nestedLevels = false;
+
+    navItems.forEach((navItem) => {
+      navItem.pages?.forEach((levelTwoNavItem) => {
+        if (levelTwoNavItem.pages && levelTwoNavItem.pages.length > 1) {
+          nestedLevels = true;
+        }
+        // if it is branch node with only one leaf node, convert it to a leaf node
+        else if (levelTwoNavItem.pages && levelTwoNavItem.pages.length) {
+          levelTwoNavItem.path = levelTwoNavItem.pages[0].path;
+          levelTwoNavItem.pages = null;
+        }
+      });
+    });
+    return nestedLevels;
+  }, [navItems]);
+
   useEffect(() => {
-    sideNavListRef.current = sideNavRef.current.querySelector('.sidenav-list');
-  }, []);
+    setIsTreeView(hasNestedLevels());
+  }, [navItems]);
 
   useEffect(() => {
-    sideNavListRef.current.addEventListener('scroll', (e) => {
-      setLeftNavScrollTop(e.target.scrollTop);
-    });
-  }, [setLeftNavScrollTop]);
+    if (!isTreeView) {
+      sideNavListRef.current =
+        sideNavRef.current.querySelector('.sidenav-list');
+    }
+  }, [isTreeView]);
+
+  useEffect(() => {
+    if (!isTreeView) {
+      sideNavListRef.current.addEventListener('scroll', (e) => {
+        setLeftNavScrollTop(e.target.scrollTop);
+      });
+    }
+  }, [setLeftNavScrollTop, isTreeView]);
 
   useEffect(() => {
-    if (leftNavScrollTop >= 0 && !sideNavListRef?.current.scrollTop) {
-      sideNavListRef.current.scrollTop = leftNavScrollTop;
+    if (!isTreeView) {
+      if (leftNavScrollTop >= 0 && !sideNavListRef?.current.scrollTop) {
+        sideNavListRef.current.scrollTop = leftNavScrollTop;
+      }
     }
-  }, [leftNavScrollTop]);
+  }, [leftNavScrollTop, isTreeView]);
 
   const getLeftNavClassNames = () => {
     if (props.theme === 'dark') {
@@ -44,7 +84,6 @@ const LeftNav = (props) => {
     return styles.sideNavWhite;
   };
 
-  const navItems = useNavItems();
   const { navigationStyle } = useMetadata();
 
   const closeSwitcher = () => {
@@ -57,25 +96,30 @@ const LeftNav = (props) => {
       expanded={leftNavIsOpen}
       onClick={closeSwitcher}
       onKeyPress={closeSwitcher}>
-      <SideNav
-        ref={sideNavRef}
-        aria-label="Side navigation"
-        expanded={navigationStyle ? leftNavIsOpen : true}
-        defaultExpanded={!navigationStyle}
-        isPersistent={!navigationStyle}
-        className={getLeftNavClassNames()}>
-        <SideNavItems className="sidenav-list">
-          {navItems.map((item, i) => (
-            <LeftNavItem
-              items={item.pages}
-              category={item.title}
-              key={i}
-              hasDivider={item.hasDivider}
-            />
-          ))}
-          <LeftNavResourceLinks />
-        </SideNavItems>
-      </SideNav>
+      {isTreeView ? (
+        <LeftNavTree items={navItems} theme={props.theme} />
+      ) : (
+        <SideNav
+          ref={sideNavRef}
+          aria-label="Side navigation"
+          expanded={navigationStyle ? leftNavIsOpen : true}
+          defaultExpanded={!navigationStyle}
+          isPersistent={!navigationStyle}
+          className={getLeftNavClassNames()}>
+          <SideNavItems className="sidenav-list">
+            {typeof isTreeView !== 'undefined' &&
+              navItems.map((item, i) => (
+                <LeftNavItem
+                  items={item.pages}
+                  category={item.title}
+                  key={i}
+                  hasDivider={item.hasDivider}
+                />
+              ))}
+            <LeftNavResourceLinks />
+          </SideNavItems>
+        </SideNav>
+      )}
     </LeftNavWrapper>
   );
 };

package/src/components/LeftNav/LeftNav.module.scss

@@ -106,7 +106,7 @@ nav.side-nav--dark a.current-item {
 }
 
 .divider-space {
-  margin-top: 4rem;
+  margin-top: $spacing-05;
   margin-bottom: $spacing-05;
 }
 

package/src/components/LeftNav/LeftNavTree.js

@@ -0,0 +1,158 @@
+import React, { memo, useCallback, useEffect, useState } from 'react';
+import { useLocation } from '@reach/router';
+import { Theme, TreeNode, TreeView } from '@carbon/react';
+import { Link } from 'gatsby';
+
+import cx from 'classnames';
+import slugify from 'slugify';
+import PropTypes from 'prop-types';
+import * as styles from './LeftNavTree.module.scss';
+import { dfs } from '../../util/NavTree';
+
+import LeftNavResourceLinks from './ResourceLinks';
+
+const LeftNavTree = ({ items, theme }) => {
+  const [itemNodes, setItemNodes] = useState([]);
+  const [treeActiveItem, setTreeActiveItem] = useState({});
+  const [activePath, setActivePath] = useState('');
+  const location = useLocation();
+
+  const themeValue = theme === 'dark' ? 'g100' : theme;
+
+  useEffect(() => {
+    const newItemNodeArray = [];
+    // method to set isBranch value for branch nodes
+    const assignNodeType = (item) => {
+      // branch node with more than 1 leaf nodes
+      if (item.pages && item.pages.length > 1) {
+        item.isBranch = true;
+        item.pages.forEach((SubNavItem, i) => assignNodeType(SubNavItem));
+      }
+      // if it is branch node with only one leaf node, convert it to a leaf node
+      else if (item.pages && item.pages.length) {
+        item.path = item.pages[0].path;
+        item.pages = null;
+      }
+      return item;
+    };
+
+    items.forEach((item) => {
+      newItemNodeArray.push(assignNodeType(item));
+    });
+
+    // Create hierarchical, unique node ids for all nodes in the nav tree
+    dfs(newItemNodeArray, (evalNode) => {
+      if (!evalNode.parentNodeId) {
+        evalNode.parentNodeId = 'left_nav_tree';
+      }
+
+      // Combine the parent's node id with the current node's id
+      const currentNodeId = evalNode.title
+        .toLocaleLowerCase()
+        .replace(/\s/g, '');
+      evalNode.id = `${evalNode.parentNodeId}_${currentNodeId}`;
+
+      // Set the parent node id of each child of this node to the newly generated id
+      evalNode.pages?.forEach((child) => {
+        child.parentNodeId = evalNode.id;
+      });
+
+      return false;
+    });
+
+    setItemNodes(newItemNodeArray);
+  }, [items]);
+
+  useEffect(() => {
+    const stripTrailingSlash = (str) =>
+      str.endsWith('/') ? str.slice(0, -1) : str;
+    setActivePath(stripTrailingSlash(location.pathname));
+  }, [location.pathname]);
+
+  const getItemPath = (item) =>
+    item.path || slugify(item.title, { lower: true, strict: true });
+
+  const removeHashAndQuery = (path) => path?.split('?')?.[0]?.split('#')?.[0];
+
+  const isTreeNodeActive = useCallback(
+    (node) => getItemPath(node) === removeHashAndQuery(activePath),
+    [activePath]
+  );
+
+  useEffect(() => {
+    const activeNode = dfs(itemNodes, isTreeNodeActive);
+    setTreeActiveItem(activeNode);
+  }, [isTreeNodeActive, itemNodes]);
+
+  const isTreeNodeExpanded = (node) =>
+    !!dfs([node], (evalNode) =>
+      evalNode.pages?.some((page) => page.id === treeActiveItem?.id)
+    );
+
+  function renderTree({ nodes }) {
+    if (!nodes) {
+      return;
+    }
+    return nodes.map((node) => {
+      let label = node.title;
+
+      if (node.path) {
+        label = (
+          <Link
+            to={node.path}
+            className={styles.anchor}
+            // tabIndex={visible ? 0 : '-1'}
+          >
+            {node.title}
+          </Link>
+        );
+      }
+
+      return (
+        <TreeNode
+          id={node.id}
+          key={node.id}
+          label={label}
+          value={node.title}
+          isExpanded={isTreeNodeExpanded(node)}
+          className={cx({
+            'cds--tree-node--active': node.id === treeActiveItem?.id,
+            'cds--tree-node--selected': node.id === treeActiveItem?.id,
+            [styles.divider]: node.hasDivider,
+          })}
+          onSelect={() => {
+            node.path && setTreeActiveItem(node);
+          }}>
+          {node.isBranch &&
+            renderTree({
+              nodes: node.pages,
+            })}
+        </TreeNode>
+      );
+    });
+  }
+
+  return (
+    <Theme className={styles.container} theme={themeValue}>
+      <TreeView label="Side navigation" hideLabel>
+        {renderTree({ nodes: itemNodes })}
+        <LeftNavResourceLinks />
+      </TreeView>
+    </Theme>
+  );
+};
+
+LeftNavTree.propTypes = {
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string.isRequired,
+      path: PropTypes.string,
+      pages: PropTypes.array,
+      hasDivider: PropTypes.bool,
+    })
+  ),
+};
+
+const areEqual = (prevProps, nextProps) => true;
+
+export default memo(LeftNavTree, areEqual);

package/src/components/LeftNav/LeftNavTree.module.scss

@@ -0,0 +1,163 @@
+@use '@carbon/react/scss/breakpoint' as breakpoint;
+@use '@carbon/react/scss/spacing' as spacing;
+@use '@carbon/react/scss/theme' as theme;
+@use '@carbon/react/scss/type' as type;
+@use '@carbon/react/scss/utilities/convert' as convert;
+@use '@carbon/react/scss/zone';
+
+.container {
+  height: 100%;
+  margin: spacing.$spacing-10 0;
+  background-color: theme.$background;
+
+  :global(.cds--tree) {
+    overflow: auto;
+    height: calc(100% - spacing.$spacing-10);
+    background-color: theme.$background;
+  }
+
+  :global(.cds--tree-node) {
+    background-color: theme.$background;
+  }
+
+  // fix left alignment because we are hiding the left icon
+  :global(.cds--tree-leaf-node) {
+    padding-left: spacing.$spacing-05;
+  }
+
+  // label font and cursor overrides
+  :global(.cds--tree-node__label) {
+    position: relative;
+    cursor: pointer;
+    @include type.type-style('heading-01');
+  }
+
+  // override g10 selected background
+  :global(.cds--tree-node--selected > .cds--tree-node__label),
+  :global(.cds--tree-node--selected > .cds--tree-node__label::before) {
+    background-color: transparent;
+  }
+
+  // bold selected labels and make darker
+  :global(.cds--tree-node[aria-expanded='true'] > .cds--tree-node__label) {
+    color: theme.$text-primary;
+    @include type.type-style('heading-01');
+  }
+
+  // override g10 hover background
+  :global(.cds--tree-node__label:hover),
+  :global(.cds--tree-node--selected > .cds--tree-node__label:hover) {
+    background-color: theme.$layer-02;
+  }
+
+  // child labels have normal font weight
+  :global(.cds--tree-node__children .cds--tree-node__label) {
+    @include type.type-style('body-compact-01');
+  }
+
+  // move all div padding to the anchor
+  :global(.cds--tree-node:not(.cds--tree-parent-node) .cds--tree-node__label) {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  // anchor links fill entire label box
+  .anchor {
+    width: calc(100% + spacing.$spacing-05);
+    padding: 0.375rem spacing.$spacing-05;
+    margin-left: -(spacing.$spacing-05);
+    color: theme.$text-secondary;
+    text-decoration: none;
+  }
+
+  // anchor links are darker on hover
+  .anchor:hover {
+    color: theme.$text-primary;
+  }
+
+  // nested anchor link
+  :global(.cds--tree-node__children) .anchor {
+    width: calc(100% + spacing.$spacing-07);
+    padding-left: spacing.$spacing-07;
+    margin-left: -(spacing.$spacing-07);
+  }
+
+  // have anchor selected match label selected
+  :global(.cds--tree-node--selected > .cds--tree-node__label) .anchor {
+    position: relative;
+    background: theme.$background-selected;
+    color: theme.$text-primary;
+    @include type.type-style('heading-01');
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 0.25rem;
+      height: 100%;
+      background-color: theme.$border-interactive;
+      content: '';
+    }
+  }
+
+  // nested 2 deep anchor link
+  :global(.cds--tree-node__children > li > .cds--tree-node__children) .anchor {
+    width: calc(100% + spacing.$spacing-09);
+    padding-left: spacing.$spacing-09;
+    margin-left: -(spacing.$spacing-09);
+  }
+
+  // expand toggle click target
+  :global(.cds--tree-parent-node__toggle) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    margin-top: 0;
+    margin-right: 0;
+  }
+
+  // custom icon
+  :global(.cds--tree-parent-node__toggle::after) {
+    position: absolute;
+    top: spacing.$spacing-03;
+    right: spacing.$spacing-05;
+    display: block;
+    width: convert.rem(16px);
+    height: convert.rem(16px);
+    background-color: theme.$icon-primary;
+    mask: url("data:image/svg+xml,%3Csvg focusable='false' preserveAspectRatio='xMidYMid meet' xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='16' height='16' viewBox='0 0 16 16' aria-hidden='true' class='cds--tree-node__icon'%3E%3Cpath d='M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z'%3E%3C/path%3E%3C/svg%3E%0A");
+    content: '';
+  }
+
+  // hide original icon
+  :global(.cds--tree-parent-node__toggle-icon) {
+    display: none;
+  }
+
+  // parent tree node open
+  :global(.cds--tree-node[aria-expanded='true']) {
+    > * > :global(.cds--tree-parent-node__toggle::after) {
+      transform: rotate(180deg);
+    }
+  }
+
+  // divider styles
+  .divider {
+    position: relative;
+    padding-bottom: spacing.$spacing-05;
+    margin-bottom: spacing.$spacing-05;
+  }
+
+  .divider::after {
+    content: '';
+    position: absolute;
+    left: spacing.$spacing-05;
+    right: spacing.$spacing-05;
+    bottom: 0;
+    height: 1px;
+    background-color: var(--cds-ui-03, #e0e0e0);
+  }
+}

package/src/components/NextPrevious/NextPrevious.js

@@ -17,6 +17,10 @@ const useNavigationList = () => {
             pages {
               title
               path
+              pages {
+                path
+                title
+              }
             }
           }
         }
@@ -28,12 +32,25 @@ const useNavigationList = () => {
   `);
 
   return [
-    edges.flatMap(({ node }) =>
-      node.pages.map((page) => ({
-        ...page,
-        category: node.title,
-      }))
-    ),
+    edges.flatMap(({ node }) => {
+      const navArr = [];
+      node.pages.forEach((page) => {
+        if (page.pages?.length) {
+          page.pages.forEach((sublevelPage) => {
+            navArr.push({
+              ...sublevelPage,
+              category: `${node.title}: ${page.title}`,
+            });
+          });
+        } else {
+          navArr.push({
+            ...page,
+            category: node.title,
+          });
+        }
+      });
+      return navArr;
+    }),
     pathPrefix,
   ];
 };
@@ -75,7 +92,7 @@ const useNavigationItems = ({ tabs, location }) => {
     : unPrefixedPathname.replace(/\/$/, ''); // removes the last syalash
 
   const navIndex = navigationList.findIndex((item) =>
-    item.path.includes(currentNavigationItem)
+    item.path?.includes(currentNavigationItem)
   );
 
   return {

package/src/util/NavItems.js

@@ -12,6 +12,10 @@ export function useNavItems() {
             pages {
               title
               path
+              pages {
+                path
+                title
+              }
             }
             hasDivider
           }

package/src/util/NavTree.js

@@ -0,0 +1,19 @@
+/**
+ * Iterates through all nodes in a tree and stops if a returnFunction() condition is met
+ * @param {{[key]: any, pages: object[]}[]} nodes tree
+ * @returns {void}
+ */
+export const dfs = (nodes, returnFunction) => {
+  let node;
+  const stack = [];
+  stack.push(...nodes);
+  while (stack.length > 0) {
+    node = stack.pop();
+    if (returnFunction(node)) {
+      return node;
+    }
+    node.pages?.forEach((item) => {
+      stack.push(item);
+    });
+  }
+};