💄(frontend) align colors and logo with ui-kit v2

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to
 
 - ♿️(frontend) prevent dates from being focusable #1855
 - ♿️(frontend) Focus main container after navigation #1854
+- 💄(frontend) align colors and logo with ui-kit v2 #1869
 - 🚸(backend) sort user search results by proximity with the active user #1802
 - 🚸(oidc) ignore case when fallback on email #1880
 

src/backend/impress/configuration/theme/default.json

@@ -3,8 +3,8 @@
     "default": {
       "logo": {
         "src": "/assets/icon-docs.svg",
-        "width": "54px",
         "alt": "Docs Logo",
+        "style": { "width": "54px", "height": "auto" },
         "withTitle": true
       },
       "externalLinks": [
@@ -125,5 +125,38 @@
         }
       }
     }
+  },
+  "home": {
+    "with-proconnect": false,
+    "icon-banner": {
+      "src": "/assets/icon-docs.svg",
+      "style": {
+        "width": "64px",
+        "height": "auto"
+      },
+      "alt": ""
+    }
+  },
+  "header": {
+    "logo": {},
+    "icon": {
+      "src": "/assets/icon-docs.svg",
+      "style": {
+        "width": "32px",
+        "height": "auto"
+      },
+      "alt": "",
+      "withTitle": true
+    }
+  },
+  "favicon": {
+    "light": {
+      "href": "/assets/favicon-light.png",
+      "type": "image/png"
+    },
+    "dark": {
+      "href": "/assets/favicon-dark.png",
+      "type": "image/png"
+    }
   }
 }

src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts

@@ -140,26 +140,6 @@ test.describe('Config', () => {
     ).toBeAttached();
   });
 
