chore: 🎨 standardize html balises with DSFR

dnum-mi · Jun 4, 2024 · 72489fb · 72489fb
1 parent 0db3dff
commit 72489fb
Show file tree

Hide file tree

Showing 20 changed files with 73 additions and 79 deletions.
diff --git a/frontend/cypress/e2e/firearm-fiability.cy.js b/frontend/cypress/e2e/firearm-fiability.cy.js
@@ -43,7 +43,7 @@ describe('Firearm Fiability', () => {
       expect(response.statusCode).to.eq(200)
     })
     cy.url().should('contain', '/guide-identification/resultat-typologie')
-    cy.contains('h3', 'Catégorie non déterminée')
+    cy.contains('h2', 'Catégorie non déterminée')
     cy.get('h2').should(() => {
       expect(localStorage.getItem('confidenceLevel')).to.eq('"low"')
     })

diff --git a/frontend/cypress/e2e/firearm-securing.cy.js b/frontend/cypress/e2e/firearm-securing.cy.js
@@ -14,13 +14,13 @@ describe('Securing Firearm and Identification', () => {
     cy.getByDataTestid('button-next').click()
     cy.url().should('contain', '/mise-en-securite-tutoriel')
     cy.getVideo()
-    cy.contains('h2', 'Mettre en sécurité mon arme')
+    cy.contains('h1', 'Mettre en sécurité mon arme')
     cy.contains('li', 'Actionner la culasse')
     cy.getByDataTestid('button-next').click()
-    cy.contains('h2', 'Fin de la mise en sécurité')
+    cy.contains('h1', 'Fin de la mise en sécurité')
     cy.getByDataTestid('go-to-identification').click()
     cy.url().should('contain', '/guide-identification/resultat-typologie')
-    cy.contains('h2', 'Typologie de l\'arme')
+    cy.contains('h1', 'Typologie de l\'arme')
     cy.contains('p', 'Basegun a identifié votre arme')
     cy.getByDataTestid('next-step').click()
     cy.IdentificationPistoletSemiAuto()

diff --git a/frontend/cypress/e2e/recommendations-civilians-vs-fsi.cy.js b/frontend/cypress/e2e/recommendations-civilians-vs-fsi.cy.js
@@ -11,7 +11,7 @@ describe('Recommendations Civilians vs FSI', () => {
     cy.getByDataTestid('secure-firearm')
       .contains('Je veux mettre en sécurité mon arme')
       .click()
-    cy.contains('h2', 'Mettre en sécurité mon arme')
+    cy.contains('h1', 'Mettre en sécurité mon arme')
     cy.contains('p', 'En cas de doute,')
   })
 
@@ -27,7 +27,7 @@ describe('Recommendations Civilians vs FSI', () => {
     cy.getByDataTestid('secure-firearm')
       .contains('Je veux mettre en sécurité mon arme')
       .click()
-    cy.contains('h2', 'Mettre en sécurité mon arme')
+    cy.contains('h1', 'Mettre en sécurité mon arme')
     cy.contains('span', 'extraire des munitions')
   })
 })
diff --git a/frontend/cypress/e2e/shoulder-bolt-rifle-securing.cy.js b/frontend/cypress/e2e/shoulder-bolt-rifle-securing.cy.js
@@ -9,7 +9,7 @@ describe('Shoulder Bolt Rifle Securing', () => {
     })
     cy.getVideo()
     cy.url().should('contain', '/mise-en-securite-tutoriel')
-    cy.contains('h2', 'Mettre en sécurité mon arme')
+    cy.contains('h1', 'Mettre en sécurité mon arme')
     cy.contains('li', 'Ouvrez la culasse')
     cy.getByDataTestid('button-next').click()
     cy.IdentificationShoulderBoltRifle()

