From 0d48595364db68e1481464ea4544e6bec6e81d48 Mon Sep 17 00:00:00 2001
From: Alejandro MG <alejandro@amguillen.dev>
Date: Mon, 23 Dec 2024 17:57:38 +0100
Subject: [PATCH] Adds DsfrAccordionGroup to SummaryElementList

---
 .../DeclarationSummary/SummaryElementList.vue | 26 +++++++++++--------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/DeclarationSummary/SummaryElementList.vue b/frontend/src/components/DeclarationSummary/SummaryElementList.vue
index 1aea1b4e..62ea5fa4 100644
--- a/frontend/src/components/DeclarationSummary/SummaryElementList.vue
+++ b/frontend/src/components/DeclarationSummary/SummaryElementList.vue
@@ -1,17 +1,18 @@
 <template>
   <div v-if="elements.length">
     <!-- Affichage avec les accordéons : les ingrédients sont cachés à l'intérieur -->
-    <DsfrAccordion v-if="useAccordions">
-      <template v-slot:title>
-        <SummaryElementListTitle :objectType="objectType" :elementCount="`${elements.length}`" />
-      </template>
-      <SummaryElementListItems
-        :showElementAuthorization="showElementAuthorization"
-        :objectType="objectType"
-        :elements="elements"
-      />
-    </DsfrAccordion>
-
+    <DsfrAccordionsGroup v-if="useAccordions" v-model="activeAccordion">
+      <DsfrAccordion>
+        <template v-slot:title>
+          <SummaryElementListTitle :objectType="objectType" :elementCount="`${elements.length}`" />
+        </template>
+        <SummaryElementListItems
+          :showElementAuthorization="showElementAuthorization"
+          :objectType="objectType"
+          :elements="elements"
+        />
+      </DsfrAccordion>
+    </DsfrAccordionsGroup>
     <!-- Affichage sans les accordéons, tous les ingrédients sont affichés -->
     <div v-else>
       <SummaryElementListTitle class="mt-6 mb-3" :objectType="objectType" />
@@ -25,6 +26,7 @@
 </template>
 
 <script setup>
+import { ref } from "vue"
 import SummaryElementListTitle from "./SummaryElementListTitle"
 import SummaryElementListItems from "./SummaryElementListItems"
 
@@ -34,4 +36,6 @@ defineProps({
   useAccordions: { type: Boolean },
   showElementAuthorization: { type: Boolean },
 })
+
+const activeAccordion = ref()
 </script>