From 16f2de4c75c784137db289d9d7343897307971ad Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Tue, 14 Oct 2025 12:38:09 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20logo=20theme=20c?=
 =?UTF-8?q?ustomization=20optional?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

To not create a breaking change, the logo in the
theme customization is now optional, meaning that
if no logo is provided, the default logo will be used.

We add some documentation about this feature.
---
 docs/theming.md                               | 18 +++++++++++++
 .../impress/configuration/theme/default.json  |  7 -----
 .../impress/src/core/config/api/useConfig.tsx |  2 +-
 .../src/features/header/components/Header.tsx | 27 +++++++++----------
 .../apps/impress/src/features/header/index.ts |  1 +
 .../apps/impress/src/features/header/types.ts |  4 +--
 .../env.d/dev/configuration/theme/demo.json   |  7 +++++
 7 files changed, 42 insertions(+), 24 deletions(-)

diff --git a/docs/theming.md b/docs/theming.md
index ab30bb50..457bbf12 100644
--- a/docs/theming.md
+++ b/docs/theming.md
@@ -32,6 +32,24 @@ Then, set the `FRONTEND_CSS_URL` environment variable to the URL of your custom
 
 ----
 
+# **Your logo** 📝
+
+You can add your own logo in the header from the theme customization file.
+
+### Settings 🔧
+
+```shellscript
+THEME_CUSTOMIZATION_FILE_PATH=<path>
+```
+
+### Example of JSON
+
+You can activate it with the `header.logo` configuration: https://github.com/suitenumerique/docs/blob/main/src/helm/env.d/dev/configuration/theme/demo.json
+
+This configuration is optional. If not set, the default logo will be used.
+
+----
+
 # **Footer Configuration** 📝
 
 The footer is configurable from the theme customization file.
diff --git a/src/backend/impress/configuration/theme/default.json b/src/backend/impress/configuration/theme/default.json
index bf141f4e..9f1b718c 100644
--- a/src/backend/impress/configuration/theme/default.json
+++ b/src/backend/impress/configuration/theme/default.json
@@ -125,12 +125,5 @@
         }
       }
     }
-  },
-  "header": {
-    "logo": {
-      "src": "/assets/icon-docs.svg",
-      "width": "32px",
-      "alt": "Docs"
-    }
   }
 }
diff --git a/src/frontend/apps/impress/src/core/config/api/useConfig.tsx b/src/frontend/apps/impress/src/core/config/api/useConfig.tsx
index 24452f3f..990da403 100644
--- a/src/frontend/apps/impress/src/core/config/api/useConfig.tsx
+++ b/src/frontend/apps/impress/src/core/config/api/useConfig.tsx
@@ -4,7 +4,7 @@ import { Resource } from 'i18next';
 import { APIError, errorCauses, fetchAPI } from '@/api';
 import { Theme } from '@/cunningham/';
 import { FooterType } from '@/features/footer';
-import { HeaderType } from '@/features/header/types';
+import { HeaderType } from '@/features/header';
 import { PostHogConf } from '@/services';
 
 interface ThemeCustomization {
diff --git a/src/frontend/apps/impress/src/features/header/components/Header.tsx b/src/frontend/apps/impress/src/features/header/components/Header.tsx
index fa00c013..d67aee2d 100644
--- a/src/frontend/apps/impress/src/features/header/components/Header.tsx
+++ b/src/frontend/apps/impress/src/features/header/components/Header.tsx
@@ -23,8 +23,6 @@ export const Header = () => {
 
   const logo = config?.theme_customization?.header?.logo;
 
-  const styleWidth = logo?.width || '32px';
-
   return (
     <Box
       as="header"
@@ -66,18 +64,19 @@ export const Header = () => {
           $height="fit-content"
           $margin={{ top: 'auto' }}
         >
-          {logo?.src && (
-            <Image
-              className="c__image-system-filter"
-              data-testid="header-icon-docs"
-              src={logo.src}
-              alt={logo?.alt || t('Logo')}
-              width={32}
-              height={32}
-              style={{ width: styleWidth, height: 'auto' }}
-              priority
-            />
-          )}
+          <Image
+            className="c__image-system-filter"
+            data-testid="header-icon-docs"
+            src={logo?.src || '/assets/icon-docs.svg'}
+            alt={logo?.alt || t('Docs')}
+            width={0}
+            height={0}
+            style={{
+              width: logo?.width || 32,
+              height: logo?.height || 'auto',
+            }}
+            priority
+          />
           <Title headingLevel="h1" aria-hidden="true" />
         </Box>
       </StyledLink>
diff --git a/src/frontend/apps/impress/src/features/header/index.ts b/src/frontend/apps/impress/src/features/header/index.ts
index ccc053ab..e32f9ebd 100644
--- a/src/frontend/apps/impress/src/features/header/index.ts
+++ b/src/frontend/apps/impress/src/features/header/index.ts
@@ -1,2 +1,3 @@
 export * from './components/';
 export * from './conf';
+export * from './types';
diff --git a/src/frontend/apps/impress/src/features/header/types.ts b/src/frontend/apps/impress/src/features/header/types.ts
index c648543e..5091625b 100644
--- a/src/frontend/apps/impress/src/features/header/types.ts
+++ b/src/frontend/apps/impress/src/features/header/types.ts
@@ -1,8 +1,8 @@
 export interface HeaderType {
   logo?: {
-    src: string;
+    src?: string;
     width?: string;
+    height?: string;
     alt?: string;
-    withTitle?: boolean;
   };
 }
diff --git a/src/helm/env.d/dev/configuration/theme/demo.json b/src/helm/env.d/dev/configuration/theme/demo.json
index 0ed66ed9..5da45273 100644
--- a/src/helm/env.d/dev/configuration/theme/demo.json
+++ b/src/helm/env.d/dev/configuration/theme/demo.json
@@ -133,5 +133,12 @@
         }
       }
     }
+  },
+  "header": {
+    "logo": {
+      "src": "/assets/icon-docs.svg",
+      "width": "32px",
+      "alt": "Notes"
+    }
   }
 }