💄(frontend) Title header optional

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.

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

@@ -145,7 +145,8 @@
         "width": "32px",
         "height": "auto"
       },
-      "alt": ""
+      "alt": "",
+      "withTitle": true
     }
   },
   "favicon": {

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.getByTestId('custom-testid-docs')).toHaveAttribute(
-    await expect(header.locator('h1').getByText('Docs')).toHaveCSS(
+      'src',
-      'font-family',
+      '/assets/icon-docs-v2.svg',
-      /Marianne/i,
     );
-
+    await expect(header.locator('h1')).toBeHidden();
-    await expect(
-      header.getByRole('button', {
-        name: 'Logout',
-      }),
-    ).toBeVisible();
-
-    await expect(header.getByText('English')).toBeVisible();
   });
 
   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: [] } });
 

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/impress/public/assets/icon-docs-v2.svg

@@ -0,0 +1,34 @@
+<svg
+  width="100"
+  height="40"
+  viewBox="0 0 100 40"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M25.6305 32.8312C26.7983 32.5038 27.9166 31.9062 28.6505 30.8503C29.3749 29.8163 29.5789 28.5047 29.5789 27.2425V8.75099C29.5789 8.42358 29.5611 8.09557 29.5216 7.77148C30.1016 7.99961 30.5486 8.37658 30.8626 8.90239C31.2331 9.50024 31.4184 10.2876 31.4184 11.2643V30.0464C31.4184 31.3684 31.0942 32.3578 30.4458 33.0146C29.7974 33.6714 28.8207 33.9998 27.5155 33.9998H20.4209C20.5889 33.9704 20.7574 33.9401 20.9262 33.909C22.4067 33.6444 23.9713 33.2854 25.6185 32.8346L25.6305 32.8312Z"
+    fill="#C83F49"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8.58203 29.655V10.8477C8.58203 9.70251 8.88938 8.83519 9.50408 8.24575C10.1272 7.65631 10.9524 7.33212 11.9797 7.27318C13.4954 7.18055 14.9311 7.05425 16.2868 6.89425C17.6425 6.72584 18.9393 6.53217 20.1771 6.31324C21.4234 6.0943 22.6359 5.85011 23.8148 5.58065C25.0274 5.29435 25.9578 5.4375 26.6062 6.0101C27.2546 6.58269 27.5788 7.49632 27.5788 8.75099V27.2425C27.5788 28.3456 27.3893 29.1666 27.0104 29.7055C26.6315 30.2529 25.9915 30.6528 25.0905 30.9054C23.4906 31.3433 21.9833 31.6886 20.5687 31.9412C19.154 32.2022 17.7731 32.4001 16.4258 32.5348C15.0785 32.6696 13.6975 32.7748 12.2829 32.8506C11.1124 32.918 10.203 32.6738 9.5546 32.118C8.90622 31.5707 8.58203 30.7497 8.58203 29.655ZM13.2087 14.2624C15.0635 14.1444 16.7632 13.9631 18.3075 13.7183C18.6822 13.6572 19.0564 13.5936 19.4291 13.5276C19.8192 13.4585 20.1013 13.1186 20.1013 12.7234C20.1013 12.2115 19.638 11.8261 19.135 11.9119C18.846 11.9612 18.5555 12.0091 18.2635 12.0556C16.7346 12.2992 15.0452 12.48 13.1952 12.5977C12.9182 12.6156 12.6978 12.7019 12.5561 12.8739C12.4221 13.0366 12.3564 13.2323 12.3564 13.4553C12.3564 13.6821 12.433 13.8795 12.5857 14.0418L12.5878 14.0439C12.7534 14.2095 12.9637 14.2811 13.2087 14.2624ZM13.208 18.456C15.0631 18.338 16.763 18.1566 18.3075 17.9119C19.8588 17.6589 21.3936 17.3638 22.9112 17.0266C23.2191 16.9581 23.4498 16.8503 23.5652 16.683C23.6786 16.5221 23.7347 16.3376 23.7347 16.1332C23.7347 15.9026 23.6469 15.704 23.476 15.5426C23.2921 15.3689 23.0348 15.3284 22.7304 15.3911L22.7285 15.3915C21.2823 15.7194 19.794 16.0053 18.2635 16.2492C16.7346 16.4928 15.0452 16.6735 13.1952 16.7913C12.9182 16.8091 12.6978 16.8954 12.5561 17.0675C12.4228 17.2294 12.3564 17.4205 12.3564 17.6363C12.3564 17.8703 12.4321 18.0723 12.5856 18.2354L12.59 18.2396C12.755 18.3949 12.9632 18.4655 13.2055 18.4562L13.208 18.456ZM13.2085 22.6494C15.0634 22.5229 16.7631 22.3374 18.3075 22.0927C19.8589 21.8482 21.3934 21.5573 22.9112 21.22C23.2199 21.1514 23.4508 21.0391 23.566 20.8627C23.6783 20.7029 23.7347 20.5233 23.7347 20.3266C23.7347 20.0961 23.6469 19.8974 23.476 19.7361C23.2921 19.5623 23.0348 19.5218 22.7304 19.5845L22.729 19.5848C21.2827 19.9043 19.7942 20.1861 18.2635 20.43C16.7345 20.6736 15.045 20.8586 13.1949 20.9847C12.918 21.0026 12.6977 21.0889 12.5561 21.2609C12.4228 21.4228 12.3564 21.6139 12.3564 21.8297C12.3564 22.0637 12.4321 22.2658 12.5856 22.4289L12.59 22.433C12.755 22.5883 12.9632 22.6589 13.2055 22.6496L13.2085 22.6494ZM18.3075 26.257C16.7632 26.5018 15.0635 26.6831 13.2087 26.8012C12.9637 26.8198 12.7534 26.7482 12.5878 26.5826L12.5857 26.5805C12.433 26.4182 12.3564 26.2208 12.3564 25.9941C12.3564 25.771 12.4221 25.5753 12.5561 25.4126C12.6978 25.2406 12.9183 25.1543 13.1953 25.1364C15.0453 25.0187 16.7346 24.838 18.2635 24.5943C18.5555 24.5478 18.846 24.4999 19.135 24.4506C19.638 24.3648 20.1013 24.7503 20.1013 25.2621C20.1013 25.6573 19.8192 25.9972 19.4291 26.0663C19.0564 26.1323 18.6822 26.1959 18.3075 26.257Z"
+    fill="#2845C1"
+  />
+  <path
+    d="M41.2 27.95C41.0895 27.95 41 27.8605 41 27.75V12.2C41 12.0895 41.0895 12 41.2 12H47.2205C48.4813 12 49.6282 12.2127 50.6611 12.638C51.6941 13.0633 52.5827 13.6482 53.3271 14.3925C54.0866 15.1216 54.6638 15.9647 55.0588 16.9217C55.4689 17.8787 55.674 18.8965 55.674 19.975C55.674 21.0535 55.4689 22.0713 55.0588 23.0283C54.6638 23.9853 54.0866 24.836 53.3271 25.5803C52.5827 26.3094 51.6941 26.8867 50.6611 27.312C49.6282 27.7373 48.4813 27.95 47.2205 27.95H41.2ZM47.2433 14.5292H44.0026C43.8922 14.5292 43.8026 14.6188 43.8026 14.7292V25.2208C43.8026 25.3312 43.8922 25.4208 44.0026 25.4208H47.2433C48.0484 25.4208 48.7851 25.2841 49.4535 25.0106C50.1371 24.722 50.7219 24.3271 51.208 23.8258C51.7093 23.3245 52.0966 22.7473 52.3701 22.0941C52.6435 21.4409 52.7802 20.7345 52.7802 19.975C52.7802 19.2155 52.6435 18.5091 52.3701 17.8559C52.0966 17.1875 51.7093 16.6103 51.208 16.1242C50.7219 15.6229 50.1371 15.2356 49.4535 14.9621C48.7851 14.6735 48.0484 14.5292 47.2433 14.5292Z"
+    fill="#2845C1"
+  />
+  <path
+    d="M63.3939 25.6031C63.9104 25.6031 64.3889 25.5044 64.8294 25.3069C65.2699 25.0943 65.6497 24.8132 65.9687 24.4639C66.3029 24.1145 66.5611 23.7119 66.7434 23.2562C66.9257 22.7853 67.0168 22.284 67.0168 21.7524C67.0168 21.0232 66.8573 20.37 66.5383 19.7928C66.2193 19.2155 65.7864 18.7598 65.2395 18.4256C64.6927 18.0763 64.0775 17.9016 63.3939 17.9016C62.8622 17.9016 62.3686 18.0003 61.9128 18.1978C61.4723 18.3953 61.085 18.6687 60.7508 19.0181C60.4318 19.3674 60.1811 19.7776 59.9988 20.2485C59.8166 20.7194 59.7254 21.2207 59.7254 21.7524C59.7254 22.4663 59.8849 23.1195 60.2039 23.7119C60.5229 24.2892 60.9558 24.7525 61.5027 25.1019C62.0647 25.436 62.6951 25.6031 63.3939 25.6031ZM63.3711 15.5546C64.2977 15.5546 65.1408 15.7141 65.9003 16.0331C66.675 16.3521 67.3358 16.8003 67.8827 17.3775C68.4447 17.9395 68.8701 18.6003 69.1587 19.3599C69.4625 20.1042 69.6144 20.9017 69.6144 21.7524C69.6144 22.603 69.4625 23.4081 69.1587 24.1676C68.8701 24.912 68.4447 25.5728 67.8827 26.15C67.3358 26.712 66.675 27.1526 65.9003 27.4716C65.1408 27.7906 64.2977 27.9501 63.3711 27.9501C62.4445 27.9501 61.5938 27.7906 60.8191 27.4716C60.0596 27.1526 59.3988 26.712 58.8368 26.15C58.2747 25.5728 57.8418 24.912 57.538 24.1676C57.2494 23.4081 57.1051 22.603 57.1051 21.7524C57.1051 20.9017 57.2494 20.1042 57.538 19.3599C57.8418 18.6003 58.2747 17.9395 58.8368 17.3775C59.3988 16.8003 60.0596 16.3521 60.8191 16.0331C61.5938 15.7141 62.4445 15.5546 63.3711 15.5546Z"
+    fill="#2845C1"
+  />
+  <path
+    d="M77.2852 15.5546C78.3333 15.5546 79.2675 15.7673 80.0878 16.1926C80.8611 16.5723 81.5043 17.082 82.0173 17.7219C82.086 17.8076 82.0681 17.9322 81.9806 17.9986L80.3269 19.2531C80.2346 19.3232 80.1027 19.2999 80.0326 19.2076C79.7582 18.8466 79.4045 18.548 78.9713 18.3117C78.4852 18.0383 77.9156 17.9016 77.2624 17.9016C76.7307 17.9016 76.237 18.0003 75.7813 18.1978C75.3408 18.3953 74.961 18.6687 74.642 19.0181C74.323 19.3674 74.0724 19.7776 73.8901 20.2485C73.7078 20.7042 73.6167 21.2055 73.6167 21.7524C73.6167 22.4815 73.7762 23.1423 74.0952 23.7347C74.4142 24.3119 74.8471 24.7677 75.394 25.1019C75.9408 25.436 76.5788 25.6031 77.308 25.6031C77.9308 25.6031 78.4852 25.4664 78.9713 25.193C79.4045 24.9567 79.7582 24.6581 80.0326 24.2971C80.1027 24.2048 80.2346 24.1815 80.3269 24.2516L81.979 25.5049C82.0671 25.5717 82.0845 25.6976 82.0145 25.7831C81.5019 26.4095 80.8597 26.9191 80.0878 27.3121C79.2675 27.7374 78.3333 27.9501 77.2852 27.9501C75.994 27.9501 74.8775 27.669 73.9357 27.107C72.9939 26.5298 72.2647 25.7702 71.7483 24.8284C71.247 23.8866 70.9963 22.8613 70.9963 21.7524C70.9963 20.9169 71.1406 20.127 71.4293 19.3826C71.7179 18.6383 72.1356 17.9775 72.6825 17.4003C73.2293 16.823 73.8901 16.3749 74.6648 16.0559C75.4395 15.7217 76.313 15.5546 77.2852 15.5546Z"
+    fill="#2845C1"
+  />
+  <path
+    d="M85.9175 18.9041C85.9175 19.2687 86.0466 19.5725 86.3049 19.8156C86.5783 20.0434 86.9277 20.2409 87.353 20.408C87.7783 20.5751 88.2265 20.7574 88.6974 20.9549C89.1835 21.1371 89.6392 21.365 90.0645 21.6384C90.4898 21.8967 90.8316 22.246 91.0899 22.6866C91.3633 23.1119 91.5 23.6512 91.5 24.3044C91.5 25.0791 91.3101 25.7399 90.9304 26.2867C90.5658 26.8184 90.0797 27.2285 89.4721 27.5171C88.8644 27.8058 88.1961 27.9501 87.4669 27.9501C86.4795 27.9501 85.6213 27.7678 84.8921 27.4032C84.2203 27.0533 83.6259 26.5938 83.1088 26.0246C83.0352 25.9436 83.0442 25.8185 83.1263 25.7462L84.5297 24.5112C84.6154 24.4358 84.7464 24.4475 84.821 24.534C85.1512 24.917 85.5168 25.2354 85.9175 25.4892C86.3732 25.7778 86.8821 25.9221 87.4441 25.9221C87.9758 25.9221 88.3784 25.7854 88.6518 25.512C88.9404 25.2234 89.0847 24.874 89.0847 24.4639C89.0847 24.0841 88.948 23.7803 88.6746 23.5524C88.4163 23.3246 88.0745 23.1271 87.6492 22.96C87.2239 22.7929 86.7682 22.6182 86.2821 22.4359C85.8112 22.2384 85.363 22.003 84.9377 21.7296C84.5124 21.4561 84.163 21.1068 83.8896 20.6814C83.6313 20.2409 83.5022 19.6789 83.5022 18.9953C83.5022 18.3573 83.6693 17.78 84.0035 17.2636C84.3377 16.7319 84.801 16.3142 85.3934 16.0104C86.001 15.7065 86.6922 15.5546 87.4669 15.5546C88.3024 15.5546 89.0771 15.7369 89.7911 16.1015C90.4556 16.4338 90.9877 16.8481 91.3872 17.3444C91.4528 17.4258 91.4385 17.5439 91.359 17.6117L89.9551 18.8097C89.8666 18.8853 89.7328 18.8692 89.6595 18.7789C89.4001 18.4596 89.1022 18.19 88.7657 17.9699C88.3708 17.7117 87.9378 17.5826 87.4669 17.5826C87.1327 17.5826 86.8441 17.6433 86.6011 17.7649C86.3732 17.8864 86.1985 18.0459 86.077 18.2434C85.9707 18.4408 85.9175 18.6611 85.9175 18.9041Z"
+    fill="#2845C1"
+  />
+</svg>

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)}
               />
             )}
-            <Title headingLevel="h1" aria-hidden="true" />
+            {icon?.withTitle && <Title headingLevel="h1" aria-hidden="true" />}
           </Box>
         </StyledLink>
         {!isDesktop ? (

src/frontend/apps/impress/src/features/header/types.ts

@@ -1,6 +1,8 @@
 import Image from 'next/image';
 
-type Imagetype = React.ComponentProps<typeof Image>;
+type Imagetype = React.ComponentProps<typeof Image> & {
+  withTitle: boolean;
+};
 
 export interface HeaderType {
   logo?: Imagetype;

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)}
             />
           )}
-          <Title />
+          {icon?.withTitle && <Title />}
         </Box>
       </Box>
       {!isSmallMobile && (