From f1da79d8a0cb687a0db38545a044b5cf783e2ae7 Mon Sep 17 00:00:00 2001
From: Matheus Alves <web.matheusalves@gmail.com>
Date: Tue, 4 Jun 2024 11:13:02 -0300
Subject: [PATCH] feat: add complement to tabs component

---
 styleguide/src/Components/Tabs/Tabs.spec.tsx         | 7 +++++++
 styleguide/src/Components/Tabs/Tabs.stories.tsx      | 9 ++++++++-
 styleguide/src/Components/Tabs/TabsItem.interface.ts | 4 ++++
 styleguide/src/Components/Tabs/TabsItem.tsx          | 2 ++
 4 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/styleguide/src/Components/Tabs/Tabs.spec.tsx b/styleguide/src/Components/Tabs/Tabs.spec.tsx
index 132742ad..b41f3416 100644
--- a/styleguide/src/Components/Tabs/Tabs.spec.tsx
+++ b/styleguide/src/Components/Tabs/Tabs.spec.tsx
@@ -35,4 +35,11 @@ describe(specTitle('Tabs tests'), () => {
       .get('span').contains('Cupons de desconto')
   })
 
+  it('Title complement', () => {
+    mount(<Default />)
+    cy.get('.tabs .tabs-item').eq(2).within(() => {
+      cy.get('span').contains('Todos os relatórios da loja')
+      cy.get('span').contains('NOVO')
+    })
+  })
 })
diff --git a/styleguide/src/Components/Tabs/Tabs.stories.tsx b/styleguide/src/Components/Tabs/Tabs.stories.tsx
index 912a2bbb..8f0d0a08 100644
--- a/styleguide/src/Components/Tabs/Tabs.stories.tsx
+++ b/styleguide/src/Components/Tabs/Tabs.stories.tsx
@@ -3,6 +3,7 @@ import { Story, Meta } from '@storybook/react'
 import { withDesign } from 'storybook-addon-designs'
 
 import { Tabs, TabsProps } from './Tabs'
+import { Badge } from '../../Indicators'
 
 export default {
   title: 'Components/Tabs',
@@ -32,7 +33,13 @@ export default {
       },
       {
         id: 'relatorios',
-        title: 'Todos os relatorio da loja',
+        title: 'Todos os relatórios da loja',
+        titleComplement: (
+          <Badge
+            text="NOVO"
+            type="primary"
+          />
+        ),
       },
       {
         id: 'vendas',
diff --git a/styleguide/src/Components/Tabs/TabsItem.interface.ts b/styleguide/src/Components/Tabs/TabsItem.interface.ts
index f52d68e4..7f8519bf 100644
--- a/styleguide/src/Components/Tabs/TabsItem.interface.ts
+++ b/styleguide/src/Components/Tabs/TabsItem.interface.ts
@@ -7,6 +7,10 @@ export interface TabsItemInterface {
    * Item visible title
    */
   title: string
+  /**
+   * Complement to title
+   * */
+  titleComplement?: string | React.ReactNode
   /**
    * Disabled a specific tab
    */
diff --git a/styleguide/src/Components/Tabs/TabsItem.tsx b/styleguide/src/Components/Tabs/TabsItem.tsx
index 4e799b60..d17f7bd8 100644
--- a/styleguide/src/Components/Tabs/TabsItem.tsx
+++ b/styleguide/src/Components/Tabs/TabsItem.tsx
@@ -21,6 +21,7 @@ interface TabsItemProps extends TabsItemInterface {
 export const TabsItem = ({
   id,
   title,
+  titleComplement,
   active = false,
   disabled = false,
   onChange,
@@ -44,6 +45,7 @@ export const TabsItem = ({
         data-title={title}
       >
         {title}
+        {titleComplement && <span className="ml-2">{titleComplement}</span>}
       </span>
     </button>
   )