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

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"
@@ -147,11 +147,11 @@ export const Footer = () => (
                   <li className="ws-org-pfsite-footer-menu-list-item">
                     <Link
                       className="ws-org-pfsite-footer-menu-link"
-                      to="//forum.patternfly.org"
+                      to="//github.com/orgs/patternfly/discussions"
                       target="top"
-                      aria-label="Visit the PatternFly 4 forum"
+                      aria-label="Visit the PatternFly discussion forum"
                     >
-                      Forum
+                      Discussions
                     </Link>
                   </li>
                   <li className="ws-org-pfsite-footer-menu-list-item">
@@ -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);
 }

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/link/link.js

@@ -39,8 +39,6 @@ export const Link = ({
     return <a href={url} onClick={onClick} {...props} />;
   }
   else if (url.startsWith('/')) {
-    url = `${process.env.pathPrefix}/${url.substr(1)}`;
-
     if (!process.env.PRERENDER) {
       const Component = getAsyncComponent(url);
       if (Component) {
@@ -65,5 +63,6 @@ export const Link = ({
       }
     }
   }
+
   return <ReachLink to={url} {...props} />;
 }

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,51 @@
+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, isDeprecated, isDemo, 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="blue" isCompact>Beta</Label>)}
+                      {!isBeta && isDeprecated && (<Label color="grey" isCompact>Deprecated</Label>)}
+                      {!isBeta && !isDeprecated && isDemo && (<Label color="purple" isCompact>Demo</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,41 @@
+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, isDeprecated, isDemo, 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 || isDeprecated || isDemo) && (
+                <CardFooter>
+                  {isBeta && (<Label color="blue" isCompact>Beta</Label>)}
+                  {!isBeta && isDeprecated && (<Label color="grey" isCompact>Deprecated</Label>)}
+                  {!isBeta && !isDeprecated && isDemo && (<Label color="purple" isCompact>Demo</Label>)}
+                </CardFooter>
+              )}
+            </Card>
+          </Link>
+        </GalleryItem>
+      ))}
+    </Gallery>
+  )
+};