From b903b41ace6a30c05df3483ae112e8efdc81bb62 Mon Sep 17 00:00:00 2001
From: Benjamin Perez <benjamin@bexsoft.net>
Date: Wed, 31 Jul 2024 23:04:17 -0700
Subject: [PATCH] Changed Tab title to receive a react node

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
---
 src/components/Tabs/Tabs.stories.tsx | 53 ++++++++++++++++++++++++++++
 src/components/Tabs/Tabs.types.ts    |  5 ++-
 2 files changed, 55 insertions(+), 3 deletions(-)

diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx
index 43000ec0..5c1aff96 100644
--- a/src/components/Tabs/Tabs.stories.tsx
+++ b/src/components/Tabs/Tabs.stories.tsx
@@ -27,6 +27,7 @@ import UsersIcon from "../Icons/NewDesignIcons/UsersIcon";
 import SquareTerminalIcon from "../Icons/NewDesignIcons/SquareTerminalIcon";
 import SearchIcon from "../Icons/NewDesignIcons/SearchIcon";
 import MenuIcon from "../Icons/NewDesignIcons/MenuIcon";
+import Badge from "../Badge/Badge";
 
 export default {
   title: "MDS/Layout/Tabs",
@@ -242,6 +243,58 @@ HorizontalWithExtraComponents.args = {
   ),
 };
 
+export const HorizontalWithNodeObject = Template.bind({});
+HorizontalWithNodeObject.args = {
+  options: [
+    {
+      content: <div>Tab1</div>,
+      tabConfig: {
+        label: (
+          <>
+            <span>TabTitle</span>
+            <Badge
+              label={"50"}
+              id={"tag-test1"}
+              color={"info"}
+              size={"small"}
+            />
+          </>
+        ),
+        id: "tab1",
+        icon: <TestIcon />,
+      },
+    },
+    {
+      content: <div>Tab2</div>,
+      tabConfig: {
+        label: "Tab2",
+        id: "tab2",
+        icon: <TestIcon />,
+        disabled: true,
+      },
+    },
+    {
+      content: <div>Tab3</div>,
+      tabConfig: { label: "Tab3", id: "tab3", icon: <TestIcon /> },
+    },
+    {
+      content: <div>Some content for Tab 4</div>,
+      tabConfig: { label: "Tab4", id: "tab4", icon: <UsersIcon /> },
+    },
+  ],
+  horizontal: true,
+  optionsInitialComponent: (
+    <span style={{ padding: "0 15px" }}>
+      <TestIcon />
+    </span>
+  ),
+  optionsEndComponent: (
+    <span style={{ padding: "0 15px" }}>
+      <TestIcon />
+    </span>
+  ),
+};
+
 export const HorizontalWithBackground = Template.bind({});
 HorizontalWithBackground.args = {
   options: [
diff --git a/src/components/Tabs/Tabs.types.ts b/src/components/Tabs/Tabs.types.ts
index 0ca2ca91..4ae4d85f 100644
--- a/src/components/Tabs/Tabs.types.ts
+++ b/src/components/Tabs/Tabs.types.ts
@@ -15,11 +15,10 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { CSSObject } from "styled-components";
 import { OverrideTheme } from "../../global/global.types";
 
 export interface TabProps {
-  label: string;
+  label: React.ReactNode;
   icon?: React.ReactNode;
   disabled?: boolean;
   to?: string;
@@ -53,7 +52,7 @@ export interface TabsContainerProps {
 export interface TabButtonProps {
   id: string;
   horizontal?: boolean;
-  label: string;
+  label: React.ReactNode;
   onClick: () => void;
   disabled: boolean;
   icon?: React.ReactNode;