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

package/templates/mdx.css

@@ -5,49 +5,49 @@
 }
 
 .ws-release-notes-toc {
-  margin-bottom: var(--pf-global--spacer--lg);
+  margin-bottom: var(--pf-v5-global--spacer--lg);
 }
 
-.ws-release-notes-toc .pf-c-card {
+.ws-release-notes-toc .pf-v5-c-card {
   height: 100%;
 }
 
-.ws-release-notes-toc .pf-c-card__title {
-  padding-bottom: var(--pf-global--spacer--xs);
+.ws-release-notes-toc .pf-v5-c-card__title {
+  padding-bottom: var(--pf-v5-global--spacer--xs);
 }
 
-.ws-release-notes-toc .pf-c-card__title .pf-c-title {
+.ws-release-notes-toc .pf-v5-c-card__title .pf-v5-c-title {
   display: inline;
 }
 
-.ws-release-notes-toc .pf-c-card__title a {
-  margin-right: var(--pf-global--spacer--sm);
+.ws-release-notes-toc .pf-v5-c-card__title a {
+  margin-right: var(--pf-v5-global--spacer--sm);
 }
 
-.ws-release-notes-toc .pf-c-card__title .pf-c-badge {
+.ws-release-notes-toc .pf-v5-c-card__title .pf-v5-c-badge {
   vertical-align: text-top;
 }
 
-.ws-release-notes-toc .pf-c-card__body {
+.ws-release-notes-toc .pf-v5-c-card__body {
   color: #72767B;
   font-family: RedHatText;
-  font-size: var(--pf-global--FontSize--md);
+  font-size: var(--pf-v5-global--FontSize--md);
   font-weight: 400;
   line-height: 1.5;
 }
 
 .ws-code {
   display: inline-block;
-  background-color: var(--pf-global--BackgroundColor--100);
-  padding: 1px var(--pf-global--spacer--sm);
-  border: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--300);
+  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);
   white-space: pre-wrap;
-  font-size: var(--pf-global--FontSize--sm);
-  font-family: var(--pf-global--FontFamily--monospace);
+  font-size: var(--pf-v5-global--FontSize--sm);
+  font-family: var(--pf-v5-global--FontFamily--monospace);
 }
 
 .ws-p + .ws-code {
-  margin-bottom: var(--pf-c-content--MarginBottom);
+  margin-bottom: var(--pf-v5-c-content--MarginBottom);
 }
 
 /* Table styles */
@@ -78,86 +78,86 @@
 }
 
 /*
- * Copied from pf-c-content.
+ * Copied from pf-v5-c-content.
  */
 :root {
-  --pf-c-content--MarginBottom: var(--pf-global--spacer--md);
-  --pf-c-content--LineHeight: var(--pf-global--LineHeight--md);
-  --pf-c-content--FontSize: var(--pf-global--FontSize--md);
-  --pf-c-content--FontWeight: var(--pf-global--FontWeight--normal);
-  --pf-c-content--Color: var(--pf-global--Color--100);
-  --pf-c-content--heading--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
-  --pf-c-content--h1--MarginTop: var(--pf-global--spacer--lg);
-  --pf-c-content--h1--MarginBottom: var(--pf-global--spacer--sm);
-  --pf-c-content--h1--LineHeight: var(--pf-global--LineHeight--sm);
-  --pf-c-content--h1--FontSize: var(--pf-global--FontSize--2xl);
-  --pf-c-content--h1--FontWeight: var(--pf-global--FontWeight--normal);
-  --pf-c-content--h2--MarginTop: var(--pf-global--spacer--lg);
-  --pf-c-content--h2--MarginBottom: var(--pf-global--spacer--sm);
-  --pf-c-content--h2--LineHeight: var(--pf-global--LineHeight--sm);
-  --pf-c-content--h2--FontSize: var(--pf-global--FontSize--xl);
-  --pf-c-content--h2--FontWeight: var(--pf-global--FontWeight--normal);
-  --pf-c-content--h3--MarginTop: var(--pf-global--spacer--lg);
-  --pf-c-content--h3--MarginBottom: var(--pf-global--spacer--sm);
-  --pf-c-content--h3--LineHeight: var(--pf-global--LineHeight--md);
-  --pf-c-content--h3--FontSize: var(--pf-global--FontSize--lg);
-  --pf-c-content--h3--FontWeight: var(--pf-global--FontWeight--normal);
-  --pf-c-content--h4--MarginTop: var(--pf-global--spacer--lg);
-  --pf-c-content--h4--MarginBottom: var(--pf-global--spacer--sm);
-  --pf-c-content--h4--LineHeight: var(--pf-global--LineHeight--md);
-  --pf-c-content--h4--FontSize: var(--pf-global--FontSize--md);
-  --pf-c-content--h4--FontWeight: var(--pf-global--FontWeight--semi-bold);
-  --pf-c-content--h5--MarginTop: var(--pf-global--spacer--lg);
-  --pf-c-content--h5--MarginBottom: var(--pf-global--spacer--sm);
-  --pf-c-content--h5--LineHeight: var(--pf-global--LineHeight--md);
-  --pf-c-content--h5--FontSize: var(--pf-global--FontSize--md);
-  --pf-c-content--h5--FontWeight: var(--pf-global--FontWeight--semi-bold);
-  --pf-c-content--h6--MarginTop: var(--pf-global--spacer--lg);
-  --pf-c-content--h6--MarginBottom: var(--pf-global--spacer--sm);
-  --pf-c-content--h6--LineHeight: var(--pf-global--LineHeight--md);
-  --pf-c-content--h6--FontSize: var(--pf-global--FontSize--md);
-  --pf-c-content--h6--FontWeight: var(--pf-global--FontWeight--semi-bold);
-  --pf-c-content--small--MarginBottom: var(--pf-global--spacer--md);
-  --pf-c-content--small--LineHeight: var(--pf-global--LineHeight--md);
-  --pf-c-content--small--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-content--small--Color: var(--pf-global--Color--200);
-  --pf-c-content--small--FontWeight: var(--pf-global--FontWeight--semi-bold);
-  --pf-c-content--a--Color: var(--pf-global--link--Color);
-  --pf-c-content--a--TextDecoration: var(--pf-global--link--TextDecoration);
-  --pf-c-content--a--hover--Color: var(--pf-global--link--Color--hover);
-  --pf-c-content--a--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover);
-  --pf-c-content--blockquote--PaddingTop: var(--pf-global--spacer--md);
-  --pf-c-content--blockquote--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-content--blockquote--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-content--blockquote--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-content--blockquote--FontWeight: var(--pf-global--FontWeight--light);
-  --pf-c-content--blockquote--Color: var(--pf-global--Color--200);
-  --pf-c-content--blockquote--BorderLeftColor: var(--pf-global--BorderColor--100);
-  --pf-c-content--blockquote--BorderLeftWidth: var(--pf-global--BorderWidth--lg);
-  --pf-c-content--ol--PaddingLeft: var(--pf-global--spacer--lg);
-  --pf-c-content--ol--MarginTop: var(--pf-global--spacer--md);
-  --pf-c-content--ol--MarginLeft: var(--pf-global--spacer--lg);
-  --pf-c-content--ol--nested--MarginTop: var(--pf-global--spacer--sm);
-  --pf-c-content--ol--nested--MarginLeft: var(--pf-global--spacer--sm);
-  --pf-c-content--ul--PaddingLeft: var(--pf-global--spacer--lg);
-  --pf-c-content--ul--MarginTop: var(--pf-global--spacer--md);
-  --pf-c-content--ul--MarginLeft: var(--pf-global--spacer--lg);
-  --pf-c-content--ul--nested--MarginTop: var(--pf-global--spacer--sm);
-  --pf-c-content--ul--nested--MarginLeft: var(--pf-global--spacer--sm);
-  --pf-c-content--ul--ListStyle: var(--pf-global--ListStyle);
-  --pf-c-content--li--MarginTop: var(--pf-global--spacer--sm);
-  --pf-c-content--dl--ColumnGap: var(--pf-global--spacer--2xl);
-  --pf-c-content--dl--RowGap: var(--pf-global--spacer--md);
-  --pf-c-content--dt--FontWeight: var(--pf-global--FontWeight--semi-bold);
-  --pf-c-content--dt--MarginTop: var(--pf-global--spacer--md);
-  --pf-c-content--dt--sm--MarginTop: 0;
-  --pf-c-content--hr--Height: var(--pf-global--BorderWidth--sm);
-  --pf-c-content--hr--BackgroundColor: var(--pf-global--BorderColor--100);
-  font-size: var(--pf-c-content--FontSize);
-  line-height: var(--pf-c-content--LineHeight);
-  color: var(--pf-c-content--Color); }
+  --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--sans-serif);
+  --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-c-content--li--MarginTop); }
+  margin-top: var(--pf-v5-c-content--li--MarginTop); }
 .ws-p:not(:last-child),
 .ws-dl:not(:last-child),
 .ws-ol:not(:last-child),
