@patternfly/documentation-framework 6.0.0-alpha.9 → 6.0.0-alpha.91

package/templates/mdx.css

@@ -1,302 +1,25 @@
-#ws-page-content-router {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.ws-release-notes-toc {
-  margin-bottom: var(--pf-v5-global--spacer--lg);
-}
-
-.ws-release-notes-toc .pf-v5-c-card {
-  height: 100%;
-}
-
-.ws-release-notes-toc .pf-v5-c-card__title {
-  padding-bottom: var(--pf-v5-global--spacer--xs);
-}
-
-.ws-release-notes-toc .pf-v5-c-card__title .pf-v5-c-title {
-  display: inline;
-}
-
-.ws-release-notes-toc .pf-v5-c-card__title a {
-  margin-right: var(--pf-v5-global--spacer--sm);
-}
-
-.ws-release-notes-toc .pf-v5-c-card__title .pf-v5-c-badge {
-  vertical-align: text-top;
-}
-
-.ws-release-notes-toc .pf-v5-c-card__body {
-  color: #72767B;
-  font-family: var(--pf-v5-global--FontFamily--text);
-  font-size: var(--pf-v5-global--FontSize--md);
-  font-weight: 400;
-  line-height: 1.5;
+p.pf-v6-c-content--p.ws-p {
+  margin: 0;
 }
 
 .ws-code {
   display: inline-block;
-  background-color: var(--pf-v5-global--BackgroundColor--100);
-  padding: 1px var(--pf-v5-global--spacer--sm);
-  border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--300);
+  background-color: var(--pf-t--global--background--color--secondary--default);
+  padding: 1px var(--pf-t--global--spacer--sm);
+  border: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--nonstatus--gray--default);
   white-space: pre-wrap;
-  font-size: var(--pf-v5-global--FontSize--sm);
-  font-family: var(--pf-v5-global--FontFamily--monospace);
+  font-size: var(--pf-t--global--font--size--body--sm);
+  font-family: var(--pf-t--global--font--family--mono);
 }
 
-.ws-p + .ws-code {
-  margin-bottom: var(--pf-v5-c-content--MarginBottom);
-}
-
-/* Table styles */
-/* Undo patternfly reset to respect MD table styles */
-.ws-table td[align="center"],
-.ws-table th[align="center"] {
-  text-align: center;
-}
-.ws-table td[align="left"],
-.ws-table th[align="left"] {
-  text-align: left;
-}
-.ws-table td[align="right"],
-.ws-table th[align="right"] {
-  text-align: right;
-}
 .ws-content-table > .ws-table {
-  table-layout: fixed;
-  width: 100%;
-}
-.ws-table td > code,
-.ws-table th > code,
-.ws-table tr > code {
-  white-space: normal;
-}
-.ws-table tbody > tr > td {
-  vertical-align: top;
+  margin-bottom: var(--pf-t--global--spacer--md);
 }
 
