feat: add complement to tabs component

lojaintegrada · Jun 4, 2024 · f1da79d · f1da79d
1 parent d362f89
commit f1da79d
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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>
   )