diff --git a/frontend/cypress/e2e/typology-revolver-securing.cy.js b/frontend/cypress/e2e/typology-revolver-securing.cy.js
@@ -13,7 +13,7 @@ describe('Typology Revolver Securing', () => {
     cy.getByDataTestid('button-next').should('not.have.attr', 'disabled')
     cy.getByDataTestid('button-next').click()
     cy.url().should('contain', '/fin-mise-en-securite')
-    cy.contains('h2', 'mise en sécurité')
+    cy.contains('h1', 'mise en sécurité')
     cy.contains('p', 'les manipulations sont complexes')
     cy.getByDataTestid('go-to-identification').click()
     cy.url().should('contain', '/guide-identification/resultat-typologie')
@@ -33,7 +33,7 @@ describe('Typology Revolver Securing', () => {
     cy.getByDataTestid('button-next').should('not.have.attr', 'disabled')
     cy.getByDataTestid('button-next').click()
     cy.getVideo()
-    cy.contains('h2', 'Mettre en sécurité mon arme')
+    cy.contains('h1', 'Mettre en sécurité mon arme')
     cy.contains('li', 'Tirer ou pousser')
     cy.getByDataTestid('button-next').click()
     cy.url().should('contain', '/fin-mise-en-securite')
@@ -60,7 +60,7 @@ describe('Typology Revolver Securing', () => {
     cy.contains('Le barillet ne bascule pas').first().click()
     cy.getByDataTestid('button-next').should('not.have.attr', 'disabled')
     cy.getByDataTestid('button-next').click()
-    cy.contains('h2', 'Mettre en sécurité mon arme')
+    cy.contains('h1', 'Mettre en sécurité mon arme')
     cy.contains('li', 'Contrôler que chaque chambre')
     cy.getByDataTestid('button-next').click()
     cy.url().should('contain', '/fin-mise-en-securite')

diff --git a/frontend/cypress/support/commands.js b/frontend/cypress/support/commands.js
@@ -74,17 +74,17 @@ Cypress.Commands.add('miseEnSecurite', () => {
   cy.getByDataTestid('secure-firearm')
     .contains('Je veux mettre en sécurité mon arme')
     .click()
-  cy.contains('h2', 'Mettre en sécurité mon arme')
+  cy.contains('h1', 'Mettre en sécurité mon arme')
   cy.contains('span', 'extraire des munitions')
   cy.getByDataTestid('button-next')
     .contains('Suivant')
     .click()
-  cy.contains('h2', 'Mettre en sécurité mon arme')
+  cy.contains('h1', 'Mettre en sécurité mon arme')
   cy.contains('span', 'DIRECTION SÛRE')
   cy.getByDataTestid('button-next')
     .contains('Suivant')
     .click()
-  cy.contains('h2', 'Mettre en sécurité mon arme')
+  cy.contains('h1', 'Mettre en sécurité mon arme')
   cy.contains('span', 'tutoriel adapté')
   cy.getByDataTestid('button-next')
     .contains('Suivant')
@@ -103,7 +103,7 @@ Cypress.Commands.add('Identification', () => {
     .contains('J’ai déjà mis mon arme en sécurité, je veux l’identifier')
     .click()
   cy.url().should('contain', '/instructions')
-  cy.contains('h3', 'Pour un résultat optimal')
+  cy.contains('h1', 'Pour un résultat optimal')
   cy.contains('span', 'canon vers la droite')
 })
 
@@ -179,7 +179,7 @@ Cypress.Commands.add('IdentificationDummyPistolet', () => {
 })
 
 Cypress.Commands.add('pasDeGuide', () => {
-  cy.contains('h2', 'Pas de guide de mise en sécurité pour votre arme')
+  cy.contains('h1', 'Pas de guide de mise en sécurité pour votre arme')
   cy.url().should('contain', '/fin-mise-en-securite')
   cy.getByDataTestid('go-to-identification').click()
   cy.url().should('contain', '/guide-identification/resultat-typologie')

diff --git a/frontend/src/components/AskingExpert.vue b/frontend/src/components/AskingExpert.vue
@@ -72,13 +72,13 @@ async function sendTutorialFeedback () {
     >
       <div class="modal">
         <div class="modal-content">
-          <h2>
+          <div class="fr-modal__title fr-mb-2w">
             <VIcon
               name="ri-arrow-right-line"
               scale="1.5"
             />
             Je n'arrive pas à compléter une étape
-          </h2>
+          </div>
           <p>
             Si vous rencontrez une difficulté pour poursuivre ce tutoriel, nous vous conseillons de faire appel à un expert. <br>
             <br>En attendant, vous pouvez nous permettre d'améliorer le contenu de ce tutoriel en nous décrivant votre problème ci-dessous.

diff --git a/frontend/src/components/ContactExpert.vue b/frontend/src/components/ContactExpert.vue
@@ -26,13 +26,13 @@ function onClose () {
     >
       <div class="modal">
         <div class="modal-content">
-          <h2>
+          <div class="fr-modal__title fr-mb-2w">
             <VIcon
               name="ri-arrow-right-line"
               scale="1.5"
             />
             Contacter un expert
-          </h2>
+          </div>
           <p>Sélectionnez ci-dessous votre corps de métier.</p>
           <div>
             <DsfrButton

diff --git a/frontend/src/components/MissingCardAlert.vue b/frontend/src/components/MissingCardAlert.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="fr-alert fr-alert--error">
-    <h3 class="fr-alert__title">
+    <h1 class="fr-alert__title">
       Absence de carte
-    </h3>
+    </h1>
     <p>
       Pour obtenir un <strong>résultat plus précis</strong>, recommencez la prise de photo en ajoutant
       <strong>une carte à côté de l’arme</strong>.

diff --git a/frontend/src/components/PopupContact.vue b/frontend/src/components/PopupContact.vue
@@ -16,13 +16,13 @@ function onClose () {
       <div class="modal">
         <div class="modal-content">
           <div class="fr-alert fr-alert--warning">
-            <h3>
+            <div class="fr-modal__title fr-mb-2w">
               <VIcon
                 name="ri-arrow-right-line"
                 scale="1.5"
               />
               Consignes d'envoi de mail
-            </h3>
+            </div>
             <div class="flex justify-content">
               <p>
                 Pour que votre demande puisse être traitée, vous devrez transmettre plusieurs informations dont des photos de l'arme. Assurez-vous de la qualité de celles-ci : <span class="font-bold">netteté, exposition, orientation, sans perspective.</span>  <br>

diff --git a/frontend/src/components/PopupVideo.vue b/frontend/src/components/PopupVideo.vue
@@ -30,13 +30,13 @@ function onClose () {
     >
       <div class="modal">
         <div class="modal-content">
-          <h2>
+          <div class="fr-modal__title fr-mb-2w">
             <VIcon
               name="ri-arrow-right-line"
               scale="1.5"
             />
             Le levier est bloqué ?
-          </h2>
+          </div>
           <div v-if="typology === 'semi_auto_style_militaire_autre'">
             <div class="fr-content-media relative">
               <video

diff --git a/frontend/src/components/ResultPage.vue b/frontend/src/components/ResultPage.vue
@@ -74,24 +74,23 @@ function sendFeedback (isCorrect: boolean) {
 <template>
   <div class="result-frame -mx-8 py-5 px-8">
     <div class="result">
-      <h2
+      <h1
         v-if="$route.name === 'IdentificationTypologyResult' && hasDummyOptions"
         class="typology-title bg-white py-4"
       >
         Typologie de l'arme
-      </h2>
-      <h2
+      </h1>
+      <h1
         v-else
         class="typology-title bg-white py-4"
       >
         Résultat Final
-      </h2>
+      </h1>
       <div
         class="result-image"
         :style="{backgroundImage:`url(${img})`}"
       />
       <div class="fr-tile fr-enlarge-link mb-3">
-        <h2 class="fr-tile__title px-2" />
         <div v-if="confidenceLevel === 'low'">
           <div class="fr-tile__body">
             <DsfrTag
@@ -100,9 +99,9 @@ function sendFeedback (isCorrect: boolean) {
             />
           </div>
           <div class="fr-alert fr-alert--info mt-3">
-            <h3 class="fr-alert__title">
+            <h2 class="fr-alert__title">
               Catégorie non déterminée
-            </h3>
+            </h2>
           </div>
           <div class="fr-alert fr-alert--warning mt-3">
             <p>Nous n'avons pas suffisamment d'éléments pour fournir une réponse fiable. Nous vous conseillons de faire appel à un expert.</p>
@@ -126,24 +125,24 @@ function sendFeedback (isCorrect: boolean) {
               <ContactExpert v-if="isUserUsingCrosscall()" />
             </div>
             <div class="fr-alert fr-alert--info mt-3">
-              <h3
+              <h2
                 v-if="isDummy"
                 class="fr-alert__title"
               >
                 Arme factice de type {{ label }}
-              </h3>
-              <h3
+              </h2>
+              <h2
                 v-else-if="stepsStore.selectedAlarmGun"
                 class="fr-alert__title"
               >
                 Arme d'alarme de type {{ label }}
-              </h3>
-              <h3
+              </h2>
+              <h2
                 v-else
                 class="fr-alert__title"
               >
                 {{ label }}
-              </h3>
+              </h2>
               <template v-if="confidenceLevel !== 'low' && ($route.name !== 'IdentificationTypologyResult' || !hasDummyOptions)">
                 <h3
                   class="fr-alert__title"

diff --git a/frontend/src/main.css b/frontend/src/main.css
@@ -1,9 +1,14 @@
-h1 {
-  font-size: 1.75rem
-}
+@screen lt-sm {
+  h1 {
+    font-size: 1.75rem
+  }
 
-h2 {
-  font-size: 1.3rem 
+  h2 {
+    font-size: 1.3rem
+  }
+}
+.text-blue {
+  color: var(--blue-france-sun-113-625);
 }
 
 #app {
@@ -60,16 +65,6 @@ a {
   width: 100%
 }
 
-h4 {
-  font-size: 1.3rem;
-  margin: 0.75rem;
-}
-
-h5 {
-  font-size: 1.1rem;
-  color: var(--blue-france-sun-113-625)
-}
-
 .help {
   color: var(--blue-france-sun-113-625);
   background-image: var(--underline-img), var(--underline-img) !important;
@@ -85,4 +80,4 @@ h5 {
 
 .w-100 {
   width: 100% !important;
-}
+}
diff --git a/frontend/src/views/GuideContactExpert/ExpertSituation.vue b/frontend/src/views/GuideContactExpert/ExpertSituation.vue
@@ -63,14 +63,14 @@ const currentPhone = computed(() => {
     <div class="fr-grid-row">
       <div class="fr-col">
         <div class="text-center mt-5">
-          <h2>
+          <h1>
             <VIcon
               name="ri-arrow-right-line"
-              scale="1.5"
+              scale="2"
             />
             <span v-if="lawEnforcementType === 'gendarmerie'">Contacter un expert de l'IRCGN</span>
             <span v-if="lawEnforcementType === 'police'">Contacter un expert en armes</span>
-          </h2>
+          </h1>
           <div v-if="lawEnforcementType === 'gendarmerie'">
             <p>
               Sélectionnez votre situation actuelle :
@@ -81,13 +81,13 @@ const currentPhone = computed(() => {
             v-if="lawEnforcementType === 'police'"
             class="fr-alert fr-alert--warning"
           >
-            <h3>
+            <h2>
               <VIcon
                 name="ri-error-warning-line"
                 scale="1.5"
               />
               Avertissement
-            </h3>
+            </h2>
             <div class="justify-content">
               <p>
                 Cette fonctionnalité est <span class="font-bold">en cours de développement</span>.<br>
@@ -241,13 +241,13 @@ const currentPhone = computed(() => {
           @close="showIRCGNModal = false; priority = ''"
         >
           <div class="modal">
-            <h2>
+            <div class="fr-modal__title fr-mb-2w">
               <VIcon
                 name="ri-arrow-right-line"
                 scale="1.5"
               />
               Contacter un expert de l'IRCGN
-            </h2>
+            </div>
             <div>
               <div class="fr-col-11 fr-col-lg-6 mx-auto">
                 <p v-if="priority === 'high'">

diff --git a/frontend/src/views/GuideSecuringFirearm/GuideSecuringFirearm.vue b/frontend/src/views/GuideSecuringFirearm/GuideSecuringFirearm.vue
@@ -17,9 +17,9 @@ const currentStep = ref(0)
         :steps="steps"
         :current-step="currentStep + 1"
       />
-      <h2 class="fr-mt-2w">
+      <h1 class="fr-mt-2w">
         Mettre en sécurité mon arme
-      </h2>
+      </h1>
 
       <template v-if="currentStep === 0">
         <div v-if="isUserUsingCrosscall()">

diff --git a/frontend/src/views/GuideSecuringFirearm/SecuringAchievement.vue b/frontend/src/views/GuideSecuringFirearm/SecuringAchievement.vue
@@ -23,9 +23,9 @@ function goToMissingCardPageIfMissing () {
   <div class="fr-container">
     <div class="result fr-col-11 fr-col-lg-6 m-auto">
       <div v-if="TYPOLOGIES[typology]?.securingSteps">
-        <h2 class="mt-5 text-center">
+        <h1 class="mt-5 text-center">
           Fin de la mise en sécurité de l’arme
-        </h2>
+        </h1>
         <p class="ending font-600 text-center">
           Vous venez de sécuriser votre arme !
         </p>
@@ -41,9 +41,9 @@ function goToMissingCardPageIfMissing () {
         </div>
       </div>
       <div v-else>
-        <h2 class="mt-5 text-center">
+        <h1 class="mt-5 text-center">
           Pas de guide de mise en sécurité pour votre arme
-        </h2>
+        </h1>
         <div
 
           class="text-center"