✨ feat(accordions-group): ajoute un attribut pour dégrouper [DS-3687] (…

…#860)

- ajout d'un attribut `data-fr-group="false"` pour dissocier le comportement d'ouverture/fermeture des accordéons à l'intérieur d'un groupe d'accordéons
- étend l'utilisation de cet attribut aux composants héritant du collapses-group : la navigation (uniquement en mobile) et le menu latéral

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: {group: false}}, true); %>

src/component/accordion/example/sample/accordions-group.ejs

@@ -1,14 +1,16 @@
 <%
-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 = {
-  accordions: accordions
+accordionsGroup = {
+  accordions: accordions,
+  ...accordionsGroup
 }
 %>
 

src/component/accordion/template/ejs/accordions-group.ejs

@@ -6,8 +6,13 @@
 %>
 <% eval(include('../../../../core/index.ejs')); %>
 
-<% let accordionsGroup = locals.accordionsGroup || {accordions: []} %>
-<div class="<%= prefix %>-accordions-group" >
+<% 
+let accordionsGroup = locals.accordionsGroup || {accordions: []}
+let attributes = accordionsGroup.attributes || {};
+if (accordionsGroup.group !== undefined)  attributes[`data-${prefix}-group`] = accordionsGroup.group;
+%>
+
+<div <%- includeAttrs(attributes); %> class="<%= prefix %>-accordions-group">
 <%
   for (let i = 0; i < accordionsGroup.accordions.length; i++) {
 %>

src/component/navigation/script/navigation/navigation.js

@@ -14,6 +14,7 @@ class Navigation extends api.core.CollapsesGroup {
     this.addEmission(api.core.RootEmission.CLICK, this._handleRootClick.bind(this));
     this.listen('mousedown', this.handleMouseDown.bind(this));
     this.listenClick({ capture: true });
+    this.isResizing = true;
   }
 
   validate (member) {
@@ -77,6 +78,14 @@ class Navigation extends api.core.CollapsesGroup {
     if (value === -1 && this.current && this.current.hasFocus) this.current.focus();
     super.index = value;
   }
+
+  get canUngroup () {
+    return !this.isBreakpoint(api.core.Breakpoints.LG);
+  }
+
+  resize () {
+    this.update();
+  }
 }
 
 export { Navigation };

src/core/script/collapse/collapses-group.js

@@ -8,6 +8,10 @@ class CollapsesGroup extends DisclosuresGroup {
   static get instanceClassName () {
     return 'CollapsesGroup';
   }
+
+  get canUngroup () {
+    return true;
+  }
 }
 
 export { CollapsesGroup };

src/core/script/disclosure/disclosure-selector.js

@@ -1,5 +1,6 @@
 import ns from '../api/utilities/namespace.js';
 
 export const DisclosureSelector = {
-  PREVENT_CONCEAL: ns.attr.selector('prevent-conceal')
+  PREVENT_CONCEAL: ns.attr.selector('prevent-conceal'),
+  GROUP: ns.attr('group')
 };

src/core/script/disclosure/disclosures-group.js

@@ -1,6 +1,7 @@
 import { Instance } from '../api/modules/register/instance.js';
 import { DisclosureEmission } from './disclosure-emission.js';
 import { completeAssign } from '../api/utilities/property/complete-assign.js';
+import { DisclosureSelector } from './disclosure-selector.js';
 
 class DisclosuresGroup extends Instance {
   constructor (disclosureInstanceClassName, jsAttribute) {
@@ -10,6 +11,7 @@ class DisclosuresGroup extends Instance {
     this._index = -1;
     this._isRetrieving = false;
     this._hasRetrieved = false;
+    this._isGrouped = true;
   }
 
   static get instanceClassName () {
@@ -21,6 +23,7 @@ class DisclosuresGroup extends Instance {
     this.addAscent(DisclosureEmission.RETRIEVE, this.retrieve.bind(this));
     this.addAscent(DisclosureEmission.REMOVED, this.update.bind(this));
     this.descend(DisclosureEmission.GROUP);
+    this._isGrouped = this.getAttribute(DisclosureSelector.GROUP) !== 'false';
     this.update();
   }
 
@@ -46,6 +49,12 @@ class DisclosuresGroup extends Instance {
       },
       get hasFocus () {
         return scope.hasFocus;
+      },
+      set isGrouped (value) {
+        scope.isGrouped = value;
+      },
+      get isGrouped () {
+        return scope.isGrouped;
       }
     };
 
@@ -134,7 +143,7 @@ class DisclosuresGroup extends Instance {
       if (value === i) {
         if (!member.isDisclosed) member.disclose(true);
       } else {
-        if (member.isDisclosed) member.conceal(true);
+        if ((this.isGrouped || !this.canUngroup) && member.isDisclosed) member.conceal(true);
       }
     }
     this.apply();
@@ -155,6 +164,28 @@ class DisclosuresGroup extends Instance {
     return false;
   }
 
+  set isGrouped (value) {
+    const isGrouped = !!value;
+    if (this._isGrouped === isGrouped) return;
+    this._isGrouped = isGrouped;
+    this.setAttribute(DisclosureSelector.GROUP, !!value);
+    this.update();
+  }
+
+  get isGrouped () {
+    return this._isGrouped;
+  }
+
+  get canUngroup () {
+    return false;
+  }
+
+  mutate (attributesNames) {
+    if (attributesNames.includes(DisclosureSelector.GROUP)) {
+      this.isGrouped = this.getAttribute(DisclosureSelector.GROUP) !== 'false';
+    }
+  }
+
   apply () {}
 
   dispose () {