@@ -168,7 +168,7 @@
 .ws-hr:not(:last-child),
 .ws-table:not(:last-child),
 .ws-content-table:not(:last-child) {
-  margin-bottom: var(--pf-c-content--MarginBottom); }
+  margin-bottom: var(--pf-v5-c-content--MarginBottom); }
 .ws-h1,
 .ws-h2,
 .ws-h3,
@@ -176,104 +176,104 @@
 .ws-h5,
 .ws-h6 {
   margin: 0;
-  font-family: var(--pf-c-content--heading--FontFamily); }
+  font-family: var(--pf-v5-c-content--heading--FontFamily); }
 .ws-ol,
 .ws-ul {
   margin: 0; }
 .ws-h1 {
-  margin-bottom: var(--pf-c-content--h1--MarginBottom);
-  font-size: var(--pf-c-content--h1--FontSize);
-  font-weight: var(--pf-c-content--h1--FontWeight);
-  line-height: var(--pf-c-content--h1--LineHeight); }
+  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-c-content--h1--MarginTop); }
+    margin-top: var(--pf-v5-c-content--h1--MarginTop); }
 .ws-h2 {
-  margin-bottom: var(--pf-c-content--h2--MarginBottom);
-  font-size: var(--pf-c-content--h2--FontSize);
-  font-weight: var(--pf-c-content--h2--FontWeight);
-  line-height: var(--pf-c-content--h2--LineHeight); }
+  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); }
   .ws-h2:not(:first-child) {
-    margin-top: var(--pf-c-content--h2--MarginTop); }
+    margin-top: var(--pf-v5-c-content--h2--MarginTop); }
 .ws-h3 {
-  margin-bottom: var(--pf-c-content--h3--MarginBottom);
-  font-size: var(--pf-c-content--h3--FontSize);
-  font-weight: var(--pf-c-content--h3--FontWeight);
-  line-height: var(--pf-c-content--h3--LineHeight); }
+  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-c-content--h3--MarginTop); }
+    margin-top: var(--pf-v5-c-content--h3--MarginTop); }
 .ws-h4 {
-  margin-bottom: var(--pf-c-content--h4--MarginBottom);
-  font-size: var(--pf-c-content--h4--FontSize);
-  font-weight: var(--pf-c-content--h4--FontWeight);
-  line-height: var(--pf-c-content--h4--LineHeight); }
+  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-c-content--h4--MarginTop); }
+    margin-top: var(--pf-v5-c-content--h4--MarginTop); }
 .ws-h5 {
-  margin-bottom: var(--pf-c-content--h5--MarginBottom);
-  font-size: var(--pf-c-content--h5--FontSize);
-  font-weight: var(--pf-c-content--h5--FontWeight);
-  line-height: var(--pf-c-content--h5--LineHeight); }
+  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-c-content--h5--MarginTop); }
+    margin-top: var(--pf-v5-c-content--h5--MarginTop); }
 .ws-h6 {
-  margin-bottom: var(--pf-c-content--h6--MarginBottom);
-  font-size: var(--pf-c-content--h6--FontSize);
-  font-weight: var(--pf-c-content--h6--FontWeight);
-  line-height: var(--pf-c-content--h6--LineHeight); }
+  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-c-content--h6--MarginTop); }
+    margin-top: var(--pf-v5-c-content--h6--MarginTop); }
 .ws-small {
   display: block;
-  font-size: var(--pf-c-content--small--FontSize);
-  line-height: var(--pf-c-content--small--LineHeight);
-  color: var(--pf-c-content--small--Color); }
+  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-c-content--small--MarginBottom); }
+    margin-bottom: var(--pf-v5-c-content--small--MarginBottom); }
 .ws-blockquote {
-  padding: var(--pf-c-content--blockquote--PaddingTop) var(--pf-c-content--blockquote--PaddingRight) var(--pf-c-content--blockquote--PaddingBottom) var(--pf-c-content--blockquote--PaddingLeft);
-  font-weight: var(--pf-c-content--blockquote--FontWeight);
-  color: var(--pf-c-content--blockquote--Color);
-  border-left: var(--pf-c-content--blockquote--BorderLeftWidth) solid var(--pf-c-content--blockquote--BorderLeftColor); }
+  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-c-content--hr--Height);
-  background-color: var(--pf-c-content--hr--BackgroundColor);
+  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-c-content--ol--PaddingLeft);
-  margin-top: var(--pf-c-content--ol--MarginTop);
-  margin-left: var(--pf-c-content--ol--MarginLeft); }
+  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-c-content--ul--MarginTop: var(--pf-c-content--ul--nested--MarginTop);
-    --pf-c-content--ul--MarginLeft: var(--pf-c-content--ul--nested--MarginLeft); }
+    --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-c-content--ol--MarginTop: var(--pf-c-content--ol--nested--MarginTop);
-    --pf-c-content--ol--MarginLeft: var(--pf-c-content--ol--nested--MarginLeft); }
+    --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-c-content--ul--PaddingLeft);
-  margin-top: var(--pf-c-content--ul--MarginTop);
-  margin-left: var(--pf-c-content--ul--MarginLeft);
-  list-style: var(--pf-c-content--ul--ListStyle); }
+  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-c-content--ul--MarginTop: var(--pf-c-content--ul--nested--MarginTop);
-    --pf-c-content--ul--MarginLeft: var(--pf-c-content--ul--nested--MarginLeft); }
+    --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-c-content--ol--MarginTop: var(--pf-c-content--ol--nested--MarginTop);
-    --pf-c-content--ol--MarginLeft: var(--pf-c-content--ol--nested--MarginLeft); }
+    --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-c-content--dl--ColumnGap);
-      grid-row-gap: var(--pf-c-content--dl--RowGap); } }
+      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-c-content--dt--FontWeight); }
+  font-weight: var(--pf-v5-c-content--dt--FontWeight); }
   .ws-dt:not(:first-child) {
-    margin-top: var(--pf-c-content--dt--MarginTop); }
+    margin-top: var(--pf-v5-c-content--dt--MarginTop); }
     @media screen and (min-width: 576px) {
       .ws-dt:not(:first-child) {
-        --pf-c-content--dt--MarginTop: var(--pf-c-content--dt--sm--MarginTop); } }
+        --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; } }
@@ -297,11 +297,6 @@
   max-width: 832px;
 }
 
