(PC-33528)[PRO] feat: design corrections

pass-culture · Jan 8, 2025 · 4fb1d8f · 4fb1d8f
1 parent 90334f3
commit 4fb1d8f
Show file tree

Hide file tree

Showing 6 changed files with 174 additions and 55 deletions.
diff --git a/pro/src/ui-kit/MultiSelect/MultiSelect.module.scss b/pro/src/ui-kit/MultiSelect/MultiSelect.module.scss
@@ -8,28 +8,27 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  max-width: 400px;
+  max-width: rem.torem(542px);
   position: relative;
 }
 
 .legend {
-  // @include fonts-design-system.body;
-  @include fonts.body;
+  @include fonts-design-system.body;
 
   color: var(--color-black);
-  margin-bottom: 8px;
+  margin-bottom: rem.torem(8px);
 }
 
 .trigger {
-  @include fonts.body;
+  @include fonts-design-system.body;
 
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 12px;
+  padding: rem.torem(12px);
   background-color: var(--color-white);
   border: 1px solid var(--color-grey-dark);
-  border-radius: 10px;
+  border-radius:rem.torem(10px);
   width: 100%;
   cursor: pointer;
 
@@ -44,7 +43,7 @@
   }
 
   &:focus {
-    border: 1px solid var(--color-black);
+    border: 2px solid var(--color-black);
   }
 
   &:focus-visible {
@@ -55,15 +54,15 @@
   }
 
   &-selected {
-    border: 2px solid var(--color-black);
+    border: 1px solid var(--color-black);
   }
 }
 
 .trigger-content {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 8px;
+  gap: rem.torem(8px);
   max-width: 500px;
 }
 
@@ -74,22 +73,21 @@
 }
 
 .badge {
-  // @include fonts-design-system.body-semi-bold-xs;
-  @include fonts.caption;
+  @include fonts-design-system.body-semi-bold-xs;
 
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 20px;
-  height: 20px;
-  background-color: var(--color-primary);
+  width: rem.torem(24px);
+  height: rem.torem(24px);
+  background-color: var(--color-secondary-light);
   color: var(--color-white);
   border-radius: 50%;
 }
 
 .chevron {
-  width: 16px;
-  height: 16px;
+  width: rem.torem(16px);
+  height: rem.torem(16px);
   color: var(--color-black);
 }
 
@@ -101,41 +99,57 @@
   display: block;
   width: 100%;
   text-align: left;
-  font-size: 14px;
+  font-size: rem.torem(14px);
   background: none;
   border: none;
   cursor: pointer;
