diff --git a/src/atoms/Icons/Remote.tsx b/src/atoms/Icons/Remote.tsx
new file mode 100644
index 000000000..48abac016
--- /dev/null
+++ b/src/atoms/Icons/Remote.tsx
@@ -0,0 +1,14 @@
+import { Base, BaseProps } from './Base'
+
+export function Remote(props: BaseProps): JSX.Element {
+ return (
+
+
+
+ )
+}
+
+Remote.displayName = 'Remote'
diff --git a/src/atoms/Icons/Time.tsx b/src/atoms/Icons/Time.tsx
new file mode 100644
index 000000000..353012cb3
--- /dev/null
+++ b/src/atoms/Icons/Time.tsx
@@ -0,0 +1,14 @@
+import { Base, BaseProps } from './Base'
+
+export function Time(props: BaseProps): JSX.Element {
+ return (
+
+
+
+ )
+}
+
+Time.displayName = 'Time'
diff --git a/src/atoms/Icons/index.tsx b/src/atoms/Icons/index.tsx
index 77b57493c..b5c97b413 100644
--- a/src/atoms/Icons/index.tsx
+++ b/src/atoms/Icons/index.tsx
@@ -11,7 +11,9 @@ export * from './GoBack'
export * from './Multimedia'
export * from './Loader'
export * from './Profile'
+export * from './Remote'
export * from './Schedule'
+export * from './Time'
export * from './TinyAlertInfo'
export * from './TinyAlertError'
export * from './TinyAlertWarning'
diff --git a/src/documentation/pages/Organisms/CalendarDropdown.tsx b/src/documentation/pages/Organisms/CalendarDropdown.tsx
index 90580aa16..e69a5d92b 100644
--- a/src/documentation/pages/Organisms/CalendarDropdown.tsx
+++ b/src/documentation/pages/Organisms/CalendarDropdown.tsx
@@ -271,7 +271,7 @@ const events = [
start: '2027-01-01T02:59:00.000Z',
end: '2027-01-01T03:59:00.000Z',
duration_in_minutes: 60,
- type: 'answers-schedule-deadline',
+ type: 'cv-events',
id_resource: 853909,
associated_resource: {
id: 1,
@@ -299,7 +299,7 @@ const events = [
start: '2027-01-01T02:59:00.000Z',
end: '2027-01-01T03:59:00.000Z',
duration_in_minutes: 60,
- type: 'answers-schedule-deadline',
+ type: 'in-person',
id_resource: 848781,
associated_resource: {
id: 1,
diff --git a/src/documentation/pages/Organisms/EventsList.tsx b/src/documentation/pages/Organisms/EventsList.tsx
index 8a23ffa34..36efec0f2 100644
--- a/src/documentation/pages/Organisms/EventsList.tsx
+++ b/src/documentation/pages/Organisms/EventsList.tsx
@@ -80,6 +80,7 @@ export const EventsListPage = (): JSX.Element => {
type="in-person"
showCourse
courseName="[Pruebas TI] - Herramientas para la Gestión Estratégica de Procesos"
+ duration={40}
/>
@@ -123,6 +124,7 @@ interface IEventList {
color?: string // Color del curso asociado
day: string // Día de la semana
date: string // Fecha
+ duration_in_minutes?: number // Duración del evento en minutos
time: string // Hora
name: string // Nombre del evento
hasNotification?: boolean // Indica si el evento tiene notificación
diff --git a/src/molecules/Buttons/BtnTertiary.tsx b/src/molecules/Buttons/BtnTertiary.tsx
index c32099130..6a095ad7b 100644
--- a/src/molecules/Buttons/BtnTertiary.tsx
+++ b/src/molecules/Buttons/BtnTertiary.tsx
@@ -11,6 +11,8 @@ import {
Multimedia,
AcademicRecord,
Download,
+ Time,
+ Remote,
} from '@/atoms/Icons'
type XOR = T | U extends object
@@ -31,6 +33,8 @@ export interface propsTertiaryBtn {
| 'multimedia'
| 'record'
| 'download'
+ | 'time'
+ | 'remote'
| 'noIcon'
m?: string
onClick?: (e: React.MouseEvent) => void
@@ -90,6 +94,8 @@ export function BtnTertiary({
multimedia: ,
password: ,
record: ,
+ time: ,
+ remote: ,
noIcon: <>>,
}
diff --git a/src/organisms/Calendar/Dropdown/CalendarDropdown/Components/EventsGroup.tsx b/src/organisms/Calendar/Dropdown/CalendarDropdown/Components/EventsGroup.tsx
index 07f14aa6b..78aa75efc 100644
--- a/src/organisms/Calendar/Dropdown/CalendarDropdown/Components/EventsGroup.tsx
+++ b/src/organisms/Calendar/Dropdown/CalendarDropdown/Components/EventsGroup.tsx
@@ -69,6 +69,7 @@ export const EventsGroup = ({
courseName={event.course.name}
day={event.formatedDate.day}
date={event.formatedDate.date}
+ duration={event.duration_in_minutes}
time={event.formatedDate.time}
color={
event.course_id && colors?.[event.course_id]
diff --git a/src/organisms/Calendar/Dropdown/types.d.ts b/src/organisms/Calendar/Dropdown/types.d.ts
index 31d67607f..4db64c141 100644
--- a/src/organisms/Calendar/Dropdown/types.d.ts
+++ b/src/organisms/Calendar/Dropdown/types.d.ts
@@ -18,6 +18,7 @@ export interface Event {
associated_resource: AssociatedResource
course: Course
course_id: number
+ duration_in_minutes?: number
end: string
start: string
formatedDate: FormattedDate
diff --git a/src/organisms/Calendar/EventsList/EventsList.test.tsx b/src/organisms/Calendar/EventsList/EventsList.test.tsx
index e6cdec97b..5b1defe83 100644
--- a/src/organisms/Calendar/EventsList/EventsList.test.tsx
+++ b/src/organisms/Calendar/EventsList/EventsList.test.tsx
@@ -1,10 +1,14 @@
import { ChakraProvider } from '@chakra-ui/react'
import { render, RenderResult, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
+import { ComponentProps } from 'react'
import { EventsList } from './EventsList'
-const renderComponent = (onClick?: () => void): RenderResult =>
+const renderComponent = (
+ onClick?: () => void,
+ props?: Partial>
+): RenderResult =>
render(
void): RenderResult =>
text="Curso"
time="19:00 hrs."
type="in-person"
+ {...props}
/>
)
@@ -39,4 +44,24 @@ describe('EventsList', () => {
expect(screen.getByText('Evento demo')).toBeInTheDocument()
})
+
+ it('renders duration for online or in-person events with positive minutes', () => {
+ const { container } = renderComponent(undefined, { duration: 40 })
+
+ expect(screen.getByText('Link clase online')).toBeInTheDocument()
+ expect(container).toHaveTextContent(/40\s*min/)
+ })
+
+ it('does not render duration when minutes are zero', () => {
+ renderComponent(undefined, { duration: 0 })
+
+ expect(screen.queryByText('Duración:')).not.toBeInTheDocument()
+ })
+
+ it('does not render course text for cv-events', () => {
+ renderComponent(undefined, { type: 'cv-events' })
+
+ expect(screen.queryByText('Curso:')).not.toBeInTheDocument()
+ expect(screen.getByText('Curso demo')).toBeInTheDocument()
+ })
})
diff --git a/src/organisms/Calendar/EventsList/EventsList.tsx b/src/organisms/Calendar/EventsList/EventsList.tsx
index 2b704e575..1d08b2863 100644
--- a/src/organisms/Calendar/EventsList/EventsList.tsx
+++ b/src/organisms/Calendar/EventsList/EventsList.tsx
@@ -1,3 +1,4 @@
+import { Remote, Time } from '@/atoms/Icons'
import { Box } from '@chakra-ui/react'
import { vars } from '@theme'
@@ -8,6 +9,7 @@ export interface IEventList {
courseName?: string
day: string
date: string
+ duration?: number
name: string
hasNotification?: boolean
onClick?: () => void
@@ -24,6 +26,7 @@ export const EventsList = ({
color,
day,
date,
+ duration,
name,
hasNotification,
onClick,
@@ -38,6 +41,9 @@ export const EventsList = ({
const hoverBg = vars('colors-neutral-cultured2') ?? '#F8F8F8'
const isClickable = Boolean(onClick)
+ const showEventDuration =
+ ['online', 'in-person'].includes(type) && duration !== undefined && duration > 0
+
const initOrEnd = [
'end-course',
'init-course',
@@ -55,11 +61,20 @@ export const EventsList = ({
const detailTextStyle = {
color: vars('colors-neutral-gray') ?? '#808080',
fontSize: '14px',
- display: 'inline',
+ alignItems: 'center',
+ display: 'flex',
gap: '4px',
lineHeight: 'normal',
}
+ const eventIconStyle = {
+ alignItems: 'center',
+ display: 'inline-flex',
+ height: '24px',
+ justifyContent: 'center',
+ minWidth: '16px',
+ }
+
return (
- {text ? `${text}:` : 'Curso:'} {courseName}
+ {type === 'cv-events' ? <>> : {text ? `${text}:` : 'Curso:'}}{' '}
+ {courseName}
+
+ )}
+
+ {showEventDuration && (
+
+
+
+
+
+ Link clase online
+
+
+
+
+
+ {duration} min
+
)}