-.ws-mdx-content-katacoda {
-  flex-grow: 1;
-  padding: 0;
-}
-
 /* Overlay the footer */
 .ws-back-to-top {
   z-index: 2;

package/templates/mdx.js

@@ -7,12 +7,14 @@ import { CSSVariables, PropsTable, TableOfContents, Link, AutoLinkHeader, Inline
 import { capitalize, getTitle, slugger, trackEvent } from '../helpers';
 import './mdx.css';
 import { convertToReactComponent } from '@patternfly/ast-helpers';
+import { FunctionsTable } from '../components/functionsTable/functionsTable';
 
 const MDXChildTemplate = ({
   Component,
   source,
   toc = [],
-  index = 0
+  index = 0,
+  id
 }) => {
   const {
     propComponents = [],
@@ -20,8 +22,7 @@ const MDXChildTemplate = ({
     cssPrefix = [],
     optIn,
     beta,
-    katacodaBroken,
-    katacodaLayout
+    functionDocumentation = []
   } = Component.getPageData();
   const cssVarsTitle = cssPrefix.length > 0 && 'CSS variables';
   const propsTitle = propComponents.length > 0 && 'Props';
@@ -59,23 +60,27 @@ const MDXChildTemplate = ({
           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.
         </InlineAlert>
       )}
-      {katacodaBroken && (
-        <InlineAlert variant="warning" title="Down for maintenance">
-          The embedded version of our tutorials are broken, but you can still access our tutorials on <a href="https://www.katacoda.com/patternfly">Katacoda.com <ExternalLinkAltIcon /></a>.
-        </InlineAlert>
-      )}
     </React.Fragment>
   );
+  console.log(id);
   // Create dynamic component for @reach/router
   const ChildComponent = () => (
-    <div className="pf-u-display-flex ws-mdx-child-template">
+    <div className="pf-v5-u-display-flex ws-mdx-child-template">
       {toc.length > 1 && (
         <TableOfContents items={toc} />
       )}
-      <div className={katacodaLayout? "ws-mdx-content-katacoda" : "ws-mdx-content"}>
-        <div className={katacodaLayout ? "" : "ws-mdx-content-content"}>
+      <div className="ws-mdx-content">
+        <div className={id === 'All components' ? "" : "ws-mdx-content-content"}>
           {InlineAlerts}
           <Component />
+          {functionDocumentation.length > 0 && (
+            <React.Fragment>
+              <AutoLinkHeader size="h2" className="ws-h2" id="functions">
+                Functions
+              </AutoLinkHeader>
+              <FunctionsTable functionDescriptions={functionDocumentation}/>
+            </React.Fragment>
+          )}
           {propsTitle && (
             <React.Fragment>
               <AutoLinkHeader size="h2" className="ws-h2" id="props">
@@ -100,7 +105,7 @@ const MDXChildTemplate = ({
               <CSSVariables prefix={cssPrefix} />
             </React.Fragment>
           )}
-          {!katacodaLayout && sourceLink && (
+          {sourceLink && (
             <React.Fragment>
               <br />
               <a href={sourceLink} target="_blank" onClick={() => trackEvent('view_source_click', 'click_event', source.toUpperCase())}>View source on GitHub</a>
@@ -121,7 +126,15 @@ export const MDXTemplate = ({
   id,
   componentsData
 }) => {
-  const sourceKeys = sources.map(v => v.source);
+  // Build obj mapping source names to text displayed on tabs
+  const tabNames = sources.reduce((acc, curSrc) => {
+    const { source, tabName } = curSrc;
+    // use tabName for tab name if present, otherwise default to source
+    const tabLinkText = tabName || capitalize(source.replace('html', 'HTML').replace(/-/g, ' '));
+    acc[source] = tabLinkText;
+    return acc;
+  }, {});
+  const sourceKeys = Object.keys(tabNames);
   const isSinglePage = sourceKeys.length === 1;
 
   let isDevResources, isComponent, isExtension, isChart, isDemo, isLayout, isUtility;
@@ -159,7 +172,6 @@ export const MDXTemplate = ({
     (e) => e.includes("pages") || e.includes("training")
   );
   const { pathname } = useLocation();
-  const { katacodaLayout } = sources[0].Component.getPageData();
   let activeSource = pathname.replace(/\/$/, '').split('/').pop();
   // get summary text, convert to JSX to display above tabs on component pages
   const componentDasherized = id.split(' ').join('-').toLowerCase();
@@ -192,6 +204,14 @@ export const MDXTemplate = ({
     return "pf-m-light-100";
   };
 
+  const showTabs = (
+    (!isSinglePage && !hideTabName) ||
+    isComponent ||
+    isUtility ||
+    isDemo
+  );
+
+  console.log(id);
   return (
     <React.Fragment>
       <PageGroup>
@@ -201,40 +221,37 @@ export const MDXTemplate = ({
           isWidthLimited
         >
           <TextContent>
-          {!katacodaLayout && <Title headingLevel='h1' size='4xl' id="ws-page-title">{title}</Title>}
-          {isComponent && summary && (<SummaryComponent />)}
+            <Title headingLevel='h1' size='4xl' id="ws-page-title">{title}</Title>
+            {isComponent && summary && (<SummaryComponent />)}
           </TextContent>
         </PageSection>
-        {((!isSinglePage && !hideTabName) ||
-          isComponent ||
-          isUtility ||
-          isDemo) && (
-            <PageSection id="ws-sticky-nav-tabs" stickyOnBreakpoint={{'default':'top'}} type="tabs">
-              <div className="pf-c-tabs pf-m-page-insets pf-m-no-border-bottom">
-                <ul className="pf-c-tabs__list">
-                  {sourceKeys.map((source, index) => (
-                    <li
-                      key={source}
-                      className={css(
-                        'pf-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-c-tabs__link" to={`${path}${index === 0 ? '' : '/' + source}`}>
-                        {capitalize(source.replace('html', 'HTML').replace(/-/g, ' '))}
-                      </Link>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            </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">
+                {sourceKeys.map((source, index) => (
+                  <li
+                    key={source}
+                    className={css(
+                      'pf-v5-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}`}>
+                      {tabNames[source]}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </PageSection>
         )}
         <PageSection id="main-content" isFilled className="pf-m-light-100">
-          {isSinglePage && <MDXChildTemplate {...sources[0]} />}
+          {isSinglePage && <MDXChildTemplate {...sources[0]} id={id}/>}
           {!isSinglePage && (
-            <Router className="pf-u-h-100" primary={false}>
+            <Router className="pf-v5-u-h-100" primary={false}>
               {sources
                 .map((source, index) => {
                   source.index = index;

package/templates/patternfly-docs/content/extensions/extension/design-guidelines/design-guidelines.md

@@ -7,6 +7,8 @@ section: extensions
 id: My extension
 # Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
 source: design-guidelines
+# Optional custom text to display in tab in place of source
+tabName: My custom tab-name
 ---
 
 Design guidelines intro

package/templates/patternfly-docs/content/extensions/extension/examples/basic.md

@@ -7,6 +7,8 @@ section: extensions
 id: My extension
 # Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
 source: react
+# Optional custom text to display in tab in place of source
+tabName: My custom tab-name
 # If you use typescript, the name of the interface to display props for
 # These are found through the sourceProps function provdided in patternfly-docs.source.js
 # Can also pass object { component: string, source: string } allowing to specify the source