From 97b4a772991d4b628a90fb183323939d7e1f59d1 Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Tue, 10 Sep 2024 15:43:40 +0200
Subject: [PATCH] Update Tabs component: add data-icon and update style

---
 src/components/Tabs.vue | 59 ++++++++++++++++++++++++++---------------
 1 file changed, 37 insertions(+), 22 deletions(-)

diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
index 4583928..ac70283 100644
--- a/src/components/Tabs.vue
+++ b/src/components/Tabs.vue
@@ -4,12 +4,13 @@
     <button
       v-for="tab in tabs"
       :key="tab.label"
-      :id="slugify(tab.label) + '-label'"
+      :id="slugify(tab.label, {lower: true}) + '-label'"
       type="button"
       role="tab"
+      :data-icon="tab.icon ?? null"
       :aria-selected="tab.isActive"
-      :aria-controls="slugify(tab.label)"
-      :tabindex="tab.isActive ? '-1' : false"
+      :aria-controls="slugify(tab.label, {lower: true})"
+      :tabindex="tab.isActive ? '-1' : null"
       @click="changeTab(tab.id)"
     >
       <span class="label">{{ tab.label }}</span>
@@ -39,20 +40,23 @@ function changeTab(tabId) {
   display: flex;
   align-items: flex-start;
   justify-content: center;
-  margin: 0 auto var(--space-12);
-  border-radius: var(--rounded-full);
-  height: 3.75rem; /* 60px */
+  margin: 0 auto var(--space-32);
+  border-radius: var(--rounded-lg);
+  background-color: var(--color-grey-200);
 }
 
 [role="tab"] {
-  --tab-height: 2.5rem;
-  --tab-py: var(--space-12);
-  --tab-px: var(--space-16);
+  --tab-h: 2.5rem;
+  --tab-min-w: 15rem; /* 240px */
+  --tab-py: var(--space-8);
+  --tab-px: var(--space-12);
+  --tab-border-w: 4px;
   position: relative;
-  display: inline-flex;
+  display: flex;
   align-items: center;
   font-size: var(--text-md);
-  border-radius: var(--rounded-full);
+  text-align: left;
+  border-radius: var(--rounded-md);
   background-color: var(--background, var(--color-background));
   color: var(--color, var(--color-text));
   z-index: 2;
@@ -60,39 +64,50 @@ function changeTab(tabId) {
   margin: 0;
   cursor: pointer;
   gap: var(--space-16);
-  height: var(--tab-height);
+  min-width: var(--tab-min-w);
+  height: var(--tab-h);
+  border: var(--tab-border-w) solid var(--color-grey-200);
 }
-[role="tab"]:focus,
 [role="tab"]:hover {
+  background-color: var(--color-white-70);
+}
+[role="tab"]:focus-visible {
+  z-index: 20;
 }
 [role="tab"] .label {
   flex-grow: 1;
   font-family: var(--font-serif);
+  margin-top: 0.1em;
 }
 [role="tab"] .count {
   font-size: var(--text-sm);
   font-weight: 500;
+  margin-top: -0.1em;
+}
+
+[role="tab"] + [role="tab"] {
+  margin-left: calc(var(--tab-border-w) / -2);
 }
 
 [role="tab"][aria-selected="true"] {
   --background: var(--color-background);
   z-index: 10;
 }
+[role="tab"][aria-selected="true"]:hover {
+  background-color: var(--color-white-100);
+}
 [role="tab"][aria-selected="false"] {
   --background: var(--color-grey-200);
   --color: var(--color-grey-700);
 }
 
-[role="tab"][aria-selected="true"] + [aria-selected="false"]::before {
-  content: "";
-  display: inline-block;
-  height: var(--tab-height);
-  width: calc(var(--tab-px) * 2);
-  position: absolute;
-  left: calc(var(--tab-px) * -1);
-  background-color: var(--color-grey-200);
-  z-index: -1;
+[role="tab"][data-icon="favorite"]::before {
+  --icon-color: var(--color-grey-400);
 }
+[role="tab"][data-icon="favorite"][aria-selected="true"]::before {
+  --icon-color: var(--color-brand);
+}
+
 
 [role="tabpanel"] {
   width: 100%;