From 06e31d7698c19f8d49091213a049ecbce3f783b0 Mon Sep 17 00:00:00 2001
From: Vitalii <bossi@ukr.net>
Date: Thu, 16 Nov 2023 22:10:47 +0200
Subject: [PATCH] refactored_pop_ups

---
 .../IconExtensionWithTitle.tsx                |  1 +
 .../TitleWithDescription.tsx                  | 39 +++++++++++--------
 2 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/src/components/icon-extension-with-title/IconExtensionWithTitle.tsx b/src/components/icon-extension-with-title/IconExtensionWithTitle.tsx
index b33db39b0..9b1c7ac9b 100644
--- a/src/components/icon-extension-with-title/IconExtensionWithTitle.tsx
+++ b/src/components/icon-extension-with-title/IconExtensionWithTitle.tsx
@@ -34,6 +34,7 @@ const IconExtensionWithTitle: FC<IconExtensionWithTitleProps> = ({
         description={size ? convertSize(size) : description}
         style={styles.titleWithDescription}
         title={title}
+        useTooltip
       />
     </Box>
   )
diff --git a/src/components/title-with-description/TitleWithDescription.tsx b/src/components/title-with-description/TitleWithDescription.tsx
index 8fceb4d8e..8279da4d8 100644
--- a/src/components/title-with-description/TitleWithDescription.tsx
+++ b/src/components/title-with-description/TitleWithDescription.tsx
@@ -5,7 +5,6 @@ import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 
 import { styles } from '~/components/title-with-description/TitleWithDescription.styles'
-import { ComponentEnum } from '~/types'
 
 interface TitleWithDescriptionProps {
   title: string | ReactElement
@@ -15,31 +14,37 @@ interface TitleWithDescriptionProps {
     title?: SxProps
     description?: SxProps
   }
+  useTooltip?: boolean
 }
 
 const TitleWithDescription = ({
   title,
   description,
-  style = styles
+  style = styles,
+  useTooltip = false
 }: TitleWithDescriptionProps) => {
   const [tooltipVisible, setTooltipVisible] = useState<boolean>(false)
 
   const handleTooltip = () => setTooltipVisible((prevState) => !prevState)
-
-  return (
-    <Box sx={style.wrapper}>
-      <Typography sx={style.title}>{title}</Typography>
-      <Tooltip open={tooltipVisible} placement='bottom' title={description}>
-        <Typography
-          component={ComponentEnum.Span}
-          onClick={handleTooltip}
-          sx={style.description}
-        >
-          {description}
-        </Typography>
-      </Tooltip>
-    </Box>
-  )
+  if (useTooltip) {
+    return (
+      <Box sx={style.wrapper}>
+        <Typography sx={style.title}>{title}</Typography>
+        <Tooltip open={tooltipVisible} placement='bottom' title={description}>
+          <Typography onClick={handleTooltip} sx={style.description}>
+            {description}
+          </Typography>
+        </Tooltip>
+      </Box>
+    )
+  } else {
+    return (
+      <Box sx={style.wrapper}>
+        <Typography sx={style.title}>{title}</Typography>
+        <Typography sx={style.description}>{description}</Typography>
+      </Box>
+    )
+  }
 }
 
 export default TitleWithDescription