@patternfly/documentation-framework 2.0.0-alpha.53 → 2.0.0-alpha.54

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 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.54 (2023-06-09)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
 # 2.0.0-alpha.53 (2023-06-09)
 
 **Note:** Version bump only for package @patternfly/documentation-framework

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

@@ -1,23 +1,9 @@
 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";
+import { TextSummary } from './TextSummary';
 
-// 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 }) => {
+export const SectionDataListLayout = ({ galleryItems, layoutView, hasListText, hasListImages }) => {
   if (layoutView !== 'list') {
     return null;
   }
@@ -29,15 +15,15 @@ export const SectionDataListLayout = ({ galleryItems, layoutView }) => {
           <DataListItem>
             <DataListItemRow>
               <DataListItemCells dataListCells={[
-                <DataListCell width={1} key="illustration">
-                  {illustration && (
+                hasListImages && illustration && (
+                  <DataListCell width={1} key="illustration">
                     <div>
                       <img src={illustration} alt={`${itemName} illustration`} />
                     </div>
-                  )}
-                </DataListCell>,
+                  </DataListCell>
+                ),
                 <DataListCell width={5} key="text-description">
-                  <Split className="pf-v5-u-mb-md">
+                  <Split className={ hasListText ? "pf-v5-u-mb-md" : null }>
                     <SplitItem isFilled>
                       <TextContent>
                         <Text component={TextVariants.h2}>
@@ -51,11 +37,7 @@ export const SectionDataListLayout = ({ galleryItems, layoutView }) => {
                       {isBeta && <Label color="gold">Beta feature</Label>}
                     </SplitItem>
                   </Split>
-                  <TextContent>
-                    <Text>
-                      { id ? <SummaryComponent id={id} itemsData={galleryItemsData} /> : null }
-                    </Text>
-                  </TextContent>
+                  { hasListText && <TextSummary id={id} itemsData={galleryItemsData} /> }
                 </DataListCell>
               ]} />
             </DataListItemRow>

package/components/sectionGallery/sectionGallery.css

@@ -1,4 +1,4 @@
-..ws-mdx-content-content {
+.ws-mdx-content-content {
   max-width: initial !important;
 }
 
@@ -7,6 +7,11 @@
   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);

package/components/sectionGallery/sectionGallery.js

@@ -13,6 +13,11 @@ import { SectionGalleryWrapper } from "./sectionGalleryWrapper";
  * @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
 */
 
 export const SectionGallery = ({
@@ -23,7 +28,12 @@ export const SectionGallery = ({
   parseSubsections = false,
   galleryItemsData,
   placeholderText,
-  countText
+  countText,
+  initialLayout = "grid",
+  hasGridText = false,
+  hasGridImages = true,
+  hasListText = true,
+  hasListImages = true
 }) => (
   <SectionGalleryWrapper
     illustrations={illustrations}
@@ -32,9 +42,9 @@ export const SectionGallery = ({
     includeSubsections={includeSubsections}
     parseSubsections={parseSubsections}
     galleryItemsData={galleryItemsData}
+    initialLayout={initialLayout}
   >
-    {(sectionGalleryItems, searchTerm, setSearchTerm, layoutView, setLayoutView) => {
-    return (
+    {(sectionGalleryItems, searchTerm, setSearchTerm, layoutView, setLayoutView) => (
       <>
         <SectionGalleryToolbar
           galleryItems={sectionGalleryItems}
@@ -45,9 +55,19 @@ export const SectionGallery = ({
           placeholderText={placeholderText}
           countText={countText}
         />
-        <SectionGalleryLayout galleryItems={sectionGalleryItems} layoutView={layoutView} />
-        <SectionDataListLayout galleryItems={sectionGalleryItems} layoutView={layoutView} />
+        <SectionGalleryLayout
+          galleryItems={sectionGalleryItems}
+          layoutView={layoutView}
+          hasGridText={hasGridText}
+          hasGridImages={hasGridImages}
+        />
+        <SectionDataListLayout
+          galleryItems={sectionGalleryItems}
+          layoutView={layoutView}
+          hasListText={hasListText}
+          hasListImages={hasListImages}
+        />
       </>
-    )}}
+    )}
   </SectionGalleryWrapper>
 );

package/components/sectionGallery/sectionGalleryLayout.js

@@ -1,15 +1,16 @@
 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 }) => {
+export const SectionGalleryLayout = ({ galleryItems, layoutView, hasGridText, hasGridImages }) => {
   if (layoutView !== 'grid') {
     return null;
   }
 
   return (
     <Gallery hasGutter>
-      {galleryItems.map(({idx, slug, id, itemName, illustration, isBeta}) => (
+      {galleryItems.map(({idx, slug, id, itemName, illustration, isBeta, title, galleryItemsData}) => (
         <GalleryItem span={4} key={idx}>
           <Link to={slug} className="ws-section-gallery-item">
             <Card
@@ -17,10 +18,11 @@ export const SectionGalleryLayout = ({ galleryItems, layoutView }) => {
               key={idx}
               isSelectableRaised
             >
-              <CardTitle>{itemName}</CardTitle>
-              {illustration && (
+              <CardTitle>{title}</CardTitle>
+              {(hasGridImages || hasGridText) && (
                 <CardBody>
-                  <img src={illustration} alt={`${itemName} illustration`} />
+                  { hasGridImages && illustration && <img src={illustration} alt={`${itemName} illustration`} /> }
+                  { hasGridText && <TextSummary id={id} itemsData={galleryItemsData} /> }
                 </CardBody>
               )}
               {isBeta && (

package/components/sectionGallery/sectionGalleryToolbar.js

@@ -3,7 +3,15 @@ import { Button, SearchInput, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem
 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" }) => (
+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'}}>

package/components/sectionGallery/sectionGalleryWrapper.js

@@ -1,7 +1,16 @@
 import React from "react";
 import { groupedRoutes } from '../../routes';
 
-export const SectionGalleryWrapper = ({section, subsection, galleryItemsData, illustrations, includeSubsections, parseSubsections, children }) => {
+export const SectionGalleryWrapper = ({
+  section,
+  subsection,
+  galleryItemsData,
+  illustrations,
+  includeSubsections,
+  parseSubsections,
+  initialLayout,
+  children
+}) => {
   let sectionRoutes = subsection ? groupedRoutes[section][subsection] : groupedRoutes[section];
   if (!includeSubsections || parseSubsections) {
     const sectionRoutesArr = Object.entries(sectionRoutes);
@@ -29,7 +38,7 @@ export const SectionGalleryWrapper = ({section, subsection, galleryItemsData, il
   }
 
   const [searchTerm, setSearchTerm] = React.useState('');
-  const [layoutView, setLayoutView] = React.useState('grid');
+  const [layoutView, setLayoutView] = React.useState(initialLayout);
   const filteredItems = Object.entries(sectionRoutes)
     .filter(([itemName, { slug }]) => (
       // exclude current gallery page from results
@@ -41,15 +50,21 @@ export const SectionGalleryWrapper = ({section, subsection, galleryItemsData, il
   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;
+      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;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "2.0.0-alpha.53",
+  "version": "2.0.0-alpha.54",
   "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": "0fde3165d8645e202045fcd7aa09213ea66e65a0"
+  "gitHead": "8d1f88aa9a0c9318d65e4db4113418628fd5b795"
 }