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 00000000..de03ef2f
Binary files /dev/null and b/src/frontend/apps/impress/public/assets/icon-docs-v2.png differ
diff --git a/src/frontend/apps/impress/public/assets/icon-docs-v2.svg b/src/frontend/apps/impress/public/assets/icon-docs-v2.svg
new file mode 100644
index 00000000..10cfbb7f
--- /dev/null
+++ b/src/frontend/apps/impress/public/assets/icon-docs-v2.svg
@@ -0,0 +1,34 @@
+
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)}
/>
)}
-
+ {icon?.withTitle && }
{!isDesktop ? (
diff --git a/src/frontend/apps/impress/src/features/header/types.ts b/src/frontend/apps/impress/src/features/header/types.ts
index 0a42f65b..580b7f9e 100644
--- a/src/frontend/apps/impress/src/features/header/types.ts
+++ b/src/frontend/apps/impress/src/features/header/types.ts
@@ -1,6 +1,8 @@
import Image from 'next/image';
-type Imagetype = React.ComponentProps;
+type Imagetype = React.ComponentProps & {
+ withTitle: boolean;
+};
export interface HeaderType {
logo?: Imagetype;
diff --git a/src/frontend/apps/impress/src/features/home/components/HomeHeader.tsx b/src/frontend/apps/impress/src/features/home/components/HomeHeader.tsx
index c67e2ab6..4f0d9e00 100644
--- a/src/frontend/apps/impress/src/features/home/components/HomeHeader.tsx
+++ b/src/frontend/apps/impress/src/features/home/components/HomeHeader.tsx
@@ -71,10 +71,10 @@ export const HomeHeader = () => {
height: icon.height,
}}
priority
- {...icon}
+ {...(({ withTitle: _, ...rest }) => rest)(icon)}
/>
)}
-
+ {icon?.withTitle && }
{!isSmallMobile && (