-/*
- * Copied from pf-v5-c-content.
- */
-:root {
-  --pf-v5-c-content--MarginBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-content--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-content--FontSize: var(--pf-v5-global--FontSize--md);
-  --pf-v5-c-content--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-content--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-content--heading--FontFamily: var(--pf-v5-global--FontFamily--heading);
-  --pf-v5-c-content--h1--MarginTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-content--h1--MarginBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-content--h1--LineHeight: var(--pf-v5-global--LineHeight--sm);
-  --pf-v5-c-content--h1--FontSize: var(--pf-v5-global--FontSize--2xl);
-  --pf-v5-c-content--h1--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-content--h2--MarginTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-content--h2--MarginBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-content--h2--LineHeight: var(--pf-v5-global--LineHeight--sm);
-  --pf-v5-c-content--h2--FontSize: var(--pf-v5-global--FontSize--xl);
-  --pf-v5-c-content--h2--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-content--h3--MarginTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-content--h3--MarginBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-content--h3--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-content--h3--FontSize: var(--pf-v5-global--FontSize--lg);
-  --pf-v5-c-content--h3--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-content--h4--MarginTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-content--h4--MarginBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-content--h4--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-content--h4--FontSize: var(--pf-v5-global--FontSize--md);
-  --pf-v5-c-content--h4--FontWeight: var(--pf-v5-global--FontWeight--semi-bold);
-  --pf-v5-c-content--h5--MarginTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-content--h5--MarginBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-content--h5--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-content--h5--FontSize: var(--pf-v5-global--FontSize--md);
-  --pf-v5-c-content--h5--FontWeight: var(--pf-v5-global--FontWeight--semi-bold);
-  --pf-v5-c-content--h6--MarginTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-content--h6--MarginBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-content--h6--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-content--h6--FontSize: var(--pf-v5-global--FontSize--md);
-  --pf-v5-c-content--h6--FontWeight: var(--pf-v5-global--FontWeight--semi-bold);
-  --pf-v5-c-content--small--MarginBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-content--small--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-content--small--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-content--small--Color: var(--pf-v5-global--Color--200);
-  --pf-v5-c-content--small--FontWeight: var(--pf-v5-global--FontWeight--semi-bold);
-  --pf-v5-c-content--a--Color: var(--pf-v5-global--link--Color);
-  --pf-v5-c-content--a--TextDecoration: var(--pf-v5-global--link--TextDecoration);
-  --pf-v5-c-content--a--hover--Color: var(--pf-v5-global--link--Color--hover);
-  --pf-v5-c-content--a--hover--TextDecoration: var(--pf-v5-global--link--TextDecoration--hover);
-  --pf-v5-c-content--blockquote--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-content--blockquote--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-content--blockquote--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-content--blockquote--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-content--blockquote--FontWeight: var(--pf-v5-global--FontWeight--light);
-  --pf-v5-c-content--blockquote--Color: var(--pf-v5-global--Color--200);
-  --pf-v5-c-content--blockquote--BorderLeftColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-content--blockquote--BorderLeftWidth: var(--pf-v5-global--BorderWidth--lg);
-  --pf-v5-c-content--ol--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-content--ol--MarginTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-content--ol--MarginLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-content--ol--nested--MarginTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-content--ol--nested--MarginLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-content--ul--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-content--ul--MarginTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-content--ul--MarginLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-content--ul--nested--MarginTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-content--ul--nested--MarginLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-content--ul--ListStyle: var(--pf-v5-global--ListStyle);
-  --pf-v5-c-content--li--MarginTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-content--dl--ColumnGap: var(--pf-v5-global--spacer--2xl);
-  --pf-v5-c-content--dl--RowGap: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-content--dt--FontWeight: var(--pf-v5-global--FontWeight--semi-bold);
-  --pf-v5-c-content--dt--MarginTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-content--dt--sm--MarginTop: 0;
-  --pf-v5-c-content--hr--Height: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-content--hr--BackgroundColor: var(--pf-v5-global--BorderColor--100);
-  font-size: var(--pf-v5-c-content--FontSize);
-  line-height: var(--pf-v5-c-content--LineHeight);
-  color: var(--pf-v5-c-content--Color); }
-.ws-li + li {
-  margin-top: var(--pf-v5-c-content--li--MarginTop); }
-.ws-p:not(:last-child),
-.ws-dl:not(:last-child),
-.ws-ol:not(:last-child),
-.ws-ul:not(:last-child),
-.ws-blockquote:not(:last-child),
-.ws-small:not(:last-child),
-.ws-pre:not(:last-child),
-.ws-hr:not(:last-child),
-.ws-table:not(:last-child),
-.ws-content-table:not(:last-child) {
-  margin-bottom: var(--pf-v5-c-content--MarginBottom); }
-.ws-h1,
-.ws-h2,
-.ws-h3,
-.ws-h4,
-.ws-h5,
-.ws-h6 {
-  margin: 0;
-  font-family: var(--pf-v5-c-content--heading--FontFamily); }
-.ws-ol,
-.ws-ul {
-  margin: 0; }
-.ws-h1 {
-  margin-bottom: var(--pf-v5-c-content--h1--MarginBottom);
-  font-size: var(--pf-v5-c-content--h1--FontSize);
-  font-weight: var(--pf-v5-c-content--h1--FontWeight);
-  line-height: var(--pf-v5-c-content--h1--LineHeight); }
-  .ws-h1:not(:first-child) {
-    margin-top: var(--pf-v5-c-content--h1--MarginTop); }
-.ws-h2 {
-  margin-bottom: var(--pf-v5-c-content--h2--MarginBottom);
-  font-size: var(--pf-v5-c-content--h2--FontSize);
-  font-weight: var(--pf-v5-c-content--h2--FontWeight);
-  line-height: var(--pf-v5-c-content--h2--LineHeight);
-    margin-top: var(--pf-v5-c-content--h2--MarginTop); }
-.ws-h3 {
-  margin-bottom: var(--pf-v5-c-content--h3--MarginBottom);
-  font-size: var(--pf-v5-c-content--h3--FontSize);
-  font-weight: var(--pf-v5-c-content--h3--FontWeight);
-  line-height: var(--pf-v5-c-content--h3--LineHeight); }
-  .ws-h3:not(:first-child) {
-    margin-top: var(--pf-v5-c-content--h3--MarginTop); }
-.ws-h4 {
-  margin-bottom: var(--pf-v5-c-content--h4--MarginBottom);
-  font-size: var(--pf-v5-c-content--h4--FontSize);
-  font-weight: var(--pf-v5-c-content--h4--FontWeight);
-  line-height: var(--pf-v5-c-content--h4--LineHeight); }
-  .ws-h4:not(:first-child) {
-    margin-top: var(--pf-v5-c-content--h4--MarginTop); }
-.ws-h5 {
-  margin-bottom: var(--pf-v5-c-content--h5--MarginBottom);
-  font-size: var(--pf-v5-c-content--h5--FontSize);
-  font-weight: var(--pf-v5-c-content--h5--FontWeight);
-  line-height: var(--pf-v5-c-content--h5--LineHeight); }
-  .ws-h5:not(:first-child) {
-    margin-top: var(--pf-v5-c-content--h5--MarginTop); }
-.ws-h6 {
-  margin-bottom: var(--pf-v5-c-content--h6--MarginBottom);
-  font-size: var(--pf-v5-c-content--h6--FontSize);
-  font-weight: var(--pf-v5-c-content--h6--FontWeight);
-  line-height: var(--pf-v5-c-content--h6--LineHeight); }
-  .ws-h6:not(:first-child) {
-    margin-top: var(--pf-v5-c-content--h6--MarginTop); }
-.ws-small {
-  display: block;
-  font-size: var(--pf-v5-c-content--small--FontSize);
-  line-height: var(--pf-v5-c-content--small--LineHeight);
-  color: var(--pf-v5-c-content--small--Color); }
-  .ws-small:not(:last-child) {
-    margin-bottom: var(--pf-v5-c-content--small--MarginBottom); }
-.ws-blockquote {
-  padding: var(--pf-v5-c-content--blockquote--PaddingTop) var(--pf-v5-c-content--blockquote--PaddingRight) var(--pf-v5-c-content--blockquote--PaddingBottom) var(--pf-v5-c-content--blockquote--PaddingLeft);
-  font-weight: var(--pf-v5-c-content--blockquote--FontWeight);
-  color: var(--pf-v5-c-content--blockquote--Color);
-  border-left: var(--pf-v5-c-content--blockquote--BorderLeftWidth) solid var(--pf-v5-c-content--blockquote--BorderLeftColor); }
-.ws-hr {
-  height: var(--pf-v5-c-content--hr--Height);
-  background-color: var(--pf-v5-c-content--hr--BackgroundColor);
-  border: none; }
-.ws-ol {
-  padding-left: var(--pf-v5-c-content--ol--PaddingLeft);
-  margin-top: var(--pf-v5-c-content--ol--MarginTop);
-  margin-left: var(--pf-v5-c-content--ol--MarginLeft); }
-  .ws-ol ul {
-    --pf-v5-c-content--ul--MarginTop: var(--pf-v5-c-content--ul--nested--MarginTop);
-    --pf-v5-c-content--ul--MarginLeft: var(--pf-v5-c-content--ul--nested--MarginLeft); }
-  .ws-ol ol {
-    --pf-v5-c-content--ol--MarginTop: var(--pf-v5-c-content--ol--nested--MarginTop);
-    --pf-v5-c-content--ol--MarginLeft: var(--pf-v5-c-content--ol--nested--MarginLeft); }
-.ws-ul {
-  padding-left: var(--pf-v5-c-content--ul--PaddingLeft);
-  margin-top: var(--pf-v5-c-content--ul--MarginTop);
-  margin-left: var(--pf-v5-c-content--ul--MarginLeft);
-  list-style: var(--pf-v5-c-content--ul--ListStyle); }
-  .ws-ul ul {
-    --pf-v5-c-content--ul--MarginTop: var(--pf-v5-c-content--ul--nested--MarginTop);
-    --pf-v5-c-content--ul--MarginLeft: var(--pf-v5-c-content--ul--nested--MarginLeft); }
-  .ws-ul ol {
-    --pf-v5-c-content--ol--MarginTop: var(--pf-v5-c-content--ol--nested--MarginTop);
-    --pf-v5-c-content--ol--MarginLeft: var(--pf-v5-c-content--ol--nested--MarginLeft); }
-.ws-dl {
-  display: grid;
-  grid-template-columns: 1fr; }
-  @media screen and (min-width: 576px) {
-    .ws-dl {
-      grid-template: auto / auto 1fr;
-      grid-column-gap: var(--pf-v5-c-content--dl--ColumnGap);
-      grid-row-gap: var(--pf-v5-c-content--dl--RowGap); } }
-.ws-dt {
-  font-weight: var(--pf-v5-c-content--dt--FontWeight); }
-  .ws-dt:not(:first-child) {
-    margin-top: var(--pf-v5-c-content--dt--MarginTop); }
-    @media screen and (min-width: 576px) {
-      .ws-dt:not(:first-child) {
-        --pf-v5-c-content--dt--MarginTop: var(--pf-v5-c-content--dt--sm--MarginTop); } }
-  @media screen and (min-width: 576px) {
-    .ws-dt {
-      grid-column: 1; } }
-@media screen and (min-width: 576px) {
-  .ws-dd {
-    grid-column: 2; } }
-
-@media screen and (max-width: 1450px) {
-  .ws-mdx-child-template {
-    flex-direction: column;
-  }
-}
-
-.ws-mdx-content {
-  flex-grow: 1;
-  min-width: 0;
-}
-
-/* Design asked for this. A nice side effect is that the TOC doesn't "jump" between pages */
-.ws-mdx-content-content {
-  max-width: 832px;
+.ws-image {
+  text-align: center;
 }
 
-/* Overlay the footer */
 .ws-back-to-top {
-  z-index: 2;
+  z-index: var(--pf-t--global--z-index--2xl);
 }

package/templates/mdx.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PageSection, Title, Tooltip, PageSectionVariants, Button, BackToTop, Flex, FlexItem, PageGroup, Page, Text, TextContent, Label } from '@patternfly/react-core';
+import { PageSection, Title, Tooltip, PageSectionVariants, Button, BackToTop, Flex, FlexItem, PageGroup, Page, Content, Label, Stack, StackItem } from '@patternfly/react-core';
 import { css } from '@patternfly/react-styles';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 import { Router, useLocation } from '@reach/router';
