@patternfly/documentation-framework 1.2.7 → 1.2.8

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.2.8 (2022-08-26)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
 ## 1.2.7 (2022-08-24)
 
 **Note:** Version bump only for package @patternfly/documentation-framework

package/app.js

@@ -38,12 +38,13 @@ const AppRoute = ({ child, katacodaLayout, title, path }) => {
 
 const SideNavRouter = () => {
   const pathname = useLocation().pathname.replace(process.env.pathPrefix, '');
+  const componentsData = process?.env?.componentsData;
   const navOpen = !routes[pathname] || !routes[pathname].katacodaLayout;
   return (
     <SideNavLayout groupedRoutes={groupedRoutes} navOpen={navOpen} >
       <Router id="ws-page-content-router">
         {Object.entries(routes)
-          .map(([path, { Component, title, sources, katacodaLayout }]) => Component
+          .map(([path, { Component, title, sources, katacodaLayout, id }]) => Component
             ? <AppRoute
                 key={path}
                 path={path}
@@ -60,6 +61,8 @@ const SideNavRouter = () => {
                     path={path}
                     title={title}
                     sources={sources}
+                    id={id}
+                    componentsData={componentsData}
                   />
                 }
                 katacodaLayout={katacodaLayout}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "author": "Red Hat",
   "license": "MIT",
   "private": false,
@@ -84,5 +84,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "9298e0ede6347f0b1ced12de5c2c924d8859d163"
+  "gitHead": "2942543cb4647ce220f5feeeadbd0ea91a359417"
 }

package/routes.js

@@ -93,14 +93,6 @@ Object.entries(groupedRoutes)
       pageData.sources.forEach(({ slug }) => {
         delete routes[slug];
       });
-      // Add design guidelines if doesn't exist
-      if (
-        ['components', 'charts', 'layouts', 'demos'].includes(section) &&
-        !pageData.sources.map(({ source }) => source).includes('design-guidelines') &&
-        process.env.hasDesignGuidelines
-      ) {
-        pageData.sources.push(getDefaultDesignGuidelines(pageData));
-      }
       // Sort sources for tabs
       pageData.sources = pageData.sources.sort(sortSources);
       // Add grouped route

package/scripts/webpack/webpack.base.config.js

@@ -14,6 +14,7 @@ module.exports = (_env, argv) => {
     hasVersionSwitcher = false,
     hasDesignGuidelines = false,
     hasDarkThemeSwitcher = false,
+    componentsData = {},
     sideNavItems = [],
     topNavItems = [],
     includePaths = []
@@ -139,6 +140,7 @@ module.exports = (_env, argv) => {
         'process.env.hasVersionSwitcher': JSON.stringify(hasVersionSwitcher),
         'process.env.hasDesignGuidelines': JSON.stringify(hasDesignGuidelines),
         'process.env.hasDarkThemeSwitcher': JSON.stringify(hasDarkThemeSwitcher),
+        'process.env.componentsData': JSON.stringify(componentsData),
         'process.env.sideNavItems': JSON.stringify(sideNavItems),
         'process.env.topNavItems': JSON.stringify(topNavItems),
         'process.env.prnum': JSON.stringify(process.env.CIRCLE_PR_NUMBER || process.env.PR_NUMBER || ''),

package/templates/mdx.js

@@ -6,6 +6,7 @@ import { Router, useLocation } from '@reach/router';
 import { CSSVariables, PropsTable, TableOfContents, Link, AutoLinkHeader, InlineAlert } from '../components';
 import { capitalize, getTitle, slugger, trackEvent } from '../helpers';
 import './mdx.css';
+import { convertToReactComponent } from '@patternfly/ast-helpers';
 
 const MDXChildTemplate = ({
   Component,
@@ -116,13 +117,26 @@ const MDXChildTemplate = ({
 export const MDXTemplate = ({
   title,
   sources = [],
-  path
+  path,
+  id,
+  componentsData
 }) => {
   const sourceKeys = sources.map(v => v.source);
   const isSinglePage = sourceKeys.length === 1;
+  const isComponent = sources.some(source => source.section === 'components');
   const { pathname } = useLocation();
   const { katacodaLayout } = sources[0].Component.getPageData();
   let activeSource = pathname.replace(/\/$/, '').split('/').pop();
+  // get summary text, convert to JSX to display above tabs on component pages
+  const componentDasherized = id.split(' ').join('-').toLowerCase();
+  const summary = componentsData?.[componentDasherized]?.summary;
+  let SummaryComponent;
+  if (summary) {
+    const summaryCode = convertToReactComponent(`<p>${summary}</p>`).code;
+    const getSummaryComponent = new Function('React', 'Link', summaryCode);
+    SummaryComponent = getSummaryComponent(React, Link);
+  }
+
   if (!sourceKeys.includes(activeSource)) {
     activeSource = sourceKeys[0];
   }
@@ -141,7 +155,12 @@ export const MDXTemplate = ({
           {title}
         </Title>}
       </PageSection>
-      {!isSinglePage && (
+      {isComponent && summary && (
+        <PageSection variant={PageSectionVariants.light} className="pf-u-pt-0">
+          <SummaryComponent />
+        </PageSection>
+      )}
+      {(!isSinglePage || isComponent) && (
         <PageSection type="tabs">
           <div className="pf-c-tabs pf-m-page-insets pf-m-no-border-bottom">
             <ul className="pf-c-tabs__list">