delete accordionGroup and make changes mentionned in review

Author: ddecrulle

package.json

@@ -127,7 +127,6 @@
         "./Header": "./dist/Header.js",
         "./DarkModeSwitch": "./dist/DarkModeSwitch.js",
         "./Alert": "./dist/Alert.js",
-        "./AccordionGroup": "./dist/AccordionGroup.js",
         "./Accordion": "./dist/Accordion.js"
     }
 }

src/Accordion.tsx

@@ -17,17 +17,24 @@ export namespace AccordionProps {
         label: ReactNode;
         classes?: Partial<Record<"root" | "accordion" | "title" | "collapse", string>>;
         content: NonNullable<ReactNode>;
-        defaultExpanded?: boolean;
     };
 
     export type Uncontrolled = Common & {
+        defaultExpanded?: boolean;
         expanded?: undefined;
-        onChange?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, expanded: boolean) => void;
+        onExpandedChange?: (
+            expanded: boolean,
+            e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+        ) => void;
     };
 
     export type Controlled = Common & {
+        defaultExpanded?: undefined;
         expanded: boolean;
-        onChange: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, expanded: boolean) => void;
+        onExpandedChange: (
+            expanded: boolean,
+            e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+        ) => void;
     };
 }
 
@@ -42,7 +49,7 @@ export const Accordion = memo(
             content,
             expanded: expandedProp,
             defaultExpanded = false,
-            onChange,
+            onExpandedChange,
             ...rest
         } = props;
 
@@ -57,8 +64,8 @@ export const Accordion = memo(
         const handleChange = useConstCallback(
             (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
                 setExpandedState(!value);
-                if (onChange) {
-                    onChange(event, !value);
+                if (onExpandedChange) {
+                    onExpandedChange(!value, event);
                 }
             }
         );

src/AccordionGroup.tsx

@@ -1,23 +1,34 @@
 import { Accordion } from "../dist/Accordion";
-import { getStoryFactory } from "./getStory";
-//import { sectionName } from "./sectionName";
+import { getStoryFactory, logCallbacks } from "./getStory";
+import { sectionName } from "./sectionName";
 
 const { meta, getStory } = getStoryFactory({
-    "sectionName": "wip",
+    "sectionName": sectionName,
     "wrappedComponent": { Accordion },
     "description": `- [See DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/accordeon)
 - [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Accordion.tsx)  
 
-## Controlled 
+## Accordion group 
+
+If you want to use a group of accordion, you juste have to wrap your acordions in a div with a class \`fr-accordions-group\` as bellow :
+
+\`\`\`tsx
+<div className={fr.cx("fr-accordions-group")}>
+    <Accordion label="Name of the Accordion 1" content="Content of the Accordion 1" />
+    <Accordion label="Name of the Accordion 2" content="Content of the Accordion 2" />
+</div>
+\`\`\`
+
+## Controlled
 
 In this mode you are in charge of the behavior of the Accordion.  
 _NOTE: In controlled mode there is no animation transition when expanding or colapsing the accordion._
 
 \`\`\`tsx
 function ControlledAccordion() {
-    const [expanded,setExpanded] = useState(true)
+    const [expanded,setExpanded] = useState(false)
     return (
-        <Accordion label="Name of the Accordion" content="Content of the Accordion" onChange={(e,value) => setExpanded(!value)} expanded={expanded}/>
+        <Accordion label="Name of the Accordion" content="Content of the Accordion" onChange={(value,) => setExpanded(!value)} expanded={expanded}/>
     );
 
 }
@@ -30,5 +41,6 @@ export default meta;
 export const Default = getStory({
     "label": "Name of the Accordion",
     "content": "Content of the Accordion",
-    "defaultExpanded": false
+    "defaultExpanded": false,
+    ...logCallbacks(["onExpandedChange"])
 });

stories/Accordion.stories.tsx

@@ -1,13 +1,14 @@
 import React, { useState } from "react"
 import { Accordion } from "@codegouvfr/react-dsfr/Accordion";
+import { fr } from "@codegouvfr/react-dsfr";
 
 
 export default function Test() {
-  const [expanded, setExpanded] = useState<boolean>();
+  const [expanded, setExpanded] = useState<boolean>(true);
   return (
-    <>
+    <div className={fr.cx("fr-accordions-group")}>
       <Accordion label="Accordion Uncontrolled" content="Content of the Uncontrolled Accordion" />
-      <Accordion label="Accordion Controlled" content="Content of the controlled Accordion" defaultExpanded={true} expanded={expanded} onChange={(e, expanded) => { console.log(e); setExpanded(!expanded); }} />
-    </>
+      <Accordion label="Accordion Controlled" content="Content of the controlled Accordion" expanded={expanded} onChange={(expanded, e) => { console.log("event", e); setExpanded(!expanded); }} />
+    </div>
   )
 }