feat: tab can receive a icon to be used on mobile, also fixed storybook

fix devhatt#28
RafaelLimaC · Mar 12, 2024 · 277aafc · 277aafc
1 parent afc0ad7
commit 277aafc
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 4 deletions.
diff --git a/src/components/Tabber/index.js b/src/components/Tabber/index.js
@@ -79,6 +79,13 @@ Tabber.prototype = Object.assign(Tabber.prototype, Component.prototype, {
     tabButton.textContent = tab.title;
     tabButton.dataset.index = index;
     tabButton.classList.add('tabber-button');
+
+    if (tab.icon) {
+      const icon = document.createElement('img');
+      icon.src = tab.icon;
+      tabButton.appendChild(icon);
+    }
+
     tabsContainer.appendChild(tabButton);
 
     const tabContent = document.createElement('div');

diff --git a/src/components/Tabber/index.scss b/src/components/Tabber/index.scss
@@ -52,14 +52,19 @@ $borderHeight: 0.3rem;
 .tabber-button {
   min-height: 4.5rem;
 
+  display: flex;
+  flex-direction: row-reverse;
+
   flex-grow: 1;
+  gap: 0.8rem;
+
+  align-items: center;
+  justify-content: center;
 
   font-family: 'Noto Sans', sans-serif;
   color: colors.$gray600;
-  text-align: center;
   font-size: 1.4rem;
   font-weight: 500;
-  line-height: 1.3;
 
   border: 0;
 
@@ -103,6 +108,10 @@ $borderHeight: 0.3rem;
   }
 }
 
+.tabber-content {
+  padding-top: 1rem;
+}
+
 .hide {
   display: none;
 }
@@ -128,6 +137,10 @@ $borderHeight: 0.3rem;
         content: none;
       }
     }
+
+    img {
+      display: none;
+    }
   }
 
   .tabber-tab {

diff --git a/src/stories/Tabber.stories.js b/src/stories/Tabber.stories.js
@@ -1,5 +1,7 @@
 import Button from '../components/Button';
 import Tabber from '../components/Tabber';
+import iconBirthday from './assets/tabber/birthday.svg';
+import iconHome from './assets/tabber/home.svg';
 
 export default {
   title: 'Components/Tabber',
@@ -18,8 +20,8 @@ export default {
 export const Default = {
   args: {
     tabs: [
-      { title: 'Aba 1', content: 'Conteúdo da aba 1' },
-      { title: 'Aba 2', content: 'Conteúdo da aba 2' },
+      { title: 'Aba 1', icon: iconHome, content: 'Conteúdo da aba 1' },
+      { title: 'Aba 2', icon: iconBirthday, content: 'Conteúdo da aba 2' },
       {
         title: 'Aba 3',
         content: new Button({