From 66dbea3c6d1f912de0f640c3a8fe2ae67b675753 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Fri, 26 Jan 2024 16:07:25 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(app-desk)=20integrate=20static=20menu?=
 =?UTF-8?q?=20in=20the=20app?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Integrate the menu from the mockup in the app.
---
 .../apps/desk/src/app/Header/Header.tsx       |  51 +++++++++-----
 .../apps/desk/src/app/__tests__/page.test.tsx |  11 ++-
 src/frontend/apps/desk/src/app/menu/Menu.tsx  |  37 ++++++++++
 .../apps/desk/src/app/menu/MenuItems.tsx      |  66 ++++++++++++++++++
 .../apps/desk/src/app/menu/Tooltip.tsx        |  56 +++++++++++++++
 .../desk/src/app/menu/assets/icon-clock.svg   |   8 +++
 .../src/app/menu/assets/icon-contacts.svg     |  13 ++++
 .../desk/src/app/menu/assets/icon-group.svg   |  13 ++++
 .../desk/src/app/menu/assets/icon-search.svg  |  13 ++++
 .../desk/src/app/menu/assets/icon-stars.svg   |  13 ++++
 src/frontend/apps/desk/src/app/menu/index.ts  |   1 +
 src/frontend/apps/desk/src/app/page.tsx       |  18 ++++-
 src/frontend/apps/desk/src/components/Box.tsx |   4 ++
 .../apps/desk/src/components/Text.tsx         |  14 +++-
 .../header/assets/icon-my-account.png         | Bin 0 -> 7957 bytes
 .../apps/desk/src/i18n/translations.json      |  11 ++-
 .../apps/desk/src/types/components.ts         |   5 ++
 .../e2e/__tests__/app-desk/header.spec.ts     |   7 ++
 .../apps/e2e/__tests__/app-desk/menu.spec.ts  |  26 +++++++
 19 files changed, 337 insertions(+), 30 deletions(-)
 create mode 100644 src/frontend/apps/desk/src/app/menu/Menu.tsx
 create mode 100644 src/frontend/apps/desk/src/app/menu/MenuItems.tsx
 create mode 100644 src/frontend/apps/desk/src/app/menu/Tooltip.tsx
 create mode 100644 src/frontend/apps/desk/src/app/menu/assets/icon-clock.svg
 create mode 100644 src/frontend/apps/desk/src/app/menu/assets/icon-contacts.svg
 create mode 100644 src/frontend/apps/desk/src/app/menu/assets/icon-group.svg
 create mode 100644 src/frontend/apps/desk/src/app/menu/assets/icon-search.svg
 create mode 100644 src/frontend/apps/desk/src/app/menu/assets/icon-stars.svg
 create mode 100644 src/frontend/apps/desk/src/app/menu/index.ts
 create mode 100644 src/frontend/apps/desk/src/features/header/assets/icon-my-account.png
 create mode 100644 src/frontend/apps/desk/src/types/components.ts
 create mode 100644 src/frontend/apps/e2e/__tests__/app-desk/menu.spec.ts

diff --git a/src/frontend/apps/desk/src/app/Header/Header.tsx b/src/frontend/apps/desk/src/app/Header/Header.tsx
index 7088532..2a1cc68 100644
--- a/src/frontend/apps/desk/src/app/Header/Header.tsx
+++ b/src/frontend/apps/desk/src/app/Header/Header.tsx
@@ -13,6 +13,9 @@ import { default as IconDesk } from './assets/icon-desk.svg?url';
 import { default as IconFAQ } from './assets/icon-faq.svg?url';
 import { default as IconGouv } from './assets/icon-gouv.svg?url';
 import { default as IconMarianne } from './assets/icon-marianne.svg?url';
