💄(app-desk) integrate the create team design

- Integrate the create team design based from the mockup - Manage the different states of the create team
numerique-gouv · Feb 13, 2024 · 8c34edf · 8c34edf
1 parent 9b47515
commit 8c34edf
Show file tree

Hide file tree

Showing 20 changed files with 344 additions and 121 deletions.
diff --git a/src/frontend/apps/desk/cunningham.ts b/src/frontend/apps/desk/cunningham.ts
@@ -258,7 +258,7 @@ const config = {
           'border-radius': '0',
         },
         button: {
-          'border-radius': '2px',
+          'border-radius': '4px',
           primary: {
             background: {
               color: 'var(--c--theme--colors--primary-text)',
@@ -269,29 +269,47 @@ const config = {
             'color-hover': '#ffffff',
             'color-active': '#ffffff',
           },
+          secondary: {
+            background: {
+              'color-hover': 'var(--c--theme--colors--primary-100)',
+              'color-active': 'var(--c--theme--colors--primary-200)',
+            },
+            border: {
+              'color-hover': 'var(--c--theme--colors--primary-300)',
+            },
+            color: 'var(--c--theme--colors--primary-text)',
+          },
         },
         'forms-checkbox': {
           'border-radius': '0',
         },
-        'forms-switch': {
-          'handle-border-radius': '2px',
-          'rail-border-radius': '4px',
+        'forms-datepicker': {
+          'border-radius': '0',
         },
-        'forms-input': {
+        'forms-fileuploader': {
           'border-radius': '0',
         },
+        'forms-input': {
+          'border-radius': '4px',
+          'background-color': '#ffffff',
+          'border-color': 'var(--c--theme--colors--primary-text)',
+          'box-shadow-color': 'var(--c--theme--colors--primary-text)',
+        },
+        'forms-labelledbox': {
+          'label-color': {
+            big: 'var(--c--theme--colors--primary-text)',
+          },
+        },
         'forms-select': {
           'border-radius': '0',
         },
-        'forms-datepicker': {
-          'border-radius': '0',
+        'forms-switch': {
+          'handle-border-radius': '2px',
+          'rail-border-radius': '4px',
         },
         'forms-textarea': {
           'border-radius': '0',
         },
-        'forms-fileuploader': {
-          'border-radius': '0',
-        },
       },
     },
   },

diff --git a/src/frontend/apps/desk/src/__tests__/pages.test.tsx b/src/frontend/apps/desk/src/__tests__/pages.test.tsx
@@ -9,8 +9,6 @@ describe('Page', () => {
   it('checks Page rendering', () => {
     render(<Page />, { wrapper: AppWrapper });
 
-    expect(screen.getByRole('status')).toBeInTheDocument();
-
     expect(
       screen.getByRole('button', {
         name: /Create a new team/i,

diff --git a/src/frontend/apps/desk/src/assets/icons/icon-group2.svg b/src/frontend/apps/desk/src/assets/icons/icon-group2.svg
diff --git a/src/frontend/apps/desk/src/components/Box.tsx b/src/frontend/apps/desk/src/components/Box.tsx
@@ -17,6 +17,8 @@ export interface BoxProps {
   $position?: CSSProperties['position'];
   $radius?: CSSProperties['borderRadius'];
   $width?: CSSProperties['width'];
+  $maxWidth?: CSSProperties['maxWidth'];
+  $minWidth?: CSSProperties['minWidth'];
 }
 
 export type BoxType = ComponentPropsWithRef<typeof Box>;
@@ -36,5 +38,7 @@ export const Box = styled('div')<BoxProps>`
   ${({ $position }) => $position && `position: ${$position};`}
   ${({ $radius }) => $radius && `border-radius: ${$radius};`}
   ${({ $width }) => $width && `width: ${$width};`}
+  ${({ $maxWidth }) => $maxWidth && `max-width: ${$maxWidth};`}
+  ${({ $minWidth }) => $minWidth && `min-width: ${$minWidth};`}
   ${({ $css }) => $css && `${$css};`}
 `;
diff --git a/src/frontend/apps/desk/src/components/WhiteBox.tsx b/src/frontend/apps/desk/src/components/WhiteBox.tsx
@@ -0,0 +1,27 @@
+import { PropsWithChildren } from 'react';
+
+import { useCunninghamTheme } from '@/cunningham';
+
+import { Box, BoxType } from '.';
+
+export const WhiteBox = ({
+  children,
+  $css,
+  ...props
+}: PropsWithChildren<BoxType>) => {
+  const { colorsTokens } = useCunninghamTheme();
+
+  return (
+    <Box
+      $background="white"
+      $css={`
+        box-shadow: 2px 2px 5px ${colorsTokens()['primary-300']}88;
+        border: 1px solid #e3e3e3;
+        ${$css}
+      `}
+      {...props}
+    >
+      {children}
+    </Box>
+  );
+};
diff --git a/src/frontend/apps/desk/src/components/index.ts b/src/frontend/apps/desk/src/components/index.ts
@@ -1,3 +1,4 @@
 export * from './Box';
 export * from './Text';
 export * from './Link';
+export * from './WhiteBox';
diff --git a/src/frontend/apps/desk/src/cunningham/cunningham-custom-tokens.css b/src/frontend/apps/desk/src/cunningham/cunningham-custom-tokens.css
@@ -25,7 +25,4 @@
   --c--components--forms-select--value-color--disabled: var(
     --c--theme--colors--greyscale-400
   );
-  --c--components--forms-labelledbox--label-color--big: var(
-    --c--theme--colors--primary-500
-  );
 }
diff --git a/src/frontend/apps/desk/src/cunningham/cunningham-style.css b/src/frontend/apps/desk/src/cunningham/cunningham-style.css
@@ -17,7 +17,7 @@
 }
 
 .labelled-box label {
-  color: var(--c--theme--colors--primary-500);
+  color: var(--c--theme--colors--primary-text);
 }
 
 .labelled-box--disabled label {
@@ -53,7 +53,7 @@
 
 .c__input__wrapper:hover,
 .c__textarea__wrapper:hover {
-  box-shadow: var(--c--theme--colors--primary-500) 0 0 0 2px;
+  box-shadow: var(--c--components--forms-input--box-shadow-color) 0 0 0 2px;
 }
 
 .c__textarea__wrapper--disabled:hover,
@@ -325,6 +325,7 @@ input:-webkit-autofill:focus {
     --c--components--button--secondary--background--color-hover
   );
   color: var(--c--components--button--secondary--color-hover);
+  border: 1px solid var(--c--components--button--secondary--border--color-hover);
 }
 
 .c__button--tertiary {

diff --git a/src/frontend/apps/desk/src/cunningham/cunningham-tokens.css b/src/frontend/apps/desk/src/cunningham/cunningham-tokens.css
@@ -386,7 +386,7 @@
   --c--theme--font--families--accent: marianne;
   --c--theme--font--families--base: marianne;
   --c--components--alert--border-radius: 0;
-  --c--components--button--border-radius: 2px;
+  --c--components--button--border-radius: 4px;
   --c--components--button--primary--background--color: var(
     --c--theme--colors--primary-text
   );
@@ -399,14 +399,36 @@
   --c--components--button--primary--color: #fff;
   --c--components--button--primary--color-hover: #fff;
   --c--components--button--primary--color-active: #fff;
+  --c--components--button--secondary--background--color-hover: var(
+    --c--theme--colors--primary-100
+  );
+  --c--components--button--secondary--background--color-active: var(
+    --c--theme--colors--primary-200
+  );
+  --c--components--button--secondary--border--color-hover: var(
+    --c--theme--colors--primary-300
+  );
+  --c--components--button--secondary--color: var(
+    --c--theme--colors--primary-text
+  );
   --c--components--forms-checkbox--border-radius: 0;
+  --c--components--forms-datepicker--border-radius: 0;
+  --c--components--forms-fileuploader--border-radius: 0;
+  --c--components--forms-input--border-radius: 4px;
+  --c--components--forms-input--background-color: #fff;
+  --c--components--forms-input--border-color: var(
+    --c--theme--colors--primary-text
+  );
+  --c--components--forms-input--box-shadow-color: var(
+    --c--theme--colors--primary-text
+  );
+  --c--components--forms-labelledbox--label-color--big: var(
+    --c--theme--colors--primary-text
+  );
+  --c--components--forms-select--border-radius: 0;
   --c--components--forms-switch--handle-border-radius: 2px;
   --c--components--forms-switch--rail-border-radius: 4px;
-  --c--components--forms-input--border-radius: 0;
-  --c--components--forms-select--border-radius: 0;
-  --c--components--forms-datepicker--border-radius: 0;
   --c--components--forms-textarea--border-radius: 0;
-  --c--components--forms-fileuploader--border-radius: 0;
 }
 
 .clr-secondary-text {

diff --git a/src/frontend/apps/desk/src/cunningham/cunningham-tokens.ts b/src/frontend/apps/desk/src/cunningham/cunningham-tokens.ts
@@ -397,7 +397,7 @@ export const tokens = {
       components: {
         alert: { 'border-radius': '0' },
         button: {
-          'border-radius': '2px',
+          'border-radius': '4px',
           primary: {
             background: {
               color: 'var(--c--theme--colors--primary-text)',
@@ -408,17 +408,33 @@ export const tokens = {
             'color-hover': '#ffffff',
             'color-active': '#ffffff',
           },
+          secondary: {
+            background: {
+              'color-hover': 'var(--c--theme--colors--primary-100)',
+              'color-active': 'var(--c--theme--colors--primary-200)',
+            },
+            border: { 'color-hover': 'var(--c--theme--colors--primary-300)' },
+            color: 'var(--c--theme--colors--primary-text)',
+          },
         },
         'forms-checkbox': { 'border-radius': '0' },
+        'forms-datepicker': { 'border-radius': '0' },
+        'forms-fileuploader': { 'border-radius': '0' },
+        'forms-input': {
+          'border-radius': '4px',
+          'background-color': '#ffffff',
+          'border-color': 'var(--c--theme--colors--primary-text)',
+          'box-shadow-color': 'var(--c--theme--colors--primary-text)',
+        },
+        'forms-labelledbox': {
+          'label-color': { big: 'var(--c--theme--colors--primary-text)' },
+        },
+        'forms-select': { 'border-radius': '0' },
         'forms-switch': {
           'handle-border-radius': '2px',
           'rail-border-radius': '4px',
         },
-        'forms-input': { 'border-radius': '0' },
-        'forms-select': { 'border-radius': '0' },
-        'forms-datepicker': { 'border-radius': '0' },
         'forms-textarea': { 'border-radius': '0' },
-        'forms-fileuploader': { 'border-radius': '0' },
       },
     },
   },

diff --git a/src/frontend/apps/desk/src/features/teams/__tests__/PanelTeams.test.tsx b/src/frontend/apps/desk/src/features/teams/__tests__/PanelTeams.test.tsx
@@ -30,14 +30,19 @@ describe('PanelTeams', () => {
     ).toBeInTheDocument();
   });
 
-  it('renders with empty team to display', async () => {
+  it('renders a team empty', async () => {
     fetchMock.mock(`/api/teams/?page=1&ordering=-created_at`, {
       count: 1,
       results: [
         {
           id: '1',
           name: 'Team 1',
-          accesses: [],
+          accesses: [
+            {
+              id: '1',
+              role: 'admin',
+            },
+          ],
         },
       ],
     });
@@ -51,7 +56,7 @@ describe('PanelTeams', () => {
     ).toBeInTheDocument();
   });
 
-  it('renders with not team to display', async () => {
+  it('renders a team not empty', async () => {
     fetchMock.mock(`/api/teams/?page=1&ordering=-created_at`, {
       count: 1,
       results: [
@@ -63,6 +68,10 @@ describe('PanelTeams', () => {
               id: '1',
               role: 'admin',
             },
+            {
+              id: '2',
+              role: 'member',
+            },
           ],
         },
       ],

diff --git a/src/frontend/apps/desk/src/features/teams/components/Panel.tsx b/src/frontend/apps/desk/src/features/teams/components/Panel.tsx
@@ -13,7 +13,9 @@ export const Panel = () => {
 
   return (
     <Box
-      $width="28rem"
+      $width="100%"
+      $maxWidth="20rem"
+      $minWidth="14rem"
       $css={`
         border-right: 1px solid ${colorsTokens()['primary-300']};
       `}

diff --git a/src/frontend/apps/desk/src/features/teams/components/PanelTeam.tsx b/src/frontend/apps/desk/src/features/teams/components/PanelTeam.tsx
@@ -18,26 +18,28 @@ export const PanelTeam = ({ team }: TeamProps) => {
 
   return (
     <Box as="li" $direction="row" $align="center" $gap="0.5rem">
-      {team.accesses.length ? (
+      {team.accesses.length > 1 ? (
         <IconGroup
           className="p-t"
-          width={36}
+          width={52}
           aria-label={t(`Teams icon`)}
           color={colorsTokens()['primary-500']}
           style={{
             borderRadius: '10px',
             border: `1px solid ${colorsTokens()['primary-300']}`,
+            flexShrink: 0,
           }}
         />
       ) : (
         <IconNone
           className="p-t"
-          width={36}
+          width={52}
           aria-label={t(`Empty teams icon`)}
           color={colorsTokens()['greyscale-500']}
           style={{
             borderRadius: '10px',
             border: `1px solid ${colorsTokens()['greyscale-300']}`,
+            flexShrink: 0,
           }}
         />
       )}

diff --git a/src/frontend/apps/desk/src/i18n/translations.json b/src/frontend/apps/desk/src/i18n/translations.json
@@ -31,7 +31,15 @@
       "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.",
       "People": "People",
-      "People Description": "Description de People"
+      "People Description": "Description de People",
+      "Something bad happens, please retry": "Une erreur inattendue s'est produite, rechargez la page.",
+      "Panel create new team": "Panneau de création d'un nouveau groupe",
+      "icon group": "icône groupe",
+      "Name the team": "Nommer le groupe",
+      "Team name": "Nom du groupe",
+      "Cancel": "Annuler",
+      "Create the team": "Créer le groupe",
+      "Create a new team": "Créer un nouveau groupe"
     }
   }
 }
diff --git a/src/frontend/apps/desk/src/pages/globals.css b/src/frontend/apps/desk/src/pages/globals.css
@@ -5,6 +5,10 @@ body {
   padding: 0;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 ::-webkit-scrollbar {
   width: 20px;
 }