feat(champ): embarquer dans champ la gestion de l'etat readonly et di…

…sabled (#2625) * fix(champ): input doit prendre disabled et readonly WIP * style(couleur): integrer color-text-secondary et l’utiliser sur le champ readonly ou disabled * style: fixer le margin en tablette et mobile de la décharge - stage 3e 2de * fix(storybook): couleurs mdx * chore: retablir package-lock.json * style: renommage pour plus de précision
DNUM-SocialGouv · Feb 1, 2024 · fa352b0 · fa352b0
1 parent 9de5f7c
commit fa352b0
Show file tree

Hide file tree

Showing 11 changed files with 32 additions and 17 deletions.
diff --git a/...tures/OffreDeStage/Déposer/Étape2Stage/StageDeposerOffreFormulaireÉtape2Stage.module.scss b/...tures/OffreDeStage/Déposer/Étape2Stage/StageDeposerOffreFormulaireÉtape2Stage.module.scss
@@ -27,7 +27,7 @@
       align-items: center;
       display: flex;
       background-color: utilities.$color-background-secondary;
-      color: utilities.$color-text-secondary;
+      color: utilities.$color-text-primary-inverse;
       border-top-right-radius: 20px;
       border-bottom-right-radius: 20px;
     }

diff --git a/...features/Stages3eEt2de/Candidater/Formulaire/FormulaireCandidaterStage3eEt2de.module.scss b/...features/Stages3eEt2de/Candidater/Formulaire/FormulaireCandidaterStage3eEt2de.module.scss
@@ -62,10 +62,6 @@ $color-message-champs-obligatoires: utilities.$color-primary;
       gap: 1.5rem;
     }
 
