feat(docs): customize tabs with optional tabText frontmatter

packages/documentation-framework/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 })
     };

packages/documentation-framework/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>
                   ))}

packages/documentation-framework/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

packages/documentation-framework/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