✨(frontend) add home page

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to
 - 💄(frontend) add filtering to left panel #475
 - ✨(frontend) new share modal ui #489
 - ✨(frontend) add favorite feature #515
+- ✨(frontend) add home page #553
 
 ## Changed
 

src/frontend/apps/e2e/__tests__/app-impress/auth.setup.ts

@@ -4,6 +4,7 @@ import { keyCloakSignIn } from './common';
 
 setup('authenticate-chromium', async ({ page }) => {
   await page.goto('/');
+  await page.getByTestId('proconnect-button').first().click();
   await keyCloakSignIn(page, 'chromium');
   await page
     .context()
@@ -12,6 +13,7 @@ setup('authenticate-chromium', async ({ page }) => {
 
 setup('authenticate-webkit', async ({ page }) => {
   await page.goto('/');
+  await page.getByTestId('proconnect-button').first().click();
   await keyCloakSignIn(page, 'webkit');
   await page
     .context()
@@ -20,6 +22,7 @@ setup('authenticate-webkit', async ({ page }) => {
 
 setup('authenticate-firefox', async ({ page }) => {
   await page.goto('/');
+  await page.getByTestId('proconnect-button').first().click();
   await keyCloakSignIn(page, 'firefox');
   await page
     .context()

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

@@ -77,6 +77,7 @@ test.describe('Config', () => {
 
     const jsonResponse = await response.json();
     expect(jsonResponse.FRONTEND_THEME).toStrictEqual('dsfr');
+    await page.getByLabel('Logout').click();
 
     const footer = page.locator('footer').first();
     // alt 'Gouvernement Logo' comes from the theme

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

@@ -63,16 +63,16 @@ test.describe('Doc Routing: Not loggued', () => {
     await page.goto('/docs/mocked-document-id/');
     await expect(page.locator('h2').getByText('Mocked document')).toBeVisible();
     await page.getByRole('button', { name: 'Login' }).click();
+
     await keyCloakSignIn(page, browserName);
     await expect(page.locator('h2').getByText('Mocked document')).toBeVisible();
   });
 
-  test('The homepage redirects to login.', async ({ page }) => {
+  test('Check is redirected to home page if user is not logged', async ({
+    page,
+  }) => {
     await page.goto('/');
-    await expect(
-      page.getByRole('button', {
-        name: 'Sign In',
-      }),
-    ).toBeVisible();
+
+    await expect(page.getByTestId('proconnect-button').first()).toBeVisible();
   });
 });

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

@@ -72,6 +72,7 @@ test.describe('Doc Visibility: Restricted', () => {
     browserName,
   }) => {
     await page.goto('/');
+    await page.getByTestId('proconnect-button').first().click();
     await keyCloakSignIn(page, browserName);
 
     const [docTitle] = await createDoc(
@@ -91,9 +92,9 @@ test.describe('Doc Visibility: Restricted', () => {
       })
       .click();
 
-    await expect(page.getByRole('button', { name: 'Sign in' })).toBeVisible();
-
+    await expect(page.getByTestId('proconnect-button').first()).toBeVisible();
     await page.goto(urlDoc);
+    await page.getByTestId('proconnect-button').first().click();
 
     await expect(page.getByRole('textbox', { name: 'password' })).toBeVisible();
   });
@@ -103,6 +104,7 @@ test.describe('Doc Visibility: Restricted', () => {
     browserName,
   }) => {
     await page.goto('/');
+    await page.getByTestId('proconnect-button').first().click();
     await keyCloakSignIn(page, browserName);
 
     const [docTitle] = await createDoc(page, 'Restricted auth', browserName, 1);
@@ -119,6 +121,7 @@ test.describe('Doc Visibility: Restricted', () => {
 
     const otherBrowser = browsersName.find((b) => b !== browserName);
 
+    await page.getByTestId('proconnect-button').first().click();
     await keyCloakSignIn(page, otherBrowser!);
 
     await page.goto(urlDoc);
@@ -131,6 +134,7 @@ test.describe('Doc Visibility: Restricted', () => {
   test('A doc is accessible when member.', async ({ page, browserName }) => {
     test.slow();
     await page.goto('/');
+    await page.getByTestId('proconnect-button').first().click();
     await keyCloakSignIn(page, browserName);
 
     const [docTitle] = await createDoc(page, 'Restricted auth', browserName, 1);
@@ -167,6 +171,7 @@ test.describe('Doc Visibility: Restricted', () => {
       })
       .click();
 
+    await page.getByTestId('proconnect-button').first().click();
     await keyCloakSignIn(page, otherBrowser!);
 
     await page.goto(urlDoc);
@@ -184,6 +189,7 @@ test.describe('Doc Visibility: Public', () => {
     browserName,
   }) => {
     await page.goto('/');
+    await page.getByTestId('proconnect-button').first().click();
     await keyCloakSignIn(page, browserName);
 
     const [docTitle] = await createDoc(
@@ -240,7 +246,7 @@ test.describe('Doc Visibility: Public', () => {
       })
       .click();
 
-    await expect(page.getByRole('button', { name: 'Sign in' })).toBeVisible();
+    await expect(page.getByTestId('proconnect-button').first()).toBeVisible();
 
     await page.goto(urlDoc);
 
@@ -257,6 +263,7 @@ test.describe('Doc Visibility: Public', () => {
     browserName,
   }) => {
     await page.goto('/');
+    await page.getByTestId('proconnect-button').first().click();
     await keyCloakSignIn(page, browserName);
 
     const [docTitle] = await createDoc(page, 'Public editable', browserName, 1);
@@ -304,7 +311,7 @@ test.describe('Doc Visibility: Public', () => {
       })
       .click();
 
-    await expect(page.getByRole('button', { name: 'Sign in' })).toBeVisible();
+    await expect(page.getByTestId('proconnect-button').first()).toBeVisible();
 
     await page.goto(urlDoc);
 
@@ -321,6 +328,7 @@ test.describe('Doc Visibility: Authenticated', () => {
     browserName,
   }) => {
     await page.goto('/');
+    await page.getByTestId('proconnect-button').first().click();
     await keyCloakSignIn(page, browserName);
 
     const [docTitle] = await createDoc(
@@ -355,11 +363,12 @@ test.describe('Doc Visibility: Authenticated', () => {
       })
       .click();
 
-    await expect(page.getByRole('button', { name: 'Sign in' })).toBeVisible();
+    await expect(page.getByTestId('proconnect-button').first()).toBeVisible();
 
     await page.goto(urlDoc);
 
     await expect(page.locator('h2').getByText(docTitle)).toBeHidden();
+    await page.getByTestId('proconnect-button').first().click();
     await expect(page.getByRole('textbox', { name: 'password' })).toBeVisible();
   });
 
@@ -368,6 +377,7 @@ test.describe('Doc Visibility: Authenticated', () => {
     browserName,
   }) => {
     await page.goto('/');
+    await page.getByTestId('proconnect-button').first().click();
     await keyCloakSignIn(page, browserName);
 
     const [docTitle] = await createDoc(
@@ -403,6 +413,7 @@ test.describe('Doc Visibility: Authenticated', () => {
       .click();
 
     const otherBrowser = browsersName.find((b) => b !== browserName);
+    await page.getByTestId('proconnect-button').first().click();
     await keyCloakSignIn(page, otherBrowser!);
 
     await page.goto(urlDoc);
@@ -423,6 +434,7 @@ test.describe('Doc Visibility: Authenticated', () => {
     browserName,
   }) => {
     await page.goto('/');
+    await page.getByTestId('proconnect-button').first().click();
     await keyCloakSignIn(page, browserName);
 
     const [docTitle] = await createDoc(
@@ -464,6 +476,7 @@ test.describe('Doc Visibility: Authenticated', () => {
       .click();
 
     const otherBrowser = browsersName.find((b) => b !== browserName);
+    await page.getByTestId('proconnect-button').first().click();
     await keyCloakSignIn(page, otherBrowser!);
 
     await page.goto(urlDoc);

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

@@ -1,12 +1,13 @@
 import { expect, test } from '@playwright/test';
 
-import { goToGridDoc } from './common';
+import { keyCloakSignIn } from './common';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
 });
 
 test.describe('Footer', () => {
+  test.use({ storageState: { cookies: [], origins: [] } });
   test('checks all the elements are visible', async ({ page }) => {
     const footer = page.locator('footer').first();
 
@@ -47,9 +48,14 @@ test.describe('Footer', () => {
     ).toBeVisible();
   });
 
-  test('checks footer is not visible on doc editor', async ({ page }) => {
-    await expect(page.locator('footer')).toBeVisible();
-    await goToGridDoc(page);
+  test('checks footer is not visible on doc editor', async ({
+    page,
+    browserName,
+  }) => {
+    await page.getByTestId('proconnect-button').first().click();
+    await keyCloakSignIn(page, browserName);
+    await page.goto('/');
+
     await expect(page.locator('footer')).toBeHidden();
   });
 

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

@@ -90,6 +90,7 @@ test.describe('Header: Log out', () => {
 
   test('checks logout button', async ({ page, browserName }) => {
     await page.goto('/');
+    await page.getByTestId('proconnect-button').first().click();
     await keyCloakSignIn(page, browserName);
 
     await page
@@ -98,6 +99,6 @@ test.describe('Header: Log out', () => {
       })
       .click();
 
-    await expect(page.getByRole('button', { name: 'Sign in' })).toBeVisible();
+    await expect(page.getByTestId('proconnect-button')).toHaveCount(2);
   });
 });

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

@@ -0,0 +1,49 @@
+import { expect, test } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/');
+});
+
+test.describe('Home page', () => {
+  test.use({ storageState: { cookies: [], origins: [] } });
+  test('checks all the elements are visible', async ({ page }) => {
+    // Check header content
+    const header = page.locator('header').first();
+    const footer = page.locator('footer').first();
+    await expect(header).toBeVisible();
+    await expect(
+      header.getByRole('combobox', { name: 'Language' }),
+    ).toBeVisible();
+    await expect(
+      header.getByRole('button', { name: 'Les services de La Suite numé' }),
+    ).toBeVisible();
+    await expect(
+      header.getByRole('img', { name: 'Gouvernement Logo' }),
+    ).toBeVisible();
+    await expect(
+      header.getByRole('img', { name: 'Docs app logo' }),
+    ).toBeVisible();
+    await expect(header.getByRole('heading', { name: 'Docs' })).toBeVisible();
+    await expect(header.getByText('BETA')).toBeVisible();
+
+    // Check the ttile and subtitle are visible
+    await expect(page.getByText('Collaborative writing made')).toBeVisible();
+    await expect(page.getByText('Collaborate and write in real')).toBeVisible();
+    await expect(page.getByText('An uncompromising writing')).toBeVisible();
+    await expect(page.getByText('Docs offers an intuitive')).toBeVisible();
+    await expect(page.getByText('Simple and secure')).toBeVisible();
+    await expect(page.getByText('Docs makes real-time')).toBeVisible();
+    await expect(page.getByText('Flexible export.')).toBeVisible();
+    await expect(page.getByText('To facilitate the circulation')).toBeVisible();
+    await expect(page.getByText('A new way to organize')).toBeVisible();
+    await expect(page.getByText('Docs transforms your')).toBeVisible();
+
+    await expect(page.getByTestId('proconnect-button')).toHaveCount(2);
+
+    // Footer - The footer is already tested in its entirety in the footer.spec.ts file
+    await expect(footer).toBeVisible();
+    await expect(
+      page.getByRole('link', { name: 'expand_more See more' }),
+    ).toBeVisible();
+  });
+});

src/frontend/apps/impress/cunningham.ts

@@ -5,6 +5,7 @@ const config = {
         colors: {
           'card-border': '#ededed',
           'primary-bg': '#FAFAFA',
+          'primary-action': '#1212FF',
           'primary-050': '#F5F5FE',
           'primary-100': '#EDF5FA',
           'primary-150': '#E5EEFA',
@@ -59,6 +60,11 @@ const config = {
             h4: '1.375rem',
             h5: '1.25rem',
             h6: '1.125rem',
+            'xl-alt': '5rem',
+            'lg-alt': '4.5rem',
+            'md-alt': '4rem',
+            'sm-alt': '3.5rem',
+            'xs-alt': '3rem',
           },
           weights: {
             thin: 100,
@@ -224,7 +230,7 @@ const config = {
               'color-hover': 'var(--c--theme--colors--primary-700)',
             },
             border: {
-              color: 'var(--c--theme--colors--primary-200)',
+              color: 'var(--c--theme--colors--greyscale-300)',
             },
           },
           tertiary: {
@@ -379,8 +385,8 @@ const config = {
               'color-active': '#EDEDED',
             },
             border: {
-              color: 'var(--c--theme--colors--primary-600)',
-              'color-hover': 'var(--c--theme--colors--primary-600)',
+              color: 'var(--c--theme--colors--greyscale-300)',
+              'color-hover': 'var(--c--theme--colors--greyscale-300)',
             },
             color: 'var(--c--theme--colors--primary-text)',
           },

src/frontend/apps/impress/src/components/DocsTitle.tsx

@@ -0,0 +1,27 @@
+import Image from 'next/image';
+import { useTranslation } from 'react-i18next';
+
+import IconDocs from '@/assets/common/logo-docs-sm.png';
+import { useCunninghamTheme } from '@/cunningham';
+import Title from '@/features/header/components/Title/Title';
+
+import { Box } from './Box';
+
+export const DocsTitle = () => {
+  const theme = useCunninghamTheme();
+  const { t } = useTranslation();
+  const spacings = theme.spacingsTokens();
+
+  return (
+    <Box
+      $align="center"
+      $gap={spacings['3xs']}
+      $direction="row"
+      $position="relative"
+      $height="fit-content"
+    >
+      <Image priority src={IconDocs} alt={t('Docs Logo')} width={25} />
+      <Title />
+    </Box>
+  );
+};