feat: add collapsible

Author: rob-at-cortex

src/components/Blocks/Content.stories.tsx

@@ -60,6 +60,32 @@ export const Features: Story = {
   },
 }
 
+export const FullWidthCollapsable: Story = {
+  args: {
+    ...BlocksTest.content.fullWidthCollapsable,
+    theme: {
+      ...Default.args.theme,
+      settings: {
+        ...Default.args.theme?.settings,
+        box: 'collapsable',
+      },
+    },
+  },
+}
+
+export const HalfWidthCollapsable: Story = {
+  args: {
+    ...BlocksTest.content.halfWidthCollapsable,
+    theme: {
+      ...Default.args.theme,
+      settings: {
+        ...Default.args.theme?.settings,
+        box: 'collapsable',
+      },
+    },
+  },
+}
+
 export const Test: Story = {
   args: {
     id: '681a4999a2fd5620877e41a0',

src/components/Blocks/Content.tsx

@@ -18,6 +18,7 @@ export const ContentBlock: React.FC<ContentBlockProps> = (props) => {
   const variants = {
     none: '',
     line: 'border border-primary p-4 rounded-lg',
+    collapsable: '',
   }
 
   const hasRichTextMedia = (richtext: any): boolean => {
@@ -54,7 +55,9 @@ export const ContentBlock: React.FC<ContentBlockProps> = (props) => {
   }
 
   const separateH2 = (richtext: any, theme: string, size: string): SeparateH2Result => {
-    if (theme === 'none' || size === 'full') {
+    console.log('separateH2 called with theme:', theme, 'size:', size)
+
+    if (theme === 'none' || (size === 'full' && theme !== 'collapsable')) {
       return { processedRichText: richtext, heading: null }
     }
     let newRichText = richtext
@@ -68,6 +71,58 @@ export const ContentBlock: React.FC<ContentBlockProps> = (props) => {
   }
 
 
+  
+
+  if (theme?.settings?.box === 'collapsable') {
+    return (
+<div className="col-span-4 lg:col-span-12 mb-4">
+         
+              <div className="mt-4">
+                <div className="grid grid-cols-4 lg:grid-cols-12 gap-y-8 gap-x-8">
+                  {columns &&
+                    columns.length > 0 &&
+                    columns.map((col, index) => {
+                      const { enableLink, link, richText, size } = col
+                      // console.log('richText', index, size, richText) 
+                      const { processedRichText, heading} = separateH2(richText,theme?.settings?.box || 'none', size || 'full')
+                      // console.log('processedRichText', processedRichText)
+                      console.log('heading', heading)
+                      return (
+                        <div
+                          className={cn(
+                            `col-span-4 lg:col-span-${colsSpanClasses[size!]}`,
+                            {
+                              'md:col-span-2': size !== 'full',
+                            },
+                            variants[( !hasRichTextMedia(richText as any) && theme?.settings?.box) || 'none'],
+                            'intersect-once intersect:animate-flip-up opacity-0 intersect:opacity-100 intersect:animate-duration-500',
+              `intersect:animate-delay-${index + 1}00`
+                          )}
+                          key={index}
+                        >
+                             <details className="group">
+              <summary className="cursor-pointer select-none bg-primary text-primary-foreground text-3xl px-4 py-4 rounded-lg">
+                { heading ? <span className="bg-primary text-primary-foreground mb-4 px-4 py-2 text-3xl">{heading.children[0].text}</span> : <span className="text-lg font-medium">Expand to view content</span> }
+                {/* <span className="float-right transition-transform duration-300 ease-in-out group-open:rotate-180">
+                </span> */}
+              </summary>
+                          <div className="mt-4">
+                          {processedRichText && <RichText content={processedRichText} enableGutter={false} className="rich-text" />}
+
+                          {enableLink && <CMSLink {...link} />}
+                          </div>
+                                      </details>
+
+                        </div>
+                      )
+                    })}
+                </div>
+              </div>
+          </div>
+    )
+  }
+
+
   return (
     <div className="my-6">
 
@@ -77,6 +132,7 @@ export const ContentBlock: React.FC<ContentBlockProps> = (props) => {
           theme?.settings?.box ? 'gap-x-8' : 'gap-x-16',
         )}
       >
+
         {columns &&
           columns.length > 0 &&
           columns.map((col, index) => {

src/payload-types.ts

@@ -415,7 +415,7 @@ export interface ContentBlock {
        * Overlay the theme colour on top of the image
        */
       overlay?: boolean | null;
-      box?: ('none' | 'line') | null;
+      box?: ('none' | 'line' | 'collapsable') | null;
     };
   };
   columns?:

src/tests/payload.ts

@@ -679,6 +679,83 @@ export const RichTextTest = {
 
 export const BlocksTest = {
   content: {
+    fullWidthCollapsable: {
+      id: '67a74c276365f244c8b6d149',
+      blockName: null,
+
+      columns: [
+        {
+          id: '67a74ea16365f244c8b6d14b',
+          size: 'full',
+
+          richText: RichTextTest.medium,
+          enableLink: null,
+
+          link: {
+            type: 'reference',
+            newTab: null,
+            url: null,
+            label: null,
+            appearance: 'default',
+          },
+        },
+      ],
+      blockType: 'content',
+
+      theme: {
+        settings: {
+          theme: 'dark',
+          background: 'transparent',
+          overlay: false,
+        },
+      },
+    },
+    halfWidthCollapsable: {
+      id: '67a74c276365f244c8b6d149',
+      blockName: null,
+
+      columns: [
+        {
+          id: '67a74ea16365f244c8b6d14b',
+          size: 'half',
+
+          richText: RichTextTest.medium,
+          enableLink: null,
+
+          link: {
+            type: 'reference',
+            newTab: null,
+            url: null,
+            label: null,
+            appearance: 'default',
+          },
+        },
+        {
+          id: '67a74ea16365f244c8b6d14b',
+          size: 'half',
+
+          richText: RichTextTest.medium,
+          enableLink: null,
+
+          link: {
+            type: 'reference',
+            newTab: null,
+            url: null,
+            label: null,
+            appearance: 'default',
+          },
+        },
+      ],
+      blockType: 'content',
+
+      theme: {
+        settings: {
+          theme: 'dark',
+          background: 'transparent',
+          overlay: false,
+        },
+      },
+    },
     halfWithEmbeddedImage: {
       id: '67a74c276365f244c8b6d149',
       blockName: null,