@patternfly/documentation-framework 1.2.70 → 1.3.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 1.3.0 (2022-12-08)
+
+
+### Features
+
+* **docs:** enabled tertiary nav in sidenav ([#3274](https://github.com/patternfly/patternfly-org/issues/3274)) ([b2a6804](https://github.com/patternfly/patternfly-org/commit/b2a6804d7d93026b3b3a7a7e06b53c51be998e1e))
+
+
+
+
+
 ## 1.2.70 (2022-12-07)
 
 **Note:** Version bump only for package @patternfly/documentation-framework

package/components/sideNav/sideNav.js

@@ -3,10 +3,15 @@ import { Link } from '../link/link';
 import { Nav, NavList, NavExpandable, PageContextConsumer, capitalize } from '@patternfly/react-core';
 import { css } from '@patternfly/react-styles';
 import { Location } from '@reach/router';
-import { slugger } from '../../helpers';
+import { makeSlug } from '../../helpers';
 import globalBreakpointXl from "@patternfly/react-tokens/dist/esm/global_breakpoint_xl";
 import { trackEvent } from '../../helpers';
 
+const getIsActive = (location, section, subsection = null) => {
+  const slug = makeSlug(null, section, null, null, subsection);
+  return location.pathname.startsWith(`${process.env.pathPrefix}${slug}`);
+}
+
 const NavItem = ({ text, href }) => {
   const isMobileView = window.innerWidth < Number.parseInt(globalBreakpointXl.value, 10);
   return (
@@ -34,6 +39,46 @@ const NavItem = ({ text, href }) => {
   )
 };
 
+const ExpandableNav = ({groupedRoutes, location, section, subsection = null}) => {
+  const isActive = getIsActive(location, section, subsection);
+  const isSubsection = subsection;
+  const routes = isSubsection
+    ? groupedRoutes[section][subsection]
+    : groupedRoutes[section];
+  const currentSection = isSubsection ? subsection : section;
+  const analyticsName = isSubsection ? `${section}/${subsection}` : section;
+
+  return (
+    <NavExpandable
+      title={capitalize(currentSection.replace(/-/g, ' '))}
+      key={capitalize(currentSection.replace(/-/g, ' '))}
+      isActive={isActive}
+      isExpanded={isActive}
+      className="ws-side-nav-group"
+      onClick={(event) => {
+        // Don't bubble click event up, avoids subsection triggering duplicate analtics
+        event.stopPropagation();
+        // Don't trigger for bubbled events from NavItems
+        if (!event.target.href) {
+          const isExpanded = event.currentTarget.classList.contains('pf-m-expanded');
+          // 1 === expand section, 0 === collapse section
+          trackEvent('sidenav_section_click', 'click_event', analyticsName, isExpanded ? 0 : 1);
+        }
+      }}
+    >
+      {Object.entries(routes || {})
+        .filter(([id, { hideNavItem }]) => !Boolean(hideNavItem) && (id !== 'isSubsection'))
+        .map(([id, { slug, isSubsection = false }]) => ({ text: id, href: slug, isSubsection }))
+        .sort(({ text: text1 }, { text: text2 }) => text1.localeCompare(text2))
+        .map(navObj => navObj.isSubsection
+          ? ExpandableNav({groupedRoutes, location, section, subsection: navObj.text})
+          : NavItem(navObj)
+        )
+      }
+    </NavExpandable>
+  );
+}
+
 export const SideNav = ({ groupedRoutes = {}, navItems = [] }) => {
   React.useEffect(() => {
     if (typeof window === 'undefined') {
@@ -56,32 +101,7 @@ export const SideNav = ({ groupedRoutes = {}, navItems = [] }) => {
         {navItems.map(({ section, text, href }) => section
           ? (
             <Location key={section}>
-              {({ location }) => {
-                const isActive = location.pathname.startsWith(`${process.env.pathPrefix}/${slugger(section)}`);
-                return (
-                  <NavExpandable
-                    title={capitalize(section.replace(/-/g, ' '))}
-                    isActive={isActive}
-                    isExpanded={isActive}
-                    className="ws-side-nav-group"
-                    onClick={(event) => {
-                      // Don't trigger for bubbled events from NavItems
-                      if (!event.target.href) {
-                        const isExpanded = event.currentTarget.classList.contains('pf-m-expanded');
-                        // 1 === expand section, 0 === collapse section
-                        trackEvent('sidenav_section_click', 'click_event', section, isExpanded ? 0 : 1);
-                      }
-                    }}
-                  >
-                    {Object.entries(groupedRoutes[section] || {})
-                      .filter(([, { hideNavItem }]) => !Boolean(hideNavItem))
-                      .map(([id, { slug }]) => ({ text: id, href: slug }))
-                      .sort(({ text: text1 }, { text: text2 }) => text1.localeCompare(text2))
-                      .map(NavItem)
-                    }
-                  </NavExpandable>
-                );
-              }}
+              {({ location }) => ExpandableNav({groupedRoutes, location, section})}
             </Location>
           )
           : NavItem({

package/helpers/slugger.js

@@ -11,11 +11,14 @@ const slugger = children => {
     .replace(/[^A-Za-z0-9.\-~]/g, '');
 }
 
-const makeSlug = (source, section, id, noSource) => {
+const makeSlug = (source, section, id, noSource, subsection) => {
   let url = '';
 
   if (section) {
     url += `/${slugger(section)}`
+    if (subsection) {
+      url += `/${slugger(subsection)}`
+    }
   }
 
   if (id) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "1.2.70",
+  "version": "1.3.0",
   "author": "Red Hat",
   "license": "MIT",
   "private": false,
@@ -85,5 +85,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "0f120199eeeb5b9fb70c857bcccf1e7c435ae7e9"
+  "gitHead": "6998dfbf1533b58368f42df145376da2611bf30c"
 }

package/routes.js

@@ -28,20 +28,34 @@ const isNull = o => o === null || o === undefined;
 const groupedRoutes = Object.entries(routes)
   .filter(([_slug, { id, section }]) => !isNull(id) && !isNull(section))
   .reduce((accum, [slug, pageData]) => {
-    const { section, id, title, source, katacodaLayout, hideNavItem } = pageData;
+    const { section, subsection = null, id, title, source, katacodaLayout, hideNavItem } = pageData;
+    pageData.slug = slug;
+    // add section to groupedRoutes obj if not yet created
     accum[section] = accum[section] || {};
-    accum[section][id] = accum[section][id] || {
+    // define data for page to be added to groupedRoutes obj
+    const data = {
       id,
       section,
+      subsection,
       title,
-      slug: makeSlug(source, section, id, true),
+      slug: makeSlug(source, section, id, true, subsection),
       sources: [],
       katacodaLayout,
       hideNavItem
-    };
-
-    pageData.slug = slug;
-    accum[section][id].sources.push(pageData);
+    }
+    // add page to groupedRoutes obj section or subsection
+    if (subsection) {
+      // add subsection to section
+      accum[section][subsection] = accum[section][subsection] || {};
+      accum[section][subsection].isSubsection = true;
+      // add page to subsection
+      accum[section][subsection][id] = accum[section][subsection][id] || data;
+      accum[section][subsection][id].sources.push(pageData);
+    } else {
+      // add page to section
+      accum[section][id] = accum[section][id] || data;
+      accum[section][id].sources.push(pageData);
+    }
 
     return accum;
   }, {});
@@ -88,15 +102,28 @@ const getDefaultDesignGuidelines = ({ id, section, slug, title }) => {
 Object.entries(groupedRoutes)
   .forEach(([_section, ids]) => {
     Object.values(ids).forEach(pageData => {
-      const { slug, section } = pageData;
-      // Remove source routes for `app.js`
-      pageData.sources.forEach(({ slug }) => {
-        delete routes[slug];
+      let pageDataArr = [];
+      // Loop through each page in expandable subsection
+      if (pageData.isSubsection) {
+        Object.entries(pageData).map(([section, ids]) => {
+          if (section !== 'isSubsection') {
+            pageDataArr.push(ids);
+          }
+        })
+      } else {
+        pageDataArr = [pageData];
+      }
+      pageDataArr.forEach(pageDataObj => {
+        const { slug } = pageDataObj;
+        // Remove source routes for `app.js`
+        pageDataObj.sources.forEach(({ slug }) => {
+          delete routes[slug];
+        });
+        // Sort sources for tabs
+        pageDataObj.sources = pageDataObj.sources.sort(sortSources);
+        // Add grouped route
+        routes[slug] = pageDataObj;
       });
-      // Sort sources for tabs
-      pageData.sources = pageData.sources.sort(sortSources);
-      // Add grouped route
-      routes[slug] = pageData;
     })
   });
 

package/scripts/md/parseMD.js

@@ -49,7 +49,7 @@ function toReactComponent(mdFilePath, source, buildMode) {
         file.fail('id attribute is required in frontmatter for PatternFly docs');
       }
       source = frontmatter.source || source;
-      const slug = makeSlug(source, frontmatter.section, frontmatter.id);
+      const slug = makeSlug(source, frontmatter.section, frontmatter.id, false, frontmatter.subsection);
       outPath = path.join(outputBase, `${slug}.js`);
 
       let sourceRepo = 'patternfly-org';
@@ -80,6 +80,7 @@ function toReactComponent(mdFilePath, source, buildMode) {
       pageData = {
         id: frontmatter.id,
         section: frontmatter.section || '',
+        subsection: frontmatter.subsection || '',
         source,
         slug,
         sourceLink: `https://github.com/patternfly/${
@@ -92,7 +93,7 @@ function toReactComponent(mdFilePath, source, buildMode) {
         // Temporarily override section until https://github.com/patternfly/patternfly-react/pull/4862 is in react-docs
         pageData.section = 'components';
         pageData.source = `${source}-demos`;
-        pageData.slug = makeSlug(pageData.source, pageData.section, pageData.id);
+        pageData.slug = makeSlug(pageData.source, pageData.section, pageData.id, false, pageData.subsection);
         outPath = path.join(outputBase, `${pageData.slug}.js`);
       }
       if (frontmatter.title) {
@@ -259,6 +260,7 @@ function sourceMDFile(file, source, buildMode) {
       ...(pageData.examples && { examples: pageData.examples }),
       ...(pageData.fullscreenExamples && { fullscreenExamples: pageData.fullscreenExamples }),
       section: pageData.section,
+      subsection: pageData.subsection,
       source: pageData.source,
       ...(pageData.katacodaLayout && { katacodaLayout: pageData.katacodaLayout }),
       ...(pageData.hideNavItem && { hideNavItem: pageData.hideNavItem })