@patternfly/documentation-framework 1.6.0 → 1.7.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.7.0 (2023-02-09)
+
+
+### Features
+
+* **docs:** customize tabs with optional tabText frontmatter ([#3394](https://github.com/patternfly/patternfly-org/issues/3394)) ([093c6c7](https://github.com/patternfly/patternfly-org/commit/093c6c77053f544605d40f8918dc5621829ac7c3))
+
+
+
+
+
+## 1.6.1 (2023-02-09)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
 # 1.6.0 (2023-02-07)
 
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "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": "4ad5d447527c174b073efeaf3d5c720f9623ddc4"
+  "gitHead": "a9a48b143a7a72b044d35960fee0c8122a117b9c"
 }

package/scripts/md/parseMD.js

@@ -85,6 +85,7 @@ function toReactComponent(mdFilePath, source, buildMode) {
         section: frontmatter.section || '',
         subsection: frontmatter.subsection || '',
         source,
+        tabName: frontmatter.tabName || null,
         slug,
         sourceLink: frontmatter.sourceLink || `https://github.com/patternfly/${
           sourceRepo}/blob/main/${
@@ -266,6 +267,7 @@ function sourceMDFile(file, source, buildMode) {
       section: pageData.section,
       subsection: pageData.subsection,
       source: pageData.source,
+      tabName: pageData.tabName,
       ...(pageData.katacodaLayout && { katacodaLayout: pageData.katacodaLayout }),
       ...(pageData.hideNavItem && { hideNavItem: pageData.hideNavItem })
     };

package/templates/mdx.js

@@ -121,7 +121,15 @@ export const MDXTemplate = ({
   id,
   componentsData
 }) => {
-  const sourceKeys = sources.map(v => v.source);
+  // Build obj mapping source names to text displayed on tabs
+  const tabNames = sources.reduce((acc, curSrc) => {
+    const { source, tabName } = curSrc;
+    // use tabName for tab name if present, otherwise default to source
+    const tabLinkText = tabName || capitalize(source.replace('html', 'HTML').replace(/-/g, ' '));
+    acc[source] = tabLinkText;
+    return acc;
+  }, {});
+  const sourceKeys = Object.keys(tabNames);
   const isSinglePage = sourceKeys.length === 1;
 
   let isDevResources, isComponent, isExtension, isChart, isDemo, isLayout, isUtility;
@@ -223,7 +231,7 @@ export const MDXTemplate = ({
                       onClick={() => trackEvent('tab_click', 'click_event', source.toUpperCase())}
                     >
                       <Link className="pf-c-tabs__link" to={`${path}${index === 0 ? '' : '/' + source}`}>
-                        {capitalize(source.replace('html', 'HTML').replace(/-/g, ' '))}
+                        {tabNames[source]}
                       </Link>
                     </li>
                   ))}

package/templates/patternfly-docs/content/extensions/extension/design-guidelines/design-guidelines.md

@@ -7,6 +7,8 @@ section: extensions
 id: My extension
 # Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
 source: design-guidelines
+# Optional custom text to display in tab in place of source
+tabName: My custom tab-name
 ---
 
 Design guidelines intro

package/templates/patternfly-docs/content/extensions/extension/examples/basic.md

@@ -7,6 +7,8 @@ section: extensions
 id: My extension
 # Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
 source: react
+# Optional custom text to display in tab in place of source
+tabName: My custom tab-name
 # If you use typescript, the name of the interface to display props for
 # These are found through the sourceProps function provdided in patternfly-docs.source.js
 # Can also pass object { component: string, source: string } allowing to specify the source