✨(frontend) team description

src/frontend/apps/desk/cunningham.ts

@@ -3,6 +3,7 @@ const config = {
     default: {
       theme: {
         colors: {
+          'card-border': '#DDDDDD',
           'primary-bg': '#FAFAFA',
           'primary-100': '#EDF5FA',
           'primary-150': '#E5EEFA',
@@ -176,6 +177,7 @@ const config = {
     dsfr: {
       theme: {
         colors: {
+          'card-border': '#DDDDDD',
           'primary-text': '#000091',
           'primary-100': '#f5f5fe',
           'primary-200': '#ececfe',
@@ -196,6 +198,7 @@ const config = {
           'secondary-700': '#3b2424',
           'secondary-800': '#341f1f',
           'secondary-900': '#2b1919',
+          'greyscale-text': '#303C4B',
           'greyscale-000': '#cecece',
           'greyscale-100': '#f6f6f6',
           'greyscale-200': '#eeeeee',

src/frontend/apps/desk/src/components/Card.tsx

@@ -17,7 +17,7 @@ export const Card = ({
       $radius="4px"
       $css={`
         box-shadow: 2px 2px 5px ${colorsTokens()['primary-300']}88;
-        border: 1px solid #e3e3e3;
+        border: 1px solid ${colorsTokens()['card-border']};
         ${$css}
       `}
       {...props}

src/frontend/apps/desk/src/components/Text.tsx

@@ -55,7 +55,7 @@ export const Text = ({
   return (
     <TextStyled
       as="span"
-      $theme="primary"
+      $theme="greyscale"
       $variation="text"
       {...props}
     ></TextStyled>

src/frontend/apps/desk/src/cunningham/cunningham-tokens.css

@@ -69,6 +69,7 @@
   --c--theme--colors--success-text: var(--c--theme--colors--greyscale-000);
   --c--theme--colors--warning-text: var(--c--theme--colors--greyscale-000);
   --c--theme--colors--danger-text: var(--c--theme--colors--greyscale-000);
+  --c--theme--colors--card-border: #ddd;
   --c--theme--colors--primary-bg: #fafafa;
   --c--theme--colors--primary-150: #e5eefa;
   --c--theme--colors--info-150: #e5eefa;
@@ -314,6 +315,7 @@
 }
 
 .cunningham-theme--dsfr {
+  --c--theme--colors--card-border: #ddd;
   --c--theme--colors--primary-text: #000091;
   --c--theme--colors--primary-100: #f5f5fe;
   --c--theme--colors--primary-200: #ececfe;
@@ -334,6 +336,7 @@
   --c--theme--colors--secondary-700: #3b2424;
   --c--theme--colors--secondary-800: #341f1f;
   --c--theme--colors--secondary-900: #2b1919;
+  --c--theme--colors--greyscale-text: #303c4b;
   --c--theme--colors--greyscale-000: #cecece;
   --c--theme--colors--greyscale-100: #f6f6f6;
   --c--theme--colors--greyscale-200: #eee;
@@ -712,6 +715,10 @@
   color: var(--c--theme--colors--danger-text);
 }
 
+.clr-card-border {
+  color: var(--c--theme--colors--card-border);
+}
+
 .clr-primary-bg {
   color: var(--c--theme--colors--primary-bg);
 }
@@ -1004,6 +1011,10 @@
   background-color: var(--c--theme--colors--danger-text);
 }
 
+.bg-card-border {
+  background-color: var(--c--theme--colors--card-border);
+}
+
 .bg-primary-bg {
   background-color: var(--c--theme--colors--primary-bg);
 }

src/frontend/apps/desk/src/cunningham/cunningham-tokens.ts

@@ -73,6 +73,7 @@ export const tokens = {
           'success-text': '#FFFFFF',
           'warning-text': '#FFFFFF',
           'danger-text': '#FFFFFF',
+          'card-border': '#DDDDDD',
           'primary-bg': '#FAFAFA',
           'primary-150': '#E5EEFA',
           'info-150': '#E5EEFA',
@@ -322,6 +323,7 @@ export const tokens = {
     dsfr: {
       theme: {
         colors: {
+          'card-border': '#DDDDDD',
           'primary-text': '#000091',
           'primary-100': '#f5f5fe',
           'primary-200': '#ececfe',
@@ -342,6 +344,7 @@ export const tokens = {
           'secondary-700': '#3b2424',
           'secondary-800': '#341f1f',
           'secondary-900': '#2b1919',
+          'greyscale-text': '#303C4B',
           'greyscale-000': '#cecece',
           'greyscale-100': '#f6f6f6',
           'greyscale-200': '#eeeeee',

src/frontend/apps/desk/src/features/header/Header.tsx

@@ -57,7 +57,7 @@ export const Header = () => {
             />
             <Box $align="center" $gap="1rem" $direction="row">
               <Image priority src={IconDesk} alt={t('Desk Logo')} />
-              <Text className="m-0" as="h2">
+              <Text className="m-0" as="h2" $theme="primary">
                 {t('Desk')}
               </Text>
             </Box>
@@ -79,7 +79,9 @@ export const Header = () => {
           </Box>
           <Box $direction="row">
             <Box $direction="row" $align="center" $gap="1rem">
-              <Text $weight="bold">John Doe</Text>
+              <Text $weight="bold" $theme="primary">
+                John Doe
+              </Text>
               <Image
                 width={58}
                 height={58}

src/frontend/apps/desk/src/features/language/LanguagePicker.tsx

@@ -49,7 +49,7 @@ export const LanguagePicker = () => {
           $align="center"
         >
           <Image priority src={IconLanguage} alt={t('Language Icon')} />
-          <Text>{lang.toUpperCase()}</Text>
+          <Text $theme="primary">{lang.toUpperCase()}</Text>
         </Box>
       ),
     }));

src/frontend/apps/desk/src/features/teams/api/index.ts

@@ -1 +1,2 @@
 export * from './useCreateTeam';
+export * from './useTeam';

src/frontend/apps/desk/src/features/teams/components/TeamInfo.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import IconGroup from '@/assets/icons/icon-group2.svg';
+import { Box, Card, Text } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+
+import { TeamResponse } from '../api/types';
+
+interface TeamInfoProps {
+  team: TeamResponse;
+}
+
+export const TeamInfo = ({ team }: TeamInfoProps) => {
+  const { t } = useTranslation();
+  const { colorsTokens } = useCunninghamTheme();
+
+  return (
+    <Card className="m-b" style={{ paddingBottom: 0 }}>
+      <Box className="m-b" $direction="row" $align="center" $gap="1.5rem">
+        <IconGroup
+          width={44}
+          color={colorsTokens()['primary-text']}
+          aria-label={t('icon group')}
+          style={{
+            flexShrink: 0,
+            alignSelf: 'start',
+          }}
+        />
+        <Box>
+          <Text as="h3" $weight="bold" $size="1.25rem" className="mt-0">
+            {t('Members of “{{teamName}}“', {
+              teamName: team.name,
+            })}
+          </Text>
+          <Text $size="m">
+            {t('Add people to the “{{teamName}}“ group.', {
+              teamName: team.name,
+            })}
+          </Text>
+        </Box>
+      </Box>
+      <Box
+        className="p-s"
+        $gap="1rem"
+        $direction="row"
+        $justify="space-evenly"
+        $css={`border-top: 1px solid ${colorsTokens()['card-border']};`}
+      >
+        <Text $size="s">
+          {t('{{count}} member', { count: team.accesses.length })}
+        </Text>
+        <Text $size="s" $direction="row">
+          {t('Created at')}&nbsp;
+          <Text $weight="bold">06/02/2024</Text>
+        </Text>
+        <Text $size="s" $direction="row">
+          {t('Last update at')}&nbsp;
+          <Text $weight="bold">07/02/2024</Text>
+        </Text>
+      </Box>
+    </Card>
+  );
+};

src/frontend/apps/desk/src/features/teams/components/index.ts

@@ -1 +1,2 @@
 export * from './Panel';
+export * from './TeamInfo';

src/frontend/apps/desk/src/i18n/translations.json

@@ -1,7 +1,7 @@
 {
   "fr": {
     "translation": {
-      "Create a team": "Créer un groupe",
+      "Create a team.": "Créer un groupe",
       "Marianne Logo": "Logo Marianne",
       "Freedom Equality Fraternity Logo": "Logo Liberté Égalité Fraternité",
       "Desk Logo": "Logo Desk",
@@ -26,13 +26,18 @@
       "Teams icon": "Icône de groupe",
       "Empty teams icon": "Icône de groupe vide",
       "Something bad happens, please refresh the page": "Une erreur inattendue s'est produite, rechargez la page.",
-      "0 group to display": "0 groupe à afficher.",
-      "Create your first team by clicking on the \"Create a new team\" button": "Créez votre premier groupe en cliquant sur le bouton \"Créer un nouveau groupe\".",
+      "0 group to display.": "0 groupe à afficher.",
       "Create new team card": "Carte créer une nouvelle équipe",
       "Something bad happens, please retry.": "Une erreur inattendue s'est produite, rechargez la page.",
-      "0 group to display.": "0 groupe à afficher.",
       "Create your first team by clicking on the \"Create a new team\" button.": "Créez votre premier groupe en cliquant sur le bouton \"Créer un nouveau groupe\".",
       "Something bad happens, please refresh the page.": "Une erreur inattendue s'est produite, rechargez la page.",
+      "Members of “{{teamName}}“": "Membres de “{{teamName}}“",
+      "Add people to the “{{teamName}}“ group.": "Ajouter des personnes au groupe “{{teamName}}“.",
+      "{{count}} member_one": "{{count}} membre",
+      "{{count}} member_many": "{{count}} membres",
+      "{{count}} member_other": "{{count}} membres",
+      "Created at": "Créé le",
+      "Last update at": "Dernière modification le",
       "People": "People",
       "People Description": "Description de People",
       "Something bad happens, please retry": "Une erreur inattendue s'est produite, rechargez la page.",

src/frontend/apps/desk/src/pages/teams/[id].tsx

@@ -4,7 +4,7 @@ import { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Box, Text } from '@/components';
-import { useTeam } from '@/features/teams/api/useTeam';
+import { TeamInfo, useTeam } from '@/features/teams/';
 import { NextPageWithLayout } from '@/types/next';
 
 import TeamLayout from './TeamLayout';
@@ -43,19 +43,15 @@ const Team = ({ id }: TeamProps) => {
     );
   }
 
-  if (isLoading) {
+  if (isLoading || !team) {
     return (
       <Box $align="center" $justify="center" $height="100%">
         <Loader />
       </Box>
     );
   }
 
-  return (
-    <Text as="h3" $textAlign="center">
-      Teams: {team?.name}
-    </Text>
-  );
+  return <TeamInfo team={team} />;
 };
 
 Page.getLayout = function getLayout(page: ReactElement) {

src/frontend/apps/e2e/__tests__/app-desk/team.spec.ts

@@ -0,0 +1,39 @@
+import { expect, test } from '@playwright/test';
+
+import { keyCloakSignIn } from './common';
+
+test.beforeEach(async ({ page, browserName }) => {
+  await page.goto('/');
+  await keyCloakSignIn(page, browserName);
+});
+
+test.describe('Team', () => {
+  test('checks all the top box elements are visible', async ({
+    page,
+    browserName,
+  }) => {
+    const panel = page.getByLabel('Teams panel').first();
+
+    await panel.getByRole('button', { name: 'Add a team' }).click();
+
+    const teamName = `My new team ${browserName}-${Math.floor(Math.random() * 1000)}`;
+    await page.getByText('Team name').fill(teamName);
+    await page.getByRole('button', { name: 'Create the team' }).click();
+
+    await expect(page.getByLabel('icon group')).toBeVisible();
+    await expect(
+      page.getByRole('heading', {
+        name: `Members of “${teamName}“`,
+        level: 3,
+      }),
+    ).toBeVisible();
+    await expect(
+      page.getByText(`Add people to the “${teamName}“ group.`),
+    ).toBeVisible();
+
+    await expect(page.getByText(`1 member`)).toBeVisible();
+
+    await expect(page.getByText(`Created at 06/02/2024`)).toBeVisible();
+    await expect(page.getByText(`Last update at 07/02/2024`)).toBeVisible();
+  });
+});

src/frontend/apps/e2e/__tests__/app-desk/teams-create.spec.ts

@@ -7,7 +7,7 @@ test.beforeEach(async ({ page, browserName }) => {
   await keyCloakSignIn(page, browserName);
 });
 
-test.describe('Teams', () => {
+test.describe('Teams Create', () => {
   test('checks all the create team elements are visible', async ({ page }) => {
     const buttonCreateHomepage = page.getByRole('button', {
       name: 'Create a new team',
@@ -71,7 +71,7 @@ test.describe('Teams', () => {
     await page.getByText('Team name').fill(teamName);
     await page.getByRole('button', { name: 'Create the team' }).click();
 
-    const elTeam = page.getByText(`Teams: ${teamName}`);
+    const elTeam = page.getByText(`Members of “${teamName}“`);
     await expect(elTeam).toBeVisible();
 
     await panel.getByRole('button', { name: 'Add a team' }).click();

src/frontend/packages/i18n/__tests__/translations.test.ts

@@ -29,7 +29,7 @@ describe('checks all the frontend translation are made', () => {
 
         if (missingKeys.length > 0) {
           console.log(
-            `Missing keys in Desk translations that should be translated in Crowdin, got to https://crowdin.com/:`,
+            `Missing keys in Desk translations that should be translated in Crowdin, got to https://crowdin.com/ :`,
             missingKeys,
           );
         }

src/frontend/packages/i18n/i18next-parser.config.jest.mjs

@@ -4,6 +4,7 @@ const config = {
     description: '${description}',
   },
   keepRemoved: false,
+  keySeparator: false,
 };
 
 export default config;

src/frontend/packages/i18n/i18next-parser.config.mjs

@@ -4,6 +4,7 @@ const config = {
     description: '${description}',
   },
   keepRemoved: true,
+  keySeparator: false,
 };
 
 export default config;