fix(PDYE-1297): reemplazo de boton dropdown calendario por nuevo comp… (#727)

* fix(PDYE-1297): reemplazo de boton dropdown calendario por nuevo componente

* fix(PDYE-1297): tooltip

---------

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

Author: JaviMunita

src/documentation/pages/Organisms/CalendarDropdown.tsx

@@ -22,10 +22,10 @@ export const CalendarDropdownPage = (): JSX.Element => {
       </MyText>
 
       <Box
-        bg={vars('colors-neutral-darkCharcoal')}
+        bg="rgb(34, 34, 34)"
         border={`1px solid ${vars('colors-neutral-platinum')}`}
         display="flex"
-        justifyContent="end"
+        justifyContent="center"
         p="10px"
       >
         <CalendarDropdown

src/molecules/NavBarButtons/NavBarButton.tsx

@@ -5,6 +5,14 @@ import { HelpIcon } from '@/molecules/NavBarButtons/Icons/HelpIcon'
 import { CalendarButtonIcon } from './Icons/CalendarButtonIcon'
 import { Accessibility } from '@/atoms/Icons/Accessibility'
 
+/**
+ * Componente que muestra botones de la barra de navegación. Recibe los siguientes props:
+ * @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 {
   buttonName?: string
   onlyLink?: boolean

src/molecules/Tooltip/NewTooltip.tsx

@@ -11,6 +11,7 @@ interface TooltipProps {
   placement?: PlacementWithLogical
   isOpen?: boolean | undefined
   sx?: CSSObject | undefined
+  transform?: string
 }
 
 export const NewTooltip: FC<TooltipProps> = ({
@@ -23,6 +24,7 @@ export const NewTooltip: FC<TooltipProps> = ({
   placement = 'bottom',
   isOpen,
   sx,
+  transform,
 }) => {
   return (
     <Tooltip
@@ -35,6 +37,7 @@ export const NewTooltip: FC<TooltipProps> = ({
         fontWeight: '400',
         maxWidth: maxWidth,
         padding: '8px',
+        transform: transform ?? '',
         '.chakra-tooltip__arrow': {
           bg: `${vars('colors-neutral-darkCharcoal')} !important`,
         },

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

@@ -73,7 +73,7 @@ export const CalendarDropdownContainer = ({
     <Box
       zIndex={4}
       className={`calendarDropdown ${hasNew && !onlyToCalendar ? 'hasNew' : ''}`}
-      width="30px"
+      width="fit-content"
       height="30px"
       m={m}
       position="relative"
@@ -88,7 +88,7 @@ export const CalendarDropdownContainer = ({
           content: '""',
           display: isMenuOpen ? 'block' : 'none',
           height: '0',
-          left: '50%',
+          left: '14%',
           position: 'absolute',
           top: '30px',
           transform: 'translateX(-50%)',
@@ -146,7 +146,7 @@ export const CalendarDropdownContainer = ({
       <Menu autoSelect={false} onOpen={() => setMenuOpen(true)} onClose={onClose}>
         <>
           <GoToCalendar
-            text={text?.tooltip ?? 'Ir a Mi Calendario'}
+            text={text?.tooltip ?? 'Calendario'}
             tooltipDisabled={isTooltipDisabled}
             onlyToCalendar={onlyToCalendar}
             onClick={redirectToCalendar}

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

@@ -1,8 +1,7 @@
 import { MenuButton } from '@chakra-ui/react'
-import { vars } from '@theme'
 
-import { CalendarButtonIcon } from '../../../../../molecules/NavBarButtons/Icons/CalendarButtonIcon'
-import { NewTooltip } from '@/molecules'
+import { vars } from '@theme'
+import { NavBarButton, NewTooltip } from '@/molecules'
 
 interface IGoToCalendar {
   text: string
@@ -18,39 +17,39 @@ export const GoToCalendar = ({
   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 0" isDisabled={tooltipDisabled}>
+    <NewTooltip
+      label={text ?? 'Calendario'}
+      m="2px 0 0 -59px"
+      isDisabled={tooltipDisabled}
+      transform="translateX(-10px) !important"
+    >
       <MenuButton
         onClick={() => onlyToCalendar && onClick && onClick()}
-        background={vars('colors-main-blueGrey') ?? '#60798E'}
-        border="1px solid transparent"
-        borderRadius="100%"
-        height="30px !important"
-        width="30px !important"
-        padding="0 !important"
-        margin="0 !important"
         position="relative"
-        _active={{
-          bg: activeBg,
-          '&:hover': {
-            bg: activeBg,
-          },
-        }}
-        _hover={{
-          bg: 'rgba(96, 121, 142, 0.8)',
-        }}
         sx={{
-          '>span': {
-            display: 'grid',
-            alignContent: 'center',
-            h: '16px!important',
-            justifyItems: 'center',
-            lineHeight: '0',
+          _hover: {
+            '.icon': {
+              bg: hoverBg,
+            },
+            '.text': {
+              color: vars('colors-neutral-white'),
+            },
+          },
+
+          _active: {
+            '.icon': {
+              bg: onlyToCalendar ? hoverBg : activeBg,
+            },
+            '.text': {
+              color: vars('colors-neutral-white'),
+            },
           },
         }}
       >
-        <CalendarButtonIcon />
+        <NavBarButton type="calendar" onClick={() => {}} buttonName={text.toUpperCase()} />
       </MenuButton>
     </NewTooltip>
   )