diff --git a/src/frontend/apps/desk/cunningham.ts b/src/frontend/apps/desk/cunningham.ts index aab556c9e..ffff175c0 100644 --- a/src/frontend/apps/desk/cunningham.ts +++ b/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', diff --git a/src/frontend/apps/desk/src/components/Card.tsx b/src/frontend/apps/desk/src/components/Card.tsx index 6450603b7..e59ed745f 100644 --- a/src/frontend/apps/desk/src/components/Card.tsx +++ b/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} diff --git a/src/frontend/apps/desk/src/components/Text.tsx b/src/frontend/apps/desk/src/components/Text.tsx index 45008920f..b2a335a6d 100644 --- a/src/frontend/apps/desk/src/components/Text.tsx +++ b/src/frontend/apps/desk/src/components/Text.tsx @@ -55,7 +55,7 @@ export const Text = ({ return ( diff --git a/src/frontend/apps/desk/src/cunningham/cunningham-tokens.css b/src/frontend/apps/desk/src/cunningham/cunningham-tokens.css index 2377c787f..2fd8f3d6c 100644 --- a/src/frontend/apps/desk/src/cunningham/cunningham-tokens.css +++ b/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); } diff --git a/src/frontend/apps/desk/src/cunningham/cunningham-tokens.ts b/src/frontend/apps/desk/src/cunningham/cunningham-tokens.ts index 3e9ee6de9..3c8e64f4c 100644 --- a/src/frontend/apps/desk/src/cunningham/cunningham-tokens.ts +++ b/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', diff --git a/src/frontend/apps/desk/src/features/header/Header.tsx b/src/frontend/apps/desk/src/features/header/Header.tsx index 964d09bc3..45ad79108 100644 --- a/src/frontend/apps/desk/src/features/header/Header.tsx +++ b/src/frontend/apps/desk/src/features/header/Header.tsx @@ -57,7 +57,7 @@ export const Header = () => { /> {t('Desk - + {t('Desk')} @@ -79,7 +79,9 @@ export const Header = () => { - John Doe + + John Doe + { $align="center" > {t('Language - {lang.toUpperCase()} + {lang.toUpperCase()} ), })); diff --git a/src/frontend/apps/desk/src/features/teams/api/index.ts b/src/frontend/apps/desk/src/features/teams/api/index.ts index d028b136c..bc49929c0 100644 --- a/src/frontend/apps/desk/src/features/teams/api/index.ts +++ b/src/frontend/apps/desk/src/features/teams/api/index.ts @@ -1 +1,2 @@ export * from './useCreateTeam'; +export * from './useTeam'; diff --git a/src/frontend/apps/desk/src/features/teams/components/TeamInfo.tsx b/src/frontend/apps/desk/src/features/teams/components/TeamInfo.tsx new file mode 100644 index 000000000..20d49af45 --- /dev/null +++ b/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 ( + + + + + + {t('Members of “{{teamName}}“', { + teamName: team.name, + })} + + + {t('Add people to the “{{teamName}}“ group.', { + teamName: team.name, + })} + + + + + + {t('{{count}} member', { count: team.accesses.length })} + + + {t('Created at')}  + 06/02/2024 + + + {t('Last update at')}  + 07/02/2024 + + + + ); +}; diff --git a/src/frontend/apps/desk/src/features/teams/components/index.ts b/src/frontend/apps/desk/src/features/teams/components/index.ts index 8960d84f6..cb7aa8211 100644 --- a/src/frontend/apps/desk/src/features/teams/components/index.ts +++ b/src/frontend/apps/desk/src/features/teams/components/index.ts @@ -1 +1,2 @@ export * from './Panel'; +export * from './TeamInfo'; diff --git a/src/frontend/apps/desk/src/i18n/translations.json b/src/frontend/apps/desk/src/i18n/translations.json index 3b1968a97..9381c9833 100644 --- a/src/frontend/apps/desk/src/i18n/translations.json +++ b/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.", diff --git a/src/frontend/apps/desk/src/pages/teams/[id].tsx b/src/frontend/apps/desk/src/pages/teams/[id].tsx index 8347ac2bb..016858621 100644 --- a/src/frontend/apps/desk/src/pages/teams/[id].tsx +++ b/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,7 +43,7 @@ const Team = ({ id }: TeamProps) => { ); } - if (isLoading) { + if (isLoading || !team) { return ( @@ -51,11 +51,7 @@ const Team = ({ id }: TeamProps) => { ); } - return ( - - Teams: {team?.name} - - ); + return ; }; Page.getLayout = function getLayout(page: ReactElement) { diff --git a/src/frontend/apps/e2e/__tests__/app-desk/team.spec.ts b/src/frontend/apps/e2e/__tests__/app-desk/team.spec.ts new file mode 100644 index 000000000..6d0c6ac8d --- /dev/null +++ b/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(); + }); +}); diff --git a/src/frontend/apps/e2e/__tests__/app-desk/teams-create.spec.ts b/src/frontend/apps/e2e/__tests__/app-desk/teams-create.spec.ts index 934a053fa..a2d90e1f5 100644 --- a/src/frontend/apps/e2e/__tests__/app-desk/teams-create.spec.ts +++ b/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(); diff --git a/src/frontend/packages/i18n/__tests__/translations.test.ts b/src/frontend/packages/i18n/__tests__/translations.test.ts index 856ba3795..af37582d5 100644 --- a/src/frontend/packages/i18n/__tests__/translations.test.ts +++ b/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, ); } diff --git a/src/frontend/packages/i18n/i18next-parser.config.jest.mjs b/src/frontend/packages/i18n/i18next-parser.config.jest.mjs index d212c1f49..ad2126c74 100644 --- a/src/frontend/packages/i18n/i18next-parser.config.jest.mjs +++ b/src/frontend/packages/i18n/i18next-parser.config.jest.mjs @@ -4,6 +4,7 @@ const config = { description: '${description}', }, keepRemoved: false, + keySeparator: false, }; export default config; diff --git a/src/frontend/packages/i18n/i18next-parser.config.mjs b/src/frontend/packages/i18n/i18next-parser.config.mjs index cc51b2572..8322d3ab3 100644 --- a/src/frontend/packages/i18n/i18next-parser.config.mjs +++ b/src/frontend/packages/i18n/i18next-parser.config.mjs @@ -4,6 +4,7 @@ const config = { description: '${description}', }, keepRemoved: true, + keySeparator: false, }; export default config;