@patternfly/documentation-framework 2.0.0-alpha.15 → 2.0.0-alpha.17

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 2.0.0-alpha.17 (2023-04-11)
+
+
+### Bug Fixes
+
+* **docs:** fixes display & search bugs on icons page ([#3483](https://github.com/patternfly/patternfly-org/issues/3483)) ([39b225c](https://github.com/patternfly/patternfly-org/commit/39b225cdcbdc4c01c5002750600708eab6427f60))
+
+
+
+
+
+# 2.0.0-alpha.16 (2023-04-11)
+
+
+### Features
+
+* **tables:** update tables, context selector ([#3474](https://github.com/patternfly/patternfly-org/issues/3474)) ([cd82c35](https://github.com/patternfly/patternfly-org/commit/cd82c356f568f3368bc22319d614fde8dd74fb38))
+
+
+
+
+
 # 2.0.0-alpha.15 (2023-04-06)
 
 **Note:** Version bump only for package @patternfly/documentation-framework

package/app.js

@@ -19,7 +19,7 @@ import './layouts/sideNavLayout/sideNavLayout.css';
 const AppRoute = ({ child, katacodaLayout, title, path }) => {
   const pathname = useLocation().pathname;
   if (typeof window !== 'undefined' && window.gtag) {
-    gtag('config', 'UA-47523816-6', {
+    gtag('config', process.env.googleAnalyticsID, {
       'page_path': pathname,
       'page_title': (title || pathname)
     });

package/components/cssVariables/cssSearch.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { TextInput } from "@patternfly/react-core";
+import { SearchInput } from "@patternfly/react-core";
 
 export class CSSSearch extends React.Component {
   constructor(props) {
@@ -9,7 +9,7 @@ export class CSSSearch extends React.Component {
     };
   }
 
-  onFilterChange = (_change, event) => {
+  onFilterChange = (event) => {
     this.setState(
       {
         filterValue: event.target.value
@@ -20,8 +20,7 @@ export class CSSSearch extends React.Component {
 
   render() {
     return (
-      <TextInput
-        type="text"
+      <SearchInput
         aria-label="Filter CSS Variables"
         placeholder="Filter CSS Variables"
         value={this.state.filterValue}

package/components/cssVariables/cssVariables.js

@@ -1,12 +1,12 @@
 import React from "react";
 import { debounce } from "@patternfly/react-core";
 import {
-//  Table,
-//  TableHeader,
-//  TableBody,
-  sortable,
-  SortByDirection,
-  expandable
+  Table,
+  Thead,
+  Th,
+  Tr,
+  Tbody,
+  Td
 } from "@patternfly/react-table";
 import * as tokensModule from "@patternfly/react-tokens/dist/esm/componentIndex";
 import global_spacer_md from "@patternfly/react-tokens/dist/esm/global_spacer_md";
@@ -77,23 +77,10 @@ export class CSSVariables extends React.Component {
 
     this.flatList = flattenList(applicableFiles);
 
-    this.columns = [
-      ...props.hideSelectorColumn ? [] : [{
-         title: "Selector",
-         transforms: [sortable],
-         cellFormatters: [expandable]
-      }],
-      { title: "Variable", transforms: [sortable] },
-      { title: "Value", transforms: [sortable] }
-    ]
-
     this.state = {
       searchRE: '',
       rows: this.getFilteredRows(),
-      sortBy: {
-        index: 0,
-        direction: "asc" // a-z
-      }
+      allRowsExpanded: true
     };
   }
 
@@ -140,20 +127,16 @@ export class CSSVariables extends React.Component {
         ];
         filteredRows.push({
           isOpen: values ? false : undefined,
-          cells
+          cells,
+          details: values ? {
+            parent: rowNumber,
+            fullWidth: true,
+            data: mappingAsList(property, values)
+          } : undefined
         });
         rowNumber += 1;
         if (values) {
-          filteredRows.push({
-            parent: rowNumber,
-            fullWidth: true,
-            cells: [
-              {
-                title: mappingAsList(property, values)
-              }
-            ]
-          });
-          rowNumber += 1;
+          rowNumber += 1
         }
       }
     });
@@ -170,9 +153,10 @@ export class CSSVariables extends React.Component {
     } else {
       newRows[rowKey] = { ...newRows[rowKey], isOpen };
     }
-    this.setState({
+    this.setState(prevState => ({
       rows: newRows,
-    });
+      ...(collapseAll && {allRowsExpanded: !prevState.allRowsExpanded})
+    }));
   };
 
   getDebouncedFilteredRows = debounce(value => {
@@ -183,50 +167,68 @@ export class CSSVariables extends React.Component {
     });
   }, 500);
 
-  onSort = (_event, index, direction) => {
-    this.flatList = this.flatList.sort((a, b) => {
-      const indexToColMap = {
-        '1': 'selector',
-        '2': 'property',
-        '3': 'value'
-      };
-      const column = indexToColMap[index];
-      if (direction === SortByDirection.asc) {
-        return a[column] < b[column] ? -1 : a[column] > b[column] ? 1 : 0;
-      } else {
-        return a[column] > b[column] ? -1 : a[column] < b[column] ? 1 : 0;
-      }
-    });
-    this.setState({
-      sortBy: {
-        index,
-        direction
-      },
-      rows: this.getFilteredRows(this.state.searchRE)
-    });
-  };
-
   render() {
     return (
       <React.Fragment>
         <CSSSearch getDebouncedFilteredRows={this.getDebouncedFilteredRows} />
-{/*        <Table
+        <Table
           variant="compact"
           aria-label={`CSS Variables for prefixes ${this.prefix.join(" ")}`}
-          sortBy={this.state.sortBy}
-          onSort={this.onSort}
-          cells={this.columns}
-          rows={this.state.rows}
-          onCollapse={this.onCollapse}
-          canCollapseAll={true}
-          collapseAllAriaLabel="expand all css variables"
-          gridBreakPoint="grid-lg"
-          contentId="css-variables-content"
-          expandId="css-variables-toggle"
         >
-          <TableHeader />
-          <TableBody />
-        </Table>*/}
+          <Thead>
+            <Tr>
+              {!this.props.hideSelectorColumn && (
+                <React.Fragment>
+                  <Th expand={{
+                    areAllExpanded: this.state.allRowsExpanded,
+                    collapseAllAriaLabel: "Expand or collapse all CSS variables",
+                    onToggle: this.onCollapse
+                  }}/>
+                  <Th>Selector</Th>
+                </React.Fragment>
+              )}
+              <Th>Variable</Th>
+              <Th>Value</Th>
+            </Tr>
+          </Thead>
+          {!this.props.hideSelectorColumn ? (
+            this.state.rows.map((row, rowIndex) => (
+              <Tbody key={rowIndex} isExpanded={row.isOpen}>
+                <Tr>
+                  <Td
+                    expand={
+                      row.details
+                        ? {
+                          rowIndex,
+                          isExpanded: row.isOpen,
+                          onToggle: this.onCollapse,
+                          expandId: 'composable-expandable-example'
+                        }
+                        : undefined
+                    }
+                  />
+                  <Td dataLabel="Selector">{row.cells[0]}</Td>
+                  <Td dataLabel="Variable">{row.cells[1]}</Td>
+                  <Td dataLabel="Value">{row.cells[2]}</Td>
+                </Tr>
+                {row.details ? (
+                  <Tr isExpanded={row.isOpen}>
+                    {!row.details.fullWidth ? <Td /> : null}
+                    <Td dataLabel="Selector" colSpan={5}>{row.details.data}</Td>
+                  </Tr>
+                ) : null}
+              </Tbody>
+            ))) : (
+              <Tbody>
+                {this.state.rows.map((row, rowIndex) => (
+                  <Tr key={rowIndex}>
+                    <Td dataLabel="Variable">{row.cells[0]}</Td>
+                    <Td dataLabel="Value">{row.cells[1]}</Td>
+                  </Tr>
+                ))}
+              </Tbody>
+          )}
+        </Table>
       </React.Fragment>
     );
   }

package/components/propsTable/propsTable.js

@@ -1,91 +1,97 @@
 import React from "react";
-//import { Badge } from "@patternfly/react-core";
+import { Badge } from "@patternfly/react-core";
 import {
-//  Table,
-//  TableHeader,
-//  TableBody,
-  cellWidth,
+  Table,
+  Caption,
+  Thead,
+  Th,
+  Tr,
+  Tbody,
+  Td,
+  TableText
 } from "@patternfly/react-table";
 import { AutoLinkHeader } from "../autoLinkHeader/autoLinkHeader";
-//import { PropTypeWithLinks } from "./propTypeWithLinks";
-//import { css } from "@patternfly/react-styles";
-//import accessibleStyles from "@patternfly/react-styles/css/utilities/Accessibility/accessibility";
+import { PropTypeWithLinks } from "./propTypeWithLinks";
+import { css } from "@patternfly/react-styles";
+import accessibleStyles from "@patternfly/react-styles/css/utilities/Accessibility/accessibility";
 
-export const PropsTable = ({ title, description, rows, allPropComponents }) => {
-  const columns = [
-    { title: "Name", transforms: [cellWidth(20)] },
-    { title: "Type", transforms: [cellWidth(20)] },
-    { title: "Default", transforms: [] },
-    { title: "Description", transforms: [] },
-  ];
-
-  return (
-    <React.Fragment>
-      <AutoLinkHeader size="h3">{title}</AutoLinkHeader>
-      {/*<Table
-        className="pf-u-mt-md pf-u-mb-lg"
-        variant="compact"
-        aria-label={title}
-        caption={
-          <div>
-            {description && <div className="pf-u-mb-md">{description}</div>}
-            <div>
-              <span className="ws-prop-required">*</span>required
-            </div>
-          </div>
-        }
-        cells={columns}
-        gridBreakPoint="grid-lg"
-        rows={rows
-          // Sort required rows first
+export const PropsTable = ({ title, description, rows, allPropComponents }) => (
+  <React.Fragment>
+    <AutoLinkHeader size="h3">{title}</AutoLinkHeader>
+    <Table className="pf-u-mt-md pf-u-mb-lg" variant="compact" aria-label={title} gridBreakPoint="grid-lg">
+      <Caption>
+        {description && <div className="pf-u-mb-md">{description}</div>}
+        <div>
+          <span className="ws-prop-required">*</span>required
+        </div>
+      </Caption>
+      <Thead>
+        <Tr>
+          <Th width={20}>Name</Th>
+          <Th width={20}>Type</Th>
+          <Th>Default</Th>
+          <Th>Description</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {rows
           .sort((a, b) => (a.required === b.required ? 0 : a.required ? -1 : 1))
-          .map((row, idx) => ({
-            cells: [
-              <div className="pf-m-break-word">
-                {row.deprecated && "Deprecated: "}
-                {row.name}
-                {row.required ? (
-                  <React.Fragment key={`${row.name}-required-prop`}>
-                    <span
-                      aria-hidden="true"
-                      key={`${row.name}-asterisk`}
-                      className="ws-prop-required"
-                    >
-                      *
-                    </span>
-                    <span
-                      key={`${row.name}-required`}
-                      className={css(accessibleStyles.screenReader)}
-                    >
-                      required
-                    </span>
-                  </React.Fragment>
-                ) : (
-                  ""
-                )}
-                {row.beta && (
-                  <Badge
-                    key={`${row.name}-${idx}`}
-                    className="ws-beta-badge pf-u-ml-sm"
+          .map((row, idx) => (
+            <Tr key={idx}>
+              <Td>
+                <TableText wrapModifier="breakWord">
+                  {row.deprecated && "Deprecated: "}
+                  {row.name}
+                  {row.required ? (
+                    <React.Fragment key={`${row.name}-required-prop`}>
+                  <span
+                    aria-hidden="true"
+                    key={`${row.name}-asterisk`}
+                    className="ws-prop-required"
                   >
-                    Beta
-                  </Badge>
-                )}
-              </div>,
-              <div className="pf-m-break-word">
-                <PropTypeWithLinks
-                  type={row.type}
-                  allPropComponents={allPropComponents}
-                />
-              </div>,
-              <div className="pf-m-break-word">{row.defaultValue}</div>,
-              <div className="pf-m-break-word">{row.description}</div>,
-            ],
-          }))}
-      >
-        <TableHeader />
-        <TableBody />
-      </Table>*/}
-    </React.Fragment>
-  );
-};
+                    *
+                  </span>
+                      <span
+                        key={`${row.name}-required`}
+                        className={css(accessibleStyles.screenReader)}
+                      >
+                    required
+                  </span>
+                    </React.Fragment>
+                  ) : (
+                    ""
+                  )}
+                  {row.beta && (
+                    <Badge
+                      key={`${row.name}-${idx}`}
+                      className="ws-beta-badge pf-u-ml-sm"
+                    >
+                      Beta
+                    </Badge>
+                  )}
+                </TableText>
+              </Td>
+              <Td>
+                <TableText wrapModifier="breakWord">
+                  <PropTypeWithLinks
+                    type={row.type}
+                    allPropComponents={allPropComponents}
+                  />
+                </TableText>
+              </Td>
+              <Td>
+                <TableText wrapModifier="breakWord">
+                  {row.defaultValue}
+                </TableText>
+              </Td>
+              <Td>
+                <TableText wrapModifier="breakWord">
+                  {row.description}
+                </TableText>
+              </Td>
+            </Tr>
+          ))}
+      </Tbody>
+    </Table>
+  </React.Fragment>
+);

package/components/sideNav/sideNav.js

@@ -12,6 +12,8 @@ const getIsActive = (location, section, subsection = null) => {
   return location.pathname.startsWith(`${process.env.pathPrefix}${slug}`);
 }
 
+const defaultValue = 50;
+
 const NavItem = ({ text, href }) => {
   const isMobileView = window.innerWidth < Number.parseInt(globalBreakpointXl.value, 10);
   return (
@@ -67,9 +69,14 @@ const ExpandableNav = ({groupedRoutes, location, section, subsection = null}) =>
       }}
     >
       {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))
+        .filter(([id, navObj]) => !Boolean(navObj.hideNavItem) && (Object.entries(navObj).length > 0))
+        .map(([id, { slug, isSubsection = false, sortValue = defaultValue, subsectionSortValue = defaultValue }]) => ({ text: id, href: slug, isSubsection, sortValue: (isSubsection ? subsectionSortValue : sortValue) }))
+        .sort(({text: text1, sortValue: sortValue1}, {text: text2, sortValue: sortValue2}) => {
+          if (sortValue1 === sortValue2) {
+            return text1.localeCompare(text2);
+          }
+          return sortValue1 > sortValue2 ? 1 : -1;
+        })
         .map(navObj => navObj.isSubsection
           ? ExpandableNav({groupedRoutes, location, section, subsection: navObj.text})
           : NavItem(navObj)

package/layouts/sideNavLayout/sideNavLayout.css

@@ -12,10 +12,6 @@
   padding: 0 var(--pf-global--spacer--md);
 }
 
-.ws-patternfly-3 > svg {
-  margin-left: var(--pf-global--spacer--sm);
-}
-
 @media (min-width: 1200px) {
   .ws-page-sidebar {
     box-shadow: none !important;

package/layouts/sideNavLayout/sideNavLayout.js

@@ -5,15 +5,16 @@ import {
   PageSidebar,
   Brand,
   Dropdown,
-  DropdownToggle,
   DropdownItem,
   DropdownGroup,
+  DropdownList,
   Divider,
   Masthead,
   MastheadToggle,
   MastheadMain,
   MastheadContent,
   MastheadBrand,
+  MenuToggle,
   PageToggleButton,
   Toolbar,
   ToolbarGroup,
@@ -23,7 +24,6 @@ import {
   Switch,
   SearchInput
 } from '@patternfly/react-core';
-import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';
 import { SideNav, TopNav, GdprBanner } from '../../components';
@@ -48,14 +48,9 @@ const HeaderTools = ({
   const [isSearchExpanded, setIsSearchExpanded] = React.useState(false);
 
   const getDropdownItem = (version, isLatest = false) => (
-    <DropdownItem
-      key={version.name}
-      component={
-        <a href={isLatest ? '/' : `/${version.name}`}>
-          {`Release ${version.name}`}
-        </a>
-      }
-    />
+    <DropdownItem itemId={version.name} key={version.name} to={isLatest ? '/' : `/${version.name}`}>
+      {`Release ${version.name}`}
+    </DropdownItem>
   );
 
   const onChange = (_evt, value) => {
@@ -82,7 +77,7 @@ const HeaderTools = ({
           </ToolbarItem>
         )}
         <ToolbarGroup
-          alignment={{ default: 'alignRight' }}
+          align={{ default: 'alignRight' }}
           spaceItems={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           {hasDarkThemeSwitcher && (
@@ -117,42 +112,51 @@ const HeaderTools = ({
           {hasVersionSwitcher && (
             <ToolbarItem>
               <Dropdown
-                isFullHeight
                 onSelect={() => setDropdownOpen(!isDropdownOpen)}
+                onOpenChange={(isOpen) => setDropdownOpen(isOpen)}
                 isOpen={isDropdownOpen}
-                toggle={(
-                  <DropdownToggle
-                    onToggle={() => setDropdownOpen(!isDropdownOpen)}
+                toggle={(toggleRef) => (
+                  <MenuToggle
+                    isFullHeight
+                    ref={toggleRef}
+                    onClick={() => setDropdownOpen(!isDropdownOpen)}
+                    isExpanded={isDropdownOpen}
                   >
                     Release {initialVersion.name}
-                  </DropdownToggle>
+                  </MenuToggle>
                 )}
-                dropdownItems={[
-                  <DropdownGroup key="latest" label="Latest">
+              >
+                <DropdownGroup key="Latest" label="Latest">
+                  <DropdownList>
                     {getDropdownItem(latestVersion, true)}
-                  </DropdownGroup>,
-                  <DropdownGroup key="Previous" label="Previous releases">
+                  </DropdownList>
+                </DropdownGroup>
+                <DropdownGroup key="Previous releases" label="Previous releases">
+                  <DropdownList>
                     {Object.values(versions.Releases)
                       .filter(version => !version.hidden && !version.latest)
                       .slice(0,3)
                       .map(version => getDropdownItem(version))}
-                  </DropdownGroup>,
-                  <Divider key="divider" className="ws-switcher-divider"/>,
-                  <DropdownItem
-                    key="PatternFly 3"
-                    className="ws-patternfly-3"
-                    target="_blank"
-                    href="https://pf3.patternfly.org/"
-                  >
-                    PatternFly 3
-                    <ExternalLinkAltIcon />
-                  </DropdownItem>
-                ]}
-              />
+                  </DropdownList>
+                </DropdownGroup>
+                <Divider key="divider" className="ws-switcher-divider"/>
+                <DropdownGroup key="Previous versions" label="Previous versions">
+                  <DropdownList>
+                    <DropdownItem
+                      key="PatternFly 3"
+                      className="ws-patternfly-3"
+                      isExternalLink
+                      to="https://pf3.patternfly.org/"
+                      itemId="patternfly-3"
+                    >
+                      PatternFly 3
+                    </DropdownItem>
+                  </DropdownList>
+                </DropdownGroup>
+              </Dropdown>
             </ToolbarItem>
           )}
-        </ToolbarGroup>
-      </ToolbarContent>
+        </ToolbarGroup></ToolbarContent>
     </Toolbar>
   );
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "2.0.0-alpha.15",
+  "version": "2.0.0-alpha.17",
   "author": "Red Hat",
   "license": "MIT",
   "private": false,
@@ -83,11 +83,11 @@
   },
   "peerDependencies": {
     "@patternfly/patternfly": "^5.0.0-alpha.13",
-    "@patternfly/react-code-editor": "^5.0.0-alpha.7",
-    "@patternfly/react-core": "^5.0.0-alpha.7",
-    "@patternfly/react-table": "^5.0.0-alpha.7",
+    "@patternfly/react-code-editor": "^5.0.0-alpha.54",
+    "@patternfly/react-core": "^5.0.0-alpha.53",
+    "@patternfly/react-table": "^5.0.0-alpha.54",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },
-  "gitHead": "8d28fddfb8f47154e66af7d7b4de746c075a472d"
+  "gitHead": "dfbce9d8d053d6c460858477ea3f47fdd735706d"
 }

package/routes.js

@@ -9,6 +9,8 @@ const routes = {
   ...generatedRoutes
 };
 
+const defaultOrder = 50;
+
 for (let route in routes) {
   const pageData = routes[route];
   if (pageData.SyncComponent) {
@@ -28,7 +30,7 @@ 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, subsection = null, id, title, source, katacodaLayout, hideNavItem, relPath } = pageData;
+    const { section, subsection = null, id, title, source, katacodaLayout, hideNavItem, relPath, sortValue = null, subsectionSortValue = null } = pageData;
     pageData.slug = slug;
     // add section to groupedRoutes obj if not yet created
     accum[section] = accum[section] || {};
@@ -42,7 +44,9 @@ const groupedRoutes = Object.entries(routes)
       sources: [],
       katacodaLayout,
       hideNavItem,
-      relPath
+      relPath,
+      ...(sortValue && { sortValue }),
+      ...(subsectionSortValue && { subsectionSortValue })
     }
     // add page to groupedRoutes obj section or subsection
     if (subsection) {
@@ -52,10 +56,21 @@ const groupedRoutes = Object.entries(routes)
       // add page to subsection
       accum[section][subsection][id] = accum[section][subsection][id] || data;
       accum[section][subsection][id].sources.push(pageData);
+      // nav item ordering
+      if (sortValue) {
+        accum[section][subsection].sortValue = sortValue;
+      }
+      if (subsectionSortValue) {
+        accum[section][subsection].subsectionSortValue = subsectionSortValue;
+      }
     } else {
       // add page to section
       accum[section][id] = accum[section][id] || data;
       accum[section][id].sources.push(pageData);
+      // nav item ordering
+      if (sortValue) {
+        accum[section][id].sortValue = sortValue;
+      }
     }
 
     return accum;
@@ -73,7 +88,6 @@ const sourceOrder = {
   'design-guidelines': 99,
   'accessibility': 100
 };
-const defaultOrder = 50;
 
 const sortSources = ({ source: s1 }, { source: s2 }) => {
   const s1Index = sourceOrder[s1] || defaultOrder;
@@ -108,7 +122,8 @@ Object.entries(groupedRoutes)
       // Loop through each page in expandable subsection
       if (pageData.isSubsection) {
         Object.entries(pageData).map(([section, ids]) => {
-          if (section !== 'isSubsection') {
+          // only push nested page objects
+          if (ids && ids?.id) {
             pageDataArr.push(ids);
           }
         })

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/${
@@ -126,6 +127,12 @@ function toReactComponent(mdFilePath, source, buildMode) {
       if (frontmatter.hideNavItem) {
         pageData.hideNavItem = frontmatter.hideNavItem;
       }
+      if (frontmatter.sortValue) {
+        pageData.sortValue = frontmatter.sortValue;
+      }
+      if (frontmatter.subsectionSortValue) {
+        pageData.subsectionSortValue = frontmatter.subsectionSortValue;
+      }
     })
     // Delete HTML comments
     .use(require('./remove-comments'))
@@ -266,8 +273,11 @@ 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 })
+      ...(pageData.hideNavItem && { hideNavItem: pageData.hideNavItem }),
+      ...(pageData.sortValue && { sortValue: pageData.sortValue }),
+      ...(pageData.subsectionSortValue && { subsectionSortValue: pageData.subsectionSortValue })
     };
   }
 }

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

@@ -8,6 +8,7 @@ module.exports = (_env, argv) => {
   const {
     pathPrefix = '',
     mode,
+    googleAnalyticsID = false,
     algolia = {},
     hasGdprBanner = false,
     hasFooter = false,
@@ -40,9 +41,12 @@ module.exports = (_env, argv) => {
           include: [
             path.resolve(process.cwd(), 'src'),
             path.resolve(process.cwd(), 'patternfly-docs'),
+            path.resolve(process.cwd(), 'examples'),
             path.resolve(__dirname, '../..'), // Temporarily compile theme using webpack for development
             /react-[\w-]+\/src\/.*\/examples/,
             /react-[\w-]+\\src\\.*\\examples/, // fix for Windows
+            /react-[\w-]+\/patternfly-docs\/.*\/examples/, //fixes for extensions
+            /react-[\w-]+\\patternfly-docs\\.*\\examples/,
           ].concat(includePaths.map(path => new RegExp(path))),
           exclude: [
             path.resolve(__dirname, '../../node_modules'), // Temporarily compile theme using webpack for development
@@ -134,6 +138,7 @@ module.exports = (_env, argv) => {
       new webpack.DefinePlugin({
         'process.env.NODE_ENV': JSON.stringify(mode),
         'process.env.pathPrefix': JSON.stringify(isProd ? pathPrefix : ''),
+        'process.env.googleAnalyticsID': JSON.stringify(isProd ? googleAnalyticsID : ''),
         'process.env.algolia': JSON.stringify(algolia),
         'process.env.hasGdprBanner': JSON.stringify(hasGdprBanner),
         'process.env.hasFooter': JSON.stringify(hasFooter),

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

package/versions.json

@@ -5,26 +5,45 @@
       "date": "2022-02-08",
       "latest": true,
       "versions": {
-        "@patternfly/patternfly": "5.0.0-alpha.13",
+        "@patternfly/patternfly": "5.0.0-alpha.37",
+        "@patternfly/react-charts": "^7.0.0-alpha.14",
+        "@patternfly/react-code-editor": "^5.0.0-alpha.54",
+        "@patternfly/react-core": "^5.0.0-alpha.53",
+        "@patternfly/react-icons": "^5.0.0-alpha.8",
+        "@patternfly/react-styles": "^5.0.0-alpha.6",
+        "@patternfly/react-table": "^5.0.0-alpha.54",
+        "@patternfly/react-tokens": "^5.0.0-alpha.6",
         "@patternfly/react-catalog-view-extension": "4.95.1",
-        "@patternfly/react-charts": "7.0.0-alpha.3",
-        "@patternfly/react-code-editor": "5.0.0-alpha.7",
-        "@patternfly/react-core": "5.0.0-alpha.7",
         "@patternfly/react-drag-drop": "5.0.0-alpha.0",
-        "@patternfly/react-icons": "5.0.0-alpha.2",
         "@patternfly/react-inline-edit-extension": "4.86.118",
         "@patternfly/react-log-viewer": "4.87.100",
-        "@patternfly/react-styles": "5.0.0-alpha.2",
-        "@patternfly/react-table": "5.0.0-alpha.7",
-        "@patternfly/react-tokens": "5.0.0-alpha.2",
         "@patternfly/react-topology": "4.91.27",
         "@patternfly/react-virtualized-extension": "4.88.113"
       }
     },
+    {
+      "name": "2023.02",
+      "date": "2022-03-27",
+      "versions": {
+        "@patternfly/patternfly": "4.224.4",
+        "@patternfly/react-catalog-view-extension": "4.96.0",
+        "@patternfly/react-charts": "6.94.19",
+        "@patternfly/react-code-editor": "4.82.115",
+        "@patternfly/react-console": "4.95.5",
+        "@patternfly/react-core": "4.276.8",
+        "@patternfly/react-icons": "4.93.6",
+        "@patternfly/react-inline-edit-extension": "4.86.122",
+        "@patternfly/react-log-viewer": "4.87.100",
+        "@patternfly/react-styles": "4.92.6",
+        "@patternfly/react-table": "4.113.0",
+        "@patternfly/react-tokens": "4.94.6",
+        "@patternfly/react-topology": "4.91.40",
+        "@patternfly/react-virtualized-extension": "4.88.115"
+      }
+    },
     {
       "name": "2023.01",
       "date": "2022-01-31",
-      "latest": true,
       "versions": {
         "@patternfly/patternfly": "4.224.2",
         "@patternfly/react-catalog-view-extension": "4.95.1",