Merge branch 'staging' of https://github.com/brainstormforce/force-ui …

…into staging
brainstormforce · Oct 16, 2024 · 9ee14b0 · 9ee14b0
2 parents 02f3d23 + a11996e
commit 9ee14b0
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 85 deletions.
diff --git a/src/components/editor-input/mention-plugin/mention-component.jsx b/src/components/editor-input/mention-plugin/mention-component.jsx
@@ -135,7 +135,7 @@ const MentionComponent = ( { data, by, size, nodeKey } ) => {
 
 	return (
 		<Badge
-			className="inline-flex mx-0.5"
+			className="inline-flex mr-0.5"
 			type="rounded"
 			size={ mapSizeToBadgeSize( size ) }
 			label={ renderLabel }

diff --git a/src/components/radio-button/radio-button.jsx b/src/components/radio-button/radio-button.jsx
@@ -309,10 +309,8 @@ const RadioButtonComponent = (
 						arrow
 						triggers={ [ 'hover', 'focus' ] }
 						placement="top"
-						label={ {
-							heading: info?.heading,
-							description: info?.description,
-						} }
+						title={ info?.heading }
+						content={ info?.description }
 					>
 						<Info
 							className={ cn(

diff --git a/src/components/sidebar/sidebar.jsx b/src/components/sidebar/sidebar.jsx
@@ -126,10 +126,7 @@ const SidebarFooter = ( { children } ) => {
 				>
 					{ isCollapsed ? (
 						<>
-							<Tooltip
-								label={ { heading: 'Expand' } }
-								placement="right"
-							>
+							<Tooltip title="Expand" placement="right">
 								<PanelLeftOpen className="size-5" />
 							</Tooltip>
 						</>

diff --git a/src/components/tooltip/readme.md b/src/components/tooltip/readme.md
@@ -30,10 +30,13 @@ The `Tooltips` are small, interactive pop-up boxes that provide brief, informati
   - `"left-start"`
   - `"left-end"`
 
-### label
-**type:** `object` || `ReactComponent`
-- **Object properties/format:** `{heading: 'Tooltip heading,' description: 'Tooltip description'}`
-The label and label description also accepts a React component.
+### `title`
+- **Type:** `string`
+- **Description:** Defines the title of the tooltip. It should be a simple text string that provides the heading or main subject of the tooltip 
+
+### `content`
+- **Type:** `string` | `ReactElement`
+- **Description:** Provides detailed content for the tooltip. The content can be a plain string for a simple description or a custom ReactElement for more complex content, such as HTML or JSX components.
 
 ### `arrow`
 - **Type:** `boolean`
@@ -112,21 +115,29 @@ import { Tooltip } from '@bsf/force-ui';
 const App = () => (
 	<div>
 		<Tooltip
-            label={{
-                heading: 'Tooltip Heading',
-                description: <span>This is <strong>custom JSX</strong> in the description.</span>
-            }}
+            title="Tooltip Title"
+			content={
+				<span>
+					<strong>Tooltips</strong> are used to describe or identify
+					an element. In most scenarios, tooltips help the user
+					understand meaning, function or alt-text.
+				</span>
+			}
 			arrow
 		>
 			<button>Hover over me</button>
 		</Tooltip>
 
 		{/* Click only mode */}
 		<Tooltip
-            label={{
-                heading: 'Tooltip Heading',
-                description: 'This is a simple text description.'
-            }}
+            title="Tooltip Title"
+			content={
+				<span>
+					<strong>Tooltips</strong> are used to describe or identify
+					an element. In most scenarios, tooltips help the user
+					understand meaning, function or alt-text.
+				</span>
+			}
 			triggers={['click']}
 			arrow
 		>
@@ -135,17 +146,18 @@ const App = () => (
 
 		{/* Interactive Tooltip */}
 		<Tooltip
-            label={
-                <div>
-                    <h4>Tooltip title</h4>
-                    <div>Tooltips are used to describe or identify
-                    an element. In most scenarios, tooltips help the user
-                    understand meaning, function or alt-text.</div>
-                    <Button variant="primary" destructive className="w-full">
-                            Primary
+            title="Tooltip Title"
+			content={
+				<div className="mt-2">
+                    <div>
+                        Tooltips are used to describe or identify an element. In
+                        most scenarios, tooltips help the user understand meaning.
+                    </div>
+                    <Button variant="primary" size="sm" className="w-full mt-2">
+                        Upgrade now
                     </Button>
-                </div>
-            }
+			    </div>
+			}
 			arrow
 			interactive
 		>
@@ -154,10 +166,8 @@ const App = () => (
 
 		{/* Controlled tooltip */}
 		<Tooltip
-			label={{
-                heading: 'Tooltip Heading',
-                description: 'This is a simple text description.'
-            }}
+            title="Tooltip Title"
+			content="This is a simple text description."
 			arrow
 			interactive
 			placement="top-start"

diff --git a/src/components/tooltip/tooltip.jsx b/src/components/tooltip/tooltip.jsx
@@ -29,7 +29,8 @@ import { mergeRefs } from '../toaster/utils';
 const Tooltip = ( {
 	variant = 'dark', // 'light' | 'dark';
 	placement = 'bottom', //  | 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
-	label = {},
+	title = '',
+	content,
 	arrow = false,
 	open,
 	setOpen,
@@ -140,20 +141,11 @@ const Tooltip = ( {
 						{ ...getFloatingProps() }
 					>
 						<div>
-							{ isValidElement( label ) && label }
-							{ ! isValidElement( label ) && label?.heading && (
-								<span className="font-semibold">
-									{ label.heading }
-								</span>
+							{ !! title && (
+								<span className="font-semibold">{ title }</span>
 							) }
-							{ ! isValidElement( label ) && label?.description && (
-								<div>
-									{ isValidElement( label.description ) ? (
-										label.description
-									) : (
-										<span>{ label.description }</span>
-									) }
-								</div>
+							{ !! content && (
+								<div className="font-normal">{ content }</div>
 							) }
 						</div>
 						{ arrow && (

diff --git a/src/components/tooltip/tooltip.stories.js b/src/components/tooltip/tooltip.stories.js
@@ -41,12 +41,18 @@ export default {
 				type: { summary: 'string' },
 			},
 		},
-		label: {
-			name: 'Label',
+		title: {
+			description: 'Title for the tooltip.',
+			control: { type: 'text' },
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		content: {
 			description:
-				'Defines the heading and description of the tooltip. Can be an object or a React element.',
+				'Content of tooltip - description of tooltip in more detail.',
 			table: {
-				type: { summary: 'object | ReactNode' },
+				type: { summary: 'string | ReactElemenet' },
 			},
 		},
 		arrow: {
@@ -129,6 +135,7 @@ export const DefaultTooltip = ( args ) => {
 				{ ...args }
 				open={ args.open !== undefined ? args.open : isOpen }
 				setOpen={ args.open !== undefined ? setIsOpen : undefined }
+				content={ args.content }
 			>
 				<CircleHelp />
 			</Tooltip>
@@ -139,14 +146,12 @@ export const DefaultTooltip = ( args ) => {
 DefaultTooltip.args = {
 	variant: 'dark',
 	placement: 'bottom',
-	label: {
-		heading: 'Tooltip Heading',
-		description: (
-			<span>
-				This is <strong>custom JSX</strong> in the description.
-			</span>
-		),
-	},
+	title: 'Tooltip',
+	content: (
+		<span>
+			This is <strong>custom JSX</strong> in the description.
+		</span>
+	),
 	arrow: true,
 	triggers: [ 'hover', 'focus' ],
 	interactive: false,
@@ -187,21 +192,8 @@ DarkTooltipWithIcon.storyName = 'Tooltip with icon';
 
 DarkTooltipWithIcon.args = {
 	variant: 'dark',
-	label: {
-		heading: 'Tooltip Heading',
-		description: (
-			<div className="mt-2">
-				<div>
-					Tooltips are used to describe or identify an element. In
-					most scenarios, tooltips help the user understand meaning,
-					function or alt-text.
-				</div>
-				<Button variant="primary" size="sm" className="w-full mt-2">
-					Upgrade now
-				</Button>
-			</div>
-		),
-	},
+	title: 'Tooltip',
+	content: 'This is simple string description.',
 	arrow: true,
 };
 
@@ -238,9 +230,17 @@ DarkTooltipWithLabel.storyName = 'Tooltip with label';
 
 DarkTooltipWithLabel.args = {
 	variant: 'dark',
-	label: {
-		heading: 'Tooltip Heading',
-		description: 'This is a simple text description.',
-	},
+	title: 'Tooltip',
+	content: (
+		<div className="mt-2">
+			<div>
+				Tooltips are used to describe or identify an element. In most
+				scenarios, tooltips help the user understand meaning.
+			</div>
+			<Button variant="primary" size="sm" className="w-full mt-2">
+				Upgrade now
+			</Button>
+		</div>
+	),
 	arrow: true,
 };
diff --git a/src/templates/admin-settings-SureRank/admin-settings-SureRank.stories.js b/src/templates/admin-settings-SureRank/admin-settings-SureRank.stories.js
@@ -392,11 +392,7 @@ const Template = () => {
 															Preview
 														</span>
 														<Tooltip
-															label={ {
-																heading: '',
-																description:
-																	'This is just a preview of how your page will look in search engine results.',
-															} }
+															content="This is just a preview of how your page will look in search engine results."
 															tooltipPortalId="story-root-tw"
 															arrow
 															placement="top"