@@ -23,6 +23,7 @@ const MDXChildTemplate = ({
     optIn,
     beta,
     deprecated,
+    template,
     newImplementationLink,
     functionDocumentation = []
   } = Component.getPageData();
@@ -51,18 +52,11 @@ const MDXChildTemplate = ({
     }
     ensureID(toc);
   }
-  const innerContentWrapperClass = () => {
-    if (source === 'landing-pages') {
-      return 'landing-pages';
-    }
-    if (source === 'release-notes') {
-      return '';
-    }
-    return 'ws-mdx-content-content'
-  };
 
-  const InlineAlerts = (
-    <React.Fragment>
+  const isComponentCodeDocs = ['react', 'react-demos', 'html', 'html-demos', 'react-templates'].includes(source);
+
+  const InlineAlerts = (optIn || beta || deprecated || source === 'react-deprecated' || source === 'html-deprecated' || template || source === 'react-template') && (
+    <StackItem>
       {optIn && (
         <InlineAlert title="Opt-in feature">
           {optIn}
@@ -70,7 +64,7 @@ const MDXChildTemplate = ({
       )}
       {beta && (
         <InlineAlert title="Beta feature">
-          This beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the <a href="https://forum.patternfly.org/">PatternFly forum</a> or via <a href="//slack.patternfly.org/" target="_blank" rel="noopener noreferrer">Slack</a>. To learn more about the process, visit our <Link to="/get-started/about#beta-components">about page</Link> or our <a href="https://github.com/patternfly/patternfly-org/tree/main/beta-component-promotion">Beta components</a> page on GitHub.
+          This beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the <a href="https://forum.patternfly.org/">PatternFly forum</a> or via <a href="//slack.patternfly.org/" target="_blank" rel="noopener noreferrer">Slack</a>. To learn more about the process, visit our <Link to="/get-started/about-patternfly#beta-components">about page</Link> or our <a href="https://github.com/patternfly/patternfly-org/tree/main/beta-component-promotion">Beta components</a> page on GitHub.
         </InlineAlert>
       )}
       {(deprecated || source === 'react-deprecated' || source === 'html-deprecated') && (
@@ -81,32 +75,36 @@ const MDXChildTemplate = ({
               You can find the <Link to={newImplementationLink}>updated implementation here</Link>.
             </React.Fragment>
           )}
-          {' '}To learn more about the process, visit our <Link to="/get-started/about#major-release-cadence">about page</Link>.
+          {' '}To learn more about the process, visit our <Link to="/get-started/about-patternfly#patternfly-release-cadence">about page</Link>.
         </InlineAlert>
       )}
-    </React.Fragment>
+       {(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>
+      )}
+    </StackItem>
   );
   // Create dynamic component for @reach/router
   const ChildComponent = () => (
-    <div className="pf-v5-u-display-flex ws-mdx-child-template">
+    <div className={source !== 'landing-pages' ? 'pf-v6-l-flex' : ''}>
       {toc.length > 1 && (
         <TableOfContents items={toc} />
       )}
-      <div className="ws-mdx-content">
-        <div className={innerContentWrapperClass()}>
-          {InlineAlerts}
+      <Stack hasGutter style={{...(source !== 'landing-pages' && {maxWidth: "825px"})}}>
+        {InlineAlerts}
           <Component />
           {functionDocumentation.length > 0 && (
-            <React.Fragment>
-              <AutoLinkHeader size="h2" className="ws-h2" id="functions">
+            <StackItem>
+              <AutoLinkHeader headingLevel="h2" className="pf-v6-c-content--h2" id="functions">
                 Functions
               </AutoLinkHeader>
               <FunctionsTable functionDescriptions={functionDocumentation}/>
-            </React.Fragment>
+            </StackItem>
           )}
           {propsTitle && (
-            <React.Fragment>
-              <AutoLinkHeader size="h2" className="ws-h2" id="props">
+            <StackItem>
+              <AutoLinkHeader headingLevel="h2" className="pf-v6-c-content--h2" id="props">
                 {propsTitle}
               </AutoLinkHeader>
               {propComponents.map(component => (
@@ -118,26 +116,25 @@ const MDXChildTemplate = ({
                   allPropComponents={propComponents}
                 />
               ))}
-            </React.Fragment>
+            </StackItem>
           )}
           {cssPrefix.length > 0 && (
-            <React.Fragment>
-              <AutoLinkHeader size="h2" className="ws-h2" id="css-variables">
+            <StackItem>
+              <AutoLinkHeader headingLevel="h2" className="pf-v6-c-content--h2" id="css-variables">
                 {cssVarsTitle}
               </AutoLinkHeader>
               {cssPrefix.map((prefix, index) => (
                 <CSSVariables key={index} autoLinkHeader={cssPrefix.length > 1} prefix={prefix} />
               ))}
-            </React.Fragment>
+            </StackItem>
           )}
           {sourceLink && (
-            <React.Fragment>
+            <StackItem>
               <br />
               <a href={sourceLink} target="_blank" onClick={() => trackEvent('view_source_click', 'click_event', source.toUpperCase())}>View source on GitHub</a>
-            </React.Fragment>
+            </StackItem>
           )}
-        </div>
-      </div>
+      </Stack>
     </div>
   );
   ChildComponent.displayName = `MDXChildTemplate${Component.displayName}`;
@@ -152,7 +149,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' && source.source !== 'react-templates');
   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) => {
@@ -252,7 +249,7 @@ export const MDXTemplate = ({
           variant={!isSinglePage ? PageSectionVariants.light : ""}
           isWidthLimited
         >
-          <TextContent>
+          <Content>
             <Flex alignItems={{ default: 'alignItemsCenter'}}>
               <FlexItem>
                 <Title headingLevel='h1' size='4xl' id="ws-page-title">
@@ -264,7 +261,7 @@ export const MDXTemplate = ({
                   {isDeprecated && (
                     <FlexItem spacer={{ default: 'spacerSm' }}>
                       <Tooltip content="Deprecated components are available for use but are no longer being maintained or enhanced.">
-                        <Button isInline component="span" variant="link">
+                        <Button variant="plain" hasNoPadding>
                           <Label color="grey">Deprecated</Label>
                         </Button>
                       </Tooltip>
@@ -273,7 +270,7 @@ export const MDXTemplate = ({
                   {isDemo && (
                     <FlexItem spacer={{ default: 'spacerSm' }}>
                       <Tooltip content="Demos show how multiple components can be used in a single design.">
-                        <Button isInline component="span" variant="link">
+                        <Button variant="plain" hasNoPadding>
                           <Label color="purple">Demo</Label>
                         </Button>
                       </Tooltip>
@@ -282,7 +279,7 @@ export const MDXTemplate = ({
                   {isBeta && (
                     <FlexItem spacer={{ default: 'spacerSm' }}>
                       <Tooltip content="This beta component is currently under review and is still open for further evolution.">
-                        <Button isInline component="span" variant="link">
+                        <Button variant="plain" hasNoPadding>
                           <Label color="blue">Beta</Label>
                         </Button>
                       </Tooltip>
@@ -292,23 +289,23 @@ export const MDXTemplate = ({
               </FlexItem>
             </Flex>
             {isComponent && summary && (<SummaryComponent />)}
-          </TextContent>
+          </Content>
         </PageSection>
         { showTabs && (
           <PageSection id="ws-sticky-nav-tabs" stickyOnBreakpoint={{'default':'top'}} type="tabs">
-            <div className="pf-v5-c-tabs pf-m-page-insets pf-m-no-border-bottom">
-              <ul className="pf-v5-c-tabs__list">
+            <div className="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom">
+              <ul className="pf-v6-c-tabs__list">
                 {sourceKeys.map((source, index) => (
                   <li
                     key={source}
                     className={css(
-                      'pf-v5-c-tabs__item',
+                      'pf-v6-c-tabs__item',
                       activeSource === source && 'pf-m-current'
                     )}
                     // Send clicked tab name for analytics
                     onClick={() => trackEvent('tab_click', 'click_event', source.toUpperCase())}
                   >
-                    <Link className="pf-v5-c-tabs__link" to={`${path}${index === 0 ? '' : '/' + source}`}>
+                    <Link className="pf-v6-c-tabs__link" to={`${path}${index === 0 ? '' : '/' + source}`}>
                       {tabNames[source]}
                     </Link>
                   </li>
@@ -320,7 +317,7 @@ export const MDXTemplate = ({
         <PageSection id="main-content" isFilled className="pf-m-light-100">
           {isSinglePage && <MDXChildTemplate {...sources[0]} id={id}/>}
           {!isSinglePage && (
-            <Router className="pf-v5-u-h-100" primary={false}>
+            <Router className="pf-v6-u-h-100" primary={false}>
               {sources
                 .map((source, index) => {
                   source.index = index;

package/templates/patternfly-docs/patternfly-docs.source.js

@@ -1,16 +1,16 @@
-const path = require('path');
+const path = require("path");
 
 module.exports = (sourceMD, sourceProps) => {
   /** Parse source content for props so that we can display them. You must source props before sourcing the markdown
   files, otherwise the props table won't be rendered.
   */
-  const propsIgnore = ['**/*.test.tsx', '**/examples/*.tsx'];
-  const extensionPath = path.join(__dirname, '../src');
-  sourceProps(path.join(extensionPath, '/**/*.tsx'), propsIgnore);
+  const propsIgnore = ["/**/*.test.tsx", "/**/examples/*.tsx"];
+  const extensionPath = path.join(__dirname, "../src");
+  sourceProps(path.join(extensionPath, "/**/*.tsx"), propsIgnore);
 
-  // Parse md files 
-  const contentBase = path.join(__dirname, './content');
-  sourceMD(path.join(contentBase, 'extensions/**/*.md'), 'extensions');
+  // Parse md files
+  const contentBase = path.join(__dirname, "./content");
+  sourceMD(path.join(contentBase, "extensions/**/*.md"), "extensions");
 
   /**
     If you want to parse content from node_modules instead of providing a relative/absolute path, 
@@ -23,4 +23,4 @@ module.exports = (sourceMD, sourceProps) => {
     sourceMD(path.join(extensionPath, '../patternfly-docs/**\/demos/*.md'), 'react-demos');
     sourceMD(path.join(extensionPath, '../patternfly-docs/**\/design-guidelines/*.md'), 'design-guidelines');
   */
-}
+};

package/versions.json

@@ -5,25 +5,52 @@
       "date": "2023-12-03",
       "latest": true,
       "versions": {
-        "@patternfly/patternfly": "6.0.0-alpha.38",
+        "@patternfly/patternfly": "6.0.0-alpha.227",
+        "@patternfly/react-catalog-view-extension": "6.0.0-alpha.7",
+        "@patternfly/react-charts": "8.0.0-alpha.39",
+        "@patternfly/react-code-editor": "6.0.0-alpha.105",
+        "@patternfly/react-component-groups": "6.0.0-alpha.14",
+        "@patternfly/react-core": "6.0.0-alpha.105",
+        "@patternfly/react-drag-drop": "6.0.0-alpha.87",
+        "@patternfly/react-icons": "6.0.0-alpha.37",
+        "@patternfly/react-log-viewer": "6.0.0-alpha.5",
+        "@patternfly/react-styles": "6.0.0-alpha.35",
+        "@patternfly/react-table": "6.0.0-alpha.106",
+        "@patternfly/react-tokens": "6.0.0-alpha.36",
+        "@patternfly/react-topology": "6.0.0-alpha.3",
+        "@patternfly/react-user-feedback": "6.0.0-alpha.4",
+        "@patternfly/react-console": "6.0.0-alpha.5",
+        "@patternfly/quickstarts": "6.0.0-alpha.5",
+        "@patternfly/react-virtualized-extension": "6.0.0-alpha.3",
+        "@patternfly/react-templates": "6.0.0-alpha.55"
+      }
+    },{
+      "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-charts": "8.0.0-alpha.4",
-        "@patternfly/react-code-editor": "6.0.0-alpha.5",
-        "@patternfly/react-core": "6.0.0-alpha.5",
-        "@patternfly/react-drag-drop": "6.0.0-alpha.0",
-        "@patternfly/react-icons": "6.0.0-alpha.4",
-        "@patternfly/react-log-viewer": "5.0.0",
-        "@patternfly/react-styles": "6.0.0-alpha.4",
-        "@patternfly/react-table": "6.0.0-alpha.5",
-        "@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-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"
       }
-    },
-    {
+    },{
       "name": "5.1.0",
       "date": "2023-10-06",
+      "hidden": true,
       "versions": {
         "@patternfly/patternfly": "5.1.0",
         "@patternfly/react-charts": "7.1.1",

package/components/sideNav/sideNav.css

@@ -1,21 +0,0 @@
-.ws-page-sidebar .pf-v5-c-nav {
-  --pf-v5-c-nav__link--before--BorderBottomWidth: 0;
-  --pf-v5-c-nav--m-light__link--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-200);
-  --pf-v5-c-nav--m-light__link--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-200);
-  --pf-v5-c-nav--m-light__link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-200);
-  --pf-v5-c-nav--m-light__link--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-200);
-  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-}
-
-.ws-side-nav-list .pf-v5-c-nav__item.pf-m-expandable::before {
-  border-bottom: 0;
-}
-
-.pf-v5-c-nav__subsection-title {
-  color: var(--ws-toc-link--Color, var(--pf-v5-global--Color--300));
-  font-size: var(--pf-v5-global--FontSize--sm);
-}
-
-#ws-sticky-nav-tabs {
-  z-index: var(--pf-v5-global--ZIndex--2xl);
-}