+import IconMyAccount from './assets/icon-my-account.png';
+
+export const HEADER_HEIGHT = '100px';
 
 const RedStripe = styled.div`
   position: absolute;
@@ -22,19 +25,22 @@ const RedStripe = styled.div`
   top: 0;
 `;
 
+const StyledHeader = styled.header`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: ${HEADER_HEIGHT};
+  width: 100%;
+  background: white;
+  box-shadow: 0 1px 4px #00000040;
+  z-index: 100;
+`;
+
 const Header = () => {
   const { t } = useTranslation();
 
   return (
-    <Box
-      className="mb-l"
-      as="header"
-      $height="100px"
-      $width="100%"
-      $direction="column"
-      $justify="center"
-      $css="box-shadow: 0 1px 4px #00000040;"
-    >
+    <StyledHeader>
       <RedStripe />
       <Box className="ml-l mr-l" $align="center" $justify="space-between">
         <Box $direction="column">
@@ -73,15 +79,28 @@ const Header = () => {
             </Button>
             <LanguagePicker />
           </Box>
-          <Button
-            aria-label={t('Access to the cells menu')}
-            icon={<Image priority src={IconCells} alt={t('Cells icon')} />}
-            color="tertiary"
-            className="c__button-no-bg p-0 m-0"
-          />
+          <Box>
+            <Box $direction="row" $align="center" $gap="1rem">
+              <Text $weight="bold">John Doe</Text>
+              <Image
+                width={58}
+                height={58}
+                priority
+                src={IconMyAccount}
+                alt={t(`Profile picture`)}
+                unoptimized
+              />
+            </Box>
+            <Button
+              aria-label={t('Access to the cells menu')}
+              icon={<Image priority src={IconCells} alt={t('Cells icon')} />}
+              color="tertiary"
+              className="c__button-no-bg p-0 m-0"
+            />
+          </Box>
         </Box>
       </Box>
-    </Box>
+    </StyledHeader>
   );
 };
 
diff --git a/src/frontend/apps/desk/src/app/__tests__/page.test.tsx b/src/frontend/apps/desk/src/app/__tests__/page.test.tsx
index dc6abfc..8cfe977 100644
--- a/src/frontend/apps/desk/src/app/__tests__/page.test.tsx
+++ b/src/frontend/apps/desk/src/app/__tests__/page.test.tsx
@@ -1,7 +1,6 @@
 import '@testing-library/jest-dom';
-import { act, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
-import useAuthStore from '@/auth/useAuthStore';
 import { AppWrapper } from '@/tests/utils';
 
 import Page from '../page';
@@ -12,10 +11,8 @@ describe('Page', () => {
 
     expect(screen.getByRole('status')).toBeInTheDocument();
 
-    act(() => {
-      useAuthStore.setState({ authenticated: true });
-    });
-
-    expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent('Desk');
+    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent(
+      'Hello Desk!',
+    );
   });
 });
diff --git a/src/frontend/apps/desk/src/app/menu/Menu.tsx b/src/frontend/apps/desk/src/app/menu/Menu.tsx
new file mode 100644
index 0000000..ee30649
--- /dev/null
+++ b/src/frontend/apps/desk/src/app/menu/Menu.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Box } from '@/components/';
+import useCunninghamTheme from '@/cunningham/useCunninghamTheme';
+
+import MenuItem from './MenuItems';
+import IconRecent from './assets/icon-clock.svg';
+import IconContacts from './assets/icon-contacts.svg';
+import IconGroup from './assets/icon-group.svg';
+import IconSearch from './assets/icon-search.svg';
+import IconFavorite from './assets/icon-stars.svg';
+
+export const Menu = () => {
+  const { colorsTokens } = useCunninghamTheme();
+  const { t } = useTranslation();
+
+  return (
+    <Box
+      as="menu"
+      className="m-0 p-0"
+      $background={colorsTokens()['primary-800']}
+      $height="100%"
+      $width="3.75rem"
+      $justify="space-between"
+      $direction="column"
+    >
+      <Box $direction="column">
+        <MenuItem Icon={IconSearch} label={t('Search')} />
+        <MenuItem Icon={IconFavorite} label={t('Favorite')} />
+        <MenuItem Icon={IconRecent} label={t('Recent')} />
+        <MenuItem Icon={IconContacts} label={t('Contacts')} />
+        <MenuItem Icon={IconGroup} label={t('Groups')} />
+      </Box>
+    </Box>
+  );
+};
diff --git a/src/frontend/apps/desk/src/app/menu/MenuItems.tsx b/src/frontend/apps/desk/src/app/menu/MenuItems.tsx
new file mode 100644
index 0000000..6f3ba04
--- /dev/null
+++ b/src/frontend/apps/desk/src/app/menu/MenuItems.tsx
@@ -0,0 +1,66 @@
+import { Button } from '@openfun/cunningham-react';
+import React, { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Box } from '@/components/';
+import { useCunninghamTheme } from '@/cunningham';
+import { SVGComponent } from '@/types/components';
+
+import { Tooltip } from './Tooltip';
+
+interface MenuItemProps {
+  Icon: SVGComponent;
+  label: string;
+}
+
+const MenuItem = ({ Icon, label }: MenuItemProps) => {
+  const { t } = useTranslation();
+  const buttonRef = useRef(null);
+  const { colorsTokens } = useCunninghamTheme();
+  const [isTooltipOpen, setIsTooltipOpen] = useState(false);
+
+  return (
+    <>
+      <Box
+        className="m-st p-t"
+        as="li"
+        $justify="center"
+        ref={buttonRef}
+        $css={`
+          & > button { padding: 0};
+          transition: all 0.2s ease-in-out
+        `}
+        $background={colorsTokens()['primary-300']}
+        $radius="10px"
+        onMouseOver={() => setIsTooltipOpen(true)}
+        onMouseOut={() => setIsTooltipOpen(false)}
+      >
+        <Button
+          aria-label={t(`{{label}} button`, { label })}
+          icon={
+            <Box $color={colorsTokens()['primary-600']}>
+              <Icon
+                width="2.375rem"
+                aria-label={t(`{{label}} icon`, { label })}
+                color="#ffffff"
+              />
+            </Box>
+          }
+          color="tertiary"
+          className="c__button-no-bg p-0 m-0"
+          style={{ flexDirection: 'column', gap: '0' }}
+        />
+      </Box>
+      {isTooltipOpen && (
+        <Tooltip
+          buttonRef={buttonRef}
+          label={label}
+          backgroundColor="#ffffff"
+          textColor="#000000"
+        />
+      )}
+    </>
+  );
+};
+
+export default MenuItem;
diff --git a/src/frontend/apps/desk/src/app/menu/Tooltip.tsx b/src/frontend/apps/desk/src/app/menu/Tooltip.tsx
new file mode 100644
index 0000000..d151853
--- /dev/null
+++ b/src/frontend/apps/desk/src/app/menu/Tooltip.tsx
@@ -0,0 +1,56 @@
+import { Popover } from '@openfun/cunningham-react';
+import React, { CSSProperties, useEffect, useState } from 'react';
+
+import { Box, Text } from '@/components/';
+
+interface TooltipProps {
+  buttonRef: React.MutableRefObject<null>;
+  textColor: CSSProperties['color'];
+  backgroundColor: CSSProperties['color'];
+  label: string;
+}
+
+export const Tooltip = ({
+  buttonRef,
+  backgroundColor,
+  textColor,
+  label,
+}: TooltipProps) => {
+  const [opacity, setOpacity] = useState(0);
+
+  useEffect(() => {
+    setOpacity(1);
+  }, []);
+
+  return (
+    <Popover parentRef={buttonRef} onClickOutside={() => ''} borderless>
+      <Box
+        aria-label="tooltip"
+        className="ml-t p-t"
+        $background={backgroundColor}
+        $radius="4px"
+        $css={`
+          transition: opacity 0.2s ease-in-out;
+          box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
+          opacity: ${opacity};
+
+          /* Arrow */
+          &::after {
+            position: absolute;
+            content: "";
+            top: -7px;
+            width: 0;
+            height: 0;
+            border-left: 5px solid transparent;
+            border-right: 5px solid transparent;
+            border-bottom: 7px solid ${backgroundColor};
+          }
+        `}
+      >
+        <Text $weight={400} $size="12px" $color={textColor}>
+          {label}
+        </Text>
+      </Box>
+    </Popover>
+  );
+};
diff --git a/src/frontend/apps/desk/src/app/menu/assets/icon-clock.svg b/src/frontend/apps/desk/src/app/menu/assets/icon-clock.svg
new file mode 100644
index 0000000..bd375f2
--- /dev/null
+++ b/src/frontend/apps/desk/src/app/menu/assets/icon-clock.svg
@@ -0,0 +1,8 @@
+<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M13.9997 38.9665C16.9598 40.9443 20.4399 42 24 42C28.7739 42 33.3523 40.1036 36.7279 36.7279C40.1036 33.3523 42 28.7739 42 24C42 20.4399 40.9443 16.9598 38.9665 13.9997C36.9886 11.0397 34.1774 8.73255 30.8883 7.37018C27.5992 6.0078 23.98 5.65134 20.4884 6.34587C16.9967 7.04041 13.7894 8.75474 11.2721 11.2721C8.75474 13.7894 7.04041 16.9967 6.34587 20.4884C5.65134 23.98 6.0078 27.5992 7.37018 30.8883C8.73255 34.1774 11.0397 36.9886 13.9997 38.9665ZM15.6665 11.528C18.1332 9.87974 21.0333 9.00001 24 9.00001C27.9783 9.00001 31.7936 10.5804 34.6066 13.3934C37.4197 16.2065 39 20.0218 39 24C39 26.9667 38.1203 29.8668 36.4721 32.3336C34.8238 34.8003 32.4812 36.7229 29.7403 37.8582C26.9994 38.9935 23.9834 39.2906 21.0737 38.7118C18.1639 38.133 15.4912 36.7044 13.3934 34.6066C11.2956 32.5088 9.86701 29.8361 9.28823 26.9264C8.70945 24.0166 9.0065 21.0006 10.1418 18.2598C11.2771 15.5189 13.1997 13.1762 15.6665 11.528ZM24 25.5H30C30.3978 25.5 30.7794 25.342 31.0607 25.0607C31.342 24.7794 31.5 24.3978 31.5 24C31.5 23.6022 31.342 23.2206 31.0607 22.9393C30.7794 22.658 30.3978 22.5 30 22.5H25.5V14C25.5 13.6022 25.342 13.2206 25.0607 12.9393C24.7794 12.658 24.3978 12.5 24 12.5C23.6022 12.5 23.2206 12.658 22.9393 12.9393C22.658 13.2206 22.5 13.6022 22.5 14V24C22.5052 24.3962 22.6649 24.7747 22.9451 25.0549C23.2253 25.3351 23.6038 25.4948 24 25.5Z"
+    fill="currentColor"
+  />
+</svg>
diff --git a/src/frontend/apps/desk/src/app/menu/assets/icon-contacts.svg b/src/frontend/apps/desk/src/app/menu/assets/icon-contacts.svg
new file mode 100644
index 0000000..2924525
--- /dev/null
+++ b/src/frontend/apps/desk/src/app/menu/assets/icon-contacts.svg
@@ -0,0 +1,13 @@
+<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_177_15514)">
+    <path
+      d="M38 6H36V2H32V6H16V2H12V6H10C7.78 6 6 7.8 6 10V38C6 40.2 7.78 42 10 42H38C40.2 42 42 40.2 42 38V10C42 7.8 40.2 6 38 6ZM24 12C27.32 12 30 14.68 30 18C30 21.32 27.32 24 24 24C20.68 24 18 21.32 18 18C18 14.68 20.68 12 24 12ZM36 36H12V34C12 30 20 27.8 24 27.8C28 27.8 36 30 36 34V36Z"
+      fill="currentColor"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_177_15514">
+      <rect width="48" height="48" fill="currentColor" />
+    </clipPath>
+  </defs>
+</svg>
diff --git a/src/frontend/apps/desk/src/app/menu/assets/icon-group.svg b/src/frontend/apps/desk/src/app/menu/assets/icon-group.svg
new file mode 100644
index 0000000..c2a7d3c
--- /dev/null
+++ b/src/frontend/apps/desk/src/app/menu/assets/icon-group.svg
@@ -0,0 +1,13 @@
+<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_177_15522)">
+    <path
+      d="M24 25.5C27.26 25.5 30.14 26.28 32.48 27.3C34.64 28.26 36 30.42 36 32.76V36H12V32.78C12 30.42 13.36 28.26 15.52 27.32C17.86 26.28 20.74 25.5 24 25.5ZM8 26C10.2 26 12 24.2 12 22C12 19.8 10.2 18 8 18C5.8 18 4 19.8 4 22C4 24.2 5.8 26 8 26ZM10.26 28.2C9.52 28.08 8.78 28 8 28C6.02 28 4.14 28.42 2.44 29.16C0.96 29.8 0 31.24 0 32.86V36H9V32.78C9 31.12 9.46 29.56 10.26 28.2ZM40 26C42.2 26 44 24.2 44 22C44 19.8 42.2 18 40 18C37.8 18 36 19.8 36 22C36 24.2 37.8 26 40 26ZM48 32.86C48 31.24 47.04 29.8 45.56 29.16C43.86 28.42 41.98 28 40 28C39.22 28 38.48 28.08 37.74 28.2C38.54 29.56 39 31.12 39 32.78V36H48V32.86ZM24 12C27.32 12 30 14.68 30 18C30 21.32 27.32 24 24 24C20.68 24 18 21.32 18 18C18 14.68 20.68 12 24 12Z"
+      fill="currentColor"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_177_15522">
+      <rect width="48" height="48" fill="currentColor" />
+    </clipPath>
+  </defs>
+</svg>
diff --git a/src/frontend/apps/desk/src/app/menu/assets/icon-search.svg b/src/frontend/apps/desk/src/app/menu/assets/icon-search.svg
new file mode 100644
index 0000000..21e2444
--- /dev/null
+++ b/src/frontend/apps/desk/src/app/menu/assets/icon-search.svg
@@ -0,0 +1,13 @@
+<svg viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_177_15504)">
+    <path
+      d="M12.8327 16.5H3.66602V12.8333H12.8327V16.5ZM12.8327 22H3.66602V25.6667H12.8327V22ZM37.7477 34.8333L30.726 27.8117C29.2593 28.765 27.536 29.3333 25.666 29.3333C20.606 29.3333 16.4993 25.2267 16.4993 20.1667C16.4993 15.1067 20.606 11 25.666 11C30.726 11 34.8327 15.1067 34.8327 20.1667C34.8327 22.0367 34.2643 23.76 33.311 25.2083L40.3327 32.2483L37.7477 34.8333ZM31.166 20.1667C31.166 17.1417 28.691 14.6667 25.666 14.6667C22.641 14.6667 20.166 17.1417 20.166 20.1667C20.166 23.1917 22.641 25.6667 25.666 25.6667C28.691 25.6667 31.166 23.1917 31.166 20.1667ZM3.66602 34.8333H21.9993V31.1667H3.66602V34.8333Z"
+      fill="currentColor"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_177_15504">
+      <rect width="44" height="44" fill="currentColor" />
+    </clipPath>
+  </defs>
+</svg>
diff --git a/src/frontend/apps/desk/src/app/menu/assets/icon-stars.svg b/src/frontend/apps/desk/src/app/menu/assets/icon-stars.svg
new file mode 100644
index 0000000..8de1495
--- /dev/null
+++ b/src/frontend/apps/desk/src/app/menu/assets/icon-stars.svg
@@ -0,0 +1,13 @@
+<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_177_15497)">
+    <path
+      d="M28.86 20L24 4L19.14 20H4L16.36 28.82L11.66 44L24 34.62L36.36 44L31.66 28.82L44 20H28.86Z"
+      fill="currentColor"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_177_15497">
+      <rect width="48" height="48" fill="currentColor" />
+    </clipPath>
+  </defs>
+</svg>
diff --git a/src/frontend/apps/desk/src/app/menu/index.ts b/src/frontend/apps/desk/src/app/menu/index.ts
new file mode 100644
index 0000000..629d3d0
--- /dev/null
+++ b/src/frontend/apps/desk/src/app/menu/index.ts
@@ -0,0 +1 @@
+export * from './Menu';
diff --git a/src/frontend/apps/desk/src/app/page.tsx b/src/frontend/apps/desk/src/app/page.tsx
index 0377d1e..39e2fa2 100644
--- a/src/frontend/apps/desk/src/app/page.tsx
+++ b/src/frontend/apps/desk/src/app/page.tsx
@@ -5,9 +5,11 @@ import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import useAuthStore from '@/auth/useAuthStore';
+import { Box } from '@/components';
 
-import Header from './Header/Header';
+import Header, { HEADER_HEIGHT } from './Header/Header';
 import { Teams } from './Teams';
+import { MENU_WIDTH, Menu } from './menu';
 
 export default function Home() {
   const { initAuth, authenticated, initialized } = useAuthStore();
@@ -28,8 +30,18 @@ export default function Home() {
   return (
     <main>
       <Header />
-      <h1>{t('Hello Desk !')}</h1>
-      <Teams />
+      <Box $css={`margin-top:${HEADER_HEIGHT}`}>
+        <Menu />
+        <Box
+          $css={`margin-left:${MENU_WIDTH}`}
+          $direction="column"
+          $height="300vh"
+          className="p-b"
+        >
+          <h1>{t('Hello Desk !')}</h1>
+          <Teams />
+        </Box>
+      </Box>
     </main>
   );
 }
diff --git a/src/frontend/apps/desk/src/components/Box.tsx b/src/frontend/apps/desk/src/components/Box.tsx
index 01f05e9..21181a9 100644
--- a/src/frontend/apps/desk/src/components/Box.tsx
+++ b/src/frontend/apps/desk/src/components/Box.tsx
@@ -9,11 +9,13 @@ export interface BoxProps {
   $color?: CSSProperties['color'];
   $css?: string;
   $direction?: CSSProperties['flexDirection'];
+  $display?: CSSProperties['display'];
   $flex?: boolean;
   $gap?: CSSProperties['gap'];
   $height?: CSSProperties['height'];
   $justify?: CSSProperties['justifyContent'];
   $position?: CSSProperties['position'];
+  $radius?: CSSProperties['borderRadius'];
   $width?: CSSProperties['width'];
 }
 
@@ -23,11 +25,13 @@ export const Box = styled('div')<BoxProps>`
   ${({ $background }) => $background && `background: ${$background};`}
   ${({ $color }) => $color && `color: ${$color};`}
   ${({ $direction }) => $direction && `flex-direction: ${$direction};`}
