feat(accordions-group): ajoute un modifieur pour dissocier le collaps…

…e du groupe
GouvernementFR · Jan 9, 2024 · c776711 · c776711
1 parent 616fe65
commit c776711
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 5 deletions.
diff --git a/src/component/accordion/example/index.ejs b/src/component/accordion/example/index.ejs
@@ -3,3 +3,5 @@
 <%- sample('Accordéon', './sample/accordion', {}, true); %>
 
 <%- sample('Groupe d‘accordéons', './sample/accordions-group', {}, true); %>
+
+<%- sample('Groupe d‘accordéons dissociés', './sample/accordions-group', {accordionsGroup: {dissociate: true}}, true); %>
diff --git a/src/component/accordion/example/sample/accordions-group.ejs b/src/component/accordion/example/sample/accordions-group.ejs
@@ -1,13 +1,15 @@
 <%
-const accordions = [];
+let accordionsGroup = locals.accordionsGroup || {};
 
+const accordions = [];
 for (let i = 0; i < 6; i++) accordions.push({
   label: 'Intitulé accordéon',
   content: randomContent(),
   id: uniqueId('accordion'),
 });
 
-const accordionsGroup = {
+accordionsGroup = {
+  ...accordionsGroup,
   accordions: accordions
 }
 %>

diff --git a/src/component/accordion/script/accordion/accordion-selector.js b/src/component/accordion/script/accordion/accordion-selector.js
@@ -4,7 +4,7 @@ const ACCORDION = api.internals.ns.selector('accordion');
 const COLLAPSE = api.internals.ns.selector('collapse');
 
 export const AccordionSelector = {
-  GROUP: api.internals.ns.selector('accordions-group'),
+  GROUP: `${api.internals.ns.selector('accordions-group')}:not(${api.internals.ns.selector('accordions-group--dissociate')})`,
   ACCORDION: ACCORDION,
   COLLAPSE: `${ACCORDION} > ${COLLAPSE}, ${ACCORDION} > *:not(${ACCORDION}):not(${COLLAPSE}) > ${COLLAPSE}, ${ACCORDION} > *:not(${ACCORDION}):not(${COLLAPSE}) > *:not(${ACCORDION}):not(${COLLAPSE}) > ${COLLAPSE}`,
   COLLAPSE_LEGACY: `${ACCORDION} ${COLLAPSE}`,

diff --git a/src/component/accordion/template/ejs/accordions-group.ejs b/src/component/accordion/template/ejs/accordions-group.ejs
@@ -6,8 +6,14 @@
 %>
 <% eval(include('../../../../core/index.ejs')); %>
 
-<% let accordionsGroup = locals.accordionsGroup || {accordions: []} %>
-<div class="<%= prefix %>-accordions-group" >
+<% 
+let accordionsGroup = locals.accordionsGroup || {accordions: []}
+let classes = accordionsGroup.classes || [];
+classes.push(prefix + '-accordions-group');
+if (accordionsGroup.dissociate) classes.push(prefix + '-accordions-group--dissociate');
+%>
+
+<div <%- includeClasses(classes); %>>
 <%
   for (let i = 0; i < accordionsGroup.accordions.length; i++) {
 %>