-  test('it checks theme_customization.translations config', async ({
-    page,
-  }) => {
-    await overrideConfig(page, {
-      theme_customization: {
-        translations: {
-          en: {
-            translation: {
-              Docs: 'MyCustomDocs',
-            },
-          },
-        },
-      },
-    });
-
-    await page.goto('/');
-
-    await expect(page.getByText('MyCustomDocs')).toBeAttached();
-  });
-
   test('it checks the config api is called', async ({ page }) => {
     const responsePromise = page.waitForResponse(
       (response) =>
@@ -172,11 +152,7 @@ test.describe('Config', () => {
     expect(response.ok()).toBeTruthy();
 
     const json = (await response.json()) as typeof CONFIG;
-    const { theme_customization, ...configApi } = json;
-    expect(theme_customization).toBeDefined();
-    const { theme_customization: _, ...CONFIG_LEFT } = CONFIG;
-
-    expect(configApi).toStrictEqual(CONFIG_LEFT);
+    expect(json).toStrictEqual(CONFIG);
   });
 });
 
@@ -186,14 +162,24 @@ test.describe('Config: Not logged', () => {
   test('it checks that theme is configured from config endpoint', async ({
     page,
   }) => {
+    await page.goto('/');
+
+    await expect(
+      page.getByText('Collaborative writing, Simplified.'),
+    ).toHaveCSS('font-family', /Roboto/i, {
+      timeout: 10000,
+    });
+
     await overrideConfig(page, {
       FRONTEND_THEME: 'dsfr',
     });
 
     await page.goto('/');
 
-    const header = page.locator('header').first();
-    // alt 'Gouvernement Logo' comes from the theme
-    await expect(header.getByAltText('Gouvernement Logo')).toBeVisible();
+    await expect(
+      page.getByText('Collaborative writing, Simplified.'),
+    ).toHaveCSS('font-family', /Marianne/i, {
+      timeout: 10000,
+    });
   });
 });

src/frontend/apps/e2e/__tests__/app-impress/footer.spec.ts

@@ -56,14 +56,13 @@ test.describe('Footer', () => {
 
   test('checks the footer is correctly overrided', async ({ page }) => {
     await overrideConfig(page, {
-      FRONTEND_THEME: 'dsfr',
       theme_customization: {
         footer: {
           default: {
             logo: {
               src: '/assets/logo-gouv.svg',
-              width: '220px',
               alt: 'Gouvernement Logo',
+              style: { width: '220px', height: 'auto' },
             },
             externalLinks: [
               {

src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts

@@ -34,10 +34,15 @@ test.describe('Header', () => {
       FRONTEND_THEME: 'dsfr',
       theme_customization: {
         header: {
-          logo: {
-            src: '/assets/logo-gouv.svg',
-            width: '220px',
-            alt: 'Gouvernement Logo',
+          icon: {
+            src: '/assets/icon-docs-v2.svg',
+            style: {
+              width: '100px',
+              height: 'auto',
+            },
+            alt: '',
+            withTitle: false,
+            'data-testid': 'custom-testid-docs',
           },
         },
       },
@@ -46,19 +51,11 @@ test.describe('Header', () => {
 
     const header = page.locator('header').first();
 
-    await expect(header.getByTestId('header-icon-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 }) => {
@@ -146,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: [] } });
 

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');

src/frontend/apps/e2e/__tests__/app-impress/language.spec.ts

@@ -13,6 +13,32 @@ test.describe('Language', () => {
     await page.goto('/');
   });
 
+  test('it checks theme_customization.translations config', async ({
+    page,
+  }) => {
+    await overrideConfig(page, {
+      theme_customization: {
+        translations: {
+          en: {
+            translation: {
+              Docs: 'MyCustomDocs',
+            },
+          },
+        },
+        header: {
+          logo: {},
+          icon: {
+            withTitle: true,
+          },
+        },
+      },
+    });
+
+    await page.goto('/');
+
+    await expect(page.getByText('MyCustomDocs')).toBeAttached();
+  });
+
   test('checks language switching', async ({ page }) => {
     const header = page.locator('header').first();
     const languagePicker = header.locator('.--docs--language-picker-text');

src/frontend/apps/e2e/__tests__/app-impress/utils-common.ts

@@ -3,6 +3,8 @@ import path from 'path';
 
 import { Locator, Page, TestInfo, expect } from '@playwright/test';
 
+import theme_customization from '../../../../../backend/impress/configuration/theme/default.json';
+
 export type BrowserName = 'chromium' | 'firefox' | 'webkit';
 export const BROWSERS: BrowserName[] = ['chromium', 'webkit', 'firefox'];
 
@@ -32,7 +34,7 @@ export const CONFIG = {
   POSTHOG_KEY: {},
   SENTRY_DSN: null,
   TRASHBIN_CUTOFF_DAYS: 30,
-  theme_customization: {},
+  theme_customization,
 } as const;
 
 export const overrideConfig = async (

src/frontend/apps/impress/cunningham.ts

@@ -19,24 +19,6 @@ const themeWhiteLabelLight = getUIKitThemesFromGlobals(whiteLabelGlobals, {
         '2xs': '0.375rem',
       },
     },
-    components: {
-      logo: {
-        src: '',
-        alt: '',
-        widthHeader: '',
-        widthFooter: '',
-      },
-      'home-proconnect': false,
-      icon: {
-        src: '/assets/icon-docs.svg',
-        width: '32px',
-        height: 'auto',
-      },
-      favicon: {
-        'png-light': '/assets/favicon-light.png',
-        'png-dark': '/assets/favicon-dark.png',
-      },
-    },
   },
 });
 
@@ -56,25 +38,6 @@ const themesDSFRLight = getUIKitThemesFromGlobals(dsfrGlobals, {
         },
       },
     },
-    components: {
-      logo: {
-        src: '/assets/logo-gouv.svg',
-        widthHeader: '110px',
-        widthFooter: '220px',
-        alt: 'Gouvernement Logo',
-      },
-      'home-proconnect': true,
-      icon: {
-        src: '/assets/icon-docs-dsfr.svg',
-        width: '32px',
-        height: 'auto',
-      },
-      favicon: {
-        ico: '/assets/favicon-dsfr.ico',
-        'png-light': '/assets/favicon-dsfr.png',
-        'png-dark': '/assets/favicon-dark-dsfr.png',
-      },
-    },
   },
 });