fix: allow sub partners only (#81)

* fix: allow sub partners only

* force sub items

* small fixes

Author: gary-van-woerkens

src/Footer.tsx

@@ -87,12 +87,19 @@ export namespace FooterProps {
         };
     }
 
-    export type PartnersLogos = {
-        main: PartnersLogos.Logo;
-        sub?: PartnersLogos.Logo[];
-    };
+    export type PartnersLogos = PartnersLogos.MainOnly | PartnersLogos.SubOnly;
 
     export namespace PartnersLogos {
+        export type MainOnly = {
+            main: Logo;
+            sub?: Logo[];
+        };
+
+        export type SubOnly = {
+            main?: Logo;
+            sub: [Logo, ...Logo[]];
+        };
+
         export type Logo = {
             alt: string;
             href: string;
@@ -130,6 +137,8 @@ export const Footer = memo(
 
         const { t } = useTranslation();
 
+        const { main: mainPartnersLogo, sub: subPartnersLogos = [] } = partnersLogos ?? {};
+
         return (
             <footer
                 className={cx(fr.cx("fr-footer"), classes.root, className)}
@@ -248,30 +257,35 @@ export const Footer = memo(
                                         classes.partnersMain
                                     )}
                                 >
-                                    <a
-                                        href={partnersLogos.main.href}
-                                        className={cx(
-                                            fr.cx("fr-footer__partners-link"),
-                                            classes.partnersLink
-                                        )}
-                                    >
-                                        <img
-                                            alt={partnersLogos.main.alt}
-                                            style={{ height: "5.625rem" }}
-                                            src={partnersLogos.main.imgUrl}
-                                            className={cx(fr.cx("fr-footer__logo"), classes.logo)}
-                                        />
-                                    </a>
+                                    {mainPartnersLogo !== undefined && (
+                                        <a
+                                            href={mainPartnersLogo.href}
+                                            className={cx(
+                                                fr.cx("fr-footer__partners-link"),
+                                                classes.partnersLink
+                                            )}
+                                        >
+                                            <img
+                                                alt={mainPartnersLogo.alt}
+                                                style={{ height: "5.625rem" }}
+                                                src={mainPartnersLogo.imgUrl}
+                                                className={cx(
+                                                    fr.cx("fr-footer__logo"),
+                                                    classes.logo
+                                                )}
+                                            />
+                                        </a>
+                                    )}
                                 </div>
-                                {partnersLogos.sub !== undefined && (
+                                {subPartnersLogos.length !== 0 && (
                                     <div
                                         className={cx(
                                             fr.cx("fr-footer__partners-sub"),
                                             classes.partnersSub
                                         )}
                                     >
                                         <ul>
-                                            {partnersLogos.sub.map(logo => (
+                                            {subPartnersLogos.map(logo => (
                                                 <li>
                                                     <a
                                                         href={logo.href}

stories/Footer.stories.tsx

@@ -225,3 +225,70 @@ export const WithPartners = getStory({
         ]
     }
 });
+
+export const WithMainPartnerOnly = getStory({
+    "brandTop": (
+        <>
+            INTITULE
+            <br />
+            OFFICIEL
+        </>
+    ),
+    "accessibility": "fully compliant",
+    "contentDescription": `
+    Ce message est à remplacer par les informations de votre site.
+
+    Comme exemple de contenu, vous pouvez indiquer les informations 
+    suivantes : Le site officiel d’information administrative pour les entreprises.
+    Retrouvez toutes les informations et démarches administratives nécessaires à la création, 
+    à la gestion et au développement de votre entreprise.
+    `,
+    "homeLinkProps": {
+        "href": "/",
+        "title": "Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)"
+    },
+    "partnersLogos": {
+        "main": {
+            "href": "#",
+            "imgUrl": placeholder_16x9ImgUrl,
+            "alt": "[À MODIFIER - texte alternatif de l’image]"
+        }
+    }
+});
+
+export const WithSubPartnersOnly = getStory({
+    "brandTop": (
+        <>
+            INTITULE
+            <br />
+            OFFICIEL
+        </>
+    ),
+    "accessibility": "fully compliant",
+    "contentDescription": `
+    Ce message est à remplacer par les informations de votre site.
+
+    Comme exemple de contenu, vous pouvez indiquer les informations 
+    suivantes : Le site officiel d’information administrative pour les entreprises.
+    Retrouvez toutes les informations et démarches administratives nécessaires à la création, 
+    à la gestion et au développement de votre entreprise.
+    `,
+    "homeLinkProps": {
+        "href": "/",
+        "title": "Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)"
+    },
+    "partnersLogos": {
+        "sub": [
+            {
+                "href": "#",
+                "imgUrl": placeholder_16x9ImgUrl,
+                "alt": "[À MODIFIER - texte alternatif de l’image]"
+            },
+            {
+                "href": "#",
+                "imgUrl": placeholder_16x9ImgUrl,
+                "alt": "[À MODIFIER - texte alternatif de l’image]"
+            }
+        ]
+    }
+});