feat(FormGroup): make underlying FormPanel toggleable prop user configurable

Author: spwoodcock

packages/web-forms/src/components/FormGroup.vue

@@ -4,7 +4,9 @@ import { computed } from 'vue';
 import FormPanel from './FormPanel.vue';
 import QuestionList from './QuestionList.vue';
 
-const props = defineProps<{ node: GroupNode }>();
+const props = withDefaults(defineProps<{ node: GroupNode, toggleable?: boolean }>(), {
+	toggleable: false,
+});
 
 const classes = ['group'];
 
@@ -18,7 +20,7 @@ const tableLayout = computed(() => {
 </script>
 
 <template>
-	<FormPanel :title="node.currentState.label?.asString" :no-ui="!node.currentState.label" :class="classes">
+	<FormPanel :title="node.currentState.label?.asString" :no-ui="!node.currentState.label" :toggleable="props.toggleable" :class="classes">
 		<div :class="{ 'table-layout': tableLayout, 'gap-2': !tableLayout, 'flex': true, 'flex-column': true }">
 			<QuestionList :nodes="node.currentState.children" />
 		</div>

packages/web-forms/src/components/FormPanel.vue

@@ -12,6 +12,7 @@ export interface PanelProps {
 	class?: string[] | string;
 	labelIcon?: string;
 	labelNumber?: number;
+    toggleable?: boolean;
 }
 
 const props = withDefaults(defineProps<PanelProps>(), {
@@ -21,6 +22,7 @@ const props = withDefaults(defineProps<PanelProps>(), {
 	class: undefined,
 	labelIcon: undefined,
 	labelNumber: undefined,
+    toggleable: false,
 });
 
 const panelClass = computed(() => [
@@ -31,7 +33,9 @@ const panelClass = computed(() => [
 const panelState = ref(false);
 
 const toggle = () => {
-	panelState.value = !panelState.value;
+    if (props.toggleable) {
+		panelState.value = !panelState.value;
+    }
 };
 
 const menu = ref<Menu & MenuState>();
@@ -40,17 +44,25 @@ const toggleMenu = (event: Event) => {
 	menu.value?.toggle(event);
 };
 </script>
+
 <template>
-	<Panel v-if="!noUi" :class="panelClass" :toggleable="true" :collapsed="panelState">
+    <Panel v-if="!noUi" :class="[panelClass, { 'toggleable-enabled': toggleable }]" :toggleable="toggleable" :collapsed="toggleable ? panelState : false">
 		<template #header>
-			<div class="panel-title" role="button" @click="toggle">
+            <div v-if="toggleable" class="panel-title" role="button" @click="toggle">
 				<h2>
 					<span class="chevron" :class="panelState ? 'icon-keyboard_arrow_down' : 'icon-keyboard_arrow_up'" />
 					<span v-if="labelNumber" class="label-number">{{ labelNumber }}</span>
 					<span>{{ title }}</span>
 					<span v-if="labelIcon" class="ml-2" :class="labelIcon" />
 				</h2>
 			</div>
+            <div v-else>
+                <h2>
+                    <span v-if="labelNumber" class="label-number">{{ labelNumber }}</span>
+                    <span>{{ title }}</span>
+                    <span v-if="labelIcon" class="ml-2" :class="labelIcon" />
+                </h2>
+            </div>
 		</template>
 		<template v-if="menuItems && menuItems.length > 0" #icons>
 			<Button severity="secondary" rounded class="btn-context" :class="{ 'p-focus': menu?.overlayVisible }" icon="icon-more_vert" aria-label="More" @click="toggleMenu" />
@@ -129,9 +141,8 @@ h2 {
 	}
 
 	:deep(.p-panel-content) {
-		border-left: 2px solid var(--gray-200);
+		box-shadow: none;
 		margin-left: 10px;
-		border-radius: 0;
 		padding: 0 0 0 1.5rem;
 	}
 
@@ -140,6 +151,11 @@ h2 {
 	}
 }
 
+.toggleable-enabled :deep(.p-panel-content) {
+	border-left: 2px solid var(--gray-200);
+	border-radius: 0;
+}
+
 .content-wrapper {
 	display: flex;
 	flex-direction: column;

packages/web-forms/src/components/QuestionList.vue

@@ -48,7 +48,7 @@ const isControlNode = (node: NonStructuralNode): node is ControlNode => {
 	<template v-for="node in nodes" :key="node.nodeId">
 		<template v-if="node.currentState.relevant">
 			<!-- Render group nodes -->
-			<FormGroup v-if="isGroupNode(node)" :node="node" />
+			<FormGroup v-if="isGroupNode(node)" :node="node" toggleable />
 
 			<!-- Render repeat nodes -->
 			<RepeatRange v-else-if="isRepeatRangeNode(node)" :node="node" />