@patternfly/documentation-framework 2.0.0-alpha.7 → 2.0.0-alpha.71

package/components/autoLinkHeader/autoLinkHeader.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Title } from '@patternfly/react-core';
+import { Title, Flex, FlexItem } from '@patternfly/react-core';
 import LinkIcon from '@patternfly/react-icons/dist/esm/icons/link-icon';
 import { Link } from '../link/link';
 import { slugger } from '../../helpers/slugger';
@@ -25,17 +25,22 @@ export const AutoLinkHeader = ({
   const slug = id || slugger(children);
 
   return (
-    <Title
-      id={slug}
-      size={sizes[size]}
-      headingLevel={headingLevel || size}
-      className={`ws-heading ${className}`}
-      tabIndex={-1}
-    >
-      <Link href={`#${slug}`} className="ws-heading-anchor" tabIndex="-1" aria-hidden>
-        <LinkIcon className="ws-heading-anchor-icon" style={{ verticalAlign: 'middle' }} />
-      </Link>
-      {children} {metaText}
-    </Title>
+    <Flex alignItems={{ default: 'alignItemsCenter'}} spaceItems={{ default: 'spaceItemsNone' }}>
+      <FlexItem>
+        <Title
+          id={slug}
+          size={sizes[size]}
+          headingLevel={headingLevel || size}
+          className={`ws-heading ${className}`}
+          tabIndex={-1}
+        >
+          <Link href={`#${slug}`} className="ws-heading-anchor" tabIndex="-1" aria-hidden>
+            <LinkIcon className="ws-heading-anchor-icon" style={{ verticalAlign: 'middle' }} />
+          </Link>
+          {children}
+        </Title>
+      </FlexItem>
+      <FlexItem>  {metaText}</FlexItem>
+    </Flex>
   )
 };

package/components/cssVariables/cssSearch.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { TextInput } from "@patternfly/react-core";
+import { SearchInput } from "@patternfly/react-core";
 
 export class CSSSearch extends React.Component {
   constructor(props) {
@@ -9,7 +9,7 @@ export class CSSSearch extends React.Component {
     };
   }
 
-  onFilterChange = (_change, event) => {
+  onFilterChange = (event) => {
     this.setState(
       {
         filterValue: event.target.value
@@ -20,8 +20,7 @@ export class CSSSearch extends React.Component {
 
   render() {
     return (
-      <TextInput
-        type="text"
+      <SearchInput
         aria-label="Filter CSS Variables"
         placeholder="Filter CSS Variables"
         value={this.state.filterValue}

package/components/cssVariables/cssVariables.css

@@ -2,14 +2,14 @@
   display: inline-block;
   height: 18px;
   width: 18px;
-  border: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--200);
-  border-radius: var(--pf-global--BorderRadius--lg);
+  border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--200);
+  border-radius: var(--pf-v5-global--BorderRadius--lg);
 }
 
 .ws-td-text {
-  font-size: var(--pf-global--FontSize--sm) !important;
+  font-size: var(--pf-v5-global--FontSize--sm) !important;
 }
 
 .ws-css-property {
-  padding: var(--pf-global--spacer--xs) var(--pf-global--spacer--md);
+  padding: var(--pf-v5-global--spacer--xs) var(--pf-v5-global--spacer--md);
 }

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;