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

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.listen('focusout', this.focusOutHandler.bind(this));
     this.listen('mousedown', this.mouseDownHandler.bind(this));
     this.listenClick({ capture: true });
+    this.isResizing = true;
   }
 
   validate (member) {
@@ -73,6 +74,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/collapse-selector.js

@@ -2,5 +2,6 @@ import ns from '../api/utilities/namespace.js';
 
 export const CollapseSelector = {
   COLLAPSE: ns.selector('collapse'),
-  COLLAPSING: ns.selector('collapsing')
+  COLLAPSING: ns.selector('collapsing'),
+  GROUP: ns.attr('group')
 };

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

@@ -1,13 +1,57 @@
 import { DisclosuresGroup } from '../disclosure/disclosures-group.js';
+import { CollapseSelector } from './collapse-selector.js';
+import { completeAssign } from '../api/utilities/property/complete-assign.js';
 
 class CollapsesGroup extends DisclosuresGroup {
   constructor () {
     super('Collapse');
   }
 
+  init () {
+    super.init();
+    this._isGrouped = this.getAttribute(CollapseSelector.GROUP) !== 'false';
+  }
+
+  get proxy () {
+    const scope = this;
+
+    const proxyAccessors = {
+      set isGrouped (value) {
+        scope.isGrouped = value;
+      },
+      get isGrouped () {
+        return scope.isGrouped;
+      }
+    };
+
+    return completeAssign(super.proxy, proxyAccessors);
+  }
+
   static get instanceClassName () {
     return 'CollapsesGroup';
   }
+
+  get isGrouped () {
+    return super.isGrouped;
+  }
+
+  set isGrouped (value) {
+    const isGrouped = !!value;
+    if (this._isGrouped === isGrouped) return;
+    this._isGrouped = isGrouped;
+    this.setAttribute(CollapseSelector.GROUP, !!value);
+    this.update();
+  }
+
+  get canUngroup () {
+    return true;
+  }
+
+  mutate (attributesNames) {
+    if (attributesNames.includes(CollapseSelector.GROUP)) {
+      this.isGrouped = this.getAttribute(CollapseSelector.GROUP) !== 'false';
+    }
+  }
 }
 
 export { CollapsesGroup };

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

@@ -10,6 +10,7 @@ class DisclosuresGroup extends Instance {
     this._index = -1;
     this._isRetrieving = false;
     this._hasRetrieved = false;
+    this._isGrouped = true;
   }
 
   static get instanceClassName () {
@@ -46,6 +47,9 @@ class DisclosuresGroup extends Instance {
       },
       get hasFocus () {
         return scope.hasFocus;
+      },
+      get isGrouped () {
+        return scope.isGrouped;
       }
     };
 
@@ -134,7 +138,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 +159,14 @@ class DisclosuresGroup extends Instance {
     return false;
   }
 
+  get isGrouped () {
+    return this._isGrouped;
+  }
+
+  get canUngroup () {
+    return false;
+  }
+
   apply () {}
 
   dispose () {