From c550c2f0c2916f3b8ea831ca8c75bd1aeb0d74b4 Mon Sep 17 00:00:00 2001
From: Shamzic <shamery@free.fr>
Date: Wed, 23 Oct 2024 12:36:43 +0200
Subject: [PATCH 1/2] feat: ajoute un bouton de retour sur la liste des aides

---
 src/views/aide.vue        | 16 +++++++---------
 src/views/liste-aides.vue |  7 +++++++
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/views/aide.vue b/src/views/aide.vue
index a6c87abd8f..11592cfbca 100644
--- a/src/views/aide.vue
+++ b/src/views/aide.vue
@@ -1,13 +1,11 @@
 <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>
+    <router-link
+      to="/aides"
+      class="fr-btn fr-btn--secondary fr-btn--sm fr-btn--icon-left fr-icon-arrow-left-line fr-mb-2w"
+      >Retour à la liste des aides</router-link
+    >
     <DroitsDetails
       :droit="benefit"
       :droits="[benefit]"
diff --git a/src/views/liste-aides.vue b/src/views/liste-aides.vue
index 2e55b73306..0bba2326ef 100644
--- a/src/views/liste-aides.vue
+++ b/src/views/liste-aides.vue
@@ -1,6 +1,12 @@
 <template>
   <article class="fr-article">
     <h1>Toutes les aides</h1>
+    <router-link
+      to="/"
+      class="fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-arrow-left-line fr-btn--sm fr-mb-2w"
+    >
+      Retour à l'accueil
+    </router-link>
     <p>Total: {{ benefitsCount }} aides</p>
     <div class="fr-form-group">
       <div class="fr-container fr-px-0">
@@ -83,6 +89,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>()

From 5b093441165c8f3acec3b5fda457039845fa79fe Mon Sep 17 00:00:00 2001
From: Shamzic <shamery@free.fr>
Date: Wed, 23 Oct 2024 17:02:47 +0200
Subject: [PATCH 2/2] feat: refacto back-button et ajout de documentation

---
 src/components/buttons/back-button.vue | 21 ++++++++++++++++-----
 src/views/aide.vue                     |  9 ++++-----
 src/views/liste-aides.vue              |  9 ++++++---
 3 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/components/buttons/back-button.vue b/src/components/buttons/back-button.vue
index 2199bb05ac..647913acf3 100644
--- a/src/components/buttons/back-button.vue
+++ b/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()
diff --git a/src/views/aide.vue b/src/views/aide.vue
index 11592cfbca..2655865e0f 100644
--- a/src/views/aide.vue
+++ b/src/views/aide.vue
@@ -1,11 +1,9 @@
 <template>
   <article class="fr-article">
     <h1>Détail de l'aide</h1>
-    <router-link
-      to="/aides"
-      class="fr-btn fr-btn--secondary fr-btn--sm fr-btn--icon-left fr-icon-arrow-left-line fr-mb-2w"
-      >Retour à la liste des aides</router-link
-    >
+    <BackButton to="/aides" size="small" as-link class="fr-mb-2w">
+      Retour à la liste des aides
+    </BackButton>
     <DroitsDetails
       :droit="benefit"
       :droits="[benefit]"
@@ -22,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
diff --git a/src/views/liste-aides.vue b/src/views/liste-aides.vue
index 0bba2326ef..cdfa96302d 100644
--- a/src/views/liste-aides.vue
+++ b/src/views/liste-aides.vue
@@ -1,12 +1,15 @@
 <template>
   <article class="fr-article">
     <h1>Toutes les aides</h1>
-    <router-link
+    <BackButton
+      size="small"
+      data-testid="benefits-liste-back-button"
+      class="fr-mb-2w"
+      as-link
       to="/"
-      class="fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-arrow-left-line fr-btn--sm fr-mb-2w"
     >
       Retour à l'accueil
-    </router-link>
+    </BackButton>
     <p>Total: {{ benefitsCount }} aides</p>
     <div class="fr-form-group">
       <div class="fr-container fr-px-0">