-}
-
-.checkbox {
-  padding-top: rem.torem(16px);
+  
+  &:hover {
+    background: var(--color-grey-light);
+  }
 }
 
 .tags {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: rem.torem(8px);
 }
 
 .panel {
+  max-height: rem.torem(340px);
   position: absolute;
   background-color: var(--color-white);
   left: 0;
   right: 0;
-  top: rem.torem(48px);
+  top: rem.torem(60px);
   box-shadow: 0 rem.torem(3px) rem.torem(4px) var(--color-medium-shadow);
-  padding: rem.torem(24px);
+  padding: rem.torem(24px) 0 rem.torem(16px);
+  border-radius: rem.torem(8px);
+  overflow: auto;
+}
+
+.label {
+  @include fonts-design-system.body;
+
+  padding: rem.torem(11.2px) rem.torem(16px) rem.torem(11.2px) 0;
+}
+
+.checkbox {
+  margin-left: rem.torem(24px);
+}
+
+.search-input {
+  margin: 0 rem.torem(24px);
 }
 
 .search-example {
-  // @include fonts-design-system.body-semi-bold-xs;
-  @include fonts.caption;
+  @include fonts-design-system.body-semi-bold-xs;
 
   display: block;
   min-height: rem.torem(16px);
   color: var(--color-grey-dark);
-  padding-top: 8px;
-  padding-bottom: 24px;
+  padding-top: rem.torem(8px);
+  padding-bottom: rem.torem(24px); 
 }
 
 .visually-hidden {
@@ -145,5 +159,5 @@
 .separator {
   height: rem.torem(1px);
   background: var(--color-grey-medium);
-  margin-top: rem.torem(12px);
+  margin: 0 rem.torem(24px);
 }
diff --git a/pro/src/ui-kit/MultiSelect/MultiSelect.stories.tsx b/pro/src/ui-kit/MultiSelect/MultiSelect.stories.tsx
@@ -18,17 +18,109 @@ export default {
 }
 
 const defaultOptions = [
-  { id: '1', label: '78 - Yvelines' },
-  { id: '2', label: '75 - Paris' },
-  { id: '3', label: '44 - Nantes' },
-  { id: '4', label: '76 - Rouen' },
-  { id: '5', label: '77 - Seine et Marne' },
+  { id: '1', label: '01 - Ain' },
+  { id: '2', label: '02 - Aisne' },
+  { id: '3', label: '03 - Allier' },
+  { id: '4', label: '04 - Alpes-de-Haute-Provence' },
+  { id: '5', label: '05 - Hautes-Alpes' },
+  { id: '6', label: '06 - Alpes-Maritimes' },
+  { id: '7', label: '07 - Ardèche' },
+  { id: '8', label: '08 - Ardennes' },
+  { id: '9', label: '09 - Ariège' },
+  { id: '10', label: '10 - Aube' },
+  { id: '11', label: '11 - Aude' },
+  { id: '12', label: '12 - Aveyron' },
+  { id: '13', label: '13 - Bouches-du-Rhône' },
+  { id: '14', label: '14 - Calvados' },
+  { id: '15', label: '15 - Cantal' },
+  { id: '16', label: '16 - Charente' },
+  { id: '17', label: '17 - Charente-Maritime' },
+  { id: '18', label: '18 - Cher' },
+  { id: '19', label: '19 - Corrèze' },
+  { id: '20', label: '20 - Corse-du-Sud' },
+  { id: '21', label: "21 - Côte-d'Or" },
+  { id: '22', label: "22 - Côtes-d'Armor" },
+  { id: '23', label: '23 - Creuse' },
+  { id: '24', label: '24 - Dordogne' },
+  { id: '25', label: '25 - Doubs' },
+  { id: '26', label: '26 - Drôme' },
+  { id: '27', label: '27 - Eure' },
+  { id: '28', label: '28 - Eure-et-Loir' },
+  { id: '29', label: '29 - Finistère' },
+  { id: '30', label: '30 - Gard' },
+  { id: '31', label: '31 - Haute-Garonne' },
+  { id: '32', label: '32 - Gers' },
+  { id: '33', label: '33 - Gironde' },
+  { id: '34', label: '34 - Hérault' },
+  { id: '35', label: '35 - Ille-et-Vilaine' },
+  { id: '36', label: '36 - Indre' },
+  { id: '37', label: '37 - Indre-et-Loire' },
+  { id: '38', label: '38 - Isère' },
+  { id: '39', label: '39 - Jura' },
+  { id: '40', label: '40 - Landes' },
+  { id: '41', label: '41 - Loir-et-Cher' },
+  { id: '42', label: '42 - Loire' },
+  { id: '43', label: '43 - Haute-Loire' },
+  { id: '44', label: '44 - Loire-Atlantique' },
+  { id: '45', label: '45 - Loiret' },
+  { id: '46', label: '46 - Lot' },
+  { id: '47', label: '47 - Lot-et-Garonne' },
+  { id: '48', label: '48 - Lozère' },
+  { id: '49', label: '49 - Maine-et-Loire' },
+  { id: '50', label: '50 - Manche' },
+  { id: '51', label: '51 - Marne' },
+  { id: '52', label: '52 - Haute-Marne' },
+  { id: '53', label: '53 - Mayenne' },
+  { id: '54', label: '54 - Meurthe-et-Moselle' },
+  { id: '55', label: '55 - Meuse' },
+  { id: '56', label: '56 - Morbihan' },
+  { id: '57', label: '57 - Moselle' },
+  { id: '58', label: '58 - Nièvre' },
+  { id: '59', label: '59 - Nord' },
+  { id: '60', label: '60 - Oise' },
+  { id: '61', label: '61 - Orne' },
+  { id: '62', label: '62 - Pas-de-Calais' },
+  { id: '63', label: '63 - Puy-de-Dôme' },
+  { id: '64', label: '64 - Pyrénées-Atlantiques' },
+  { id: '65', label: '65 - Hautes-Pyrénées' },
+  { id: '66', label: '66 - Pyrénées-Orientales' },
+  { id: '67', label: '67 - Bas-Rhin' },
+  { id: '68', label: '68 - Haut-Rhin' },
+  { id: '69', label: '69 - Rhône' },
+  { id: '70', label: '70 - Haute-Saône' },
+  { id: '71', label: '71 - Saône-et-Loire' },
+  { id: '72', label: '72 - Sarthe' },
+  { id: '73', label: '73 - Savoie' },
+  { id: '74', label: '74 - Haute-Savoie' },
+  { id: '75', label: '75 - Paris' },
+  { id: '76', label: '76 - Seine-Maritime' },
+  { id: '77', label: '77 - Seine-et-Marne' },
+  { id: '78', label: '78 - Yvelines' },
+  { id: '79', label: '79 - Deux-Sèvres' },
+  { id: '80', label: '80 - Somme' },
+  { id: '81', label: '81 - Tarn' },
+  { id: '82', label: '82 - Tarn-et-Garonne' },
+  { id: '83', label: '83 - Var' },
+  { id: '84', label: '84 - Vaucluse' },
+  { id: '85', label: '85 - Vendée' },
+  { id: '86', label: '86 - Vienne' },
+  { id: '87', label: '87 - Haute-Vienne' },
+  { id: '88', label: '88 - Vosges' },
+  { id: '89', label: '89 - Yonne' },
+  { id: '90', label: '90 - Territoire de Belfort' },
+  { id: '91', label: '91 - Essonne' },
+  { id: '92', label: '92 - Hauts-de-Seine' },
+  { id: '93', label: '93 - Seine-Saint-Denis' },
+  { id: '94', label: '94 - Val-de-Marne' },
+  { id: '95', label: "95 - Val-d'Oise" },
+  { id: '2A', label: '2A - Corse-du-Sud' },
+  { id: '2B', label: '2B - Haute-Corse' },
 ]
 
 const defaultProps = {
   options: defaultOptions,
   legend: 'Département',
-  label: 'Selectionner un département',
+  label: 'Sélectionner un département',
 }
 
 export const Default: StoryObj<typeof MultiSelect> = {
@@ -54,17 +146,27 @@ export const WithSearchInput: StoryObj<typeof MultiSelect> = {
     searchExample: 'Ex : 44 - Nantes',
     searchLabel: 'Rechercher des départements',
     legend: 'Départements',
-    label: 'Selectionner des départements',
+    label: 'Sélectionner des départements',
   },
 }
 
 export const WithSelectAllOption: StoryObj<typeof MultiSelect> = {
   args: {
     ...defaultProps,
     hasSelectAllOptions: true,
+    legend: 'Départements',
+    label: 'Sélectionner des départements',
+  },
+}
+
+export const WithSearchInputAndSelectAllOption: StoryObj<typeof MultiSelect> = {
+  args: {
+    ...defaultProps,
+    hasSearch: true,
     searchExample: 'Ex : 44 - Nantes',
     searchLabel: 'Rechercher des départements',
+    hasSelectAllOptions: true,
     legend: 'Départements',
-    label: 'Selectionner des départements',
+    label: 'Sélectionner des départements',
   },
 }
diff --git a/pro/src/ui-kit/MultiSelect/MultiSelectPanel.tsx b/pro/src/ui-kit/MultiSelect/MultiSelectPanel.tsx
@@ -55,7 +55,7 @@ export const MultiSelectPanel = ({
   return (
     <div className={styles['panel']}>
       {hasSearch && (
-        <>
+        <div className={styles['search-input']}>
           <label className={styles['visually-hidden']} htmlFor="search-input">
             {searchLabel}
           </label>
@@ -67,16 +67,18 @@ export const MultiSelectPanel = ({
             onChange={(e) => setSearchValue(e.target.value)}
           />
           <span className={styles['search-example']}>{searchExample}</span>
-        </>
+        </div>
       )}
 
       {searchedValues.length > 0 ? (
         <ul className={styles['container']} aria-label="Liste des options">
           {hasSelectAllOptions && (
-            <li key={'all-options'} className={styles['item']}>
+            <li key={'all-options'} className={styles.item}>
               <BaseCheckbox
                 label={'Tout sélectionner'}
                 checked={isSelectAllChecked}
+                labelClassName={styles['label']}
+                inputClassName={styles['checkbox']}
                 onChange={() => onToggleAllOptions(isSelectAllChecked)}
               />
               <div className={styles['separator']} />
@@ -85,7 +87,8 @@ export const MultiSelectPanel = ({
           {searchedValues.map((option) => (
             <li key={option.id} className={styles.item}>
               <BaseCheckbox
-                className={styles['checkbox']}
+                labelClassName={styles['label']}
+                inputClassName={styles['checkbox']}
                 label={option.label}
                 checked={option.checked}
                 onChange={() => onToggleOption(option, option.checked)}

diff --git a/pro/src/ui-kit/MultiSelect/TODO.md b/pro/src/ui-kit/MultiSelect/TODO.md
@@ -1,16 +1,16 @@
 Fonctionnel
 
 - [] gérer la navigation clavier
+- [] Corriger le all selected
 - [] jsdoc
-- [] ne pas afficher plus de 3 lignes de tags
+- [] ne pas afficher plus de 3 lignes de tags (refacto des tags dans un autre ticket PC-33762)
+- [x] corriger la zone de clic sur BaseCheckbox (refacto des tags dans un autre ticket PC-33749)
 
 Design
 
-- [] corriger la zone de clic sur BaseCheckbox
-- [] Passer les selected tag en violet
+- [] Passer les selected tag en violet (refacto des tags dans un autre ticket PC-33762)
 - [] corriger le curseur de BaseCheckbox
-- [] ajuster la hauteur des checkbox
-- [] utiliser les fonts du design system
+- [] utiliser les fonts du design system (devrait être pris en compte avec les nouvelles maj prévues)
 - [] gérer le responsive
 
 Bonus

diff --git a/pro/src/ui-kit/form/SelectAutoComplete/OptionsList/OptionsList.module.scss b/pro/src/ui-kit/form/SelectAutoComplete/OptionsList/OptionsList.module.scss
@@ -25,6 +25,12 @@
     padding: rem.torem(11.2px) rem.torem(16px);
   }
 
+  .options-item-hover {
+    &:hover {
+      background: var(--color-grey-light);
+    }
+  }
+
   .label {
     padding: rem.torem(11.2px) rem.torem(16px) rem.torem(11.2px) 0;
   }
@@ -38,8 +44,4 @@
   .input {
     margin-left: rem.torem(16px);
   }
-
-  .option-hovered {
-    background: var(--color-grey-light);
-  }
 }