feat: add footer partners (#77)

* feat: add footer partners

* use fr.cx on classes

* add target _blank to logo links

---------

Co-authored-by: Gary van Woerkens <gvanwoerkens@gary-big-mac.local>

Author: gary-van-woerkens

src/Footer.tsx

@@ -22,6 +22,7 @@ export type FooterProps = {
     cookiesManagementLinkProps?: RegisteredLinkProps;
     homeLinkProps: RegisteredLinkProps & { title: string };
     bottomItems?: FooterProps.BottomItem[];
+    partnersLogos?: FooterProps.PartnersLogos;
     operatorLogo?: {
         orientation: "horizontal" | "vertical";
         /**
@@ -79,6 +80,19 @@ export namespace FooterProps {
             >;
         };
     }
+
+    export type PartnersLogos = {
+        main: PartnersLogos.Logo;
+        sub?: PartnersLogos.Logo[];
+    };
+
+    export namespace PartnersLogos {
+        export type Logo = {
+            alt: string;
+            href: string;
+            imgUrl: string;
+        };
+    }
 }
 
 /** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-footer> */
@@ -97,6 +111,7 @@ export const Footer = memo(
             personalDataLinkProps,
             cookiesManagementLinkProps,
             bottomItems = [],
+            partnersLogos,
             operatorLogo,
             license,
             style,
@@ -205,6 +220,53 @@ export const Footer = memo(
                             </ul>
                         </div>
                     </div>
+                    {partnersLogos && (
+                        <div className={fr.cx("fr-footer__partners")}>
+                            <h4 className={fr.cx("fr-footer__partners-title")}>
+                                {t("our partners")}
+                            </h4>
+                            <div className={fr.cx("fr-footer__partners-logos")}>
+                                <div className={fr.cx("fr-footer__partners-main")}>
+                                    <a
+                                        target="_blank"
+                                        href={partnersLogos.main.href}
+                                        className={fr.cx("fr-footer__partners-link")}
+                                    >
+                                        <img
+                                            alt={partnersLogos.main.alt}
+                                            style={{ height: "5.625rem" }}
+                                            src={partnersLogos.main.imgUrl}
+                                            className={fr.cx("fr-footer__logo")}
+                                        />
+                                    </a>
+                                </div>
+                                {partnersLogos.sub && (
+                                    <div className={fr.cx("fr-footer__partners-sub")}>
+                                        <ul>
+                                            {partnersLogos.sub.map(logo => (
+                                                <li>
+                                                    <a
+                                                        target="_blank"
+                                                        href={logo.href}
+                                                        className={fr.cx(
+                                                            "fr-footer__partners-link"
+                                                        )}
+                                                    >
+                                                        <img
+                                                            alt={logo.alt}
+                                                            src={logo.imgUrl}
+                                                            style={{ height: "5.625rem" }}
+                                                            className={fr.cx("fr-footer__logo")}
+                                                        />
+                                                    </a>
+                                                </li>
+                                            ))}
+                                        </ul>
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    )}
                     <div className={cx(fr.cx("fr-footer__bottom"), classes.bottom)}>
                         <ul className={cx(fr.cx("fr-footer__bottom-list"), classes.bottomList)}>
                             {[
@@ -329,7 +391,8 @@ const { useTranslation, addFooterTranslations } = createComponentI18nApi({
         "personal data": "Données personnelles",
         "cookies management": "Gestion des cookies",
         "license mention": "Sauf mention contraire, tous les contenus de ce site sont sous",
-        "etalab license": "licence etalab-2.0"
+        "etalab license": "licence etalab-2.0",
+        "our partners": "Nos partenaires"
         /* spell-checker: enable */
     }
 });

stories/Footer.stories.tsx

@@ -183,3 +183,45 @@ export const WithCustomLicense = getStory({
         </>
     )
 });
+
+export const WithPartners = 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]"
+        },
+        "sub": [
+            {
+                "href": "#",
+                "imgUrl": placeholder_16x9ImgUrl,
+                "alt": "[À MODIFIER - texte alternatif de l’image]"
+            },
+            {
+                "href": "#",
+                "imgUrl": placeholder_16x9ImgUrl,
+                "alt": "[À MODIFIER - texte alternatif de l’image]"
+            }
+        ]
+    }
+});