From 206e32c3f2ad02910753db5a41adc923ce70cf6e Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Fri, 6 Sep 2024 15:58:42 +0200
Subject: [PATCH] add icon to transverse tab

---
 .../src/components/audit/AraTabs.vue          | 10 +++------
 .../src/components/icons/LayoutIcon.vue       | 21 +++++++++++++++++++
 .../src/pages/audit/AuditGenerationPage.vue   |  2 +-
 3 files changed, 25 insertions(+), 8 deletions(-)
 create mode 100644 confiture-web-app/src/components/icons/LayoutIcon.vue

diff --git a/confiture-web-app/src/components/audit/AraTabs.vue b/confiture-web-app/src/components/audit/AraTabs.vue
index c2d0a67e..deb3a580 100644
--- a/confiture-web-app/src/components/audit/AraTabs.vue
+++ b/confiture-web-app/src/components/audit/AraTabs.vue
@@ -8,9 +8,10 @@
 import { ref, watch } from "vue";
 
 import { useUniqueId } from "../../composables/useUniqueId";
+import LayoutIcon from "../icons/LayoutIcon.vue";
 
 const props = defineProps<{
-  tabs: { label: string; data: T; icon?: string }[];
+  tabs: { label: string; data: T; isTransverse?: boolean }[];
   stickyTop: string;
 }>();
 
@@ -74,18 +75,13 @@ watch(currentTab, (currentTab) => {
           :aria-controls="panelId(i)"
           :aria-selected="i === currentTab ? 'true' : 'false'"
           :tabindex="i === currentTab ? undefined : '-1'"
-          :class="{
-            'fr-tabs__tab--icon-left': !!tab.icon,
-            ...(!!tab.icon && {
-              [`fr-icon-${tab.icon}`]: !!tab.icon
-            })
-          }"
           @click="currentTab = i"
           @keydown.right.down.prevent="selectNextTab"
           @keydown.left.up.prevent="selectPreviousTab"
           @keydown.home.prevent="selectFirstTab"
           @keydown.end.prevent="selectLastTab"
         >
+          <LayoutIcon v-if="tab.isTransverse" class="fr-mr-2v" />
           {{ tab.label }}
         </button>
       </li>
diff --git a/confiture-web-app/src/components/icons/LayoutIcon.vue b/confiture-web-app/src/components/icons/LayoutIcon.vue
new file mode 100644
index 00000000..0b36addf
--- /dev/null
+++ b/confiture-web-app/src/components/icons/LayoutIcon.vue
@@ -0,0 +1,21 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_5693_190138)">
+      <path
+        d="M1.99967 14C1.82286 14 1.65329 13.9298 1.52827 13.8047C1.40325 13.6797 1.33301 13.5101 1.33301 13.3333V2.66667C1.33301 2.48986 1.40325 2.32029 1.52827 2.19526C1.65329 2.07024 1.82286 2 1.99967 2H13.9997C14.1765 2 14.3461 2.07024 14.4711 2.19526C14.5961 2.32029 14.6663 2.48986 14.6663 2.66667V13.3333C14.6663 13.5101 14.5961 13.6797 14.4711 13.8047C14.3461 13.9298 14.1765 14 13.9997 14H1.99967ZM4.66634 6.66667H2.66634V12.6667H4.66634V6.66667ZM13.333 6.66667H5.99967V12.6667H13.333V6.66667ZM13.333 3.33333H2.66634V5.33333H13.333V3.33333Z"
+        fill="currentColor"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_5693_190138">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
diff --git a/confiture-web-app/src/pages/audit/AuditGenerationPage.vue b/confiture-web-app/src/pages/audit/AuditGenerationPage.vue
index 0732edbc..2a0ceda8 100644
--- a/confiture-web-app/src/pages/audit/AuditGenerationPage.vue
+++ b/confiture-web-app/src/pages/audit/AuditGenerationPage.vue
@@ -208,7 +208,7 @@ const tabsData = computed((): TabData[] => {
     auditStore.currentAudit?.pages.map((p) => ({
       label: p.name,
       data: p,
-      icon: p.id === -1 ? "arrow-right-s-line-double" : null
+      isTransverse: p.id === -1
     })) ?? [],
     (p) => p.data.order
   );