@patternfly/documentation-framework 6.0.0-alpha.16 → 6.0.0-alpha.18

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 6.0.0-alpha.18 (2024-03-29)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
+# 6.0.0-alpha.17 (2024-03-28)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
 # 6.0.0-alpha.16 (2024-03-27)
 
 **Note:** Version bump only for package @patternfly/documentation-framework
@@ -160,6 +176,195 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 * try a v6 release ([7d3150c](https://github.com/patternfly/patternfly-org/commit/7d3150c1195b013001720d1e5161cbb724a0d73b))
 
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 5.8.0 (2024-03-20)
+
+
+### Features
+
+* **templates:** add templates package to versions.json ([#3902](https://github.com/patternfly/patternfly-org/issues/3902)) ([c7c727c](https://github.com/patternfly/patternfly-org/commit/c7c727c717d5cc3c031f4f3c52070ffc6164e5d6))
+
+
+
+
+
+# 5.7.0 (2024-03-19)
+
+
+### Features
+
+* add pf 6 alpha banner to home page and version switcher ([#3896](https://github.com/patternfly/patternfly-org/issues/3896)) ([f7aaa22](https://github.com/patternfly/patternfly-org/commit/f7aaa22d12310aa62533de4169e1fa70a49a20d9))
+
+
+
+
+
+# 5.6.0 (2024-03-13)
+
+
+### Features
+
+* **deps:** version bump and release notes for 5.2.2 patch release ([#3919](https://github.com/patternfly/patternfly-org/issues/3919)) ([94d3654](https://github.com/patternfly/patternfly-org/commit/94d3654768f42f2ae7b3c0734d1e5f211cd33ff6))
+
+
+
+
+
+## 5.5.1 (2024-03-12)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
+# 5.5.0 (2024-03-08)
+
+
+### Features
+
+* **deps:** version bump for 5.2.1 release ([#3913](https://github.com/patternfly/patternfly-org/issues/3913)) ([46cc8b7](https://github.com/patternfly/patternfly-org/commit/46cc8b70e06b9bda61067beba57d928e428b73c5))
+
+
+
+
+
+## 5.4.3 (2024-02-27)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
+## 5.4.2 (2024-02-14)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
+## 5.4.1 (2024-02-06)
+
+
+### Bug Fixes
+
+* Bump topology to 5.2.1 ([#3881](https://github.com/patternfly/patternfly-org/issues/3881)) ([af13c97](https://github.com/patternfly/patternfly-org/commit/af13c971384aaaa5bd87ce3e98dccee4b1214889))
+
+
+
+
+
+# 5.4.0 (2024-02-03)
+
+
+### Features
+
+* release 5.3 ([#3878](https://github.com/patternfly/patternfly-org/issues/3878)) ([3d1d130](https://github.com/patternfly/patternfly-org/commit/3d1d130c63ac4421ed8a307cd6ef140fa6e1d6f2))
+
+
+
+
+
+## 5.3.27 (2024-02-01)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
+## 5.3.26 (2024-02-01)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
+## 5.3.25 (2024-01-30)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
+## 5.3.24 (2024-01-30)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
+## 5.3.23 (2024-01-19)
+
+
+### Bug Fixes
+
+* avoid applying beta tags to nav items for next components ([#3868](https://github.com/patternfly/patternfly-org/issues/3868)) ([169c96f](https://github.com/patternfly/patternfly-org/commit/169c96f55b1bfdcb9859dbab27b88f5a180f48ba))
+
+
+
+
+
+## 5.3.22 (2024-01-16)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
+## 5.3.21 (2024-01-16)
+
+
+### Bug Fixes
+
+* bump to latest release candidates ahead of 5.2 release ([#3862](https://github.com/patternfly/patternfly-org/issues/3862)) ([12eeb78](https://github.com/patternfly/patternfly-org/commit/12eeb782d32c4fa65f6aef64292f1e0d92f0d183))
+
+
+
+
+## 5.3.20 (2024-01-15)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+## 5.3.19 (2024-01-15)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+## 5.3.18 (2024-01-12)
+
+
+### Bug Fixes
+
+* bump puppeteer to fix core ([#3860](https://github.com/patternfly/patternfly-org/issues/3860)) ([1695209](https://github.com/patternfly/patternfly-org/commit/169520944b7c3dccf69709e6e2075b9153fce059))
+
+
+## 5.3.17 (2024-01-05)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+## 5.3.16 (2024-01-03)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+## 5.3.15 (2023-12-14)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
 
 
 

package/components/cssVariables/cssVariables.js

@@ -62,7 +62,7 @@ const flattenList = files => {
 export class CSSVariables extends React.Component {
   constructor(props) {
     super(props);
-    const prefixToken = props.prefix.replace("pf-v5-", "").replace(/-+/g, "_");
+    const prefixToken = props.prefix.replace("pf-v6-", "").replace(/-+/g, "_");
     const applicableFiles = Object.entries(tokensModule)
       .filter(([key, val]) => prefixToken === key)
       .sort(([key1], [key2]) => key1.localeCompare(key2))
@@ -103,12 +103,12 @@ export class CSSVariables extends React.Component {
           <div key={rowKey}>
             <div
               key={`${rowKey}_1`}
-              className="pf-v5-l-flex pf-m-space-items-sm"
+              className="pf-v6-l-flex pf-m-space-items-sm"
             >
               {isColorRegex.test(value) && (
                 <div
                   key={`${rowKey}_2`}
-                  className="pf-v5-l-flex pf-m-column pf-m-align-self-center"
+                  className="pf-v6-l-flex pf-m-column pf-m-align-self-center"
                 >
                   <span
                     className="ws-color-box"
@@ -118,7 +118,7 @@ export class CSSVariables extends React.Component {
               )}
               <div
                 key={`${rowKey}_3`}
-                className="pf-v5-l-flex pf-m-column pf-m-align-self-center ws-td-text"
+                className="pf-v6-l-flex pf-m-column pf-m-align-self-center ws-td-text"
               >
                 {value}
               </div>
@@ -170,7 +170,7 @@ export class CSSVariables extends React.Component {
   render() {
     return (
       <React.Fragment>
-        {this.props.autoLinkHeader && <AutoLinkHeader size="h3" className="pf-v5-u-mt-lg pf-v5-u-mb-md">{`Prefixed with '${this.props.prefix}'`}</AutoLinkHeader>}
+        {this.props.autoLinkHeader && <AutoLinkHeader size="h3" className="pf-v6-u-mt-lg pf-v6-u-mb-md">{`Prefixed with '${this.props.prefix}'`}</AutoLinkHeader>}
         <CSSSearch getDebouncedFilteredRows={this.getDebouncedFilteredRows} />
         <Table
           variant="compact"

package/components/example/example.js

@@ -131,7 +131,7 @@ export const Example = ({
   if (lang === 'html') {
     livePreview = (
       <div
-        className={css('ws-preview-html', isFullscreenPreview && 'pf-v5-u-h-100')}
+        className={css('ws-preview-html', isFullscreenPreview && 'pf-v6-u-h-100')}
         dangerouslySetInnerHTML={{ __html: editorCode }}
       />
     );
@@ -164,10 +164,10 @@ export const Example = ({
 
   if (isFullscreenPreview) {
     return (
-      <div id={previewId} className={css(className, 'pf-v5-u-h-100')}>
+      <div id={previewId} className={css(className, 'pf-v6-u-h-100')}>
         {livePreview}
         {(hasDarkThemeSwitcher || hasRTLSwitcher) && (
-          <Flex direction={{ default: 'column' }} gap={{ default: 'gapLg' }} className="ws-full-page-utils pf-v5-m-dir-ltr ">
+          <Flex direction={{ default: 'column' }} gap={{ default: 'gapLg' }} className="ws-full-page-utils pf-v6-m-dir-ltr ">
             {hasDarkThemeSwitcher && (
               <Switch id="ws-example-theme-switch" label="Dark theme" defaultChecked={false} onChange={() =>
               document.querySelector('html').classList.toggle('pf-v5-theme-dark')} />
@@ -248,7 +248,7 @@ export const Example = ({
             className={css(
               className,
               isFullscreen ? 'ws-preview-fullscreen' : 'ws-preview',
-              isRTL && 'pf-v5-m-dir-rtl')
+              isRTL && 'pf-v6-m-dir-rtl')
             }
           >
             {livePreview}

package/components/footer/footer.js

@@ -13,15 +13,15 @@ export const Footer = () => (
           sm={12}
           md={6}
           mdOffset={1}
-          className="pf-v5-u-mb-lg pf-v5-u-mb-0-on-sm"
+          className="pf-v6-u-mb-lg pf-v6-u-mb-0-on-sm"
         >
-          <Grid className="pf-v5-u-py-xl">
+          <Grid className="pf-v6-u-py-xl">
             <GridItem
               sm={6}
               md={4}
-              className="pf-v5-u-ml-md pf-v5-u-ml-0-on-md pf-v5-u-mb-xl pf-v5-u-mb-0-on-md"
+              className="pf-v6-u-ml-md pf-v6-u-ml-0-on-md pf-v6-u-mb-xl pf-v6-u-mb-0-on-md"
             >
-              <p className="pf-v5-c-title ws-org-pfsite-footer-menu-list-title">
+              <p className="pf-v6-c-title ws-org-pfsite-footer-menu-list-title">
                 QUICKLINKS
               </p>
               <nav aria-label="Quick Links">
@@ -68,9 +68,9 @@ export const Footer = () => (
             <GridItem
               sm={6}
               md={4}
-              className="pf-v5-u-mt-lg pf-v5-u-mt-0-on-sm pf-v5-u-ml-md pf-v5-u-ml-0-on-md pf-v5-u-mb-xl pf-v5-u-mb-0-on-md"
+              className="pf-v6-u-mt-lg pf-v6-u-mt-0-on-sm pf-v6-u-ml-md pf-v6-u-ml-0-on-md pf-v6-u-mb-xl pf-v6-u-mb-0-on-md"
             >
-              <p className="pf-v5-c-title ws-org-pfsite-footer-menu-list-title">
+              <p className="pf-v6-c-title ws-org-pfsite-footer-menu-list-title">
                 CONTRIBUTE
               </p>
               <nav aria-label="Contribute">
@@ -109,7 +109,7 @@ export const Footer = () => (
             <GridItem
               sm={6}
               md={4}
-              className="pf-v5-u-mt-lg pf-v5-u-mt-0-on-md pf-v5-u-ml-md pf-v5-u-ml-0-on-md"
+              className="pf-v6-u-mt-lg pf-v6-u-mt-0-on-md pf-v6-u-ml-md pf-v6-u-ml-0-on-md"
             >
               <p className="ws-org-pfsite-footer-menu-list-title">
                 STAY IN TOUCH
@@ -162,10 +162,10 @@ export const Footer = () => (
           </Grid>
         </GridItem>
         <GridItem sm={12} md={4}>
-          <Grid className="pf-v5-u-pt-xl ws-org-pfsite-l-footer-column">
-            <GridItem className="pf-v5-u-px-xl">
+          <Grid className="pf-v6-u-pt-xl ws-org-pfsite-l-footer-column">
+            <GridItem className="pf-v6-u-px-xl">
               <Link
-                className="pf-v5-c-page__header-brand-link pf-v5-c-brand ws-org-pfsite-footer-menu-about-logo pf-v5-u-pb-md"
+                className="pf-v6-c-page__header-brand-link pf-v6-c-brand ws-org-pfsite-footer-menu-about-logo pf-v6-u-pb-md"
                 to="/"
               >
                 <Brand
@@ -185,7 +185,7 @@ export const Footer = () => (
                 product experiences—the open source way.
               </Text>
             </GridItem>
-            <GridItem className="ws-org-pfsite-footer-menu-social-links pf-v5-u-px-xl">
+            <GridItem className="ws-org-pfsite-footer-menu-social-links pf-v6-u-px-xl">
               <Link
                 to="//github.com/patternfly"
                 target="top"
@@ -209,7 +209,7 @@ export const Footer = () => (
       key="footer-2"
       className="ws-org-pfsite-l-footer-dark pf-m-no-fill"
     >
-      <Grid className="pf-v5-u-py-xl-on-sm pf-v5-u-py-0-on-md pf-v5-u-align-items-center">
+      <Grid className="pf-v6-u-py-xl-on-sm pf-v6-u-py-0-on-md pf-v6-u-align-items-center">
         <GridItem md={2} mdOffset={1}>
           <Link
             to="//www.redhat.com"
@@ -228,7 +228,7 @@ export const Footer = () => (
             Copyright &copy; 2014-{new Date().getFullYear()} Red Hat, Inc.
           </span>
         </GridItem>
-        <GridItem md={4} lg={5} className="pf-v5-u-ml-xl-on-xl">
+        <GridItem md={4} lg={5} className="pf-v6-u-ml-xl-on-xl">
           <Link
             to="//www.redhat.com/en/about/privacy-policy"
             target="top"

package/components/gdprBanner/gdprBanner.js

@@ -6,16 +6,16 @@ import './gdprBanner.css';
 export const GdprBanner = () => {
   const initialBannerOpen = typeof window !== 'undefined' && window.localStorage && !localStorage.getItem('gdpr-banner-closed');
   const [ isBannerOpen, setBannerOpen ] = React.useState(initialBannerOpen);
-  
+
   const closeBanner = () => {
     localStorage.setItem('gdpr-banner-closed', 'true');
     setBannerOpen(false);
   }
 
   return !isBannerOpen ? null : (
-    <section aria-label="Cookies on PatternFly" className="ws-gdpr-banner-container pf-v5-l-flex">
-      <div id="ws-gdpr-banner" className="pf-v5-l-flex pf-v5-u-py-md pf-m-align-items-center">
-        <p id="ws-gdpr-banner-text" className="pf-v5-u-ml-xl">
+    <section aria-label="Cookies on PatternFly" className="ws-gdpr-banner-container pf-v6-l-flex">
+      <div id="ws-gdpr-banner" className="pf-v6-l-flex pf-v6-u-py-md pf-m-align-items-center">
+        <p id="ws-gdpr-banner-text" className="pf-v6-u-ml-xl">
           We use cookies on our websites to deliver our online services.
           Details about how we use cookies and how you may disable them are set out in our <a href="//www.redhat.com/en/about/privacy-policy">Privacy Statement</a>.
           By using this website you agree to our use of cookies.

package/components/inlineAlert/inlineAlert.js

@@ -9,7 +9,7 @@ export const InlineAlert = ({
   <Alert
     variant={variant}
     title={title}
-    className="pf-v5-u-my-md"
+    className="pf-v6-u-my-md"
     style={{ marginBottom: '1rem' }}
     isInline
     component="h2"

package/components/propsTable/propsTable.js

@@ -18,9 +18,9 @@ import accessibleStyles from "@patternfly/react-styles/css/utilities/Accessibili
 export const PropsTable = ({ title, description, rows, allPropComponents }) => (
   <React.Fragment>
     <AutoLinkHeader size="h3">{title}</AutoLinkHeader>
-    <Table className="pf-v5-u-mt-md pf-v5-u-mb-lg" variant="compact" aria-label={title} gridBreakPoint="grid-lg">
+    <Table className="pf-v6-u-mt-md pf-v6-u-mb-lg" variant="compact" aria-label={title} gridBreakPoint="grid-lg">
       <Caption>
-        {description && <div className="pf-v5-u-mb-md">{description}</div>}
+        {description && <div className="pf-v6-u-mb-md">{description}</div>}
         <div>
           <span className="ws-prop-required">*</span>required
         </div>
@@ -64,7 +64,7 @@ export const PropsTable = ({ title, description, rows, allPropComponents }) => (
                   {row.beta && (
                     <Badge
                       key={`${row.name}-${idx}`}
-                      className="ws-beta-badge pf-v5-u-ml-sm"
+                      className="ws-beta-badge pf-v6-u-ml-sm"
                     >
                       Beta
                     </Badge>

package/components/sectionGallery/sectionDataListLayout.js

@@ -7,7 +7,7 @@ export const SectionDataListLayout = ({ galleryItems, layoutView, hasListText, h
   if (layoutView !== 'list') {
     return null;
   }
-  
+
   return (
     <DataList onSelectDataListItem={() => {}}>
       {galleryItems.map(({ idx, slug, illustration, itemName, title, isBeta, isDeprecated, isDemo, id, galleryItemsData }) => (
@@ -23,7 +23,7 @@ export const SectionDataListLayout = ({ galleryItems, layoutView, hasListText, h
                   </DataListCell>
                 ),
                 <DataListCell width={5} key="text-description">
-                  <Split className={ hasListText ? "pf-v5-u-mb-md" : null }>
+                  <Split className={ hasListText ? "pf-v6-u-mb-md" : null }>
                     <SplitItem isFilled>
                       <TextContent>
                         <Text component={TextVariants.h2}>
@@ -32,7 +32,7 @@ export const SectionDataListLayout = ({ galleryItems, layoutView, hasListText, h
                           </span>
                         </Text>
                       </TextContent>
-                    </SplitItem>  
+                    </SplitItem>
                     <SplitItem>
                       {isBeta && (<Label color="blue" isCompact>Beta</Label>)}
                       {!isBeta && isDeprecated && (<Label color="grey" isCompact>Deprecated</Label>)}

package/components/sideNav/sideNav.js

@@ -96,7 +96,7 @@ const ExpandableNav = ({groupedRoutes, location, section, subsection = null}) =>
                   source.source === "react-deprecated" || source.source === "html-deprecated")
                 && !navObj.sources.some(source => source.source === "react" || source.source === "html")
               ),
-              isBeta: navObj.sources.some(source => source.beta),
+              isBeta: navObj.sources.some(source => source.beta && source.source !== 'react-next'),
               isDemo: navObj.sources.some(source => (
                   source.source === "react-demos" || source.source === "html-demos")
                 && !navObj.sources.some(source => source.source === "react" || source.source === "html")

package/layouts/sideNavLayout/sideNavLayout.js

@@ -59,7 +59,7 @@ const HeaderTools = ({
 
   const getDropdownItem = (version, isLatest = false) => (
     <DropdownItem itemId={version.name} key={version.name} to={isLatest ? '/' : `/${version.name}`}>
-      {`Release ${version.name}`}
+      {`Current ${version.name}`}
     </DropdownItem>
   );
 
@@ -93,7 +93,7 @@ const HeaderTools = ({
           </ToolbarItem>
         )}
         <ToolbarGroup
-          align={{ default: 'alignRight' }}
+          align={{ default: 'alignEnd' }}
           spaceItems={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           {hasDarkThemeSwitcher && (
@@ -163,12 +163,21 @@ const HeaderTools = ({
                     </DropdownList>
                   </DropdownGroup>
                 )}
-                <Divider key="divider" className="ws-switcher-divider"/>
+                <Divider key="divider2" className="ws-switcher-divider"/>
                 <DropdownGroup key="Previous versions" label="Previous versions">
                   <DropdownList>
+                    <DropdownItem
+                      key="PatternFly 5"
+                      className="ws-patternfly-versions"
+                      isExternalLink
+                      to="https://www.patternfly.org"
+                      itemId="patternfly-5"
+                    >
+                      PatternFly 5
+                    </DropdownItem>
                     <DropdownItem
                       key="PatternFly 4"
-                      className="ws-patternfly-3"
+                      className="ws-patternfly-versions"
                       isExternalLink
                       to="http://v4-archive.patternfly.org/v4/"
                       itemId="patternfly-4"
@@ -177,7 +186,7 @@ const HeaderTools = ({
                     </DropdownItem>
                     <DropdownItem
                       key="PatternFly 3"
-                      className="ws-patternfly-3"
+                      className="ws-patternfly-versions"
                       isExternalLink
                       to="https://pf3.patternfly.org/"
                       itemId="patternfly-3"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "6.0.0-alpha.16",
+  "version": "6.0.0-alpha.18",
   "author": "Red Hat",
   "license": "MIT",
   "private": false,
@@ -17,7 +17,7 @@
     "@babel/plugin-transform-react-jsx": "7.17.12",
     "@babel/preset-env": "7.18.2",
     "@mdx-js/util": "1.6.16",
-    "@patternfly/ast-helpers": "^1.4.0-alpha.5",
+    "@patternfly/ast-helpers": "^1.4.0-alpha.7",
     "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9",
     "autoprefixer": "9.8.6",
     "babel-loader": "9.1.2",
@@ -43,8 +43,6 @@
     "mdast-util-to-hast": "9.1.1",
     "mdurl": "1.0.1",
     "mini-css-extract-plugin": "2.7.5",
-    "monaco-editor": "0.34.1",
-    "monaco-editor-webpack-plugin": "7.0.1",
     "null-loader": "4.0.1",
     "parse-entities": "2.0.0",
     "path-browserify": "1.0.1",
@@ -54,7 +52,6 @@
     "puppeteer": "19.11.1",
     "puppeteer-cluster": "0.23.0",
     "react-docgen": "5.3.1",
-    "react-monaco-editor": "^0.51.0",
     "react-ssr-prepass": "1.5.0",
     "remark-footnotes": "1.0.0",
     "remark-frontmatter": "2.0.0",
@@ -80,12 +77,12 @@
     "webpack-merge": "5.8.0"
   },
   "peerDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.91",
-    "@patternfly/react-code-editor": "6.0.0-alpha.36",
-    "@patternfly/react-core": "6.0.0-alpha.36",
-    "@patternfly/react-table": "6.0.0-alpha.36",
+    "@patternfly/patternfly": "6.0.0-alpha.103",
+    "@patternfly/react-code-editor": "6.0.0-alpha.43",
+    "@patternfly/react-core": "6.0.0-alpha.43",
+    "@patternfly/react-table": "6.0.0-alpha.43",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },
-  "gitHead": "198d97cf95f8ea0d56acd64a777a806e2b11ede2"
+  "gitHead": "676e14597e9b1081ed1ce9df2772852145d130d3"
 }

package/routes.js

@@ -83,7 +83,9 @@ const sourceOrder = {
   html: 3,
   'html-demos': 4,
   'design-guidelines': 99,
-  'accessibility': 100
+  'accessibility': 100,
+  'upgrade-guide': 101,
+  'release-notes': 102,
 };
 
 const sortSources = ({ source: s1 }, { source: s2 }) => {

package/scripts/md/parseMD.js

@@ -105,6 +105,7 @@ function toReactComponent(mdFilePath, source, buildMode) {
         section: frontmatter.section || '',
         subsection: frontmatter.subsection || '',
         deprecated: frontmatter.deprecated || false,
+        template: frontmatter.template || false,
         beta: frontmatter.beta || false,
         demo: frontmatter.demo || false,
         newImplementationLink: frontmatter.newImplementationLink || false,
@@ -295,6 +296,7 @@ function sourceMDFile(file, source, buildMode) {
       ...(pageData.hideNavItem && { hideNavItem: pageData.hideNavItem }),
       ...(pageData.beta && { beta: pageData.beta }),
       ...(pageData.deprecated && { deprecated: pageData.deprecated }),
+      ...(pageData.template && { template: pageData.template }),
       ...(pageData.demo && { demo: pageData.demo }),
       ...(pageData.sortValue && { sortValue: pageData.sortValue }),
       ...(pageData.subsectionSortValue && { subsectionSortValue: pageData.subsectionSortValue })

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

@@ -2,7 +2,6 @@ const path = require('path');
 const webpack = require('webpack');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 
 module.exports = (_env, argv) => {
   const {
@@ -156,9 +155,6 @@ module.exports = (_env, argv) => {
         patterns: [
           { from: path.join(__dirname, '../../assets'), to: 'assets' }
         ]
-      }),
-      new MonacoWebpackPlugin({
-        globalAPI: true,
       })
     ],
     stats: 'minimal'

package/scripts/writeScreenshots.js

@@ -32,7 +32,7 @@ async function writeScreenshots({ urlPrefix, allRoutes, filterTerm }) {
     concurrency: Cluster.CONCURRENCY_CONTEXT,
     maxConcurrency: os.cpus().length,
     puppeteerOptions: {
-      headless: true, // set to false for testing...
+      headless: 'new', // set to false for testing...
       args: ["--no-sandbox", "--disable-setuid-sandbox"],
       defaultViewport: {width: 1920, height: 1080}
     }

package/templates/mdx.css

@@ -1,7 +1,7 @@
 #ws-page-content-router {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  flex-shrink: 0;
 }
 
 .ws-release-notes-toc {
@@ -74,6 +74,11 @@
   width: 100%;
 }
 
+.ws-image {
+  text-align: center;
+  width: "600px";
+}
+
 .ws-table td > code,
 .ws-table th > code,
 .ws-table tr > code {

package/templates/mdx.js

@@ -23,6 +23,7 @@ const MDXChildTemplate = ({
     optIn,
     beta,
     deprecated,
+    template,
     newImplementationLink,
     functionDocumentation = []
   } = Component.getPageData();
@@ -84,6 +85,11 @@ const MDXChildTemplate = ({
           {' '}To learn more about the process, visit our <Link to="/get-started/about#major-release-cadence">about page</Link>.
         </InlineAlert>
       )}
+       {(template || source === 'react-template') && (
+        <InlineAlert title="Templates" variant="info">
+          {`This page showcases templates for the ${id.toLowerCase()} component. A template combines a component with logic that supports a specific use case, with a streamlined API that offers additional, limited customization.`}
+        </InlineAlert>
+      )}
     </React.Fragment>
   );
   // Create dynamic component for @reach/router
@@ -152,7 +158,7 @@ export const MDXTemplate = ({
   componentsData
 }) => {
   const isDeprecated = sources.some(source => source.source === "react-deprecated" || source.source === "html-deprecated") && !sources.some(source => source.source === "react"  || source.source === "html");
-  const isBeta = sources.some(source => source.beta)
+  const isBeta = sources.some(source => source.beta && source.source !== 'react-next')
   const isDemo = sources.some(source => source.source === "react-demos" || source.source === "html-demos") && !sources.some(source => source.source === "react" || source.source === "html");
   // Build obj mapping source names to text displayed on tabs
   const tabNames = sources.reduce((acc, curSrc) => {

package/versions.json

@@ -18,10 +18,84 @@
         "@patternfly/react-tokens": "5.1.0",
         "@patternfly/react-topology": "5.1.0",
         "@patternfly/quickstarts": "5.1.0",
-        "@patternfly/react-virtualized-extension": "5.1.0"
+        "@patternfly/react-virtualized-extension": "5.1.0",
+        "@patternfly/react-templates": "^1.0.0-alpha.0"
+      }
+    },{
+      "name": "5.2.2",
+      "date": "2024-03-12",
+      "hidden": true,
+      "versions": {
+        "@patternfly/patternfly": "5.2.1",
+        "@patternfly/react-charts": "7.2.2",
+        "@patternfly/react-code-editor": "5.2.2",
+        "@patternfly/react-core": "5.2.2",
+        "@patternfly/react-icons": "5.2.1",
+        "@patternfly/react-styles": "5.2.1",
+        "@patternfly/react-table": "5.2.2",
+        "@patternfly/react-drag-drop": "5.2.2",
+        "@patternfly/react-tokens": "5.2.1",
+        "@patternfly/react-catalog-view-extension": "5.0.0",
+        "@patternfly/react-component-groups": "5.1.0",
+        "@patternfly/react-console": "5.0.0",
+        "@patternfly/react-log-viewer": "5.2.0",
+        "@patternfly/react-topology": "5.2.1",
+        "@patternfly/react-user-feedback": "5.0.0",
+        "@patternfly/react-virtualized-extension": "5.0.0",
+        "@patternfly/quickstarts": "5.0.0",
+        "@patternfly/react-templates": "^1.0.0-alpha.0"
       }
     },
     {
+      "name": "5.2.1",
+      "date": "2024-03-01",
+      "hidden": true,
+      "versions": {
+        "@patternfly/patternfly": "5.2.1",
+        "@patternfly/react-charts": "7.2.2",
+        "@patternfly/react-code-editor": "5.2.1",
+        "@patternfly/react-core": "5.2.1",
+        "@patternfly/react-icons": "5.2.1",
+        "@patternfly/react-styles": "5.2.1",
+        "@patternfly/react-table": "5.2.1",
+        "@patternfly/react-drag-drop": "5.2.1",
+        "@patternfly/react-tokens": "5.2.1",
+        "@patternfly/react-catalog-view-extension": "5.0.0",
+        "@patternfly/react-component-groups": "5.1.0",
+        "@patternfly/react-console": "5.0.0",
+        "@patternfly/react-log-viewer": "5.2.0",
+        "@patternfly/react-topology": "5.2.1",
+        "@patternfly/react-user-feedback": "5.0.0",
+        "@patternfly/react-virtualized-extension": "5.0.0",
+        "@patternfly/quickstarts": "5.0.0",
+        "@patternfly/react-templates": "^1.0.0-alpha.0"
+      }
+    },
+    {
+      "name": "5.2.0",
+      "date": "2024-01-17",
+      "hidden": true,
+      "versions": {
+        "@patternfly/patternfly": "5.2.0",
+        "@patternfly/react-charts": "7.2.0",
+        "@patternfly/react-code-editor": "5.2.0",
+        "@patternfly/react-core": "5.2.0",
+        "@patternfly/react-icons": "5.2.0",
+        "@patternfly/react-styles": "5.2.0",
+        "@patternfly/react-table": "5.2.0",
+        "@patternfly/react-drag-drop": "5.2.0",
+        "@patternfly/react-tokens": "5.2.0",
+        "@patternfly/react-catalog-view-extension": "5.0.0",
+        "@patternfly/react-component-groups": "5.1.0",
+        "@patternfly/react-console": "5.0.0",
+        "@patternfly/react-log-viewer": "5.2.0",
+        "@patternfly/react-topology": "5.2.1",
+        "@patternfly/react-user-feedback": "5.0.0",
+        "@patternfly/react-virtualized-extension": "5.0.0",
+        "@patternfly/quickstarts": "5.0.0",
+        "@patternfly/react-templates": "^1.0.0-alpha.0"
+      }
+    },{
       "name": "5.1.0",
       "date": "2023-10-06",
       "hidden": true,

package/pages/global-css-variables.md

@@ -1,109 +0,0 @@
----
-id: Global CSS variables
-section: developer-resources
----
-
-import { CSSVariables } from '../components/cssVariables/cssVariables';
-
-
-## About CSS variables
-
-The CSS variable system is a two-layer theming system where global variables inform component variables.
-
-### Global variables
-
-Global variables define and enforce global style elements (like values for color, spacing, and font size) across the entire system.
-
-Global variables follow this formula:
-
-`--pf-v6-global--concept--PropertyCamelCase--modifier--state`
-
-Where...
-
-- A `concept` is something like a `spacer` or `main-title`.
-- A `PropertyCamelCase` is something like `BackgroundColor` or `FontSize`.
-- A `modifier` is something like `sm` or `lg`.
-- A `state` is something like `hover` or `expanded`.
-
-Example:
-- Note: global variables are scoped to `:root`
-  ```css
-  :root {
-    /* Default & hovered link colors */
-    --pf-v6-global--link--Color: #06c;
-    --pf-v6-global--link--Color--hover: #004080;
-  }
-  ```
-
-<br/>
-The [full list of global CSS variables](#global-css-variables) can be found below.
-
-### Component variables
-
-Component variables are used to define custom properties at the component-level. Component variables are always defined by global variables.
-
-Component variables follow this formula:
-
-`--pf-v6-c-block__element--modifier--state--breakpoint--['child'|tag|c-component]pseudo-element--PropertyCamelCase`
-
-Where...
-
-- `pf-v6-c-block` refers to the block, usually the component or layout name, like `pf-v6-c-alert`.
-- `__element` refers to the element inside of the block, like `__title`.
-- `modifier` is prefixed with`-m` and refers to a modifier class such as `.pf-m-danger`.
-- `state` is something like `hover` or `active`.
-- `breakpoint` is a media query breakpoint such as `sm` for `$pf-v6-global--breakpoint--xs`.
-- `pseudo-element` is either `before` or `after`.
-- `child`, `tag`, or `c-component` refers to a child element. It could be a tag or component name, like `svg` or `c-menu`, or it could use `child` to refer to any child element. If any modifiers, states, breakpoints, or pseudo-elements are on the child, include those after this portion of the name.
-
-Example:
-- Note: component variables are scoped to the top-level component selector
-  ```css
-  .pf-v6-c-button {
-    /* Default, primary, and primary hovered button background colors */
-    --pf-v6-c-button--BackgroundColor: transparent;
-    --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-v6-global--primary-color--100);
-    --pf-v6-c-button--m-primary--hover--BackgroundColor: var(--pf-v6-global--primary-color--200);
-  }
-  ```
-
-<br/>
-Component variables are listed at the bottom of each component page (for example, [button css variables](/components/button#css-variables)).
-
-Note that all component variables are declared at the top component level (for example, `.pf-v6-c-button`). The component variable table linked above also shows all usages of each variable and the values they evaluate to in each case - expand any component variable row to view the global variable it is mapped to.
-
-![Component variable mapping](./img/component-variable-mapping.png)
-
-### Breakpoint variables and class suffixes
-
-PatternFly defines a number of standard breakpoints. These are always used as a `min-width` breakpoint; i.e. using the `-md` breakpoint would apply to everything at the `-md` width and wider. (There is one exception to this, which is in the responsive behavior of the [table component](/components/table).)
-
-Breakpoint suffixes are used in utility classes and layouts as well as in many components as a way to apply class styles at a specified breakpoint. When available, `{-on-[breakpoint]}` will be shown as an available suffix for the class in the usage section of the documentation. The breakpoint suffix is optional and if not specified, the base class will be used. There are breakpoints for `sm`, `md`, `lg`, `xl`, and `2xl`, and the values for the corresponding breakpoints are defined below in the global variables `—pf-v6-global—breakpoint—[breakpoint]`.
-
-### Using the variable system
-
-PatternFly 4 styles provide a default starting point. You can use the variable system to make adjustments to that default styling. When you change one or more elements, you should package those values into a new SCSS stylesheet to replace the default styling.
-
-Overrides to PatternFly variables should be made at the `:root` level for global variables or at the top-level component selector for component variables (for example, `.pf-v6-c-button`), as these overrides will cascade down to children elements accordingly.
-
-Example:
-- Change the global primary color to red, but keep the original primary blue color as the background for primary buttons.
-  ```css
-  /* Override global primary color 100 to red */
-  :root {
-    --pf-v6-global--primary-color--100: var(--pf-v6-global--palette--red-400);
-  }
-
-  /* Override the above override for only the primary button background color */
-  .pf-v6-c-button {
-    --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-v6-global--palette--blue-400);
-  }
-  ```
-
-## Global CSS variables
-
-<CSSVariables prefix="patternfly_variables" selector=":where(:root)" hideSelectorColumn />
-
-## Chart CSS variables
-
-<CSSVariables prefix="patternfly_charts" hideSelectorColumn />