Renomme les classes pour utiliser le BEM

betagouv · Sep 14, 2022 · a34b259 · a34b259
1 parent d5da1c6
commit a34b259
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 16 deletions.
diff --git a/src/situations/accueil/styles/deconnexion.scss b/src/situations/accueil/styles/deconnexion.scss
@@ -43,7 +43,7 @@
           margin-left: 1rem;
         }
       }
-      .bouton-arrondi-orange {
+      .bouton-arrondi--orange {
         padding-left: 1rem;
         padding-right: 1rem;
         margin-left: 0.5rem;

diff --git a/src/situations/accueil/vues/accueil.vue b/src/situations/accueil/vues/accueil.vue
@@ -54,15 +54,15 @@
             />
           </svg>
         </button>
-        <span class="bouton-arrondi bouton-arrondi-blanc">
+        <span class="bouton-arrondi bouton-arrondi--blanc">
           {{ $traduction('accueil.precedent') }}
         </span>
       </div>
       <div>
         <acces-situation
           v-if="afficheBoutonSituation"
           :situation="batiments[indexBatiment]"
-          class="bouton-arrondi commence-situation"
+          class="bouton-arrondi bouton-commence-situation"
         />
       </div>
       <div
@@ -84,7 +84,7 @@
             />
           </svg>
         </button>
-        <span class="bouton-arrondi bouton-arrondi-blanc">
+        <span class="bouton-arrondi bouton-arrondi--blanc">
           {{ $traduction('accueil.suivant') }}
         </span>
       </div>

diff --git a/src/situations/accueil/vues/bouton_deconnexion.vue b/src/situations/accueil/vues/bouton_deconnexion.vue
@@ -16,7 +16,7 @@
             @click="fermeDonnerAvis">
             <img style="height:40px;" :src="boutonAvis" alt="Je donne mon avis" title="Je donne mon avis sur cette démarche" />
           </a>
-          <a class="bouton-arrondi bouton-arrondi--petit bouton-arrondi-orange"
+          <a class="bouton-arrondi bouton-arrondi--petit bouton-arrondi--orange"
              @click="fermeDonnerAvis"
           >
             {{ $traduction('accueil.fin.avis.fermer') }}
@@ -39,7 +39,7 @@
           </div>
           <div class="actions-deconnexion">
             <a
-              class="bouton-arrondi bouton-arrondi--petit bouton-arrondi-orange"
+              class="bouton-arrondi bouton-arrondi--petit bouton-arrondi--orange"
               @click="deconnecte"
             >{{ $traduction('accueil.fin.confirmation_deconnexion.bouton') }}</a>
           </div>

diff --git a/src/situations/commun/styles/boutons.scss b/src/situations/commun/styles/boutons.scss
@@ -59,20 +59,20 @@
     margin-left: 0;
   }
 
-  &-rouge {
+  &--rouge {
     @include bouton-couleur($couleur-fond-bouton-rouge, $couleur-fond-bouton-rouge-focus);
   }
 
-  &-vert {
+  &--vert {
     @include bouton-couleur($couleur-fond-bouton-vert, $couleur-fond-bouton-vert-focus);
     color: $couleur-texte;
   }
 
-  &-orange {
+  &--orange {
     @include bouton-couleur($couleur-fond-bouton-orange, $couleur-fond-bouton-orange-focus);
   }
 
-  &-blanc {
+  &--blanc {
     @include bouton-couleur($couleur-fond-bouton-blanc, $couleur-fond-bouton-blanc-focus);
     color: $couleur-texte;
   }

diff --git a/src/situations/commun/styles/choix_bidirectionnel.scss b/src/situations/commun/styles/choix_bidirectionnel.scss
@@ -70,11 +70,11 @@
       font-size: 0.875rem;
     }
 
-    .bouton-arrondi-vert {
+    .bouton-arrondi--vert {
       text-align: right;
     }
 
-    .bouton-arrondi-rouge {
+    .bouton-arrondi--rouge {
       text-align: left;
     }
 

diff --git a/src/situations/commun/vues/components/choix_bidirectionnel.vue b/src/situations/commun/vues/components/choix_bidirectionnel.vue
@@ -5,7 +5,7 @@
     >
     <button
       :class="{ 'actions-fleches--animation': choixFait === choixGauche }"
-       class="bouton-arrondi bouton-arrondi-vert"
+       class="bouton-arrondi bouton-arrondi--vert"
       @click="selectionne(choixGauche)"
     >
       <img
@@ -16,7 +16,7 @@
     </button>
     <button
       :class="{ 'actions-fleches--animation': choixFait === choixDroit }"
-      class="bouton-arrondi bouton-arrondi-rouge"
+      class="bouton-arrondi bouton-arrondi--rouge"
       @click="selectionne(choixDroit)"
     >
       <img

diff --git a/src/situations/commun/vues/modale.js b/src/situations/commun/vues/modale.js
@@ -12,7 +12,7 @@ export function afficheFenetreModale (pointInsertion, $,
     boutonAnnuler = traduction('situation.modale.annuler'),
     actionOk
   }) {
-  const htmlAnnuler = boutonAnnuler ? `<button id="annuler-modale" class='bouton-arrondi bouton-arrondi-rouge'>${boutonAnnuler}</button>` : '';
+  const htmlAnnuler = boutonAnnuler ? `<button id="annuler-modale" class='bouton-arrondi bouton-arrondi--rouge'>${boutonAnnuler}</button>` : '';
 
   const $modale = $(`<div id="fenetre-modale" class="overlay modale">
     <div class="modale-interieur">

diff --git a/tests/situations/accueil/vues/fin.test.js b/tests/situations/accueil/vues/fin.test.js
@@ -105,7 +105,7 @@ describe('La vue de fin', function () {
 
       wrapper.vm.$nextTick(() => {
         expect(wrapper.findAll('.mon-avis').length).toBe(1);
-        wrapper.find('.actions-avis .bouton-arrondi-orange').trigger('click');
+        wrapper.find('.actions-avis .bouton-arrondi--orange').trigger('click');
 
         wrapper.vm.$nextTick(() => {
           expect(wrapper.find('.actions-fin .confirmation-deconnexion').isVisible()).toBe(true);