554 Accordion block

packages/client/src/components/block-defaults/accordion-block/AccordionBlock.tsx

@@ -0,0 +1,40 @@
+import { CSSProperties } from 'react';
+import { observer } from 'mobx-react-lite';
+import { useBlock } from '@/hooks';
+import { BlockDef, BlockComponent } from '@/stores';
+import { Slot } from '@/components/blocks';
+import { Accordion } from '@semoss/ui';
+
+export interface AccordionBlockDef extends BlockDef<'accordion'> {
+    widget: 'accordion';
+    data: {
+        style: CSSProperties;
+    };
+    slots: {
+        header: true;
+        content: true;
+    };
+}
+
+export const AccordionBlock: BlockComponent = observer(({ id }) => {
+    const { attrs, data, slots } = useBlock<AccordionBlockDef>(id);
+
+    return (
+        <div
+            style={{
+                ...data.style,
+                overflowWrap: 'anywhere', // text that overflows container
+            }}
+            {...attrs}
+        >
+            <Accordion>
+                <Accordion.Trigger>
+                    <Slot slot={slots.header} />
+                </Accordion.Trigger>
+                <Accordion.Content>
+                    <Slot slot={slots.content} />
+                </Accordion.Content>
+            </Accordion>
+        </div>
+    );
+});

packages/client/src/components/block-defaults/accordion-block/config.tsx

@@ -0,0 +1,26 @@
+import { BlockConfig } from '@/stores';
+import { Schema } from '@mui/icons-material';
+import { BLOCK_TYPE_LAYOUT } from '../block-defaults.constants';
+import { AccordionBlock, AccordionBlockDef } from './AccordionBlock';
+
+export const config: BlockConfig<AccordionBlockDef> = {
+    widget: 'accordion',
+    type: BLOCK_TYPE_LAYOUT,
+    data: {
+        style: {
+            display: 'flex',
+            flexDirection: 'column',
+            padding: '4px',
+            gap: '8px',
+        },
+    },
+    listeners: {},
+    slots: {
+        header: [],
+        content: [],
+    },
+    render: AccordionBlock,
+    icon: Schema,
+    contentMenu: [],
+    styleMenu: [],
+};

packages/client/src/components/block-defaults/accordion-block/index.ts

@@ -0,0 +1,2 @@
+export * from './config';
+export * from './AccordionBlock';

packages/client/src/components/block-defaults/index.ts

@@ -61,6 +61,10 @@ import {
     PDFViewerBlockDef,
 } from './pdfViewer-block';
 import { config as ThemeBlockConfig, ThemeBlockDef } from './theme-block';
+import {
+    config as AccordionBlockConfig,
+    AccordionBlockDef,
+} from './accordion-block';
 
 export type DefaultBlockDefinitions =
     | AudioBlockDef
@@ -96,7 +100,8 @@ export type DefaultBlockDefinitions =
     | ModalBlockDef
     | RadioBlockDef
     | PDFViewerBlockDef
-    | ThemeBlockDef;
+    | ThemeBlockDef
+    | AccordionBlockDef;
 
 export const DefaultBlocks: Registry<DefaultBlockDefinitions> = {
     [AudioBlockConfig.widget]: AudioBlockConfig,
@@ -127,6 +132,7 @@ export const DefaultBlocks: Registry<DefaultBlockDefinitions> = {
     [AudioInputBlockConfig.widget]: AudioInputBlockConfig,
     [PDFViewerBlockConfig.widget]: PDFViewerBlockConfig,
     [ThemeBlockConfig.widget]: ThemeBlockConfig,
+    [AccordionBlockConfig.widget]: AccordionBlockConfig,
 };
 
 export {
@@ -154,4 +160,5 @@ export {
     RadioBlockConfig,
     PDFViewerBlockConfig,
     ThemeBlockConfig,
+    AccordionBlockConfig,
 };

packages/client/src/components/designer/menu/default-menu.ts

@@ -32,6 +32,7 @@ import BLOCK_RADIO from '@/assets/img/BLOCK_RADIO.png';
 import HTML_BLOCK from '@/assets/img/HTML_BLOCK_SM.png';
 import BLOCK_MODAL from '@/assets/img/BLOCK_MODAL.png';
 import BLOCK_THEME from '@/assets/img/BLOCK_THEME.png';
+import BLOCK_ACCORDION from '@/assets/img/BLOCK_ACCORDION.png';
 
 const SECTION_ELEMENT = 'Element';
 const SECTION_INPUT = 'Input';
@@ -170,6 +171,22 @@ export const DEFAULT_MENU: DesignerMenuItem[] = [
             },
         },
     },
+    {
+        section: SECTION_LAYOUT,
+        image: BLOCK_ACCORDION,
+        name: 'Accordion',
+        json: {
+            widget: 'accordion',
+            data: {
+                style: {},
+            },
+            listeners: {},
+            slots: {
+                header: [],
+                content: [],
+            },
+        },
+    },
     {
         section: SECTION_INPUT,
         image: BLOCK_INPUT,