fix(PDYE-1297): se quita tooltip (#728)

Co-authored-by: Javiera Munita <javiera.munita@eclass.cl>

Author: JaviMunita

src/molecules/NavBarButtons/NavBarButton.tsx

@@ -7,20 +7,28 @@ import { Accessibility } from '@/atoms/Icons/Accessibility'
 
 /**
  * Componente que muestra botones de la barra de navegación. Recibe los siguientes props:
+ * @param {('button' | 'a' | 'div')} [as='button'] - Tipo de elemento HTML que se renderiza. Por defecto es un botón.
  * @param {string} [buttonName] - Nombre del botón. Si no se proporciona, se usa un valor predeterminado según el tipo de botón.
  * @param {boolean} [onlyLink] - Si es `true`, el botón no ejecuta ninguna acción al hacer clic, solo actúa como un enlace.
  * @param {function} onClick - Función que se ejecuta al hacer clic en el botón.
  * @param {'calendar' | 'help' | 'accessibility'} [type] - Tipo de botón que determina el icono y el texto a mostrar.
  */
 
 export interface ButtonProps {
+  as?: 'button' | 'a' | 'div'
   buttonName?: string
   onlyLink?: boolean
-  onClick: () => void
+  onClick?: () => void
   type: 'calendar' | 'help' | 'accessibility'
 }
 
-export const NavBarButton = ({ buttonName, onlyLink, onClick, type }: ButtonProps): JSX.Element => {
+export const NavBarButton = ({
+  as = 'button',
+  buttonName,
+  onlyLink,
+  onClick,
+  type,
+}: ButtonProps): JSX.Element => {
   const buttonType = {
     accessibility: {
       icon: <Accessibility />,
@@ -49,7 +57,8 @@ export const NavBarButton = ({ buttonName, onlyLink, onClick, type }: ButtonProp
 
   return (
     <Box
-      as="button"
+      as={as}
+      className="nav-bar-button"
       id={isAccessibility ? 'UserWayButton' : ''}
       onClick={isAccessibility ? triggerWidget : onClick}
       sx={{

src/organisms/Calendar/Dropdown/CalendarDropdown/CalendarDropdownContainer.tsx

@@ -22,19 +22,8 @@ export const CalendarDropdownContainer = ({
   const [isMobile] = useMediaQuery('(max-width: 577px)')
   const { closeAndMarkSeen, empty, hasNew, hasMoreNext, ...all } = useParseEvents(events, now)
 
-  const [isTooltipDisabled, setTooltipDisabled] = useState(false)
   const [isMenuOpen, setMenuOpen] = useState(false)
 
-  // Resuelve tooltip que se mantiene visible al cerrar el menu
-  useEffect(() => {
-    if (isMenuOpen) {
-      setTooltipDisabled(true)
-    } else {
-      const timer = setTimeout(() => setTooltipDisabled(false), 300)
-      return () => clearTimeout(timer)
-    }
-  }, [isMenuOpen])
-
   // Función que oculta el contenido de fondo al abrir el menú en formato mobile.
   // Para el caso de v8 se usa el id del contenedor y para CV la clase.
   // En ambos casos es un cambio que se aplica sólo cuando el menú está abierto y en dispositivos móviles.
@@ -147,7 +136,6 @@ export const CalendarDropdownContainer = ({
         <>
           <GoToCalendar
             text={text?.tooltip ?? 'Calendario'}
-            tooltipDisabled={isTooltipDisabled}
             onlyToCalendar={onlyToCalendar}
             onClick={redirectToCalendar}
           />

src/organisms/Calendar/Dropdown/CalendarDropdown/Components/GoToCalendar.tsx

@@ -1,56 +1,43 @@
 import { MenuButton } from '@chakra-ui/react'
 
 import { vars } from '@theme'
-import { NavBarButton, NewTooltip } from '@/molecules'
+import { NavBarButton } from '@/molecules'
 
 interface IGoToCalendar {
   text: string
-  tooltipDisabled: boolean
   onlyToCalendar?: boolean
   onClick?: () => void
 }
 
-export const GoToCalendar = ({
-  text,
-  tooltipDisabled,
-  onlyToCalendar,
-  onClick,
-}: IGoToCalendar): JSX.Element => {
+export const GoToCalendar = ({ text, onlyToCalendar, onClick }: IGoToCalendar): JSX.Element => {
   const activeBg = vars('colors-main-deepSkyBlue') ?? '#0189FF'
   const hoverBg = 'rgba(96, 121, 142, 0.8)'
 
   return (
-    <NewTooltip
-      label={text ?? 'Calendario'}
-      m="2px 0 0 -59px"
-      isDisabled={tooltipDisabled}
-      transform="translateX(-10px) !important"
-    >
-      <MenuButton
-        onClick={() => onlyToCalendar && onClick && onClick()}
-        position="relative"
-        sx={{
-          _hover: {
-            '.icon': {
-              bg: hoverBg,
-            },
-            '.text': {
-              color: vars('colors-neutral-white'),
-            },
+    <MenuButton
+      onClick={() => onlyToCalendar && onClick && onClick()}
+      position="relative"
+      sx={{
+        _hover: {
+          '.icon': {
+            bg: hoverBg,
+          },
+          '.text': {
+            color: vars('colors-neutral-white'),
           },
+        },
 
-          _active: {
-            '.icon': {
-              bg: onlyToCalendar ? hoverBg : activeBg,
-            },
-            '.text': {
-              color: vars('colors-neutral-white'),
-            },
+        _active: {
+          '.icon': {
+            bg: onlyToCalendar ? hoverBg : activeBg,
           },
-        }}
-      >
-        <NavBarButton type="calendar" onClick={() => {}} buttonName={text.toUpperCase()} />
-      </MenuButton>
-    </NewTooltip>
+          '.text': {
+            color: vars('colors-neutral-white'),
+          },
+        },
+      }}
+    >
+      <NavBarButton as="div" type="calendar" buttonName={text.toUpperCase()} />
+    </MenuButton>
   )
 }