some further updates to piping SectionGallery

Author: kmcfaul

src/components/section-gallery/SectionGallery.astro

@@ -0,0 +1,19 @@
+---
+import { SectionGallery as SectionGalleryBase } from './SectionGallery'
+
+const { illustrations, section, galleryItemsData, placeholderText, countText, initialLayout, hasGridText, hasGridImages, hasListText, hasListImages } = Astro.props
+---
+
+<SectionGalleryBase 
+  illustrations={illustrations} 
+  section={section} 
+  galleryItemsData={galleryItemsData} 
+  placeholderText={placeholderText} 
+  countText={countText} 
+  initialLayout={initialLayout} 
+  hasGridText={hasGridText} 
+  hasGridImages={hasGridImages} 
+  hasListText={hasListText} 
+  hasListImages={hasListImages}
+  client:only="react"
+/>

src/components/section-gallery/SectionGallery.tsx

@@ -22,7 +22,7 @@ export interface SectionGalleryItemData {
   /** Summary text of the item */
   summary: JSX.Element
   /** Label included in the item footer. Choose from a preset or pass a custom label. */
-  label?: 'beta' | 'demo' | 'deprecated' | JSX.Element
+  label?: 'beta' | 'demo' | 'deprecated'
   /** Link to the item, relative to the section, e.g. "/{section}/{page}" */
   link?: string
 }
@@ -58,17 +58,17 @@ export const SectionGallery = ({
   countText,
   initialLayout = 'grid',
   hasGridText = false,
-  hasGridImages = true,
-  hasListText = true,
-  hasListImages = true,
+  hasGridImages = false,
+  hasListText = false,
+  hasListImages = false,
 }: SectionGalleryProps) => {
   const [searchTerm, setSearchTerm] = useState('')
   const [layoutView, setLayoutView] = useState(initialLayout)
 
   const galleryItems: SectionGalleryItem[] = Object.entries(galleryItemsData)
     .map(([galleryItem, galleryItemData]) => ({
       name: galleryItem,
-      img: illustrations[snakeCase(galleryItem)],
+      img: illustrations ? illustrations[snakeCase(galleryItem)] : undefined,
       data: galleryItemData,
     }))
     .sort((item1, item2) => item1.name.localeCompare(item2.name))

src/components/section-gallery/SectionGalleryGridLayout.tsx

@@ -75,11 +75,11 @@ export const SectionGalleryGridLayout = ({
                     Demo
                   </Label>
                 )}
-                {typeof data.label !== 'string' && <>{data.label}</>}
               </CardFooter>
             )}
           </Card>
         </GalleryItem>
-      )})}
+      )
+    })}
   </Gallery>
 )

src/components/section-gallery/SectionGalleryListLayout.tsx

@@ -51,7 +51,9 @@ export const SectionGalleryListLayout = ({
                     </DataListCell>
                   ),
                   <DataListCell width={5} key="text-description">
-                    <Split className={hasListText ? "pf-v6-u-mb-md" : undefined}>
+                    <Split
+                      className={hasListText ? 'pf-v6-u-mb-md' : undefined}
+                    >
                       <SplitItem isFilled>
                         <Content isEditorial>
                           <Content component={ContentVariants.h2}>
@@ -75,7 +77,6 @@ export const SectionGalleryListLayout = ({
                             Demo
                           </Label>
                         )}
-                        {typeof data.label !== 'string' && <>{data.label}</>}
                       </SplitItem>
                     </Split>
                     {hasListText && (
@@ -89,6 +90,7 @@ export const SectionGalleryListLayout = ({
             </DataListItemRow>
           </DataListItem>
         </a>
-      )})}
+      )
+    })}
   </DataList>
 )

src/pages/[section]/[...page].astro

@@ -6,6 +6,7 @@ import { content } from '../../content'
 import { kebabCase } from 'change-case'
 import { componentTabs } from '../../globals'
 import PropsTables from '../../components/PropsTables.astro'
+import SectionGallery from '../../components/section-gallery/SectionGallery.astro'
 
 export async function getStaticPaths() {
   const collections = await Promise.all(
@@ -40,12 +41,14 @@ if(section === 'components' && componentTabs[id]) { // if section is components
   {
     title && (
       <Title headingLevel="h1" size="4xl">
-        {title} 
+        {title}
       </Title>
     )
   }
     <PageSection id="main-content" isFilled>
-      <Content />
+      <Content components={{
+        SectionGallery
+      }}/>
       <PropsTables propComponents={propComponents} server:defer />
     </PageSection>
 </MainLayout>

textContent/AllComponents.mdx

@@ -5,11 +5,12 @@ section: components
 sortValue: 1
 ---
 
-import { SectionGallery } from '../src/components/section-gallery/SectionGallery'
-import componentsData from './components-data.jsx'
+import { componentsData } from './components-data.jsx'
 
 <SectionGallery
   section="components"
   galleryItemsData={componentsData}
   placeholderText="Search components by name"
+  hasGridText
+  hasListText
 />

textContent/components-data.jsx

@@ -10,7 +10,6 @@ export const componentsData = {
         product version numbers and any appropriate legal text.
       </>
     ),
-    label: <p>testing custom content</p>,
   },
   'accordion': {
     illustration: './images/component-illustrations/accordion.png',

textContent/examples/Accordion/Accordion.mdx

@@ -10,6 +10,7 @@ propComponents:
     'AccordionToggle',
     AccordionExpandableContentBody,
   ]
+tab: react
 ---
 
 ## Examples