From 4fbd588198a05c7236a6adcdd1a7d0e30bbf4fa2 Mon Sep 17 00:00:00 2001 From: Cyril Date: Wed, 8 Oct 2025 08:33:07 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20load=20docs=20logo=20from?= =?UTF-8?q?=20public=20folder=20via=20url=20instead=20of=20svg?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit allows logo override at deploy-time using k8s configmaps and static assets Signed-off-by: Cyril --- CHANGELOG.md | 1 + .../impress/configuration/theme/default.json | 7 ++++ .../e2e/__tests__/app-impress/header.spec.ts | 42 +++++++++++++++++++ .../impress/src/core/config/api/useConfig.tsx | 2 + .../src/features/header/components/Header.tsx | 26 ++++++++---- .../apps/impress/src/features/header/types.ts | 8 ++++ 6 files changed, 79 insertions(+), 7 deletions(-) create mode 100644 src/frontend/apps/impress/src/features/header/types.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 6efc1e22..1f772649 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -49,6 +49,7 @@ and this project adheres to - 🐛(backend) filter invitation with case insensitive email - 🐛(frontend) reduce no access image size from 450 to 300 #1463 - 🐛(frontend) preserve interlink style on drag-and-drop in editor #1460 +- ✨(frontend) load docs logo from public folder via url #1462 ## [3.7.0] - 2025-09-12 diff --git a/src/backend/impress/configuration/theme/default.json b/src/backend/impress/configuration/theme/default.json index 9f1b718c..bf141f4e 100644 --- a/src/backend/impress/configuration/theme/default.json +++ b/src/backend/impress/configuration/theme/default.json @@ -125,5 +125,12 @@ } } } + }, + "header": { + "logo": { + "src": "/assets/icon-docs.svg", + "width": "32px", + "alt": "Docs" + } } } diff --git a/src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts index 1b92bf18..c43e120e 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts @@ -32,6 +32,15 @@ test.describe('Header', () => { }) => { await overrideConfig(page, { FRONTEND_THEME: 'dsfr', + theme_customization: { + header: { + logo: { + src: '/assets/logo-gouv.svg', + width: '220px', + alt: 'Gouvernement Logo', + }, + }, + }, }); await page.goto('/'); @@ -98,6 +107,15 @@ test.describe('Header mobile', () => { test('it checks the header when mobile with DSFR theme', async ({ page }) => { await overrideConfig(page, { FRONTEND_THEME: 'dsfr', + theme_customization: { + header: { + logo: { + src: '/assets/logo-gouv.svg', + width: '220px', + alt: 'Gouvernement Logo', + }, + }, + }, }); await page.goto('/'); @@ -131,3 +149,27 @@ test.describe('Header: Log out', () => { await expectLoginPage(page); }); }); + +test.describe('Header: Override configuration', () => { + test('checks the header is correctly overrided', async ({ page }) => { + await overrideConfig(page, { + FRONTEND_THEME: 'dsfr', + theme_customization: { + header: { + logo: { + src: '/assets/logo-gouv.svg', + width: '220px', + alt: 'Gouvernement Logo', + }, + }, + }, + }); + + await page.goto('/'); + const header = page.locator('header').first(); + + await expect(header.getByAltText('Gouvernement Logo')).toBeVisible(); + + await expect(header.getByAltText('Docs')).toBeHidden(); + }); +}); 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 584500de..f2b28750 100644 --- a/src/frontend/apps/impress/src/core/config/api/useConfig.tsx +++ b/src/frontend/apps/impress/src/core/config/api/useConfig.tsx @@ -4,11 +4,13 @@ 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 { PostHogConf } from '@/services'; interface ThemeCustomization { footer?: FooterType; translations?: Resource; + header?: HeaderType; } export interface ConfigResponse { 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 cdb33d51..fa00c013 100644 --- a/src/frontend/apps/impress/src/features/header/components/Header.tsx +++ b/src/frontend/apps/impress/src/features/header/components/Header.tsx @@ -1,8 +1,9 @@ +import Image from 'next/image'; import { useTranslation } from 'react-i18next'; import { css } from 'styled-components'; -import IconDocs from '@/assets/icons/icon-docs.svg'; import { Box, StyledLink } from '@/components/'; +import { useConfig } from '@/core/config'; import { useCunninghamTheme } from '@/cunningham'; import { ButtonLogin } from '@/features/auth'; import { LanguagePicker } from '@/features/language'; @@ -16,9 +17,14 @@ import { Title } from './Title'; export const Header = () => { const { t } = useTranslation(); + const { data: config } = useConfig(); const { spacingsTokens, colorsTokens } = useCunninghamTheme(); const { isDesktop } = useResponsiveStore(); + const logo = config?.theme_customization?.header?.logo; + + const styleWidth = logo?.width || '32px'; + return ( { $height="fit-content" $margin={{ top: 'auto' }} > -