Add support for operator logo in footer

Author: garronej

src/Footer.tsx

@@ -23,6 +23,17 @@ export type FooterProps = {
     cookiesManagementLinkProps?: RegisteredLinkProps;
     homeLinkProps: RegisteredLinkProps & { title: string };
     bottomItems?: FooterProps.BottomItem[];
+    operatorLogo?: {
+        orientation: "horizontal" | "vertical";
+        /**
+         * Expected ratio:
+         * If "vertical": 9x16
+         * If "horizontal": 16x9
+         */
+        imgUrl: string;
+        /** Textual alternative of the image, it MUST include the text present in the image*/
+        alt: string;
+    };
     classes?: Partial<
         Record<
             | "root"
@@ -37,7 +48,9 @@ export type FooterProps = {
             | "bottomList"
             | "bottomItem"
             | "bottomLink"
-            | "bottomCopy",
+            | "bottomCopy"
+            | "brandLink"
+            | "logo",
             string
         >
     >;
@@ -83,6 +96,7 @@ export const Footer = memo(
             personalDataLinkProps,
             cookiesManagementLinkProps,
             bottomItems = [],
+            operatorLogo,
             ...rest
         } = props;
 
@@ -108,9 +122,39 @@ export const Footer = memo(
                                 classes.brand
                             )}
                         >
-                            <Link {...homeLinkProps}>
-                                <p className={fr.cx("fr-logo")}>{brandTop}</p>
-                            </Link>
+                            {(() => {
+                                const children = <p className={fr.cx("fr-logo")}>{brandTop}</p>;
+
+                                return operatorLogo !== undefined ? (
+                                    children
+                                ) : (
+                                    <Link {...homeLinkProps}>{children}</Link>
+                                );
+                            })()}
+                            {operatorLogo !== undefined && (
+                                <Link
+                                    {...homeLinkProps}
+                                    className={cx(
+                                        fr.cx("fr-footer__brand-link"),
+                                        classes.brandLink,
+                                        homeLinkProps.className
+                                    )}
+                                >
+                                    <img
+                                        className={cx(fr.cx("fr-footer__logo"), classes.logo)}
+                                        style={(() => {
+                                            switch (operatorLogo.orientation) {
+                                                case "vertical":
+                                                    return { "width": "3.5rem" };
+                                                case "horizontal":
+                                                    return { "maxWidth": "9.0625rem" };
+                                            }
+                                        })()}
+                                        src={operatorLogo.imgUrl}
+                                        alt={operatorLogo.alt}
+                                    />
+                                </Link>
+                            )}
                         </div>
                         <div className={cx(fr.cx("fr-footer__content"), classes.content)}>
                             {contentDescription !== undefined && (

stories/Footer.stories.tsx

@@ -5,6 +5,8 @@ import { sectionName } from "./sectionName";
 import { getStoryFactory } from "./getStory";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
+import placeholder_9x16ImgUrl from "./assets/placeholder.9x16.png";
+import placeholder_16x9ImgUrl from "./assets/placeholder.16x9.png";
 
 const { meta, getStory } = getStoryFactory({
     sectionName,
@@ -86,3 +88,57 @@ export const Default = getStory({
         "title": "Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)"
     }
 });
+
+export const FooterWithVerticalOperatorLogo = getStory({
+    "brandTop": (
+        <>
+            INTITULE
+            <br />
+            OFFICIEL
+        </>
+    ),
+    "accessibility": "fully compliant",
+    "contentDescription": `
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
+    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore 
+    eu fugiat nulla pariatur. 
+    `,
+    "homeLinkProps": {
+        "href": "/",
+        "title": "Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)"
+    },
+    "operatorLogo": {
+        "orientation": "vertical",
+        "imgUrl": placeholder_9x16ImgUrl,
+        "alt": "[À MODIFIER - texte alternatif de l’image]"
+    }
+});
+
+export const FooterWithHorizontalOperatorLogo = getStory({
+    "brandTop": (
+        <>
+            INTITULE
+            <br />
+            OFFICIEL
+        </>
+    ),
+    "accessibility": "fully compliant",
+    "contentDescription": `
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
+    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore 
+    eu fugiat nulla pariatur. 
+    `,
+    "homeLinkProps": {
+        "href": "/",
+        "title": "Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)"
+    },
+    "operatorLogo": {
+        "orientation": "horizontal",
+        "imgUrl": placeholder_16x9ImgUrl,
+        "alt": "[À MODIFIER - texte alternatif de l’image]"
+    }
+});