@patternfly/documentation-framework 1.2.69 → 1.3.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 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
+
+
+
+
+
 ## 1.2.69 (2022-12-05)
 
 **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.69",
+  "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": "1c464418e8075e5b239506b3361b83c4ce5a9092"
+  "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 })

package/templates/mdx.js

@@ -123,7 +123,41 @@ export const MDXTemplate = ({
 }) => {
   const sourceKeys = sources.map(v => v.source);
   const isSinglePage = sourceKeys.length === 1;
-  const isComponent = sources.some(source => source.section === 'components');
+
+  let isDevResources, isComponent, isExtension, isChart, isDemo, isLayout, isUtility;
+
+  const getSection = () => {
+    return sources.some((source) => {
+      switch (source.section) {
+        case "developer-resources":
+          isDevResources = true;
+          return;
+        case "components":
+          isComponent = true;
+          return;
+        case "extensions":
+          isExtension = true;
+          return;
+        case "charts":
+          isChart = true;
+          return;
+        case "demos":
+          isDemo = true;
+          return;
+        case "layouts":
+          isLayout = true;
+          return;
+        case "utilities":
+          isUtility = true;
+          return;
+      }
+    });
+  };
+
+  // hide tab if it doesn't include the strings below
+  const hideTabName = sourceKeys.some(
+    (e) => e.includes("pages") || e.includes("training")
+  );
   const { pathname } = useLocation();
   const { katacodaLayout } = sources[0].Component.getPageData();
   let activeSource = pathname.replace(/\/$/, '').split('/').pop();
@@ -145,11 +179,24 @@ export const MDXTemplate = ({
     document.title = getTitle(title);
   }
 
+  const getClassName = () => {
+    getSection();
+    if (isChart || isDevResources || isExtension) {
+      if (isSinglePage) {
+        return "pf-m-light-100";
+      }
+      return "pf-m-light";
+    } else if (isUtility || isDemo || isLayout || isComponent) {
+      return "pf-m-light";
+    }
+    return "pf-m-light-100";
+  };
+
   return (
     <React.Fragment>
       <PageGroup>
         <PageSection
-          className={isSinglePage ? "pf-m-light-100" : ""}
+          className={getClassName()}
           variant={!isSinglePage ? PageSectionVariants.light : ""}
           isWidthLimited
         >
@@ -158,7 +205,10 @@ export const MDXTemplate = ({
           {isComponent && summary && (<SummaryComponent />)}
           </TextContent>
         </PageSection>
-        {(!isSinglePage || isComponent) && (
+        {((!isSinglePage && !hideTabName) ||
+          isComponent ||
+          isUtility ||
+          isDemo) && (
             <PageSection id="ws-sticky-nav-tabs" stickyOnBreakpoint={{'default':'top'}} type="tabs">
               <div className="pf-c-tabs pf-m-page-insets pf-m-no-border-bottom">
                 <ul className="pf-c-tabs__list">
@@ -179,12 +229,10 @@ export const MDXTemplate = ({
                   ))}
                 </ul>
               </div>
-              </PageSection>
+            </PageSection>
         )}
         <PageSection id="main-content" isFilled className="pf-m-light-100">
-          {isSinglePage && (
-              <MDXChildTemplate {...sources[0]} />
-          )}
+          {isSinglePage && <MDXChildTemplate {...sources[0]} />}
           {!isSinglePage && (
             <Router className="pf-u-h-100" primary={false}>
               {sources
@@ -192,8 +240,7 @@ export const MDXTemplate = ({
                   source.index = index;
                   return source;
                 })
-                .map(MDXChildTemplate)
-              }
+                .map(MDXChildTemplate)}
             </Router>
           )}
         </PageSection>