Refacto le bouton de retour & ajout de documentation

src/components/buttons/back-button.vue

@@ -1,12 +1,15 @@
+<!-- Documentation: https://github.com/betagouv/aides-jeunes/wiki/Composant-back%E2%80%90button.vue -->
 <template>
-  <button
+  <component
+    :is="asLink ? 'router-link' : 'button'"
     class="fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-arrow-left-line"
-    :class="size && size === 'small' ? 'fr-btn--sm' : ''"
-    type="button"
-    @click.prevent="goBack"
+    :class="{ 'fr-btn--sm': size === 'small' }"
+    :type="asLink ? undefined : 'button'"
+    :to="asLink ? to : undefined"
+    @click="asLink ? undefined : goBack()"
   >
     <slot>Précédent</slot>
-  </button>
+  </component>
 </template>
 
 <script setup lang="ts">
@@ -25,6 +28,14 @@ const props = defineProps({
     type: String,
     default: null,
   },
+  asLink: {
+    type: Boolean,
+    default: false,
+  },
+  to: {
+    type: String,
+    default: "/",
+  },
 })
 const route = useRoute()
 const router = useRouter()

src/views/aide.vue

@@ -1,13 +1,9 @@
 <template>
-  <article>
-    <h1 class="fr-mt-7w fr-mx-2w">Détail de l'aide</h1>
-    <p>
-      <router-link
-        to="/aides"
-        class="fr-btn fr-btn--tertiary-no-outline fr-btn--sm fr-btn--icon-left fr-icon-arrow-left-line"
-        >Retour à la liste des aides</router-link
-      >
-    </p>
+  <article class="fr-article">
+    <h1>Détail de l'aide</h1>
+    <BackButton to="/aides" size="small" as-link class="fr-mb-2w">
+      Retour à la liste des aides
+    </BackButton>
     <DroitsDetails
       :droit="benefit"
       :droits="[benefit]"
@@ -24,6 +20,7 @@ import { useRoute } from "vue-router"
 import { getBenefit } from "@/lib/benefits.js"
 import DroitsDetails from "@/components/droits-details.vue"
 import DroitsContributions from "@/components/droits-contributions.vue"
+import BackButton from "@/components/buttons/back-button.vue"
 
 const route = useRoute()
 const benefitId = route.params.benefitId as string

src/views/liste-aides.vue

@@ -1,6 +1,15 @@
 <template>
   <article class="fr-article">
     <h1>Toutes les aides</h1>
+    <BackButton
+      size="small"
+      data-testid="benefits-liste-back-button"
+      class="fr-mb-2w"
+      as-link
+      to="/"
+    >
+      Retour à l'accueil
+    </BackButton>
     <p>Total: {{ benefitsCount }} aides</p>
     <div class="fr-form-group">
       <div class="fr-container fr-px-0">
@@ -83,6 +92,7 @@ import institutionsBenefits from "generator:institutions"
 import CommuneMethods from "@/lib/commune.js"
 import { Commune } from "@lib/types/commune.d.js"
 import { capitalize } from "@lib/utils.js"
+import BackButton from "@/components/buttons/back-button.vue"
 
 const zipCode = ref("")
 const selectedCommune = ref<Commune | null>()