+  ${({ $display }) => $display && `display: ${$display};`}
   ${({ $flex }) => $flex === false && `display: block;`}
   ${({ $gap }) => $gap && `gap: ${$gap};`}
   ${({ $height }) => $height && `height: ${$height};`}
   ${({ $justify }) => $justify && `justify-content: ${$justify};`}
   ${({ $position }) => $position && `position: ${$position};`}
+  ${({ $radius }) => $radius && `border-radius: ${$radius};`}
   ${({ $width }) => $width && `width: ${$width};`}
   ${({ $css }) => $css && `${$css};`}
 `;
diff --git a/src/frontend/apps/desk/src/components/Text.tsx b/src/frontend/apps/desk/src/components/Text.tsx
index 67078c6..c2ab7a7 100644
--- a/src/frontend/apps/desk/src/components/Text.tsx
+++ b/src/frontend/apps/desk/src/components/Text.tsx
@@ -1,15 +1,21 @@
 import { CSSProperties, ComponentPropsWithRef, ReactHTML } from 'react';
 import styled from 'styled-components';
 
+import { tokens } from '@/cunningham';
+
 import { Box, BoxProps } from './Box';
 
+const { sizes } = tokens.themes.default.theme.font;
+type TextSizes = keyof typeof sizes;
+
 export interface TextProps extends BoxProps {
   as?: keyof Pick<
     ReactHTML,
     'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
   >;
   $weight?: CSSProperties['fontWeight'];
-  $size?: CSSProperties['fontSize'];
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  $size?: TextSizes | (string & {});
   $theme?:
     | 'primary'
     | 'secondary'
@@ -33,10 +39,12 @@ export interface TextProps extends BoxProps {
 
 export const TextStyled = styled(Box)<TextProps>`
   ${({ $weight }) => $weight && `font-weight: ${$weight};`}
