feat: Allow sidemenu items to be open by default (#126)

* feat: Allow sidemenu items to be open by default * Update src/SideMenu.tsx Co-authored-by: Joseph Garrone <joseph.garrone.gj@gmail.com> Signed-off-by: Xavier Desoindre <xavier.desoindre@hotmail.fr> --------- Signed-off-by: Xavier Desoindre <xavier.desoindre@hotmail.fr> Co-authored-by: Joseph Garrone <joseph.garrone.gj@gmail.com>
codegouvfr · May 20, 2023 · f5af770 · f5af770
1 parent 4ccf060
commit f5af770
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 2 deletions.
diff --git a/src/SideMenu.tsx b/src/SideMenu.tsx
@@ -40,6 +40,8 @@ export namespace SideMenuProps {
 
         export type SubMenu = Common & {
             items: Item[];
+            /** Default: false */
+            expandedByDefault?: boolean;
         };
     }
 }
@@ -133,7 +135,11 @@ export const SideMenu = memo(
                                             {"items" in item ? (
                                                 <>
                                                     <button
-                                                        aria-expanded="false"
+                                                        aria-expanded={
+                                                            (item.expandedByDefault ?? false)
+                                                                ? "true"
+                                                                : "false"
+                                                        }
                                                         aria-controls={itemId}
                                                         {...(item.isActive && {
                                                             ["aria-current"]: true

diff --git a/stories/SideMenu.stories.tsx b/stories/SideMenu.stories.tsx
@@ -9,7 +9,7 @@ const { meta, getStory } = getStoryFactory({
     "description": `
 - [See DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/menu-lateral)
 - [See DSFR demos](https://main--ds-gouv.netlify.app/example/component/sidemenu/)
-- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Sidemenu.tsx)`,
+- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/SideMenu.tsx)`,
     "disabledProps": ["lang"],
     "argTypes": {
         "title": {
@@ -145,6 +145,79 @@ export const SideMenuWith2Levels = getStory({
     ]
 });
 
+export const SideMenuWith2LevelsExpendedByDefault = getStory({
+    "title": "Titre de rubrique",
+    "burgerMenuButtonText": "Dans cette rubrique",
+    "items": [
+        {
+            "text": "Niveau 1",
+            "items": [
+                {
+                    "text": "Accès direct niveau 2",
+                    "linkProps": { "href": "#" }
+                },
+                {
+                    "text": "Accès direct niveau 2",
+                    "linkProps": { "href": "#" }
+                },
+                {
+                    "text": "Accès direct niveau 2",
+                    "linkProps": { "href": "#" }
+                }
+            ]
+        },
+        {
+            "isActive": true,
+            "expandedByDefault": true,
+            "text": "Entrée menu ouverte par défaut",
+            "items": [
+                {
+                    "text": "Accès direct niveau 2",
+                    "linkProps": { "href": "#" }
+                },
+                {
+                    "isActive": true,
+                    "text": "Accès direct niveau 2",
+                    "linkProps": { "href": "#" }
+                },
+                {
+                    "text": "Accès direct niveau 2",
+                    "linkProps": { "href": "#" }
+                },
+                {
+                    "text": "Accès direct niveau 2",
+                    "linkProps": { "href": "#" }
+                }
+            ]
+        },
+        {
+            "text": "Accès direct",
+            "linkProps": { "href": "#" }
+        },
+        {
+            "text": "Accès direct",
+            "linkProps": { "href": "#" }
+        },
+        {
+            "text": "Niveau 1",
+            "items": [
+                {
+                    "text": "Accès direct niveau 2",
+                    "linkProps": { "href": "#" }
+                },
+                {
+                    "text": "Accès direct niveau 2",
+                    "linkProps": { "href": "#" }
+                },
+                {
+                    "text": "Accès direct niveau 2",
+                    "linkProps": { "href": "#" }
+                }
+            ]
+        }
+    ]
+});
+
 export const SideMenuWith3Levels = getStory({
     "title": "Titre de rubrique",
     "burgerMenuButtonText": "Dans cette rubrique",