first step accordion

Author: ddecrulle

package.json

@@ -126,6 +126,8 @@
         "./Tabs": "./dist/Tabs.js",
         "./Header": "./dist/Header.js",
         "./DarkModeSwitch": "./dist/DarkModeSwitch.js",
-        "./Alert": "./dist/Alert.js"
+        "./Alert": "./dist/Alert.js",
+        "./AccordionGroup": "./dist/AccordionGroup.js",
+        "./Accordion": "./dist/Accordion.js"
     }
 }

src/Accordion.tsx

@@ -0,0 +1,61 @@
+import React, { forwardRef, memo, ReactNode, useId } 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";
+
+export type AccordionProps = AccordionProps.Controlled;
+
+//TODO Controlled mode (callback onClick, expended etc ...)
+export namespace AccordionProps {
+    export type Common = {
+        className?: string;
+        titleAs?: `h${2 | 3 | 4 | 5 | 6}`;
+        label: ReactNode;
+        classes?: Partial<Record<"root" | "accordion" | "title" | "collapse", string>>;
+        content: NonNullable<ReactNode>;
+    };
+
+    export type Controlled = Common & {};
+}
+
+/** @see <https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/accordeon>  */
+export const Accordion = memo(
+    forwardRef<HTMLDivElement, AccordionProps>((props, ref) => {
+        const {
+            className,
+            titleAs: HtmlTitleTag = "h3",
+            label,
+            classes = {},
+            content,
+            ...rest
+        } = props;
+
+        assert<Equals<keyof typeof rest, never>>();
+
+        const id = useId();
+
+        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-controls={`accordion-${id}`}
+                    >
+                        {label}
+                    </button>
+                </HtmlTitleTag>
+                <div className={cx(fr.cx("fr-collapse"), classes.collapse)} id={`accordion-${id}`}>
+                    {content}
+                </div>
+            </section>
+        );
+    })
+);
+
+Accordion.displayName = symToStr({ Accordion });
+
+export default Accordion;

src/AccordionGroup.tsx

@@ -0,0 +1,46 @@
+import React, { forwardRef, memo } 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 { Accordion, AccordionProps } from "./Accordion";
+
+export type AccordionGroup = AccordionGroup.Controlled;
+
+export namespace AccordionGroup {
+    export type Common = {
+        className?: string;
+        accordions: AccordionProps[];
+    };
+
+    export type Controlled = Common & {};
+}
+
+/** @see <https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/accordeon>  */
+export const AccordionGroup = memo(
+    forwardRef<HTMLDivElement, AccordionGroup>((props, ref) => {
+        const { className, accordions, ...rest } = props;
+
+        assert<Equals<keyof typeof rest, never>>();
+
+        return (
+            <div className={cx(fr.cx("fr-accordions-group"), className)} ref={ref} {...rest}>
+                {accordions.map(({ label, content, className, titleAs, classes = {} }) => (
+                    <Accordion
+                        label={label}
+                        content={content}
+                        titleAs={titleAs}
+                        classes={classes}
+                        className={className}
+                    />
+                ))}
+            </div>
+        );
+    })
+);
+
+AccordionGroup.displayName = symToStr({ AccordionGroup });
+
+export default AccordionGroup;

stories/Accordion.stories.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Accordion } from "../dist/Accordion";
+import { sectionName } from "./sectionName";
+import { getStoryFactory, logCallbacks } from "./getStory";
+
+const { meta, getStory } = getStoryFactory({
+    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 
+
+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() {
+
+    return (
+        <Accordion label="Name of the Accordion" content="Content of the Accordion"/>
+    );
+
+}
+\`\`\``,
+    "disabledProps": ["lang"]
+});
+
+export default meta;
+
+export const Default = getStory({
+    "label": "Name of the Accordion",
+    "content": "Content of the Accordion"
+});

stories/AccordionGroup.stories.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { AccordionGroup } from "../dist/AccordionGroup";
+import { sectionName } from "./sectionName";
+import { getStoryFactory, logCallbacks } from "./getStory";
+
+//TODO -> Do only one story for Accordion and AccordionGroup ?
+
+const { meta, getStory } = getStoryFactory({
+    sectionName,
+    "wrappedComponent": { AccordionGroup },
+    "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 
+
+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 ControlledAccordionGroup() {
+
+    return (
+        <AccordionGroup  accordions={[
+            {
+                label: "Name of the Accordion 1",
+                content: "Content of the Accordion 1"
+            },
+            {
+                label: "Name of the Accordion 2",
+                content: "Content of the Accordion 2"
+            }
+        ]}
+        />
+    );
+
+}
+\`\`\``,
+    "disabledProps": ["lang"]
+});
+
+export default meta;
+
+export const Default = getStory({
+    accordions: [
+        {
+            label: "Name of the Accordion 1",
+            content: "Content of the Accordion 1"
+        },
+        {
+            label: "Name of the Accordion 2",
+            content: "Content of the Accordion 2"
+        }
+    ]
+});