-  ${({ $size }) => $size && `font-size: ${$size};`}
-  ${({ $color }) => $color && `color: ${$color};`}
+  ${({ $size }) =>
+    $size &&
+    `font-size: ${$size in sizes ? sizes[$size as TextSizes] : $size};`}
   ${({ $theme, $variation }) =>
     `color: var(--c--theme--colors--${$theme}-${$variation});`}
+  ${({ $color }) => $color && `color: ${$color};`}
 `;
 
 export const Text = ({
diff --git a/src/frontend/apps/desk/src/features/header/assets/icon-my-account.png b/src/frontend/apps/desk/src/features/header/assets/icon-my-account.png
new file mode 100644
index 0000000000000000000000000000000000000000..54bd64cc7e3f92769d86ec0fe7a06f0ac8980b59
GIT binary patch
literal 7957
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
LNkvXXu0mjfC_`2}

literal 0
HcmV?d00001

diff --git a/src/frontend/apps/desk/src/i18n/translations.json b/src/frontend/apps/desk/src/i18n/translations.json
index 1c5b827..932f8bb 100644
--- a/src/frontend/apps/desk/src/i18n/translations.json
+++ b/src/frontend/apps/desk/src/i18n/translations.json
@@ -2,6 +2,7 @@
   "en": { "translation": {} },
   "fr": {
     "translation": {
+      "Hello Desk !": "Bonjour Desk !",
       "Marianne Logo": "Logo Marianne",
       "Freedom Equality Fraternity Logo": "Logo Liberté Égalité Fraternité",
       "Desk Logo": "Logo Desk",
@@ -13,7 +14,15 @@
       "Cells icon": "Icône Cellules",
       "Language Icon": "Icône de langue",
       "Language": "Langue",
-      "Hello Desk !": "Bonjour Desk !",
+      "Search": "Rechercher",
+      "Favorite": "Favorite",
+      "Recent": "Récent",
+      "Contacts": "Contacts",
+      "Groups": "Groupes",
+      "Help": "Aide",
+      "Profile picture": "Photo de l'utilisateur",
+      "{{label}} button": "Bouton {{label}}",
+      "{{label}} icon": "Icône {{label}}",
       "Team name": "Nom de l’équipe",
       "Create Team": "Créer une équipe"
     }
diff --git a/src/frontend/apps/desk/src/types/components.ts b/src/frontend/apps/desk/src/types/components.ts
new file mode 100644
index 0000000..5885070
--- /dev/null
+++ b/src/frontend/apps/desk/src/types/components.ts
@@ -0,0 +1,5 @@
+export type SVGComponent = React.FunctionComponent<
+  React.SVGProps<SVGSVGElement> & {
+    title?: string;
+  }
+>;
diff --git a/src/frontend/apps/e2e/__tests__/app-desk/header.spec.ts b/src/frontend/apps/e2e/__tests__/app-desk/header.spec.ts
index 7484b28..244f3b5 100644
--- a/src/frontend/apps/e2e/__tests__/app-desk/header.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-desk/header.spec.ts
@@ -36,5 +36,12 @@ test.describe('Header', () => {
     await expect(header.getByAltText('Cells icon')).toBeVisible();
 
     await expect(header.getByAltText('Language Icon')).toBeVisible();
+
+    await expect(header.getByText('John Doe')).toBeVisible();
+    await expect(
+      header.getByRole('img', {
+        name: 'profile picture',
+      }),
+    ).toBeVisible();
   });
 });
