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

package/components/gdprBanner/gdprBanner.js

@@ -13,9 +13,9 @@ export const GdprBanner = () => {
   }
 
   return !isBannerOpen ? null : (
-    <div className="ws-gdpr-banner-container pf-l-flex">
-      <div id="ws-gdpr-banner" className="pf-l-flex pf-u-py-md pf-m-align-items-center">
-        <p id="ws-gdpr-banner-text" className="pf-u-ml-xl">
+    <div className="ws-gdpr-banner-container pf-v5-l-flex">
+      <div id="ws-gdpr-banner" className="pf-v5-l-flex pf-v5-u-py-md pf-m-align-items-center">
+        <p id="ws-gdpr-banner-text" className="pf-v5-u-ml-xl">
           We use cookies on our websites to deliver our online services.
           Details about how we use cookies and how you may disable them are set out in our <a href="//www.redhat.com/en/about/privacy-policy">Privacy Statement</a>.
           By using this website you agree to our use of cookies.

package/components/inlineAlert/inlineAlert.js

@@ -9,7 +9,7 @@ export const InlineAlert = ({
   <Alert
     variant={variant}
     title={title}
-    className="pf-u-my-md"
+    className="pf-v5-u-my-md"
     style={{ marginBottom: '1rem' }}
     isInline
     component="h2"

package/components/propsTable/propsTable.js

@@ -2,90 +2,96 @@ import React from "react";
 import { Badge } from "@patternfly/react-core";
 import {
   Table,
-  TableHeader,
-  TableBody,
-  cellWidth,
+  Caption,
+  Thead,
+  Th,
+  Tr,
+  Tbody,
+  Td,
+  TableText
 } from "@patternfly/react-table";
 import { AutoLinkHeader } from "../autoLinkHeader/autoLinkHeader";
 import { PropTypeWithLinks } from "./propTypeWithLinks";
 import { css } from "@patternfly/react-styles";
 import accessibleStyles from "@patternfly/react-styles/css/utilities/Accessibility/accessibility";
 
-export const PropsTable = ({ title, description, rows, allPropComponents }) => {
-  const columns = [
-    { title: "Name", transforms: [cellWidth(20)] },
-    { title: "Type", transforms: [cellWidth(20)] },
-    { title: "Default", transforms: [] },
-    { title: "Description", transforms: [] },
-  ];
-
-  return (
-    <React.Fragment>
-      <AutoLinkHeader size="h3">{title}</AutoLinkHeader>
-      <Table
-        className="pf-u-mt-md pf-u-mb-lg"
-        variant="compact"
-        aria-label={title}
-        caption={
-          <div>
-            {description && <div className="pf-u-mb-md">{description}</div>}
-            <div>
-              <span className="ws-prop-required">*</span>required
-            </div>
-          </div>
-        }
-        cells={columns}
-        gridBreakPoint="grid-lg"
-        rows={rows
-          // Sort required rows first
+export const PropsTable = ({ title, description, rows, allPropComponents }) => (
+  <React.Fragment>
+    <AutoLinkHeader size="h3">{title}</AutoLinkHeader>
+    <Table className="pf-v5-u-mt-md pf-v5-u-mb-lg" variant="compact" aria-label={title} gridBreakPoint="grid-lg">
+      <Caption>
+        {description && <div className="pf-v5-u-mb-md">{description}</div>}
+        <div>
+          <span className="ws-prop-required">*</span>required
+        </div>
+      </Caption>
+      <Thead>
+        <Tr>
+          <Th width={20}>Name</Th>
+          <Th width={20}>Type</Th>
+          <Th>Default</Th>
+          <Th>Description</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {rows
           .sort((a, b) => (a.required === b.required ? 0 : a.required ? -1 : 1))
-          .map((row, idx) => ({
-            cells: [
-              <div className="pf-m-break-word">
-                {row.deprecated && "Deprecated: "}
-                {row.name}
-                {row.required ? (
-                  <React.Fragment key={`${row.name}-required-prop`}>
-                    <span
-                      aria-hidden="true"
-                      key={`${row.name}-asterisk`}
-                      className="ws-prop-required"
-                    >
-                      *
-                    </span>
-                    <span
-                      key={`${row.name}-required`}
-                      className={css(accessibleStyles.screenReader)}
-                    >
-                      required
-                    </span>
-                  </React.Fragment>
-                ) : (
-                  ""
-                )}
-                {row.beta && (
-                  <Badge
-                    key={`${row.name}-${idx}`}
-                    className="ws-beta-badge pf-u-ml-sm"
+          .map((row, idx) => (
+            <Tr key={idx}>
+              <Td>
+                <TableText wrapModifier="breakWord">
+                  {row.deprecated && "Deprecated: "}
+                  {row.name}
+                  {row.required ? (
+                    <React.Fragment key={`${row.name}-required-prop`}>
+                  <span
+                    aria-hidden="true"
+                    key={`${row.name}-asterisk`}
+                    className="ws-prop-required"
                   >
-                    Beta
-                  </Badge>
-                )}
-              </div>,
-              <div className="pf-m-break-word">
-                <PropTypeWithLinks
-                  type={row.type}
-                  allPropComponents={allPropComponents}
-                />
-              </div>,
-              <div className="pf-m-break-word">{row.defaultValue}</div>,
-              <div className="pf-m-break-word">{row.description}</div>,
-            ],
-          }))}
-      >
-        <TableHeader />
-        <TableBody />
-      </Table>
-    </React.Fragment>
-  );
-};
+                    *
+                  </span>
+                      <span
+                        key={`${row.name}-required`}
+                        className={css(accessibleStyles.screenReader)}
+                      >
+                    required
+                  </span>
+                    </React.Fragment>
+                  ) : (
+                    ""
+                  )}
+                  {row.beta && (
+                    <Badge
+                      key={`${row.name}-${idx}`}
+                      className="ws-beta-badge pf-v5-u-ml-sm"
+                    >
+                      Beta
+                    </Badge>
+                  )}
+                </TableText>
+              </Td>
+              <Td>
+                <TableText wrapModifier="breakWord">
+                  <PropTypeWithLinks
+                    type={row.type}
+                    allPropComponents={allPropComponents}
+                  />
+                </TableText>
+              </Td>
+              <Td>
+                <TableText wrapModifier="breakWord">
+                  {row.defaultValue}
+                </TableText>
+              </Td>
+              <Td>
+                <TableText wrapModifier="breakWord">
+                  {row.description}
+                </TableText>
+              </Td>
+            </Tr>
+          ))}
+      </Tbody>
+    </Table>
+  </React.Fragment>
+);

package/components/sectionGallery/TextSummary.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { convertToReactComponent } from "@patternfly/ast-helpers";
+import { TextContent, Text } from "@patternfly/react-core";
+
+// convert summary text from string to jsx, remove links
+export const SummaryComponent = ({ id, itemsData }) => {
+  const itemDasherized = id.split(' ').join('-').toLowerCase();
+  const summary = itemsData?.[itemDasherized]?.summary;
+  if (!summary) {
+    return null;
+  }
+  // Remove anchor tags to avoid <a> in summary nested within <a> of Link card/datalistitem
+  const summaryNoLinks = summary.replace(/<Link[^>]*>([^<]+)<\/Link>/gm, '$1');
+  const { code } = convertToReactComponent(`<>${summaryNoLinks}</>`);
+  const getSummaryComponent = new Function('React', code);
+  return getSummaryComponent(React);
+}
+
+export const TextSummary = ({ id, itemsData }) => {
+  if (!id) {
+    return null;
+  }
+
+  return (
+    <TextContent>
+      <Text>
+        <SummaryComponent id={id} itemsData={itemsData} />
+      </Text>
+    </TextContent>
+  )
+};

package/components/sectionGallery/sectionDataListLayout.js

@@ -0,0 +1,49 @@
+import React from "react";
+import { DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCell, Split, SplitItem, TextContent, Text, TextVariants, Label } from "@patternfly/react-core";
+import { Link } from '../link/link';
+import { TextSummary } from './TextSummary';
+
+export const SectionDataListLayout = ({ galleryItems, layoutView, hasListText, hasListImages }) => {
+  if (layoutView !== 'list') {
+    return null;
+  }
+  
+  return (
+    <DataList onSelectDataListItem={() => {}}>
+      {galleryItems.map(({ idx, slug, illustration, itemName, title, isBeta, id, galleryItemsData }) => (
+        <Link to={slug} key={idx} className="ws-section-gallery-item">
+          <DataListItem>
+            <DataListItemRow>
+              <DataListItemCells dataListCells={[
+                hasListImages && illustration && (
+                  <DataListCell width={1} key="illustration">
+                    <div>
+                      <img src={illustration} alt={`${itemName} illustration`} />
+                    </div>
+                  </DataListCell>
+                ),
+                <DataListCell width={5} key="text-description">
+                  <Split className={ hasListText ? "pf-v5-u-mb-md" : null }>
+                    <SplitItem isFilled>
+                      <TextContent>
+                        <Text component={TextVariants.h2}>
+                          <span>
+                            {title}
+                          </span>
+                        </Text>
+                      </TextContent>
+                    </SplitItem>  
+                    <SplitItem>
+                      {isBeta && <Label color="gold">Beta feature</Label>}
+                    </SplitItem>
+                  </Split>
+                  { hasListText && <TextSummary id={id} itemsData={galleryItemsData} /> }
+                </DataListCell>
+              ]} />
+            </DataListItemRow>
+          </DataListItem>
+        </Link>
+      ))}
+    </DataList>
+  )
+};

package/components/sectionGallery/sectionGallery.css

@@ -0,0 +1,53 @@
+.ws-landing-page > * {
+  max-width: 832px;
+}
+
+.ws-landing-page > .ws-section-gallery-full-width {
+  max-width: initial;
+}
+
+.ws-section-gallery {
+  /* top placement */
+  margin-top: calc(var(--pf-v5-c-page__main-section--PaddingTop) * -1);
+}
+
+* + .ws-section-gallery {
+  /* top placement */
+  margin-top: unset;
+}
+
+/* Toolbar styles */
+.ws-section-gallery .pf-v5-c-toolbar {
+  margin-left: calc(var(--pf-v5-c-page__main-section--PaddingLeft) * -1);
+  border-bottom: var(--pf-v5-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-v5-c-page__sidebar--m-light--BorderRightColor);
+  margin-bottom: var(--pf-v5-global--spacer--md);
+  width: calc(100% + var(--pf-v5-c-page__main-section--PaddingLeft) + var(--pf-v5-c-page__main-section--PaddingRight));
+  /* avoid hoverable data list items overlapping toolbar */
+  z-index: calc(var(--pf-v5-global--ZIndex--xs) + 2);
+}
+
+/* Match toolbar left-padding to gallery left-padding */
+.ws-section-gallery .pf-v5-c-toolbar .pf-v5-c-toolbar__content {
+  --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-page__main-section--PaddingLeft);
+}
+
+/* Avoid toolbar wrap on smaller screens */
+.ws-section-gallery .pf-v5-c-toolbar__content-section {
+  flex-wrap: nowrap;
+}
+
+/* Avoid link styling on gallery/data list item names */
+.ws-section-gallery-item {
+  text-decoration: inherit;
+  color: inherit;
+}
+
+/* Ensure same height for all cards in a gallery row */
+.ws-section-gallery .pf-v5-c-card {
+  height: 100%;
+}
+
+/* Limit width for data list view only */
+.ws-section-gallery .pf-v5-c-data-list {
+  max-width: 956px;
+}

package/components/sectionGallery/sectionGallery.js

@@ -0,0 +1,76 @@
+import React from "react";
+
+import './sectionGallery.css';
+import { SectionGalleryToolbar } from "./sectionGalleryToolbar";
+import { SectionGalleryLayout } from "./sectionGalleryLayout";
+import { SectionDataListLayout } from "./sectionDataListLayout";
+import { SectionGalleryWrapper } from "./sectionGalleryWrapper";
+
+/** 
+ * Helper component returns gallery of items with search toolbar and switchable gallery/data list views.
+ * @param {Object} illustrations - Object of preview images mapped to their snake_case item display name
+ * @param {string} section - Name of the navigation section to create the gallery within
+ * @param {Object} galleryItemsData - Object containing the image location & summary text mapped to the gallery item's hyphenated-name
+ * @param {string} [placeholderText=Search by name] - Optional text to be displayed as placeholder for SearchInput
+ * @param {string} [countText= items] - Optional text to be displayed after the number of search results
+ * @param {string} [initialLayout=grid] - Optional text to indicate whether to default to grid or list layout
+ * @param {Boolean} [hasGridText=false] - Optional boolean to toggle text on grid layout cards
+ * @param {Boolean} [hasGridImages=false] - Optional boolean to toggle images on grid layout cards
+ * @param {Boolean} [hasListText=false] - Optional boolean to toggle text on list layout rows
+ * @param {Boolean} [hasListImages=false] - Optional boolean to toggle images on list layout rows
+ * @param {Boolean} [isFullWidth=true] - Optional boolean to disable component from exceeding default max-width for page
+*/
+
+export const SectionGallery = ({
+  illustrations,
+  section,
+  subsection = null,
+  includeSubsections = false,
+  parseSubsections = false,
+  galleryItemsData,
+  placeholderText,
+  countText,
+  initialLayout = "grid",
+  hasGridText = false,
+  hasGridImages = true,
+  hasListText = true,
+  hasListImages = true,
+  isFullWidth = true
+}) => (
+  <SectionGalleryWrapper
+    illustrations={illustrations}
+    section={section}
+    subsection={subsection}
+    includeSubsections={includeSubsections}
+    parseSubsections={parseSubsections}
+    galleryItemsData={galleryItemsData}
+    initialLayout={initialLayout}
+    isFullWidth={isFullWidth}
+  >
+    {(sectionGalleryItems, searchTerm, setSearchTerm, layoutView, setLayoutView) => (
+      <>
+        <SectionGalleryToolbar
+          galleryItems={sectionGalleryItems}
+          searchTerm={searchTerm}
+          setSearchTerm={setSearchTerm}
+          layoutView={layoutView}
+          setLayoutView={setLayoutView}
+          placeholderText={placeholderText}
+          countText={countText}
+        />
+        <SectionGalleryLayout
+          galleryItems={sectionGalleryItems}
+          layoutView={layoutView}
+          hasGridText={hasGridText}
+          hasGridImages={hasGridImages}
+        />
+        <SectionDataListLayout
+          galleryItems={sectionGalleryItems}
+          layoutView={layoutView}
+          hasListText={hasListText}
+          hasListImages={hasListImages}
+        />
+      </>
+    )}
+  </SectionGalleryWrapper>
+);

package/components/sectionGallery/sectionGalleryLayout.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { Gallery, GalleryItem, Card, CardTitle, CardBody, CardFooter, Label } from "@patternfly/react-core";
+import { Link } from '../link/link';
+import { TextSummary } from "./TextSummary";
+
+export const SectionGalleryLayout = ({ galleryItems, layoutView, hasGridText, hasGridImages }) => {
+  if (layoutView !== 'grid') {
+    return null;
+  }
+
+  return (
+    <Gallery hasGutter>
+      {galleryItems.map(({idx, slug, id, itemName, illustration, isBeta, title, galleryItemsData}) => (
+        <GalleryItem span={4} key={idx}>
+          <Link to={slug} className="ws-section-gallery-item">
+            <Card
+              id={id}
+              key={idx}
+              isSelectableRaised
+            >
+              <CardTitle>{title}</CardTitle>
+              {(hasGridImages || hasGridText) && (
+                <CardBody>
+                  { hasGridImages && illustration && <img src={illustration} alt={`${itemName} illustration`} /> }
+                  { hasGridText && <TextSummary id={id} itemsData={galleryItemsData} /> }
+                </CardBody>
+              )}
+              {isBeta && (
+                <CardFooter>
+                  <Label color="blue">Beta feature</Label>
+                </CardFooter>
+              )}
+            </Card>
+          </Link>
+        </GalleryItem>
+      ))}
+    </Gallery>
+  )
+};

package/components/sectionGallery/sectionGalleryToolbar.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { Button, SearchInput, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem, Text, TextVariants, ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
+import ListIcon from '@patternfly/react-icons/dist/esm/icons/list-icon';
+import ThIcon from'@patternfly/react-icons/dist/esm/icons/th-icon';
+
+export const SectionGalleryToolbar = ({
+  galleryItems,
+  searchTerm,
+  setSearchTerm,
+  layoutView,
+  setLayoutView,
+  placeholderText ="Search by name",
+  countText=" items"
+}) => (
+  <Toolbar isSticky>
+    <ToolbarContent>
+      <ToolbarItem variant="search-filter" widths={{default: '100%', md: '320px'}}>
+        <SearchInput onClear={false} value={searchTerm} placeholder={placeholderText} onChange={(_evt, val) => setSearchTerm(val)} />
+      </ToolbarItem>
+      {searchTerm && (
+        <ToolbarItem>
+          <Button variant="link" onClick={() => setSearchTerm('')}>Reset</Button>
+        </ToolbarItem>
+      )}
+      <ToolbarGroup variant="icon-button-group">
+        <ToolbarItem>
+          <ToggleGroup>
+            <ToggleGroupItem icon={<ThIcon />} aria-label="grid icon button" isSelected={layoutView === 'grid'} onChange={() => setLayoutView('grid')}></ToggleGroupItem>
+            <ToggleGroupItem icon={<ListIcon />} aria-label="list icon button" isSelected={layoutView === 'list'} onChange={() => setLayoutView('list')}></ToggleGroupItem>
+          </ToggleGroup>
+        </ToolbarItem>
+      </ToolbarGroup>
+      <ToolbarItem variant="pagination" spacer={{default: 'spacerMd', md: 'spacerNone'}} style={{'--pf-v5-c-toolbar__item--MinWidth': "max-content"}}>
+        <Text component={TextVariants.small}>{ galleryItems.length }{ countText }</Text>
+      </ToolbarItem>
+    </ToolbarContent>
+  </Toolbar>
+);

package/components/sectionGallery/sectionGalleryWrapper.js

@@ -0,0 +1,105 @@
+import React from "react";
+import { groupedRoutes } from '../../routes';
+
+export const SectionGalleryWrapper = ({
+  section,
+  subsection,
+  galleryItemsData,
+  illustrations,
+  includeSubsections,
+  parseSubsections,
+  initialLayout,
+  isFullWidth,
+  children
+}) => {
+  let sectionRoutes = subsection ? groupedRoutes[section][subsection] : groupedRoutes[section];
+  if (!includeSubsections || parseSubsections) {
+    const sectionRoutesArr = Object.entries(sectionRoutes);
+    // loop through galleryItems object and build new object to handle subsections
+    sectionRoutes = sectionRoutesArr.reduce((acc, [navName, routeData]) => {
+      // exit immediately if current item is isSubsection flag
+      if (navName === 'isSubsection') {
+        return acc;
+      }
+      // add current item
+      if (includeSubsections || !routeData.isSubsection) {
+        acc[navName] = routeData;
+      }
+      // drill down into current item if subsection and parseSubsections === true
+      if (parseSubsections && routeData.isSubsection) {
+        // loop through each subsection item & add
+        Object.entries(routeData).map(([subitemName, subitemData]) => {
+          if (subitemName !== 'isSubsection') {
+            acc[subitemName] = subitemData;
+          }
+        })
+      }
+      return acc;
+    }, {})
+  }
+
+  const [searchTerm, setSearchTerm] = React.useState('');
+  const [layoutView, setLayoutView] = React.useState(initialLayout);
+  const filteredItems = Object.entries(sectionRoutes)
+    .filter(([itemName, { slug }]) => (
+      // exclude current gallery page from results
+      !location.pathname.endsWith(slug) &&
+      itemName
+        .toLowerCase()
+        .includes(searchTerm.toLowerCase())
+    ));
+  const sectionGalleryItems = filteredItems
+    .sort(([itemName1], [itemName2]) => itemName1.localeCompare(itemName2))
+    .map(([itemName, itemData], idx) => {
+      let illustration = null;
+      if (illustrations) {
+        // Convert to lowercase-camelcase ex: File upload - multiple ==> file_upload_multiple
+        const illustrationName = itemName
+          .replace('-', '')
+          .replace('  ',' ')
+          .split(' ')
+          .join('_')
+          .toLowerCase();
+        illustration = illustrations[illustrationName] || illustrations.default_placeholder;
+      }
+      const { sources, isSubsection = false } = itemData;
+      // Subsections don't have title or id, default to itemName aka sidenav text
+      const title = itemData.title || itemName;
+      const id = itemData.id || title;
+      // Display beta label if tab other than a '-next' tab is marked Beta
+      const isBeta = !isSubsection && sources && sources.some(src => src.beta && !src.source.includes('-next'));
+      let slug = itemData.slug;
+      if (!slug && isSubsection) {
+        // Update slug to link to first page in subsection
+        const subsectionItems = Object.entries(itemData).filter(([name, _data]) => name !== 'isSubsection');
+        const sortedSubsectionItems = subsectionItems.sort((
+          [name1, {sortValue: sortValue1 = 50}],
+          [name2, {sortValue: sortValue2 = 50}]
+        ) => {
+          if (sortValue1 === sortValue2) {
+            return name1.localeCompare(name2);
+          }
+          return sortValue1 > sortValue2 ? 1 : -1;
+        });
+        const firstSubsectionItem = sortedSubsectionItems[0];
+        slug = firstSubsectionItem[1].slug;   
+      }
+
+      return {
+        idx,
+        slug,
+        itemName,
+        illustration,
+        isBeta,
+        title,
+        id,
+        galleryItemsData
+      };
+    });
+
+  return (
+    <div className={`ws-section-gallery${ isFullWidth ? ' ws-section-gallery-full-width' : '' }`}>
+      { children(sectionGalleryItems, searchTerm, setSearchTerm, layoutView, setLayoutView) }
+    </div>
+  )
+};

package/components/sideNav/sideNav.css

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