@patternfly/documentation-framework 6.0.0-alpha.4 → 6.0.0-alpha.41

package/templates/mdx.css

@@ -1,53 +1,55 @@
 #ws-page-content-router {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  flex-grow: 1;
+  flex-shrink: 0;
 }
 
 .ws-release-notes-toc {
-  margin-bottom: var(--pf-v5-global--spacer--lg);
+  margin-bottom: var(--pf-t--global--spacer--lg);
 }
 
-.ws-release-notes-toc .pf-v5-c-card {
+.ws-release-notes-toc .pf-v6-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-v6-c-card__title {
+  padding-bottom: var(--pf-t--global--spacer--xs);
 }
 
-.ws-release-notes-toc .pf-v5-c-card__title .pf-v5-c-title {
+.ws-release-notes-toc .pf-v6-c-card__title .pf-v6-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-v6-c-card__title a {
+  margin-right: var(--pf-t--global--spacer--sm);
 }
 
-.ws-release-notes-toc .pf-v5-c-card__title .pf-v5-c-badge {
+.ws-release-notes-toc .pf-v6-c-card__title .pf-v6-c-badge {
   vertical-align: text-top;
 }
 
-.ws-release-notes-toc .pf-v5-c-card__body {
+.ws-release-notes-toc .pf-v6-c-card__body {
   color: #72767B;
-  font-family: var(--pf-v5-global--FontFamily--text);
-  font-size: var(--pf-v5-global--FontSize--md);
+/*   font-family: var(--pf-v6-global--FontFamily--text); */
+/*   font-size: var(--pf-v6-global--FontSize--md); */
   font-weight: 400;
   line-height: 1.5;
 }
 
 .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-v6-global--BorderWidth--sm) solid var(--pf-v6-global--BorderColor--300); */
   white-space: pre-wrap;
-  font-size: var(--pf-v5-global--FontSize--sm);
-  font-family: var(--pf-v5-global--FontFamily--monospace);
+/*   font-size: var(--pf-v6-global--FontSize--sm); */
+/*   font-family: var(--pf-v6-global--FontFamily--monospace); */
 }
 
-.ws-p + .ws-code {
-  margin-bottom: var(--pf-v5-c-content--MarginBottom);
+.ws-image {
+  text-align: center;
+  width: "600px";
 }
 
 /* Table styles */
@@ -68,6 +70,12 @@
   table-layout: fixed;
   width: 100%;
 }
+
+.ws-image {
+  text-align: center;
+  width: "600px";
+}
+
 .ws-table td > code,
 .ws-table th > code,
 .ws-table tr > code {
@@ -77,226 +85,17 @@
   vertical-align: top;
 }
 
-/*
- * 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;
 }
 
-/* Overlay the footer */
 .ws-back-to-top {
-  z-index: 2;
+  z-index: var(--pf-t--global--z-index--2xl);
 }

package/templates/mdx.js

@@ -23,6 +23,7 @@ const MDXChildTemplate = ({
     optIn,
     beta,
     deprecated,
+    template,
     newImplementationLink,
     functionDocumentation = []
   } = Component.getPageData();
@@ -70,7 +71,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,24 +82,29 @@ 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>
+      )}
+       {(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
   const ChildComponent = () => (
-    <div className="pf-v5-u-display-flex ws-mdx-child-template">
+    <div className="pf-v6-u-display-flex ws-mdx-child-template">
       {toc.length > 1 && (
         <TableOfContents items={toc} />
       )}
-      <div className="ws-mdx-content">
+      <div>
         <div className={innerContentWrapperClass()}>
           {InlineAlerts}
           <Component />
           {functionDocumentation.length > 0 && (
             <React.Fragment>
-              <AutoLinkHeader size="h2" className="ws-h2" id="functions">
+              <AutoLinkHeader size="h2" className="pf-v6-c-content--h2" id="functions">
                 Functions
               </AutoLinkHeader>
               <FunctionsTable functionDescriptions={functionDocumentation}/>
@@ -106,7 +112,7 @@ const MDXChildTemplate = ({
           )}
           {propsTitle && (
             <React.Fragment>
-              <AutoLinkHeader size="h2" className="ws-h2" id="props">
+              <AutoLinkHeader size="h2" className="pf-v6-c-content--h2" id="props">
                 {propsTitle}
               </AutoLinkHeader>
               {propComponents.map(component => (
@@ -122,7 +128,7 @@ const MDXChildTemplate = ({
           )}
           {cssPrefix.length > 0 && (
             <React.Fragment>
-              <AutoLinkHeader size="h2" className="ws-h2" id="css-variables">
+              <AutoLinkHeader size="h2" className="pf-v6-c-content--h2" id="css-variables">
                 {cssVarsTitle}
               </AutoLinkHeader>
               {cssPrefix.map((prefix, index) => (
@@ -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' && 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) => {
@@ -264,7 +270,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 +279,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 +288,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>
@@ -296,19 +302,19 @@ export const MDXTemplate = ({
         </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 +326,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,24 +5,49 @@
       "date": "2023-12-03",
       "latest": true,
       "versions": {
-        "@patternfly/patternfly": "6.0.0-alpha.38",
+        "@patternfly/patternfly": "6.0.0-alpha.139",
         "@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-icons": "6.0.0-alpha.4",
+        "@patternfly/react-charts": "8.0.0-alpha.23",
+        "@patternfly/react-code-editor": "6.0.0-alpha.61",
+        "@patternfly/react-core": "6.0.0-alpha.61",
+        "@patternfly/react-drag-drop": "6.0.0-alpha.43",
+        "@patternfly/react-icons": "6.0.0-alpha.23",
         "@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-styles": "6.0.0-alpha.23",
+        "@patternfly/react-table": "6.0.0-alpha.61",
+        "@patternfly/react-tokens": "6.0.0-alpha.23",
         "@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": "^6.0.0-alpha.11"
       }
-    },
-    {
+    },{
+      "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"
+      }
+    },{
       "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);
-}