diff --git a/src/frontend/apps/e2e/__tests__/app-desk/menu.spec.ts b/src/frontend/apps/e2e/__tests__/app-desk/menu.spec.ts
new file mode 100644
index 0000000..7a5d1db
--- /dev/null
+++ b/src/frontend/apps/e2e/__tests__/app-desk/menu.spec.ts
@@ -0,0 +1,26 @@
+import { expect, test } from "@playwright/test";
+
+import { keyCloakSignIn } from "./common";
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("/");
+  await keyCloakSignIn(page);
+});
+
+test.describe("Menu", () => {
+  test("checks all the elements are visible", async ({ page }) => {
+    const menu = page.locator("menu").first();
+
+    await expect(menu.getByLabel("Search button")).toBeVisible();
+    await expect(menu.getByLabel("Favoris button")).toBeVisible();
+    await expect(menu.getByLabel("Recent button")).toBeVisible();
+    await expect(menu.getByLabel("Contacts button")).toBeVisible();
+    await expect(menu.getByLabel("Groups button")).toBeVisible();
+
+    await menu.getByLabel("Search button").hover();
+    await expect(menu.getByLabel("tooltip")).toHaveText("Search");
+
+    await menu.getByLabel("Contacts button").hover();
+    await expect(menu.getByLabel("tooltip")).toHaveText("Contacts");
+  });
+});