From 3b827c35a26e14bd73aca2295e2aed71a71c366b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 2 Sep 2024 16:30:14 +0100
Subject: [PATCH] Add collapsed button option to multistep form block

---
 .../bbui/src/ButtonGroup/CollapsedButtonGroup.svelte |  2 +-
 .../settings/controls/FormStepConfiguration.svelte   |  2 ++
 packages/client/manifest.json                        | 12 ++++++++++++
 .../components/app/blocks/MultiStepFormblock.svelte  | 10 +++++++---
 4 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/packages/bbui/src/ButtonGroup/CollapsedButtonGroup.svelte b/packages/bbui/src/ButtonGroup/CollapsedButtonGroup.svelte
index f1860ecaea..e8362efc4b 100644
--- a/packages/bbui/src/ButtonGroup/CollapsedButtonGroup.svelte
+++ b/packages/bbui/src/ButtonGroup/CollapsedButtonGroup.svelte
@@ -28,7 +28,7 @@
 >
   {text || "Action"}
 </Button>
-<Popover bind:this={popover} {align} {anchor} {offset}>
+<Popover bind:this={popover} {align} {anchor} {offset} resizable={false}>
   <Menu>
     {#each buttons as button}
       <MenuItem on:click={() => handleClick(button)} disabled={button.disabled}>
diff --git a/packages/builder/src/components/design/settings/controls/FormStepConfiguration.svelte b/packages/builder/src/components/design/settings/controls/FormStepConfiguration.svelte
index d9257545c9..6e7297a245 100644
--- a/packages/builder/src/components/design/settings/controls/FormStepConfiguration.svelte
+++ b/packages/builder/src/components/design/settings/controls/FormStepConfiguration.svelte
@@ -54,6 +54,8 @@
     _instanceName: `Step ${currentStep + 1}`,
     title: savedInstance.title ?? defaults?.title,
     buttons: savedInstance.buttons || defaults?.buttons,
+    buttonsCollapsed: savedInstance.buttonsCollapsed,
+    buttonsCollapsedText: savedInstance.buttonsCollapsedText,
     fields: savedInstance.fields,
     desc: savedInstance.desc,
 
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index de70e98357..c84495ac0c 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -7076,6 +7076,18 @@
         "key": "buttons",
         "wide": true,
         "nested": true
+      },
+      {
+        "type": "boolean",
+        "label": "Collapse",
+        "key": "buttonsCollapsed"
+      },
+      {
+        "type": "text",
+        "label": "Collapsed text",
+        "key": "buttonsCollapsedText",
+        "dependsOn": "buttonsCollapsed",
+        "placeholder": "Action"
       }
     ]
   },
diff --git a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte b/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
index bcc62b5229..6cecf57a2c 100644
--- a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
+++ b/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
@@ -77,7 +77,7 @@
   const enrichSteps = (steps, schema, id) => {
     const safeSteps = steps?.length ? steps : [{}]
     return safeSteps.map((step, idx) => {
-      const { title, desc, fields, buttons } = step
+      const { title, fields, buttons } = step
       const defaultProps = Utils.buildMultiStepFormBlockDefaultProps({
         _id: id,
         stepCount: safeSteps.length,
@@ -86,10 +86,10 @@
         dataSource,
       })
       return {
+        ...step,
         _stepId: Helpers.uuid(),
         fields: getDefaultFields(fields || [], schema),
         title: title ?? defaultProps.title,
-        desc,
         buttons: buttons || defaultProps.buttons,
       }
     })
@@ -172,7 +172,11 @@
           {#if buttonPosition === "bottom"}
             <BlockComponent
               type="buttongroup"
-              props={{ buttons: step.buttons }}
+              props={{
+                buttons: step.buttons,
+                collapsed: step.buttonsCollapsed,
+                collapsedText: step.buttonsCollapsedText,
+              }}
               order={3}
             />
           {/if}