diff --git a/src/lib/components/icon/Icon.component.tsx b/src/lib/components/icon/Icon.component.tsx index 747467d063..f43dcb647b 100644 --- a/src/lib/components/icon/Icon.component.tsx +++ b/src/lib/components/icon/Icon.component.tsx @@ -143,6 +143,7 @@ export const iconTable = { ThumbsUp: 'far faThumbsUp', ThumbsDown: 'far faThumbsDown', Sidebar: 'fas faColumns', + Bookopen: 'fas faBookOpen', }; type IconProps = { diff --git a/src/lib/components/textbadge/TextBadge.component.tsx b/src/lib/components/textbadge/TextBadge.component.tsx index bb32698e74..c20337a491 100644 --- a/src/lib/components/textbadge/TextBadge.component.tsx +++ b/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; diff --git a/stories/textbadge.stories.tsx b/stories/textbadge.stories.tsx index bdf4a2e6c5..ea8d580d19 100644 --- a/stories/textbadge.stories.tsx +++ b/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 = { + + This is a badge with a tooltip + + This is a tooltip} + title="Info" + /> + + + } + /> ); },