Ajout categoryMainText à Category (#353)

* Ajout categoryMainText à Category * fix --------- Co-authored-by: Dylan Decrulle <dylan.decrulle@outlook.fr>
codegouvfr · Jan 6, 2025 · c75d814 · c75d814
1 parent 1112db5
commit c75d814
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 33 deletions.
diff --git a/src/MainNavigation/MegaMenu.tsx b/src/MainNavigation/MegaMenu.tsx
@@ -26,16 +26,24 @@ export namespace MegaMenuProps {
     };
 
     export type Category = {
-        categoryMainLink: {
-            text: ReactNode;
-            linkProps: RegisteredLinkProps;
-        };
         links: {
             text: ReactNode;
             linkProps: RegisteredLinkProps;
             isActive?: boolean;
         }[];
-    };
+    } & (
+        | {
+              categoryMainLink: {
+                  text: ReactNode;
+                  linkProps: RegisteredLinkProps;
+              };
+              categoryMainText?: never;
+          }
+        | {
+              categoryMainText: ReactNode;
+              categoryMainLink?: never;
+          }
+    );
 }
 
 export const MegaMenu = memo(
@@ -101,30 +109,42 @@ export const MegaMenu = memo(
                                 </div>
                             </div>
                         )}
-                        {categories.map(({ categoryMainLink, links }, i) => (
+                        {categories.map(({ categoryMainLink, categoryMainText, links }, i) => (
                             <div className={fr.cx("fr-col-12", "fr-col-lg-3")} key={i}>
-                                <h5
-                                    className={cx(
-                                        fr.cx("fr-mega-menu__category"),
-                                        classes.category
-                                    )}
-                                >
-                                    <Link
-                                        {...categoryMainLink.linkProps}
-                                        id={
-                                            categoryMainLink.linkProps.id ??
-                                            `${id}-category-link${generateValidHtmlId({
-                                                "text": categoryMainLink.text
-                                            })}-${i}`
-                                        }
+                                {categoryMainLink !== undefined && (
+                                    <h5
                                         className={cx(
-                                            fr.cx("fr-nav__link"),
-                                            categoryMainLink.linkProps.className
+                                            fr.cx("fr-mega-menu__category"),
+                                            classes.category
                                         )}
                                     >
-                                        {categoryMainLink.text}
-                                    </Link>
-                                </h5>
+                                        <Link
+                                            {...categoryMainLink.linkProps}
+                                            id={
+                                                categoryMainLink.linkProps.id ??
+                                                `${id}-category-link${generateValidHtmlId({
+                                                    "text": categoryMainLink.text
+                                                })}-${i}`
+                                            }
+                                            className={cx(
+                                                fr.cx("fr-nav__link"),
+                                                categoryMainLink.linkProps.className
+                                            )}
+                                        >
+                                            {categoryMainLink.text}
+                                        </Link>
+                                    </h5>
+                                )}
+                                {categoryMainText !== undefined && (
+                                    <h5
+                                        className={cx(
+                                            fr.cx("fr-mega-menu__category", "fr-nav__link"),
+                                            classes.category
+                                        )}
+                                    >
+                                        {categoryMainText}
+                                    </h5>
+                                )}
                                 <ul className={cx(fr.cx("fr-mega-menu__list"), classes.list)}>
                                     {links.map(({ linkProps, text, isActive }, j) => (
                                         <li key={j}>

diff --git a/stories/MainNavigation.stories.tsx b/stories/MainNavigation.stories.tsx
@@ -9,8 +9,8 @@ const { meta, getStory } = getStoryFactory({
     "wrappedComponent": { "MainNavigation": Header },
     "description": `
 - [See DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/navigation-principale)
-- [See source code](https://github.com/codegouvfr/react-dsfr/tree/main/src/MainNavigation)  
-  
+- [See source code](https://github.com/codegouvfr/react-dsfr/tree/main/src/MainNavigation)
+
 This component isn't meant to be used directly but via the [\\<Header \\/\\>](https://components.react-dsfr.codegouv.studio/?path=/docs/components-header)`,
     "argTypes": {
         "brandTop": {
@@ -265,12 +265,7 @@ export const MegaMenu = getStory({
                         ]
                     },
                     {
-                        "categoryMainLink": {
-                            "text": "Nom de catégorie",
-                            "linkProps": {
-                                "href": "#"
-                            }
-                        },
+                        "categoryMainText": "Nom de catégorie sans lien",
                         "links": [
                             {
                                 "text": "Lien de navigation",