Pass react node to text badge

Author: ChengYanJin

src/lib/components/textbadge/TextBadge.component.tsx

@@ -24,7 +24,7 @@ const StyledTextBadge = styled.span<{ variant: TextBadgeVariant }>`
     `}
 `;
 type Props = {
-  text: string;
+  text: React.ReactNode;
   className?: string;
   variant?: TextBadgeVariant;
 } & React.HTMLAttributes<HTMLSpanElement>;

stories/textbadge.stories.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { TextBadge } from '../src/lib/components/textbadge/TextBadge.component';
 import { Wrapper, Title } from './common';
+import { IconHelp } from '../src/lib/components/iconhelper/IconHelper';
+import { Text } from '../src/lib/components/text/Text.component';
 export default {
   title: 'Components/TextBadge',
   component: TextBadge,
@@ -21,6 +23,19 @@ export const Default = {
         <TextBadge text="2" variant="statusWarning" />
         <TextBadge text="3" variant="statusCritical" />
         <TextBadge text="Badge" variant="infoSecondary" />
+        <TextBadge
+          text={
+            <>
+              <Text>This is a badge with a tooltip</Text>
+              <span style={{ marginLeft: '8px' }}>
+                <IconHelp
+                  tooltipMessage={<div>This is a tooltip</div>}
+                  title="Info"
+                />
+              </span>
+            </>
+          }
+        />
       </Wrapper>
     );
   },