Merge branch 'main' of https://github.com/codegouvfr/react-dsfr

Author: garronej

package.json

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

src/Accordion.tsx

@@ -1,12 +1,13 @@
-import React, { forwardRef, memo, ReactNode, useId } from "react";
+import React, { forwardRef, memo, ReactNode, useId, useState } from "react";
 import { assert } from "tsafe";
 import type { Equals } from "tsafe";
 import { fr } from "./lib";
 import { cx } from "./lib/tools/cx";
 import "@gouvfr/dsfr/dist/component/accordion/accordion.css";
 import { symToStr } from "tsafe/symToStr";
+import { useConstCallback } from "./lib/tools/powerhooks/useConstCallback";
 
-export type AccordionProps = AccordionProps.Controlled;
+export type AccordionProps = AccordionProps.Controlled | AccordionProps.Uncontrolled;
 
 //TODO Controlled mode (callback onClick, expended etc ...)
 export namespace AccordionProps {
@@ -18,7 +19,23 @@ export namespace AccordionProps {
         content: NonNullable<ReactNode>;
     };
 
-    export type Controlled = Common & {};
+    export type Uncontrolled = Common & {
+        defaultExpanded?: boolean;
+        expanded?: undefined;
+        onExpandedChange?: (
+            expanded: boolean,
+            e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+        ) => void;
+    };
+
+    export type Controlled = Common & {
+        defaultExpanded?: undefined;
+        expanded: boolean;
+        onExpandedChange: (
+            expanded: boolean,
+            e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+        ) => void;
+    };
 }
 
 /** @see <https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/accordeon>  */
@@ -30,20 +47,37 @@ export const Accordion = memo(
             label,
             classes = {},
             content,
+            expanded: expandedProp,
+            defaultExpanded = false,
+            onExpandedChange,
             ...rest
         } = props;
 
         assert<Equals<keyof typeof rest, never>>();
 
         const id = useId();
 
+        const [expandedState, setExpandedState] = useState(defaultExpanded);
+
+        const value = expandedProp ? expandedProp : expandedState;
+
+        const onExtendButtonClick = useConstCallback(
+            (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+                setExpandedState(!value);
+                if (onExpandedChange) {
+                    onExpandedChange(!value, event);
+                }
+            }
+        );
+
         return (
             <section className={cx(fr.cx("fr-accordion"), className)} ref={ref} {...rest}>
                 <HtmlTitleTag className={cx(fr.cx("fr-accordion__title"), classes.title)}>
                     <button
                         className={fr.cx("fr-accordion__btn")}
-                        aria-expanded="true"
+                        aria-expanded={value}
                         aria-controls={`accordion-${id}`}
+                        onClick={onExtendButtonClick}
                     >
                         {label}
                     </button>

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(false)
     return (
-        <Accordion label="Name of the Accordion" content="Content of the Accordion"/>
+        <Accordion label="Name of the Accordion" content="Content of the Accordion" onChange={(value,) => setExpanded(!value)} expanded={expanded}/>
     );
 
 }
@@ -29,5 +40,7 @@ export default meta;
 
 export const Default = getStory({
     "label": "Name of the Accordion",
-    "content": "Content of the Accordion"
+    "content": "Content of the Accordion",
+    "defaultExpanded": false,
+    ...logCallbacks(["onExpandedChange"])
 });

stories/Accordion.stories.tsx

@@ -0,0 +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>(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" expanded={expanded} onChange={(expanded, e) => { console.log("event", e); setExpanded(!expanded); }} />
+    </div>
+  )
+}