fix: modification du wording des étapes de l'onboarding (#192)

betagouv · Dec 11, 2023 · 269f8bb · 269f8bb
1 parent 5f9da3e
commit 269f8bb
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 15 deletions.
diff --git a/public/impact-co2-logement.png b/public/impact-co2-logement.png
diff --git a/src/assets/theme/style.css b/src/assets/theme/style.css
@@ -183,6 +183,10 @@ h3 {
   background-color: var(--background-alt-grey-hover);
 }
 
+.background-color--gris-image {
+  background-color: #eeeeee;
+}
+
 .background--white {
   background-color: #fff;
 }

diff --git a/src/components/custom/Onboarding/AsideOnboardingEtapeAlimentation.vue b/src/components/custom/Onboarding/AsideOnboardingEtapeAlimentation.vue
@@ -6,9 +6,20 @@
     </p>
     <p class="fr-text--sm">
       Votre alimentation participe à votre impact.<br />
-      Elle représente en moyenne 24% des émissions de gaz à effets de serre du français moyen.
+      Elle représente en moyenne 24% des émissions de gaz à effets de serre du Français moyen.
+    </p>
+    <p class="fr-mb-0">
+      <span class="text--xs text--bold">Source :</span>
+      <a
+        href="https://www.carbone4.com/"
+        target="_blank"
+        rel="noopener"
+        class="fr-link text--xs"
+        title="Carbone 4 - ouvre une nouvelle fenêtre"
+      >
+        Carbone 4
+      </a>
     </p>
-    <span class="text--xs">Source : carbone 4</span>
   </CarteInfo>
 </template>
 

diff --git a/src/components/custom/Onboarding/AsideOnboardingEtapeLogement.vue b/src/components/custom/Onboarding/AsideOnboardingEtapeLogement.vue
@@ -12,8 +12,42 @@
       Il existe de nombreuses manières de réduire sa consommation et ses factures ! Et de nombreuses aides sont
       disponibles si vous êtes proriétaire (bailleur ou occupant).
     </p>
-    <span class="text--xs">Source : carbone 4</span>
+    <p class="fr-mb-0">
+      <span class="text--xs text--bold">Source :</span>
+      <a
+        href="https://www.carbone4.com/"
+        target="_blank"
+        rel="noopener"
+        class="fr-link text--xs"
+        title="Carbone 4 - ouvre une nouvelle fenêtre"
+      >
+        Carbone 4
+      </a>
+    </p>
   </CarteInfo>
+  <div class="background-color--gris-image border border-radius--md fr-p-2w">
+    <p class="fr-text--bold">
+      <span class="fr-icon-lightbulb-line" aria-hidden="true"></span>
+      Pour vous donner une idée
+    </p>
+    <img
+      alt="Chauffage électrique : 6kg co2e; Chauffage au gaz : 38kg co2e; Chauffage au fioul : 53kg co2e;"
+      class="fr-col-12"
+      src="/impact-co2-logement.png"
+    />
+    <p class="text--xs fr-mb-0">
+      <span class="fr-text--bold">Source :</span>
+      <a
+        href="https://impactco2.fr/"
+        target="_blank"
+        rel="noopener"
+        title="Site impact CO2 - ouvre une nouvelle fenêtre"
+        class="fr-link text--xs"
+      >
+        Impact CO2
+      </a>
+    </p>
+  </div>
 </template>
 
 <script setup lang="ts">

diff --git a/src/components/custom/Onboarding/AsideOnboardingEtapeTransport.vue b/src/components/custom/Onboarding/AsideOnboardingEtapeTransport.vue
@@ -45,9 +45,3 @@
 <script setup lang="ts">
   import CarteInfo from '@/components/custom/CarteInfo.vue';
 </script>
-
-<style scoped>
-  .background-color--gris-image {
-    background-color: #eeeeee;
-  }
-</style>
diff --git a/src/components/custom/Onboarding/OnboardingEtapeAlimentation.vue b/src/components/custom/Onboarding/OnboardingEtapeAlimentation.vue
@@ -7,10 +7,10 @@
       legende-size="l"
       orientation="vertical"
       :options="[
-        { label: 'De la viande et/ou du poisson 4 à 5 fois par semaine', value: 'tout' },
-        { label: 'Végétarien : Sans produits laitiers, c’est dur', value: 'vege' },
-        { label: 'J’adore la viande : Un repas sans viande, ce n’est pas un repas', value: 'viande' },
-        { label: 'Végan : Rien d’animal dans mon assiette', value: 'vegan' },
+        { label: 'Aucun', value: 'vegan' },
+        { label: 'Entre 1 et 3 fois par semaine', value: 'vege' },
+        { label: 'Entre 4 à 6 fois par semaine', value: 'tout' },
+        { label: 'Au moins 7 fois par semaine (au moins 1 repas sur 2)', value: 'viande' },
       ]"
       col=""
       v-model="viewModel.repas"

diff --git a/src/components/pages/PageOnboarding.vue b/src/components/pages/PageOnboarding.vue
@@ -2,7 +2,7 @@
   <div class="fr-container fr-py-6w">
     <h1>Quelques questions pour apprendre à se connaître</h1>
     <div class="fr-grid-row fr-grid-row--gutters">
-      <div class="fr-col-lg-9 fr-col-12">
+      <div class="fr-col-lg-8 fr-col-12">
         <div class="background--white border border-radius--md fr-p-3w">
           <IndicateurDEtapes
             :etape-courante="etapeCourante + 1"
@@ -27,7 +27,7 @@
           />
         </div>
       </div>
-      <div class="fr-col-lg-3 fr-col-12">
+      <div class="fr-col-lg-4 fr-col-12">
         <AsideOnboardingEtapeTransport v-if="etapeCourante === 0" />
         <AsideOnboardingEtapeLogement v-if="etapeCourante === 1" />
         <AsideOnboardingEtapeAlimentation v-if="etapeCourante === 2" />