Skip to content

Commit e65f005

Browse files
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>
1 parent a7ae45a commit e65f005

File tree

5 files changed

+42
-32
lines changed

5 files changed

+42
-32
lines changed

src/documentation/pages/Organisms/CalendarDropdown.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,10 @@ export const CalendarDropdownPage = (): JSX.Element => {
2222
</MyText>
2323

2424
<Box
25-
bg={vars('colors-neutral-darkCharcoal')}
25+
bg="rgb(34, 34, 34)"
2626
border={`1px solid ${vars('colors-neutral-platinum')}`}
2727
display="flex"
28-
justifyContent="end"
28+
justifyContent="center"
2929
p="10px"
3030
>
3131
<CalendarDropdown

src/molecules/NavBarButtons/NavBarButton.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,14 @@ import { HelpIcon } from '@/molecules/NavBarButtons/Icons/HelpIcon'
55
import { CalendarButtonIcon } from './Icons/CalendarButtonIcon'
66
import { Accessibility } from '@/atoms/Icons/Accessibility'
77

8+
/**
9+
* Componente que muestra botones de la barra de navegación. Recibe los siguientes props:
10+
* @param {string} [buttonName] - Nombre del botón. Si no se proporciona, se usa un valor predeterminado según el tipo de botón.
11+
* @param {boolean} [onlyLink] - Si es `true`, el botón no ejecuta ninguna acción al hacer clic, solo actúa como un enlace.
12+
* @param {function} onClick - Función que se ejecuta al hacer clic en el botón.
13+
* @param {'calendar' | 'help' | 'accessibility'} [type] - Tipo de botón que determina el icono y el texto a mostrar.
14+
*/
15+
816
export interface ButtonProps {
917
buttonName?: string
1018
onlyLink?: boolean

src/molecules/Tooltip/NewTooltip.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ interface TooltipProps {
1111
placement?: PlacementWithLogical
1212
isOpen?: boolean | undefined
1313
sx?: CSSObject | undefined
14+
transform?: string
1415
}
1516

1617
export const NewTooltip: FC<TooltipProps> = ({
@@ -23,6 +24,7 @@ export const NewTooltip: FC<TooltipProps> = ({
2324
placement = 'bottom',
2425
isOpen,
2526
sx,
27+
transform,
2628
}) => {
2729
return (
2830
<Tooltip
@@ -35,6 +37,7 @@ export const NewTooltip: FC<TooltipProps> = ({
3537
fontWeight: '400',
3638
maxWidth: maxWidth,
3739
padding: '8px',
40+
transform: transform ?? '',
3841
'.chakra-tooltip__arrow': {
3942
bg: `${vars('colors-neutral-darkCharcoal')} !important`,
4043
},

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ export const CalendarDropdownContainer = ({
7373
<Box
7474
zIndex={4}
7575
className={`calendarDropdown ${hasNew && !onlyToCalendar ? 'hasNew' : ''}`}
76-
width="30px"
76+
width="fit-content"
7777
height="30px"
7878
m={m}
7979
position="relative"
@@ -88,7 +88,7 @@ export const CalendarDropdownContainer = ({
8888
content: '""',
8989
display: isMenuOpen ? 'block' : 'none',
9090
height: '0',
91-
left: '50%',
91+
left: '14%',
9292
position: 'absolute',
9393
top: '30px',
9494
transform: 'translateX(-50%)',
@@ -146,7 +146,7 @@ export const CalendarDropdownContainer = ({
146146
<Menu autoSelect={false} onOpen={() => setMenuOpen(true)} onClose={onClose}>
147147
<>
148148
<GoToCalendar
149-
text={text?.tooltip ?? 'Ir a Mi Calendario'}
149+
text={text?.tooltip ?? 'Calendario'}
150150
tooltipDisabled={isTooltipDisabled}
151151
onlyToCalendar={onlyToCalendar}
152152
onClick={redirectToCalendar}

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

Lines changed: 26 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { MenuButton } from '@chakra-ui/react'
2-
import { vars } from '@theme'
32

4-
import { CalendarButtonIcon } from '../../../../../molecules/NavBarButtons/Icons/CalendarButtonIcon'
5-
import { NewTooltip } from '@/molecules'
3+
import { vars } from '@theme'
4+
import { NavBarButton, NewTooltip } from '@/molecules'
65

76
interface IGoToCalendar {
87
text: string
@@ -18,39 +17,39 @@ export const GoToCalendar = ({
1817
onClick,
1918
}: IGoToCalendar): JSX.Element => {
2019
const activeBg = vars('colors-main-deepSkyBlue') ?? '#0189FF'
20+
const hoverBg = 'rgba(96, 121, 142, 0.8)'
2121

2222
return (
23-
<NewTooltip label={text ?? 'Calendario'} m="2px 0 0 0" isDisabled={tooltipDisabled}>
23+
<NewTooltip
24+
label={text ?? 'Calendario'}
25+
m="2px 0 0 -59px"
26+
isDisabled={tooltipDisabled}
27+
transform="translateX(-10px) !important"
28+
>
2429
<MenuButton
2530
onClick={() => onlyToCalendar && onClick && onClick()}
26-
background={vars('colors-main-blueGrey') ?? '#60798E'}
27-
border="1px solid transparent"
28-
borderRadius="100%"
29-
height="30px !important"
30-
width="30px !important"
31-
padding="0 !important"
32-
margin="0 !important"
3331
position="relative"
34-
_active={{
35-
bg: activeBg,
36-
'&:hover': {
37-
bg: activeBg,
38-
},
39-
}}
40-
_hover={{
41-
bg: 'rgba(96, 121, 142, 0.8)',
42-
}}
4332
sx={{
44-
'>span': {
45-
display: 'grid',
46-
alignContent: 'center',
47-
h: '16px!important',
48-
justifyItems: 'center',
49-
lineHeight: '0',
33+
_hover: {
34+
'.icon': {
35+
bg: hoverBg,
36+
},
37+
'.text': {
38+
color: vars('colors-neutral-white'),
39+
},
40+
},
41+
42+
_active: {
43+
'.icon': {
44+
bg: onlyToCalendar ? hoverBg : activeBg,
45+
},
46+
'.text': {
47+
color: vars('colors-neutral-white'),
48+
},
5049
},
5150
}}
5251
>
53-
<CalendarButtonIcon />
52+
<NavBarButton type="calendar" onClick={() => {}} buttonName={text.toUpperCase()} />
5453
</MenuButton>
5554
</NewTooltip>
5655
)

0 commit comments

Comments
 (0)