From f4cb66d6b666835f793ab32af10d472098986b73 Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Mon, 9 Feb 2026 14:26:15 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20Title=20header=20optio?= =?UTF-8?q?nal?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit On the DSFR instance the title will not be displayed anymore in favor of a icon that include the title. So we make the title optional, it will be configurable from the theme configuration. --- .../impress/configuration/theme/default.json | 3 +- .../e2e/__tests__/app-impress/header.spec.ts | 52 +++--------------- .../e2e/__tests__/app-impress/home.spec.ts | 38 ++++++++++--- .../impress/public/assets/icon-docs-v2.png | Bin 0 -> 1911 bytes .../impress/public/assets/icon-docs-v2.svg | 34 ++++++++++++ .../src/features/header/components/Header.tsx | 4 +- .../apps/impress/src/features/header/types.ts | 4 +- .../features/home/components/HomeHeader.tsx | 4 +- 8 files changed, 80 insertions(+), 59 deletions(-) create mode 100644 src/frontend/apps/impress/public/assets/icon-docs-v2.png create mode 100644 src/frontend/apps/impress/public/assets/icon-docs-v2.svg diff --git a/src/backend/impress/configuration/theme/default.json b/src/backend/impress/configuration/theme/default.json index 376be0d8..f8c48a06 100644 --- a/src/backend/impress/configuration/theme/default.json +++ b/src/backend/impress/configuration/theme/default.json @@ -145,7 +145,8 @@ "width": "32px", "height": "auto" }, - "alt": "" + "alt": "", + "withTitle": true } }, "favicon": { 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 6d1ad49a..430d5f91 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts @@ -34,18 +34,14 @@ test.describe('Header', () => { FRONTEND_THEME: 'dsfr', theme_customization: { header: { - logo: { - src: '/assets/logo-gouv.svg', - style: { width: '220px', height: 'auto' }, - alt: 'Gouvernement Logo', - }, icon: { - src: '/assets/icon-docs.svg', + src: '/assets/icon-docs-v2.svg', style: { - width: '32px', + width: '100px', height: 'auto', }, alt: '', + withTitle: false, 'data-testid': 'custom-testid-docs', }, }, @@ -55,19 +51,11 @@ test.describe('Header', () => { const header = page.locator('header').first(); - await expect(header.getByTestId('custom-testid-docs')).toBeVisible(); - await expect(header.locator('h1').getByText('Docs')).toHaveCSS( - 'font-family', - /Marianne/i, + await expect(header.getByTestId('custom-testid-docs')).toHaveAttribute( + 'src', + '/assets/icon-docs-v2.svg', ); - - await expect( - header.getByRole('button', { - name: 'Logout', - }), - ).toBeVisible(); - - await expect(header.getByText('English')).toBeVisible(); + await expect(header.locator('h1')).toBeHidden(); }); test('checks a custom waffle', async ({ page }) => { @@ -155,32 +143,6 @@ test.describe('Header', () => { }); }); -test.describe('Header mobile', () => { - test.use({ viewport: { width: 500, height: 1200 } }); - - 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('/'); - - const header = page.locator('header').first(); - - await expect(header.getByLabel('Open the header menu')).toBeVisible(); - await expect(header.getByTestId('header-icon-docs')).toBeVisible(); - }); -}); - test.describe('Header: Log out', () => { test.use({ storageState: { cookies: [], origins: [] } }); diff --git a/src/frontend/apps/e2e/__tests__/app-impress/home.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/home.spec.ts index 7799ba96..95df6a6c 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/home.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/home.spec.ts @@ -91,21 +91,44 @@ test.describe('Home page', () => { ], }, }, + header: { + logo: { + src: '/assets/logo-gouv.svg', + alt: 'Gouvernement Logo', + style: { width: '110px', height: 'auto' }, + }, + icon: { + src: '/assets/icon-docs-v2.svg', + style: { + width: '100px', + height: 'auto', + }, + alt: '', + withTitle: false, + }, + }, + home: { + 'with-proconnect': true, + 'icon-banner': { + src: '/assets/icon-docs.svg', + style: { + width: '64px', + height: 'auto', + }, + alt: '', + }, + }, }, }); await page.goto('/docs/'); - // Wait for the page to be fully loaded and responsive store to be initialized - await page.waitForLoadState('domcontentloaded'); - - // Wait a bit more for the responsive store to be initialized - await page.waitForTimeout(500); - // Check header content const header = page.locator('header').first(); const footer = page.locator('footer').first(); - await expect(header).toBeVisible(); + await expect(header).toBeVisible({ + timeout: 10000, + }); // Check for language picker - it should be visible on desktop // Use a more flexible selector that works with both Header and HomeHeader @@ -118,7 +141,6 @@ test.describe('Home page', () => { header.getByRole('img', { name: 'Gouvernement Logo' }), ).toBeVisible(); await expect(header.getByTestId('header-icon-docs')).toBeVisible(); - await expect(header.getByRole('heading', { name: 'Docs' })).toBeVisible(); // Check the titles const h2 = page.locator('h2'); diff --git a/src/frontend/apps/impress/public/assets/icon-docs-v2.png b/src/frontend/apps/impress/public/assets/icon-docs-v2.png new file mode 100644 index 0000000000000000000000000000000000000000..de03ef2f5b8b3f98975aa6ea1668700b0ea6f0ec GIT binary patch literal 1911 zcmV--2Z;EIP)K~#7F?OIK8 z8b=g<-6IsT3OCTONQ|>F-X)bPGdPmV<&C8i7@xrS1VSeeI)Ts$j5moZ#s;+UE+(58 zC5w!2plobOXu9*g?in;-5I+LBoSLsnVrH10>3Of;`@Z)Eq67&NBuJ1T!T$n+mV}(w zbSXt1X}M+&tf+(Ti=s~nF2$7{!iHB4V@fa< zE7P8s+h~@EoB}po652HfHJMLoHeqw2!^0zhbH7T-N7&kXl}^xk+6;FMn~lwbgI(h0fsre~e8SO~4Rf4}=+jS>uCqC>E(U0M=) zN_muE0Fxau1E3HR!oDJ=CiNJ6Qo02O_u)=oDsilp)A^{*{$*Kpnv(x~qOh)r+(vsW zYw;q`Bs$1}HK@4fU%HB$-64u9-B;d0wCj4!Oqznsszct1BlF;!g*syrtn)SVoR?me zJ_Jam`&;3FzEI5W5Qi$cjl&X4U#Q$n6b&Z#&8fa-fRB6B;s=a!6T&m|urj;`r)1%j z3Vnf?-67_oQHSVp_SZ;h)Dlv3w2`@@M2mvfez)Q63?DX8x+0&zJC$&b+fawCZll;5 zb(wEBnt6vP&s_wi)gLlNooTuVMsY&q2$J6fO1&R9&deu8o3mb@F|$KV&epnPKSAOV zm*B=9dgRA*_|5fpSud?QbAj-lJGu2X^_?Q+KK^Ip=Y0=HC~|g9iVGh`3dDB6Jat$j zC)gQfIO7PuURVfgb9p=N=Dow}$FpE3dT!1hh}vBfvGMEQYwt`GwKF?J5mk;F-rgsZ zMhk^``=e^>T+i= z=Hd|atje+d5w^EH(qA3d2#wT9!j@N5 zBP(#Wqo+gTv;=279~!sCd@(Gw;k-;bZ5FIK&XG$~VxBrAg!WDND(YwAV!8rF|HBaWb__ned!AX>;<_-Jw3=#75j8>kQ3WoT0vuI0 z)|*d3YT&gj?~SgGQk0%6$SBq8|Sa z`(umNJW|g|bdAuFmca3RGZec=jbarGv#ue-VVg~&&@m7UNN*G02hH5ef}wE}$x5PX zxkSS`lwWkaWFCZy$PIV>?#nx7$-}^Ag=3C+L)0U1k}}3Kz*-8=x8u0*WUino!TfU6 zC_L@HEMz&OkiA&+KIl?hskvyIiQp0qWuw_aRHe@VHWt!k)yUI}*_HZR6!dvR2lCml zagCFZX2M;c0@b$TblrY}q*GkK41((#)FHd^>v8so?{j*OnyzAsNSjCYR_T1D%FV># z@Z*Vmosy+xMGM3O(&gd)z%e|ev|M#@Ps4LIIvAYW4Z%V|aWtdn^%hdJ2Kn_~Yv+~- z^u?Ufnh6yYy@LRNqxm})1tmnF2ldz=hooFW9g@NIIJ&Y?&5~XQ|b7aJw5h2|RwoX@_eHd`l zq%~8~%R#OiAy{-zZBfc7MR(LV!!tpcmK0|>vSNVMWs2f2Sv!A@QEG9_PU@&kakH|F zS|Y;U&dy`fSh3L7cvLl;oG(P{V_58sI=5qwZ{_YnkVx@Rn;&Bc79?l^i8>2_QH~6w zCClSbS3R=5tc!7UuJ)pcGMxgidBBCH7=EOqZ7*2xdDHF0-IUXe#iR*EQ#v4XBfmaXz1c+ZIQG$_} zn6lD6szal*By?#CMD2Oj@D7RAhx4Ev<#l$3(4yZ;5!|{@Fo3CYbJP*-7l7zo#@~lP z>3~>;&+pdXz5eO_@OTpyBug0g1R5<;Vg3*8U$c~801JP8^w#q-A1LKIv{E3eGQ3#z x%=~dIMNm^D_L5&OCP + + + + + + + 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 d40651a6..d80bf536 100644 --- a/src/frontend/apps/impress/src/features/header/components/Header.tsx +++ b/src/frontend/apps/impress/src/features/header/components/Header.tsx @@ -73,10 +73,10 @@ export const Header = () => { width={0} height={0} priority - {...icon} + {...(({ withTitle: _, ...rest }) => rest)(icon)} /> )} -