@patternfly/documentation-framework 2.0.0-alpha.29 → 2.0.0-alpha.30

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 2.0.0-alpha.30 (2023-04-27)
+
+
+### Bug Fixes
+
+* white space change to test CI ([e9e7ed3](https://github.com/patternfly/patternfly-org/commit/e9e7ed3cf6007fcf022dd7693bfed12bdf9d7e9a))
+
+
+
+
+
 # 2.0.0-alpha.29 (2023-04-26)
 
 

package/components/sectionGallery/sectionDataListLayout.js

@@ -0,0 +1,67 @@
+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 { convertToReactComponent } from "@patternfly/ast-helpers";
+
+// convert summary text in drawer from string to jsx
+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 SectionDataListLayout = ({ galleryItems, layoutView }) => {
+  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={[
+                <DataListCell width={1} key="illustration">
+                  {illustration && (
+                    <div>
+                      <img src={illustration} alt={`${itemName} illustration`} />
+                    </div>
+                  )}
+                </DataListCell>,
+                <DataListCell width={5} key="text-description">
+                  <Split className="pf-u-mb-md">
+                    <SplitItem isFilled>
+                      <TextContent>
+                        <Text component={TextVariants.h2}>
+                          <span>
+                            {title}
+                          </span>
+                        </Text>
+                      </TextContent>
+                    </SplitItem>  
+                    <SplitItem>
+                      {isBeta && <Label color="gold">Beta feature</Label>}
+                    </SplitItem>
+                  </Split>
+                  <TextContent>
+                    <Text>
+                      { id ? <SummaryComponent id={id} itemsData={galleryItemsData} /> : null }
+                    </Text>
+                  </TextContent>
+                </DataListCell>
+              ]} />
+            </DataListItemRow>
+          </DataListItem>
+        </Link>
+      ))}
+    </DataList>
+  )
+};

package/components/sectionGallery/sectionGallery.css

@@ -0,0 +1,44 @@
+..ws-mdx-content-content {
+  max-width: initial !important;
+}
+
+.ws-section-gallery {
+  /* top placement */
+  margin-top: calc(var(--pf-c-page__main-section--PaddingTop) * -1);
+}
+
+/* Toolbar styles */
+.ws-section-gallery .pf-c-toolbar {
+  margin-left: calc(var(--pf-c-page__main-section--PaddingLeft) * -1);
+  border-bottom: var(--pf-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-c-page__sidebar--m-light--BorderRightColor);
+  margin-bottom: var(--pf-global--spacer--md);
+  width: calc(100% + var(--pf-c-page__main-section--PaddingLeft) + var(--pf-c-page__main-section--PaddingRight));
+  /* avoid hoverable data list items overlapping toolbar */
+  z-index: calc(var(--pf-global--ZIndex--xs) + 2);
+}
+
+/* Match toolbar left-padding to gallery left-padding */
+.ws-section-gallery .pf-c-toolbar .pf-c-toolbar__content {
+  --pf-c-toolbar__content--PaddingLeft: var(--pf-c-page__main-section--PaddingLeft);
+}
+
+/* Avoid toolbar wrap on smaller screens */
+.ws-section-gallery .pf-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-c-card {
+  height: 100%;
+}
+
+/* Limit width for data list view only */
+.ws-section-gallery .pf-c-data-list {
+  max-width: 956px;
+}

package/components/sectionGallery/sectionGallery.js

@@ -0,0 +1,53 @@
+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
+*/
+
+export const SectionGallery = ({
+  illustrations,
+  section,
+  subsection = null,
+  includeSubsections = false,
+  parseSubsections = false,
+  galleryItemsData,
+  placeholderText,
+  countText
+}) => (
+  <SectionGalleryWrapper
+    illustrations={illustrations}
+    section={section}
+    subsection={subsection}
+    includeSubsections={includeSubsections}
+    parseSubsections={parseSubsections}
+    galleryItemsData={galleryItemsData}
+  >
+    {(sectionGalleryItems, searchTerm, setSearchTerm, layoutView, setLayoutView) => {
+    return (
+      <>
+        <SectionGalleryToolbar
+          galleryItems={sectionGalleryItems}
+          searchTerm={searchTerm}
+          setSearchTerm={setSearchTerm}
+          layoutView={layoutView}
+          setLayoutView={setLayoutView}
+          placeholderText={placeholderText}
+          countText={countText}
+        />
+        <SectionGalleryLayout galleryItems={sectionGalleryItems} layoutView={layoutView} />
+        <SectionDataListLayout galleryItems={sectionGalleryItems} layoutView={layoutView} />
+      </>
+    )}}
+  </SectionGalleryWrapper>
+);

package/components/sectionGallery/sectionGalleryLayout.js

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

package/components/sectionGallery/sectionGalleryToolbar.js

