fixing interactive content

Author: kmcfaul

src/components/section-gallery/SectionGallery.tsx

@@ -20,7 +20,7 @@ export interface SectionGalleryItemData {
   /** Path to the item illustration */ // TODO: remove if img method is fine
   illustration: string
   /** Summary text of the item */
-  summary: JSX.Element
+  summary: string
   /** Label included in the item footer. Choose from a preset or pass a custom label. */
   label?: 'beta' | 'demo' | 'deprecated'
   /** Link to the item, relative to the section, e.g. "/{section}/{page}" */
@@ -73,6 +73,7 @@ export const SectionGallery = ({
     }))
     .sort((item1, item2) => item1.name.localeCompare(item2.name))
 
+  console.log(galleryItems)
   const nonCharsRegex = /[^A-Z0-9]+/gi
   const filteringTerm = searchTerm.replace(nonCharsRegex, '')
   const filteredItems: SectionGalleryItem[] = galleryItems.filter((item) =>

src/components/section-gallery/SectionGalleryGridLayout.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import {
   Gallery,
   GalleryItem,
@@ -11,6 +12,7 @@ import {
 } from '@patternfly/react-core'
 import { SectionGalleryItem } from './SectionGallery'
 import { sentenceCase } from 'change-case'
+import { convertToReactComponent } from '@patternfly/ast-helpers'
 
 interface SectionGalleryGridLayoutProps {
   /** Section where the gallery is located */
@@ -33,6 +35,15 @@ export const SectionGalleryGridLayout = ({
     {galleryItems.map(({ name, img, data }, idx) => {
       const itemLink = data.link || `/${section}/${name}`
 
+      //TODO: rethink how JSX / enriched content is passed to framework
+      const summaryNoLinks = data.summary.replace(
+        /<a[^>]*>([^<]+)<\/a>/gm,
+        '$1',
+      )
+      const { code } = convertToReactComponent(`<>${summaryNoLinks}</>`)
+      const getSummaryComponent = new Function('React', code)
+
+      console.log(img)
       return (
         <GalleryItem span={4} key={idx}>
           <Card id={name} key={idx} isClickable>
@@ -48,12 +59,14 @@ export const SectionGalleryGridLayout = ({
             </CardHeader>
             {(hasGridImages || hasGridText) && (
               <CardBody>
-                {hasGridImages && data.illustration && (
+                {hasGridImages && img && (
                   <img src={img.src} alt={`${name} illustration`} /> // verify whether this img.src approach is correct
                 )}
                 {hasGridText && (
                   <Content isEditorial>
-                    <Content component="p">{data.summary}</Content>
+                    <Content component="p">
+                      {getSummaryComponent(React)}
+                    </Content>
                   </Content>
                 )}
               </CardBody>

src/components/section-gallery/SectionGalleryListLayout.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import {
   DataList,
   DataListItem,
@@ -12,6 +13,7 @@ import {
 } from '@patternfly/react-core'
 import { SectionGalleryItem } from './SectionGallery'
 import { sentenceCase } from 'change-case'
+import { convertToReactComponent } from '@patternfly/ast-helpers'
 
 interface SectionGalleryListLayoutProps {
   /** Section where the gallery is located */
@@ -34,6 +36,14 @@ export const SectionGalleryListLayout = ({
     {galleryItems.map(({ name, img, data }, idx) => {
       const itemLink = data.link || `/${section}/${name}`
 
+      //TODO: rethink how JSX / enriched content is passed to framework
+      const summaryNoLinks = data.summary.replace(
+        /<a[^>]*>([^<]+)<\/a>/gm,
+        '$1',
+      )
+      const { code } = convertToReactComponent(`<>${summaryNoLinks}</>`)
+      const getSummaryComponent = new Function('React', code)
+
       return (
         <a href={itemLink} key={idx} className="ws-section-gallery-item">
           <DataListItem>
@@ -81,7 +91,9 @@ export const SectionGalleryListLayout = ({
                     </Split>
                     {hasListText && (
                       <Content isEditorial>
-                        <Content component="p">{data.summary}</Content>
+                        <Content component="p">
+                          {getSummaryComponent(React)}
+                        </Content>
                       </Content>
                     )}
                   </DataListCell>,

textContent/AllComponents.mdx

@@ -5,7 +5,7 @@ section: components
 sortValue: 1
 ---
 
-import { componentsData } from './components-data.jsx'
+import { componentsData } from './components-data.js'
 
 <SectionGallery
   section="components"