Feature operator logo in header

Author: garronej

src/Header/Header.tsx

@@ -17,11 +17,21 @@ export type HeaderProps = {
     brandTop: ReactNode;
     serviceTitle?: ReactNode;
     serviceTagline?: ReactNode;
-    /** Don't forget the title on the link for accessibility*/
-    homeLinkProps: RegisteredLinkProps;
+    homeLinkProps: RegisteredLinkProps & { title: string };
     navItems?: MainNavigationProps.Item[];
     /** There should be at most three of them */
     quickAccessItems?: HeaderProps.QuickAccessItem[];
+    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;
+    };
     renderSearchInput?: (
         /**
          * id and name must be forwarded to the <input /> component
@@ -94,6 +104,7 @@ export const Header = memo(
             homeLinkProps,
             navItems = [],
             quickAccessItems = [],
+            operatorLogo,
             renderSearchInput,
             classes = {},
             ...rest
@@ -142,14 +153,25 @@ export const Header = memo(
                                             );
                                         })()}
                                     </div>
-                                    {/*
-                                    <div class="fr-header__operator">
-                                        <a href="/" title="Accueil - [À MODIFIER - texte alternatif de l’image : nom de l'opérateur ou du site serviciel] - République Française">
-                                            <img class="fr-responsive-img" style="width:3.5rem;" src="../../../example/img/placeholder.9x16.png" alt="[À MODIFIER - texte alternatif de l’image]" />
-                                            <!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image -->
-                                        </a>
-                                    </div>
-                                    */}
+                                    {operatorLogo !== undefined && (
+                                        <div className={fr.cx("fr-header__operator")}>
+                                            <Link {...homeLinkProps}>
+                                                <img
+                                                    className={fr.cx("fr-responsive-img")}
+                                                    style={(() => {
+                                                        switch (operatorLogo.orientation) {
+                                                            case "vertical":
+                                                                return { "width": "3.5rem" };
+                                                            case "horizontal":
+                                                                return { "maxWidth": "9.0625rem" };
+                                                        }
+                                                    })()}
+                                                    src={operatorLogo.imgUrl}
+                                                    alt={operatorLogo.alt}
+                                                />
+                                            </Link>
+                                        </div>
+                                    )}
 
                                     {(quickAccessItems.length > 0 ||
                                         renderSearchInput !== undefined) && (

stories/Header.stories.tsx

@@ -2,6 +2,8 @@ import React from "react";
 import { Header } from "../dist/Header";
 import { sectionName } from "./sectionName";
 import { getStoryFactory } from "./getStory";
+import placeholder_9x16ImgUrl from "./assets/placeholder.9x16.png";
+import placeholder_16x9ImgUrl from "./assets/placeholder.16x9.png";
 
 const { meta, getStory } = getStoryFactory({
     sectionName,
@@ -174,3 +176,73 @@ export const HeaderWithQuickAccessItemsAndSearchEngine = getStory({
         <input className={className} id={id} name={name} placeholder={placeholder} type={type} />
     )
 });
+
+export const HeaderWithVerticalOperatorLogo = getStory({
+    "brandTop": (
+        <>
+            INTITULE
+            <br />
+            OFFICIEL
+        </>
+    ),
+    "homeLinkProps": {
+        "href": "/",
+        "title":
+            "Accueil - [À MODIFIER - texte alternatif de l’image : nom de l'opérateur ou du site serviciel] - République Française"
+    },
+    "renderSearchInput": ({ className, id, name, placeholder, type }) => (
+        <input className={className} id={id} name={name} placeholder={placeholder} type={type} />
+    ),
+    "operatorLogo": {
+        "orientation": "vertical",
+        "imgUrl": placeholder_9x16ImgUrl,
+        "alt": "[À MODIFIER - texte alternatif de l’image]"
+    }
+});
+
+export const WithHorizontalOperatorLogo = getStory({
+    "brandTop": (
+        <>
+            INTITULE
+            <br />
+            OFFICIEL
+        </>
+    ),
+    "homeLinkProps": {
+        "href": "/",
+        "title": "Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)"
+    },
+    "serviceTitle": "Nom du site / service",
+    "serviceTagline": "baseline - précisions sur l'organisation",
+    "quickAccessItems": [
+        {
+            "iconId": "fr-icon-add-circle-line",
+            "text": "Créer un espace",
+            "linkProps": {
+                "href": "#"
+            }
+        },
+        {
+            "iconId": "fr-icon-lock-line",
+            "text": "Se connecter",
+            "linkProps": {
+                "href": "#"
+            }
+        },
+        {
+            "iconId": "fr-icon-account-line",
+            "text": "S’enregistrer",
+            "linkProps": {
+                "href": "#"
+            }
+        }
+    ],
+    "renderSearchInput": ({ className, id, name, placeholder, type }) => (
+        <input className={className} id={id} name={name} placeholder={placeholder} type={type} />
+    ),
+    "operatorLogo": {
+        "orientation": "horizontal",
+        "imgUrl": placeholder_16x9ImgUrl,
+        "alt": "[À MODIFIER - texte alternatif de l’image]"
+    }
+});