@@ -0,0 +1,30 @@
+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-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,89 @@
+import React from "react";
+import { groupedRoutes } from '../../routes';
+
+export const SectionGalleryWrapper = ({section, subsection, galleryItemsData, illustrations, includeSubsections, parseSubsections, 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('grid');
+  const filteredItems = Object.entries(sectionRoutes)
+    .filter(([itemName, { slug }]) => (
+      // exclude current gallery page from results
+      slug !== location.pathname &&
+      itemName
+        .toLowerCase()
+        .includes(searchTerm.toLowerCase())
+    ));
+  const sectionGalleryItems = filteredItems
+    .sort(([itemName1], [itemName2]) => itemName1.localeCompare(itemName2))
+    .map(([itemName, itemData], idx) => {
+      // Convert to lowercase-camelcase ex: File upload - multiple ==> file_upload_multiple
+      const illustrationName = itemName
+        .replace('-', '')
+        .replace('  ',' ')
+        .split(' ')
+        .join('_')
+        .toLowerCase();
+      const illustration = illustrations[illustrationName] || illustrations.default_placeholder;
+      const { title, id, sources, isSubsection = false } = itemData;
+      // 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">
+      { children(sectionGalleryItems, searchTerm, setSearchTerm, layoutView, setLayoutView) }
+    </div>
+  )
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "2.0.0-alpha.29",
+  "version": "2.0.0-alpha.30",
   "author": "Red Hat",
   "license": "MIT",
   "private": false,
@@ -91,5 +91,5 @@
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },
-  "gitHead": "3e5be1c15cf04c94fab913921a662be2a94b0648"
+  "gitHead": "3708bceee20d032325ba4537140a2271fbda5c9c"
 }

package/scripts/md/parseMD.js

@@ -292,6 +292,7 @@ function sourceMDFile(file, source, buildMode) {
       source: pageData.source,
       tabName: pageData.tabName,
       ...(pageData.hideNavItem && { hideNavItem: pageData.hideNavItem }),
+      ...(pageData.beta && { beta: pageData.beta }),
       ...(pageData.sortValue && { sortValue: pageData.sortValue }),
       ...(pageData.subsectionSortValue && { subsectionSortValue: pageData.subsectionSortValue })
     };

package/scripts/webpack/webpack.base.config.js

@@ -149,7 +149,7 @@ module.exports = (_env, argv) => {
         'process.env.sideNavItems': JSON.stringify(sideNavItems),
         'process.env.topNavItems': JSON.stringify(topNavItems),
         'process.env.prnum': JSON.stringify(process.env.CIRCLE_PR_NUMBER || process.env.PR_NUMBER || ''),
-        'process.env.prurl': JSON.stringify(process.env.CIRCLE_PULL_REQUEST || ''),
+        'process.env.prurl': JSON.stringify(process.env.CIRCLE_PULL_REQUEST || '')
       }),
       new CopyWebpackPlugin({
         patterns: [

package/templates/mdx.js

@@ -13,7 +13,8 @@ const MDXChildTemplate = ({
   Component,
   source,
   toc = [],
-  index = 0
+  index = 0,
+  id
 }) => {
   const {
     propComponents = [],
@@ -61,6 +62,7 @@ const MDXChildTemplate = ({
       )}
     </React.Fragment>
   );
+  console.log(id);
   // Create dynamic component for @reach/router
   const ChildComponent = () => (
     <div className="pf-u-display-flex ws-mdx-child-template">
@@ -68,7 +70,7 @@ const MDXChildTemplate = ({
         <TableOfContents items={toc} />
       )}
       <div className="ws-mdx-content">
-        <div className="ws-mdx-content-content">
+        <div className={id === 'All components' ? "" : "ws-mdx-content-content"}>
           {InlineAlerts}
           <Component />
           {functionDocumentation.length > 0 && (
@@ -202,6 +204,14 @@ export const MDXTemplate = ({
     return "pf-m-light-100";
   };
 
+  const showTabs = (
+    (!isSinglePage && !hideTabName) ||
+    isComponent ||
+    isUtility ||
+    isDemo
+  );
+
+  console.log(id);
   return (
     <React.Fragment>
       <PageGroup>
@@ -211,38 +221,35 @@ export const MDXTemplate = ({
           isWidthLimited
         >
           <TextContent>
-          <Title headingLevel='h1' size='4xl' id="ws-page-title">{title}</Title>
-          {isComponent && summary && (<SummaryComponent />)}
+            <Title headingLevel='h1' size='4xl' id="ws-page-title">{title}</Title>
+            {isComponent && summary && (<SummaryComponent />)}
           </TextContent>
         </PageSection>
-        {((!isSinglePage && !hideTabName) ||
-          isComponent ||
-          isUtility ||
-          isDemo) && (
-            <PageSection id="ws-sticky-nav-tabs" stickyOnBreakpoint={{'default':'top'}} type="tabs">
-              <div className="pf-c-tabs pf-m-page-insets pf-m-no-border-bottom">
-                <ul className="pf-c-tabs__list">
-                  {sourceKeys.map((source, index) => (
-                    <li
-                      key={source}
-                      className={css(
-                        'pf-c-tabs__item',
-                        activeSource === source && 'pf-m-current'
-                      )}
-                      // Send clicked tab name for analytics
-                      onClick={() => trackEvent('tab_click', 'click_event', source.toUpperCase())}
-                    >
-                      <Link className="pf-c-tabs__link" to={`${path}${index === 0 ? '' : '/' + source}`}>
-                        {tabNames[source]}
-                      </Link>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            </PageSection>
+        { showTabs && (
+          <PageSection id="ws-sticky-nav-tabs" stickyOnBreakpoint={{'default':'top'}} type="tabs">
+            <div className="pf-c-tabs pf-m-page-insets pf-m-no-border-bottom">
+              <ul className="pf-c-tabs__list">
+                {sourceKeys.map((source, index) => (
+                  <li
+                    key={source}
+                    className={css(
+                      'pf-c-tabs__item',
+                      activeSource === source && 'pf-m-current'
+                    )}
+                    // Send clicked tab name for analytics
+                    onClick={() => trackEvent('tab_click', 'click_event', source.toUpperCase())}
+                  >
+                    <Link className="pf-c-tabs__link" to={`${path}${index === 0 ? '' : '/' + source}`}>
+                      {tabNames[source]}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </PageSection>
         )}
         <PageSection id="main-content" isFilled className="pf-m-light-100">
-          {isSinglePage && <MDXChildTemplate {...sources[0]} />}
+          {isSinglePage && <MDXChildTemplate {...sources[0]} id={id}/>}
           {!isSinglePage && (
             <Router className="pf-u-h-100" primary={false}>
               {sources