feat: refacto back-button et ajout de documentation

betagouv · Oct 23, 2024 · 5b09344 · 5b09344
1 parent c550c2f
commit 5b09344
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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">