@patternfly/documentation-framework 2.0.0-alpha.6 → 2.0.0-alpha.61

package/components/cssVariables/cssVariables.js

@@ -2,12 +2,13 @@ import React from "react";
 import { debounce } from "@patternfly/react-core";
 import {
   Table,
-  TableHeader,
-  TableBody,
-  sortable,
-  SortByDirection,
-  expandable
+  Thead,
+  Th,
+  Tr,
+  Tbody,
+  Td
 } from "@patternfly/react-table";
+import { AutoLinkHeader } from "../autoLinkHeader/autoLinkHeader";
 import * as tokensModule from "@patternfly/react-tokens/dist/esm/componentIndex";
 import global_spacer_md from "@patternfly/react-tokens/dist/esm/global_spacer_md";
 import LevelUpAltIcon from "@patternfly/react-icons/dist/esm/icons/level-up-alt-icon";
@@ -42,15 +43,17 @@ const flattenList = files => {
   let list = [];
   files.forEach(file => {
     Object.entries(file).forEach(([selector, values]) => {
-      Object.entries(values).forEach(([key, val]) => {
-        list.push({
-          selector,
-          property: val.name,
-          token: key,
-          value: val.value,
-          values: val.values
+      if(values !== undefined) {
+        Object.entries(values).forEach(([key, val]) => {
+          list.push({
+            selector,
+            property: val.name,
+            token: key,
+            value: val.value,
+            values: val.values
+          });
         });
-      });
+      }
     });
   });
   return list;
@@ -59,12 +62,9 @@ const flattenList = files => {
 export class CSSVariables extends React.Component {
   constructor(props) {
     super(props);
-    // Ensure array in case of multiple prefixes
-    this.prefix =
-      typeof props.prefix === "string" ? [props.prefix] : props.prefix;
-    const prefixTokens = this.prefix.map(prefix => prefix.replace("pf-", "").replace(/-+/g, "_"));
+    const prefixToken = props.prefix.replace("pf-v5-", "").replace(/-+/g, "_");
     const applicableFiles = Object.entries(tokensModule)
-      .filter(([key, val]) => prefixTokens.includes(key))
+      .filter(([key, val]) => prefixToken === key)
       .sort(([key1], [key2]) => key1.localeCompare(key2))
       .map(([key, val]) => {
         if (props.selector) {
@@ -77,23 +77,10 @@ export class CSSVariables extends React.Component {
 
     this.flatList = flattenList(applicableFiles);
 
-    this.columns = [
-      ...props.hideSelectorColumn ? [] : [{
-         title: "Selector",
-         transforms: [sortable],
-         cellFormatters: [expandable]
-      }],
-      { title: "Variable", transforms: [sortable] },
-      { title: "Value", transforms: [sortable] }
-    ]
-
     this.state = {
       searchRE: '',
       rows: this.getFilteredRows(),
-      sortBy: {
-        index: 0,
-        direction: "asc" // a-z
-      }
+      allRowsExpanded: true
     };
   }
 
@@ -116,12 +103,12 @@ export class CSSVariables extends React.Component {
           <div key={rowKey}>
             <div
               key={`${rowKey}_1`}
-              className="pf-l-flex pf-m-space-items-sm"
+              className="pf-v5-l-flex pf-m-space-items-sm"
             >
               {isColorRegex.test(value) && (
                 <div
                   key={`${rowKey}_2`}
-                  className="pf-l-flex pf-m-column pf-m-align-self-center"
+                  className="pf-v5-l-flex pf-m-column pf-m-align-self-center"
                 >
                   <span
                     className="ws-color-box"
@@ -131,7 +118,7 @@ export class CSSVariables extends React.Component {
               )}
               <div
                 key={`${rowKey}_3`}
-                className="pf-l-flex pf-m-column pf-m-align-self-center ws-td-text"
+                className="pf-v5-l-flex pf-m-column pf-m-align-self-center ws-td-text"
               >
                 {value}
               </div>
@@ -140,20 +127,16 @@ export class CSSVariables extends React.Component {
         ];
         filteredRows.push({
           isOpen: values ? false : undefined,
-          cells
+          cells,
+          details: values ? {
+            parent: rowNumber,
+            fullWidth: true,
+            data: mappingAsList(property, values)
+          } : undefined
         });
         rowNumber += 1;
         if (values) {
-          filteredRows.push({
-            parent: rowNumber,
-            fullWidth: true,
-            cells: [
-              {
-                title: mappingAsList(property, values)
-              }
-            ]
-          });
-          rowNumber += 1;
+          rowNumber += 1
         }
       }
     });
@@ -170,9 +153,10 @@ export class CSSVariables extends React.Component {
     } else {
       newRows[rowKey] = { ...newRows[rowKey], isOpen };
     }
-    this.setState({
+    this.setState(prevState => ({
       rows: newRows,
-    });
+      ...(collapseAll && {allRowsExpanded: !prevState.allRowsExpanded})
+    }));
   };
 
   getDebouncedFilteredRows = debounce(value => {
@@ -183,49 +167,64 @@ export class CSSVariables extends React.Component {
     });
   }, 500);
 
-  onSort = (_event, index, direction) => {
-    this.flatList = this.flatList.sort((a, b) => {
-      const indexToColMap = {
-        '1': 'selector',
-        '2': 'property',
-        '3': 'value'
-      };
-      const column = indexToColMap[index];
-      if (direction === SortByDirection.asc) {
-        return a[column] < b[column] ? -1 : a[column] > b[column] ? 1 : 0;
-      } else {
-        return a[column] > b[column] ? -1 : a[column] < b[column] ? 1 : 0;
-      }
-    });
-    this.setState({
-      sortBy: {
-        index,
-        direction
-      },
-      rows: this.getFilteredRows(this.state.searchRE)
-    });
-  };
-
   render() {
     return (
       <React.Fragment>
+        {this.props.autoLinkHeader && <AutoLinkHeader size="h3" className="pf-v5-u-mt-lg pf-v5-u-mb-md">{`Prefixed with '${this.props.prefix}'`}</AutoLinkHeader>}
         <CSSSearch getDebouncedFilteredRows={this.getDebouncedFilteredRows} />
         <Table
           variant="compact"
-          aria-label={`CSS Variables for prefixes ${this.prefix.join(" ")}`}
-          sortBy={this.state.sortBy}
-          onSort={this.onSort}
-          cells={this.columns}
-          rows={this.state.rows}
-          onCollapse={this.onCollapse}
-          canCollapseAll={true}
-          collapseAllAriaLabel="expand all css variables"
-          gridBreakPoint="grid-lg"
-          contentId="css-variables-content"
-          expandId="css-variables-toggle"
+          aria-label={`CSS Variables prefixed with ${this.props.prefix}`}
         >
-          <TableHeader />
-          <TableBody />
+          <Thead>
+            <Tr>
+              {!this.props.hideSelectorColumn && (
+                <React.Fragment>
+                  <Th />
+                  <Th>Selector</Th>
+                </React.Fragment>
+              )}
+              <Th>Variable</Th>
+              <Th>Value</Th>
+            </Tr>
+          </Thead>
+          {!this.props.hideSelectorColumn ? (
+            this.state.rows.map((row, rowIndex) => (
+              <Tbody key={rowIndex} isExpanded={row.isOpen}>
+                <Tr>
+                  <Td
+                    expand={
+                      row.details
+                        ? {
+                          rowIndex,
+                          isExpanded: row.isOpen,
+                          onToggle: this.onCollapse,
+                          expandId: `css-vars-expandable-toggle-${this.props.prefix}`
+                        }
+                        : undefined
+                    }
+                  />
+                  <Td dataLabel="Selector">{row.cells[0]}</Td>
+                  <Td dataLabel="Variable">{row.cells[1]}</Td>
+                  <Td dataLabel="Value">{row.cells[2]}</Td>
+                </Tr>
+                {row.details ? (
+                  <Tr isExpanded={row.isOpen}>
+                    {!row.details.fullWidth ? <Td /> : null}
+                    <Td dataLabel="Selector" colSpan={5}>{row.details.data}</Td>
+                  </Tr>
+                ) : null}
+              </Tbody>
+            ))) : (
+              <Tbody>
+                {this.state.rows.map((row, rowIndex) => (
+                  <Tr key={rowIndex}>
+                    <Td dataLabel="Variable">{row.cells[0]}</Td>
+                    <Td dataLabel="Value">{row.cells[1]}</Td>
+                  </Tr>
+                ))}
+              </Tbody>
+          )}
         </Table>
       </React.Fragment>
     );

package/components/example/example.css

@@ -3,52 +3,52 @@
 }
 
 .ws-example {
-  margin-top: var(--pf-global--spacer--lg);
-  margin-bottom: var(--pf-global--spacer--lg);
+  margin-top: var(--pf-v5-global--spacer--lg);
+  margin-bottom: var(--pf-v5-global--spacer--lg);
 }
 
 .ws-example > .ws-example-header {
-  padding: var(--pf-global--spacer--md);
+  padding: var(--pf-v5-global--spacer--md);
 }
 
 .ws-example-header > .ws-example-heading:not(:last-child) {
-  margin-bottom: var(--pf-global--spacer--md);
+  margin-bottom: var(--pf-v5-global--spacer--md);
 }
 
-.ws-code-editor:not(.ws-example-code-expanded) > .pf-c-code-editor__header::before {
-  --pf-c-code-editor__header--before--BorderBottomWidth: 0;
+.ws-code-editor:not(.ws-example-code-expanded) > .pf-v5-c-code-editor__header::before {
+  --pf-v5-c-code-editor__header--before--BorderBottomWidth: 0;
 }
 
 .ws-code-editor-control {
-  --pf-c-button--m-control--BackgroundColor: transparent;
-  --pf-c-button--m-control--active--BackgroundColor: transparent;
-  --pf-c-button--m-control--focus--BackgroundColor: transparent;
-  --pf-c-button--m-control--hover--BackgroundColor: transparent;
+  --pf-v5-c-button--m-control--BackgroundColor: transparent;
+  --pf-v5-c-button--m-control--active--BackgroundColor: transparent;
+  --pf-v5-c-button--m-control--focus--BackgroundColor: transparent;
+  --pf-v5-c-button--m-control--hover--BackgroundColor: transparent;
 }
 
-.ws-code-editor-control.pf-c-button {
-  --pf-c-button--after--BorderWidth: 0;
+.ws-code-editor-control.pf-v5-c-button {
+  --pf-v5-c-button--after--BorderWidth: 0;
 }
 
 .ws-preview {
-  padding: var(--pf-global--spacer--md);
-  background-color: var(--pf-global--BackgroundColor--100);
-  border-bottom: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--300);
+  padding: var(--pf-v5-global--spacer--md);
+  background-color: var(--pf-v5-global--BackgroundColor--100);
+  border-bottom: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--300);
   transition: width .2s ease-in-out;
 }
 
 .ws-core-c-page.ws-preview > .ws-preview-html,
-.ws-react-c-page.ws-preview > .pf-c-page {
+.ws-react-c-page.ws-preview > .pf-v5-c-page {
   overflow: hidden;
 }
 
 .ws-editor {
-  font-size: var(--pf-global--FontSize--md);
+  font-size: var(--pf-v5-global--FontSize--md);
 }
 
 .ws-editor .token.punctuation,
 .ws-editor .token.operator {
-  color: var(--pf-global--danger-color--100);
+  color: var(--pf-v5-global--danger-color--100);
 }
 
 .ws-preview__thumbnail-link {
@@ -100,22 +100,22 @@
   color: rgba(255,255,255,.4);
 }
 
-.pf-c-badge.ws-beta-badge {
-  --pf-c-badge--m-unread--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-badge--m-unread--Color: var(--pf-global--primary-color--100);
-  border: var(--pf-global--BorderWidth--sm) solid var(--pf-global--primary-color--100);
+.pf-v5-c-badge.ws-beta-badge {
+  --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+  --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--primary-color--100);
+  border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--primary-color--100);
 }
 
 .ws-prop-required {
-  color: var(--pf-global--danger-color--100);
+  color: var(--pf-v5-global--danger-color--100);
 }
 
 .ws-theme-switch-full-page {
   position: fixed;
   right: 0;
   bottom: 0;
-  padding: var(--pf-global--spacer--md);
-  z-index: var(--pf-global--ZIndex--2xl);
+  padding: var(--pf-v5-global--spacer--md);
+  z-index: var(--pf-v5-global--ZIndex--2xl);
 }
 
 .ws-theme-switch-full-page::before {
@@ -125,11 +125,11 @@
   content: "";
   width: 100%;
   height: 100%;
-  background-color: var(--pf-global--BackgroundColor--100);
+  background-color: var(--pf-v5-global--BackgroundColor--100);
   opacity: 0.8;
-  box-shadow: var(--pf-global--BoxShadow--sm);
+  box-shadow: var(--pf-v5-global--BoxShadow--sm);
 }
 
-.pf-theme-dark .ws-theme-switch-full-page::before {
-  background-color: var(--pf-global--BackgroundColor--300);
+.pf-v5-theme-dark .ws-theme-switch-full-page::before {
+  background-color: var(--pf-v5-global--BackgroundColor--300);
 }

package/components/example/example.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useLocation } from '@reach/router';
-import { Badge, CodeBlock, CodeBlockCode, debounce, Switch } from '@patternfly/react-core';
+import { Button, CodeBlock, CodeBlockCode, debounce, Label, Switch, Tooltip } from '@patternfly/react-core';
 import * as reactCoreModule from '@patternfly/react-core';
 import * as reactCoreNextModule from '@patternfly/react-core/next';
 import * as reactCoreDeprecatedModule from '@patternfly/react-core/deprecated';
@@ -71,7 +71,11 @@ export const Example = ({
   // The image src thumbnail for the example
   thumbnail = missingThumbnail,
   // Whether the example shows demo capability
+  isDemo,
+  // Whether the example is open to further evolution
   isBeta,
+  // Whether the example is deprecated
+  isDeprecated,
   // Slugified source + title
   id,
   // Section in frontmatter of MD file (components, demos, etc)
@@ -119,7 +123,7 @@ export const Example = ({
   if (lang === 'html') {
     livePreview = (
       <div
-        className={css('ws-preview-html', isFullscreenPreview && 'pf-u-h-100')}
+        className={css('ws-preview-html', isFullscreenPreview && 'pf-v5-u-h-100')}
         dangerouslySetInnerHTML={{ __html: editorCode }}
       />
     );
@@ -152,12 +156,12 @@ export const Example = ({
 
   if (isFullscreenPreview) {
     return (
-      <div id={previewId} className={css(className, 'pf-u-h-100')}>
+      <div id={previewId} className={css(className, 'pf-v5-u-h-100')}>
         {livePreview}
         {hasDarkThemeSwitcher && (
           <div className="ws-theme-switch-full-page">
             <Switch id="ws-theme-switch" label="Dark theme" defaultChecked={false} onChange={() =>
-            document.querySelector('html').classList.toggle('pf-theme-dark')} />
+            document.querySelector('html').classList.toggle('pf-v5-theme-dark')} />
           </div>
         )}
       </div>
@@ -173,12 +177,36 @@ export const Example = ({
     + (loc.pathname.endsWith(source) ? '' : `/${source}`)
     + '/'
     + slugger(title);
-    
+
   return (
     <div className="ws-example">
       <div className="ws-example-header">
         <AutoLinkHeader
-          metaText={isBeta && <Badge className="ws-beta-badge pf-u-ml-xs">Beta</Badge>}
+          metaText={
+            <React.Fragment>
+              {isBeta && (
+                <Tooltip content="This beta component is currently under review and is still open for further evolution.">
+                  <Button variant="plain">
+                    <Label isCompact color="blue">Beta</Label>
+                  </Button>
+                </Tooltip>
+              )}
+              {isDemo && (
+                <Tooltip content="Demos show how multiple components can be used in a single design.">
+                  <Button variant="plain">
+                    <Label isCompact color="purple">Demo</Label>
+                  </Button>
+                </Tooltip>
+              )}
+              {isDeprecated && (
+                <Tooltip content="Deprecated components are available for use but are no longer being maintained or enhanced.">
+                  <Button variant="plain">
+                    <Label isCompact color="grey">Deprecated</Label>
+                  </Button>
+                </Tooltip>
+              )}
+            </React.Fragment>
+          }
           size="h4"
           headingLevel="h3"
           className="ws-example-heading"

package/components/footer/footer.css

@@ -1,11 +1,11 @@
-.ws-org-pfsite-l-footer.pf-c-page__main-section {
-  font-family: "RedHatText";
+.ws-org-pfsite-l-footer.pf-v5-c-page__main-section {
+  font-family: var(--pf-v5-global--FontFamily--text);
   font-weight: 300;
   background-color: #1a1a1a !important;
-  --pf-c-page__main-section--PaddingTop: var(--pf-global--spacer--xl);
-  --pf-c-page__main-section--PaddingRight: var(--pf-global--spacer--2xl);
-  --pf-c-page__main-section--PaddingBottom: var(--pf-global--spacer--2xl);
-  --pf-c-page__main-section--PaddingLeft: var(--pf-global--spacer--2xl);
+  --pf-v5-c-page__main-section--PaddingTop: var(--pf-v5-global--spacer--xl);
+  --pf-v5-c-page__main-section--PaddingRight: var(--pf-v5-global--spacer--2xl);
+  --pf-v5-c-page__main-section--PaddingBottom: var(--pf-v5-global--spacer--2xl);
+  --pf-v5-c-page__main-section--PaddingLeft: var(--pf-v5-global--spacer--2xl);
   /* Hide long overflowing tocs */
   z-index: 1;
 }
@@ -34,8 +34,8 @@
   }
 }
 .ws-org-pfsite-l-footer-column .ws-org-pfsite-footer-menu-social-links a {
-  margin-right: var(--pf-global--spacer--md);
-  color: var(--pf-global--Color--light-100) !important;
+  margin-right: var(--pf-v5-global--spacer--md);
+  color: var(--pf-v5-global--Color--light-100) !important;
 }
 .ws-org-pfsite-l-footer-column
   .ws-org-pfsite-footer-menu-social-links
@@ -43,8 +43,8 @@
   margin-right: 0;
 }
 .ws-org-pfsite-l-footer-column .ws-org-pfsite-footer-menu-social-links {
-  margin-top: var(--pf-global--spacer--md);
-  margin-bottom: var(--pf-global--spacer--md);
+  margin-top: var(--pf-v5-global--spacer--md);
+  margin-bottom: var(--pf-v5-global--spacer--md);
 }
 @media (max-width: 768px) {
   .ws-org-pfsite-l-footer-column .ws-org-pfsite-footer-menu-social-links {
@@ -71,7 +71,7 @@
   padding-right: 10px;
 }
 .ws-org-pfsite-l-footer .ws-org-pfsite-footer-menu-link {
-  color: var(--pf-global--Color--light-100);
+  color: var(--pf-v5-global--Color--light-100);
   font-size: 14px !important;
 }
 .ws-org-pfsite-l-footer .ws-org-pfsite-footer-menu-link:hover {
@@ -86,19 +86,19 @@
 .ws-org-pfsite-l-footer-dark {
   background: #151515 !important;
 }
-.pf-c-page .pf-c-page__main-section.ws-org-pfsite-l-footer-dark {
+.pf-v5-c-page .pf-v5-c-page__main-section.ws-org-pfsite-l-footer-dark {
   /* Hide long overflowing tocs */
   z-index: 1;
 }
-.pf-c-page__main-section.ws-org-pfsite-l-footer-dark > * {
+.pf-v5-c-page__main-section.ws-org-pfsite-l-footer-dark > * {
   font-weight: 300;
   font-size: 12px;
   color: #d2d2d2;
 }
 .ws-org-pfsite-l-footer-dark a {
-  padding-right: var(--pf-global--spacer--sm);
-  padding-left: var(--pf-global--spacer--sm);
-  border-right: var(--pf-global--BorderWidth--sm) solid #d2d2d2;
+  padding-right: var(--pf-v5-global--spacer--sm);
+  padding-left: var(--pf-v5-global--spacer--sm);
+  border-right: var(--pf-v5-global--BorderWidth--sm) solid #d2d2d2;
   font-weight: 300;
   color: #d2d2d2;
   text-decoration: underline;

package/components/footer/footer.js

@@ -19,12 +19,12 @@ export const Footer = () => (
           sm={12}
           md={6}
           mdOffset={1}
-          className="pf-u-mb-lg pf-u-mb-0-on-sm"
+          className="pf-v5-u-mb-lg pf-v5-u-mb-0-on-sm"
         >
-          <Grid className="pf-u-py-xl">
-            <GridItem sm={6} md={4} className="pf-u-ml-md pf-u-ml-0-on-md pf-u-mb-xl pf-u-mb-0-on-md">
+          <Grid className="pf-v5-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">
               <p
-                className="pf-c-title ws-org-pfsite-footer-menu-list-title"
+                className="pf-v5-c-title ws-org-pfsite-footer-menu-list-title"
               >
                 QUICKLINKS
               </p>
@@ -82,10 +82,10 @@ export const Footer = () => (
             <GridItem
               sm={6}
               md={4}
-              className="pf-u-mt-lg pf-u-mt-0-on-sm pf-u-ml-md pf-u-ml-0-on-md pf-u-mb-xl pf-u-mb-0-on-md"
+              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"
             >
               <p
-                className="pf-c-title ws-org-pfsite-footer-menu-list-title"
+                className="pf-v5-c-title ws-org-pfsite-footer-menu-list-title"
               >
                 CONTRIBUTE
               </p>
@@ -125,7 +125,7 @@ export const Footer = () => (
             <GridItem
               sm={6}
               md={4}
-              className="pf-u-mt-lg pf-u-mt-0-on-md pf-u-ml-md pf-u-ml-0-on-md"
+              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"
             >
               <p
                 className="ws-org-pfsite-footer-menu-list-title"
@@ -180,10 +180,10 @@ export const Footer = () => (
           </Grid>
         </GridItem>
         <GridItem sm={12} md={4}>
-          <Grid className="pf-u-pt-xl ws-org-pfsite-l-footer-column">
-            <GridItem className="pf-u-px-xl">
+          <Grid className="pf-v5-u-pt-xl ws-org-pfsite-l-footer-column">
+            <GridItem className="pf-v5-u-px-xl">
               <Link
-                className="pf-c-page__header-brand-link pf-c-brand ws-org-pfsite-footer-menu-about-logo pf-u-pb-md"
+                className="pf-v5-c-page__header-brand-link pf-v5-c-brand ws-org-pfsite-footer-menu-about-logo pf-v5-u-pb-md"
                 to="/"
               >
                 <Brand src={logo} alt="Patternfly Logo" />
@@ -192,7 +192,7 @@ export const Footer = () => (
                 PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.
               </p>
             </GridItem>
-            <GridItem className="ws-org-pfsite-footer-menu-social-links pf-u-px-xl">
+            <GridItem className="ws-org-pfsite-footer-menu-social-links pf-v5-u-px-xl">
               <Link
                 to="//github.com/patternfly"
                 target="top"
@@ -213,7 +213,7 @@ export const Footer = () => (
       </Grid>
     </PageSection>
     <PageSection key="footer-2" className="ws-org-pfsite-l-footer-dark pf-m-no-fill">
-      <Grid className="pf-u-py-xl-on-sm pf-u-py-0-on-md pf-u-align-items-center">
+      <Grid className="pf-v5-u-py-xl-on-sm pf-v5-u-py-0-on-md pf-v5-u-align-items-center">
         <GridItem md={2} mdOffset={1}>
           <Link
             to="//www.redhat.com"
@@ -233,7 +233,7 @@ export const Footer = () => (
             Copyright &copy; 2022 Red Hat, Inc.
           </span>
         </GridItem>
-        <GridItem md={4} lg={5} className="pf-u-ml-xl-on-xl">
+        <GridItem md={4} lg={5} className="pf-v5-u-ml-xl-on-xl">
           <Link
             to="//www.redhat.com/en/about/privacy-policy"
             target="top"

package/components/functionsTable/functionsTable.js

@@ -0,0 +1,57 @@
+import React from "react";
+import {
+  Table,
+  Caption,
+  Thead,
+  Tr,
+  Th,
+  Tbody,
+  Td,
+} from "@patternfly/react-table";
+
+export const FunctionsTable = ({ functionDescriptions }) => {
+  const columnNames = {
+    name: "Function name",
+    description: "Description",
+    signature: "Type signature",
+    defaultValues: "Default parameter values",
+  };
+
+  const formatDefaultValues = (parameters) =>
+    parameters.map((param) => `${param.name}: ${param.default}; `);
+
+  return (
+    <Table
+      aria-label="Function documentation table"
+      variant="compact"
+    >
+      <Caption>Table showing documentation for relevant functions</Caption>
+      <Thead>
+        <Tr>
+          <Th>{columnNames.name}</Th>
+          <Th>{columnNames.signature}</Th>
+          <Th>{columnNames.defaultValues}</Th>
+          <Th>{columnNames.description}</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {functionDescriptions.map((functionDescription) => (
+          <Tr key={functionDescription.functionName}>
+            <Td dataLabel={columnNames.name}>
+              {functionDescription.functionName}
+            </Td>
+            <Td dataLabel={columnNames.signature}>
+              {functionDescription.type}
+            </Td>
+            <Td dataLabel={columnNames.defaultValues}>
+              {formatDefaultValues(functionDescription.params)}
+            </Td>
+            <Td dataLabel={columnNames.description}>
+              {functionDescription.description}
+            </Td>
+          </Tr>
+        ))}
+      </Tbody>
+    </Table>
+  );
+};

package/components/gdprBanner/gdprBanner.css

@@ -9,6 +9,6 @@
 #ws-gdpr-banner {
   max-width: 95vw;
   flex-wrap: nowrap;
-  background: var(--pf-global--BackgroundColor--100);
-  border: var(--pf-global--BorderWidth--sm) solid var(--pf-global--Color--100);
+  background: var(--pf-v5-global--BackgroundColor--100);
+  border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--Color--100);
 }