Skip to content

Commit 3d6f49a

Browse files
author
Daniel Montoya
committed
Merge branch 'main' into fix/exports
2 parents 46522c6 + 7b6ae92 commit 3d6f49a

9 files changed

Lines changed: 141 additions & 79 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,24 @@
1+
# [1.52.0](https://github.com/eclass/ui-kit/compare/v1.51.21...v1.52.0) (2025-03-26)
2+
3+
4+
### Features
5+
6+
* **PDYE-1162:** eventos clickeables ([#701](https://github.com/eclass/ui-kit/issues/701)) ([0105d41](https://github.com/eclass/ui-kit/commit/0105d41f61763344ad2366b9f639df40eccfcf31))
7+
8+
## [1.51.21](https://github.com/eclass/ui-kit/compare/v1.51.20...v1.51.21) (2025-03-19)
9+
10+
11+
### Bug Fixes
12+
13+
* **PDYE-1146:** calendario, centrar flecha ([#700](https://github.com/eclass/ui-kit/issues/700)) ([eb7b434](https://github.com/eclass/ui-kit/commit/eb7b43433bf354224ac68a21eea900943aa8407c))
14+
15+
## [1.51.20](https://github.com/eclass/ui-kit/compare/v1.51.19...v1.51.20) (2025-03-19)
16+
17+
18+
### Bug Fixes
19+
20+
* **PDYE-1146:** calendario, muestro flecha en mobile ([#699](https://github.com/eclass/ui-kit/issues/699)) ([82196b2](https://github.com/eclass/ui-kit/commit/82196b24317576fa4c87c58092e8c8a5cb55b320))
21+
122
## [1.51.19](https://github.com/eclass/ui-kit/compare/v1.51.18...v1.51.19) (2025-03-13)
223

324

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@eclass/ui-kit",
33
"description": "Elementos UI transversales eClass",
4-
"version": "1.51.19",
4+
"version": "1.52.0",
55
"files": [
66
"dist"
77
],

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export const CalendarDropdown = ({
1010
loading,
1111
onlyToCalendar = false,
1212
m,
13+
clickEvent,
1314
}: ICalendarDropdown): JSX.Element => {
1415
const date = new Date(now)
1516
const isoDate = date.toISOString()
@@ -24,6 +25,7 @@ export const CalendarDropdown = ({
2425
redirectToCalendar={redirectToCalendar}
2526
text={text}
2627
onlyToCalendar={onlyToCalendar}
28+
clickEvent={clickEvent}
2729
/>
2830
)
2931
}

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

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export const CalendarDropdownContainer = ({
1818
courseColors,
1919
onlyToCalendar,
2020
m,
21+
clickEvent,
2122
}: ICalendarDropdown): JSX.Element => {
2223
const [isMobile] = useMediaQuery('(max-width: 577px)')
2324
const { closeAndMarkSeen, empty, hasNew, ...all } = useParseEvents(events, now)
@@ -80,18 +81,19 @@ export const CalendarDropdownContainer = ({
8081
sx={{
8182
// Pseudo-elemento para la flecha
8283
'&::after': {
84+
borderColor: `transparent transparent ${
85+
vars('colors-neutral-davysGrey') ?? '#5C5C5C'
86+
} transparent`,
87+
borderStyle: 'solid',
88+
borderWidth: '0 11px 10px 11px',
8389
content: '""',
90+
display: isMenuOpen ? 'block' : 'none',
91+
height: '0',
92+
left: '50%',
8493
position: 'absolute',
94+
top: '30px',
95+
transform: 'translateX(-50%)',
8596
width: '0',
86-
height: '0',
87-
borderColor: `transparent transparent ${vars('colors-neutral-davysGrey') ?? '#5C5C5C'}
88-
transparent`,
89-
borderStyle: 'solid',
90-
borderWidth: '0 11px 10px 11px',
91-
top: isMobile ? '30px' : '30px',
92-
right: isMobile ? '3px' : '15px',
93-
display: isMenuOpen && !isMobile ? 'block' : 'none',
94-
transform: isMobile ? 'none' : 'translateX(50%)',
9597
},
9698
// Se genera pseudo elemento que actúa como ícono de notificación
9799
'&.hasNew::before': {
@@ -107,28 +109,28 @@ export const CalendarDropdownContainer = ({
107109
zIndex: '1',
108110
},
109111
'>div': {
110-
position: isMobile ? 'fixed !important' : 'absolute',
111112
left: isMobile ? '0 !important' : 'auto',
113+
position: isMobile ? 'fixed !important' : 'absolute',
112114
top: isMobile ? '62px !important' : 'auto',
113115
transform: isMobile ? 'none !important' : 'translate3d(-409px, 38px, 0px) !important',
114116
},
115117

116118
'.chakra-menu__menu-list': {
117-
padding: '0',
118-
position: 'absolute',
119-
left: isMobile ? 'auto' : '-30px',
120-
top: isMobile ? '-6px !important' : 'auto',
121-
width: isMobile ? '100vw' : '500px',
122-
maxHeight: isMobile ? 'calc(100vh - 62px)' : 'auto',
123-
overflowY: isMobile ? 'auto' : 'hidden',
119+
animation: 'none !important',
124120
background: 'transparent',
125121
border: 'none',
126122
borderRadius: isMobile ? '0' : '10px',
127123
boxShadow: isMobile ? 'none' : 'rgba(47, 47, 47, 0.2) -1px 6px 40px 0px',
128-
animation: 'none !important',
129-
transition: 'none !important',
130-
transform: 'none !important',
124+
left: isMobile ? 'auto' : '-30px',
125+
maxHeight: isMobile ? 'calc(100vh - 62px)' : 'auto',
131126
opacity: '1 !important',
127+
overflowY: isMobile ? 'auto' : 'hidden',
128+
padding: '0',
129+
position: 'absolute',
130+
top: isMobile ? '-6px !important' : 'auto',
131+
transform: 'none !important',
132+
transition: 'none !important',
133+
width: isMobile ? '100vw' : '500px',
132134
},
133135
'.chakra-menu__group__title': {
134136
fontSize: '18px',
@@ -168,6 +170,7 @@ export const CalendarDropdownContainer = ({
168170
text={text}
169171
redirecToCalendar={redirectToCalendar}
170172
isMobile={isMobile}
173+
clickEvent={clickEvent}
171174
/>
172175
)}
173176
</Box>

‎src/organisms/Calendar/Dropdown/CalendarDropdown/Components/Events.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { BtnSecondary } from '@/molecules'
22
import { Box } from '@chakra-ui/react'
33
import { vars } from '@theme'
44

5-
import { Text, Event } from '../../types'
5+
import { Text, Event, ICalendarDropdown } from '../../types'
66
import { EventsGroup } from './EventsGroup'
77

88
interface IEventsProps {
@@ -15,6 +15,7 @@ interface IEventsProps {
1515
redirecToCalendar: () => void
1616
isMobile: boolean
1717
colors?: Record<string, string>
18+
clickEvent?: ICalendarDropdown['clickEvent']
1819
}
1920

2021
export const Events = ({
@@ -23,6 +24,7 @@ export const Events = ({
2324
redirecToCalendar,
2425
isMobile,
2526
colors,
27+
clickEvent,
2628
}: IEventsProps): JSX.Element => {
2729
const { today, tomorrow, next } = events
2830
return (
@@ -60,18 +62,21 @@ export const Events = ({
6062
text={text?.course ?? ''}
6163
title={text?.events?.today ?? 'Hoy'}
6264
events={today}
65+
clickEvent={clickEvent}
6366
/>
6467
<EventsGroup
6568
colors={colors}
6669
text={text?.course ?? ''}
6770
title={text?.events?.tomorrow ?? 'Mañana'}
6871
events={tomorrow}
72+
clickEvent={clickEvent}
6973
/>
7074
<EventsGroup
7175
colors={colors}
7276
text={text?.course ?? ''}
7377
title={text?.events?.next ?? 'Próximos'}
7478
events={next}
79+
clickEvent={clickEvent}
7580
/>
7681
</Box>
7782
)

‎src/organisms/Calendar/Dropdown/CalendarDropdown/Components/EventsGroup.tsx‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,29 @@
1-
import { EventsList } from '@/organisms/Calendar'
21
import { Box, MenuGroup } from '@chakra-ui/react'
2+
3+
import { EventsList } from '@/organisms/Calendar'
34
import { vars } from '@theme'
4-
import { Event } from '../../types'
5+
import { Event, ICalendarDropdown } from '../../types'
56

67
interface IEventsGroupProps {
78
title: string
89
events: Event[]
910
text: string
1011
colors?: Record<string, string>
12+
clickEvent?: ICalendarDropdown['clickEvent']
1113
}
1214

13-
export const EventsGroup = ({ title, events, text, colors }: IEventsGroupProps): JSX.Element => {
15+
export const EventsGroup = ({
16+
title,
17+
events,
18+
text,
19+
colors,
20+
clickEvent,
21+
}: IEventsGroupProps): JSX.Element => {
1422
if (!events || (events && events.length === 0)) return <></>
23+
24+
const handleClick = (event: Event): void => {
25+
clickEvent?.(event)
26+
}
1527
return (
1628
<Box
1729
className="calendar-events-group"
@@ -57,6 +69,7 @@ export const EventsGroup = ({ title, events, text, colors }: IEventsGroupProps):
5769
text={text}
5870
hasNotification={event.isNew}
5971
isDropdown
72+
clickEvent={() => handleClick(event)}
6073
/>
6174
</Box>
6275
)

‎src/organisms/Calendar/Dropdown/types.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,4 +49,5 @@ interface ICalendarDropdown {
4949
redirectToCalendar: () => void
5050
text?: Text
5151
onlyToCalendar?: boolean
52+
clickEvent?: (event: Event) => void
5253
}

‎src/organisms/Calendar/EventsList/EventsList.tsx‎

Lines changed: 70 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1+
import { Box } from '@chakra-ui/react'
2+
13
import { Calendar } from '@/atoms/Icons/Calendar'
24
import { Clock } from '@/atoms/Icons/Clock'
3-
import { Box } from '@chakra-ui/react'
45
import { vars } from '@theme'
5-
66
import { NotificationIcon } from './NotificationIcon'
7+
import { Ripples } from '@atoms'
78

89
export interface IEventList {
910
hasNotification?: boolean
@@ -14,6 +15,7 @@ export interface IEventList {
1415
text: string
1516
date: string
1617
hours: string
18+
clickEvent?: () => void
1719
}
1820

1921
export const EventsList = ({
@@ -25,64 +27,79 @@ export const EventsList = ({
2527
text,
2628
date,
2729
hours,
30+
clickEvent,
2831
}: IEventList): JSX.Element => {
2932
const border = `1px solid ${vars('colors-neutral-platinum') ?? '#E8E8E8'}`
3033

34+
const handleClick = (): void => clickEvent?.()
35+
3136
return (
32-
<Box className="eventsList" borderTop={border} padding="16px 24px">
33-
<Box display="flex" flexDirection="column" gap="8px">
34-
<Box
35-
lineHeight="21px"
36-
display="flex"
37-
justifyContent="space-between"
38-
alignItems="center"
39-
fontSize="16px"
40-
>
41-
{name} {hasNotification && <NotificationIcon />}
42-
</Box>
43-
<Box
44-
display="flex"
45-
lineHeight="19px"
46-
fontSize="14px"
47-
sx={{
48-
svg: {
49-
marginRight: '4px',
50-
},
51-
span: {
52-
verticalAlign: 'middle',
53-
},
54-
}}
55-
>
56-
<Box paddingRight="8px" borderRight={border}>
57-
<Calendar />
58-
<span>{date}</span>
37+
<Ripples>
38+
<Box
39+
className="eventsList"
40+
borderTop={border}
41+
padding="16px 24px"
42+
onClick={handleClick}
43+
cursor="pointer"
44+
bg={vars('colors-neutral-white') ?? '#fff'}
45+
_hover={{
46+
bg: vars('colors-neutral-cultured2') ?? '#F8F8F8',
47+
}}
48+
>
49+
<Box display="flex" flexDirection="column" gap="8px">
50+
<Box
51+
lineHeight="21px"
52+
display="flex"
53+
justifyContent="space-between"
54+
alignItems="center"
55+
fontSize="16px"
56+
>
57+
{name} {hasNotification && <NotificationIcon />}
5958
</Box>
60-
<Box paddingLeft="8px">
61-
<Clock />
62-
<span>{hours}</span>
63-
</Box>
64-
</Box>
65-
{isDropdown && (
66-
<Box display="flex" alignItems="center" gap="4px" lineHeight="19px">
67-
<Box
68-
alignSelf="flex-start"
69-
bg={color}
70-
borderRadius="50%"
71-
display="block"
72-
h="10px"
73-
mt="4px"
74-
maxH="10px"
75-
maxW="10px"
76-
minH="10px"
77-
minW="10px"
78-
w="10px"
79-
/>
80-
<Box as="span" color={vars('colors-neutral-gray') ?? '#808080'} fontSize="14px">
81-
<strong>{text ?? 'Curso'}:</strong> {courseName}
59+
<Box
60+
display="flex"
61+
lineHeight="19px"
62+
fontSize="14px"
63+
sx={{
64+
svg: {
65+
marginRight: '4px',
66+
},
67+
span: {
68+
verticalAlign: 'middle',
69+
},
70+
}}
71+
>
72+
<Box paddingRight="8px" borderRight={border}>
73+
<Calendar />
74+
<span>{date}</span>
75+
</Box>
76+
<Box paddingLeft="8px">
77+
<Clock />
78+
<span>{hours}</span>
8279
</Box>
8380
</Box>
84-
)}
81+
{isDropdown && (
82+
<Box display="flex" alignItems="center" gap="4px" lineHeight="19px">
83+
<Box
84+
alignSelf="flex-start"
85+
bg={color}
86+
borderRadius="50%"
87+
display="block"
88+
h="10px"
89+
mt="4px"
90+
maxH="10px"
91+
maxW="10px"
92+
minH="10px"
93+
minW="10px"
94+
w="10px"
95+
/>
96+
<Box as="span" color={vars('colors-neutral-gray') ?? '#808080'} fontSize="14px">
97+
<strong>{text ?? 'Curso'}:</strong> {courseName}
98+
</Box>
99+
</Box>
100+
)}
101+
</Box>
85102
</Box>
86-
</Box>
103+
</Ripples>
87104
)
88105
}

0 commit comments

Comments
 (0)