-    & .elementDesactive {
-      color: utilities.$color-text-disabled;
-    }
-
     .boutonSoumission {
       grid-column: 1;
       margin-top: utilities.pixel-to-rem(4);
@@ -83,9 +79,14 @@ $color-message-champs-obligatoires: utilities.$color-primary;
 .decharge {
   background-color: utilities.$color-background-primary-alternative;
   border-radius: 1.25rem;
-  margin: 1.5rem auto 1.5rem auto;
+  margin: 1.5rem 1rem 1.5rem 1rem;
+
   max-width: 60.75rem;
 
+  @include utilities.media(large) {
+    margin: 1.5rem auto 1.5rem auto;
+  }
+
   p {
     color: utilities.$color-text-placeholder;
     font-size: 0.875rem;

diff --git a/...ponents/features/Stages3eEt2de/Candidater/Formulaire/FormulaireCandidaterStage3eEt2de.tsx b/...ponents/features/Stages3eEt2de/Candidater/Formulaire/FormulaireCandidaterStage3eEt2de.tsx
@@ -127,8 +127,7 @@ export function FormulaireCandidaterStage3eEt2de(props: {
 					/>
 					:
 					<Champ>
-						{ /* FIXME (DORO 22-01-2024): Embarquer dans Champ la gestion de l'état readonly (voir UI kit) */}
-						<Champ.Label className={styles.elementDesactive}>
+						<Champ.Label>
 							Métier sur lequel porte la demande d’immersion
 							<Champ.Label.Complement className={styles.elementDesactive}>Un ou plusieurs métiers ont été renseignés par
 								l’entreprise</Champ.Label.Complement>
@@ -138,7 +137,6 @@ export function FormulaireCandidaterStage3eEt2de(props: {
 						             required
 						             value={metiersStage3eEt2de[0].label}
 						             readOnly
-						             className={styles.elementDesactive}
 						             type="text"
 						/>
 						<Champ.Error/>

diff --git a/src/client/components/layouts/Header/Header.module.scss b/src/client/components/layouts/Header/Header.module.scss
@@ -291,7 +291,7 @@
   }
 
   & > .navItem:last-child {
-    color: utilities.$color-text-secondary;
+    color: utilities.$color-text-primary-inverse;
     background-color: utilities.$color-title-primary-contrast;
 
     &:hover {

diff --git a/src/client/components/ui/Form/Champ/Champ.tsx b/src/client/components/ui/Form/Champ/Champ.tsx
@@ -9,7 +9,6 @@ import { useSynchronizedRef } from '~/client/hooks/useSynchronizedRef';
 import styles from './Champ.module.scss';
 import { ChampContextProvider, useChampContext } from './ChampContext';
 
-// FIXME (DORO 22-01-2024): Embarquer la gestion de l'etat désactivé (voir UI kit)
 export function Champ(props: ComponentPropsWithoutRef<'div'>) {
 	const [errorId, setErrorId] = useState<string>(useId());
 	const [hintId, setHintId] = useState<string>(useId());

diff --git a/src/client/components/ui/Form/Input/Input.module.scss b/src/client/components/ui/Form/Input/Input.module.scss
@@ -2,7 +2,7 @@
 
 $color-text: utilities.$color-text-primary;
 $color-border: utilities.$color-background-border;
-$color-text-disabled: inherit;
+$color-text-disabled: utilities.$color-text-secondary;
 $color-background-disabled: utilities.$color-background-primary-alternative;
 $color-error: utilities.$color-error;
 $error-border-width: 2px;

diff --git a/src/client/components/ui/Form/Label/Label.module.scss b/src/client/components/ui/Form/Label/Label.module.scss
@@ -1,10 +1,16 @@
 @use "@styles/utilities";
 
+$color-text-disabled-or-readonly: utilities.$color-text-secondary;
+
 .label {
   display: block;
   overflow-wrap: anywhere;
   @include utilities.text-medium;
 
+  &:has(+input[readonly], +input[disabled]) {
+    color: $color-text-disabled-or-readonly;
+  }
+
   @include utilities.media(small) {
     @include utilities.text-large;
   }

diff --git a/src/client/components/ui/Pagination/Pagination.module.scss b/src/client/components/ui/Pagination/Pagination.module.scss
@@ -1,6 +1,6 @@
 @use "@styles/utilities";
 
-$pagination-current-page-color: utilities.$color-text-secondary;
+$pagination-current-page-color: utilities.$color-text-primary-inverse;
 $pagination-current-page-background-color: utilities.$color-background-secondary;
 $pagination-disabled-page-color: utilities.$color-text-placeholder;
 $pagination-available-page-color: utilities.$color-text-primary;

diff --git a/src/styles/theme/_colors.stories.mdx b/src/styles/theme/_colors.stories.mdx
@@ -144,6 +144,12 @@ Pour utiliser une couleur, on procède de la manière suivante :
                         <p>$color-text-primary</p>
                         <p>#161616</p>
                     </li>
+                    <li>
+                        <div className="color-text-primary-inverse"></div>
+                        <p>Texte primaire inversé</p>
+                        <p>$color-text-primary-inverse</p>
+                        <p>#FFFFFFF</p>
+                    </li>
                     <li>
                         <div className="color-text-primary-alternative"></div>
                         <p>Texte primaire alternative</p>
@@ -154,7 +160,7 @@ Pour utiliser une couleur, on procède de la manière suivante :
                         <div className="color-text-secondary"></div>
                         <p>Texte secondaire</p>
                         <p>$color-text-secondary</p>
-                        <p>#FFFFFFF</p>
+                        <p>#666666</p>
                     </li>
                     <li>
                         <div className="color-text-placeholder"></div>

diff --git a/src/styles/theme/_colors.stories.scss b/src/styles/theme/_colors.stories.scss
@@ -77,13 +77,17 @@
       background-color: variables.$color-text-primary-alternative;
     }
 
-    & .color-text-secondary {
-      background-color: variables.$color-text-secondary;
+    & .color-text-primary-inverse {
+      background-color: variables.$color-text-primary-inverse;
     }
 
     & .color-text-placeholder {
       background-color: variables.$color-text-placeholder;
     }
+
+    & .color-text-secondary {
+      background-color: variables.$color-text-secondary;
+    }
   }
 
   .colors-system {

diff --git a/src/styles/theme/_variables.scss b/src/styles/theme/_variables.scss
@@ -35,8 +35,9 @@ $color-title-primary-contrast: #18753C;
 $color-title-primary-alternative: #161616;
 $color-title-secondary: #FFFFFF;
 $color-text-primary: #161616;
+$color-text-primary-inverse: #FFFFFF;
 $color-text-primary-alternative: #566BB1;
-$color-text-secondary: #FFFFFF;
+$color-text-secondary: #666666;
 $color-text-placeholder: #666666;