feat(organisms): indicadores en eventos tipo clases (#779)

Author: Jonathangarrido

src/atoms/Icons/Remote.tsx

@@ -0,0 +1,14 @@
+import { Base, BaseProps } from './Base'
+
+export function Remote(props: BaseProps): JSX.Element {
+  return (
+    <Base {...props} w="16px" h="16px" viewBox="0 0 16 16" title="remote">
+      <path
+        d="M15 11V4C15 2.864 14.136 2 13 2H3C1.864 2 1 2.864 1 4V11H0V12C0 13.105 0.895 14 2 14H14C15.105 14 16 13.105 16 12V11H15ZM3 4H13V11H3V4Z"
+        fill="currentColor"
+      />
+    </Base>
+  )
+}
+
+Remote.displayName = 'Remote'

src/atoms/Icons/Time.tsx

@@ -0,0 +1,14 @@
+import { Base, BaseProps } from './Base'
+
+export function Time(props: BaseProps): JSX.Element {
+  return (
+    <Base {...props} w="16px" h="16px" viewBox="0 0 16 16" title="Time">
+      <path
+        fill="currentColor"
+        d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H7V4h2v3h3v2z"
+      />
+    </Base>
+  )
+}
+
+Time.displayName = 'Time'

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'

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,

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}
         />
       </Box>
 
@@ -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

src/molecules/Buttons/BtnTertiary.tsx

@@ -11,6 +11,8 @@ import {
   Multimedia,
   AcademicRecord,
   Download,
+  Time,
+  Remote,
 } from '@/atoms/Icons'
 
 type XOR<T, U> = T | U extends object
@@ -31,6 +33,8 @@ export interface propsTertiaryBtn {
     | 'multimedia'
     | 'record'
     | 'download'
+    | 'time'
+    | 'remote'
     | 'noIcon'
   m?: string
   onClick?: (e: React.MouseEvent<HTMLElement>) => void
@@ -90,6 +94,8 @@ export function BtnTertiary({
     multimedia: <Multimedia color={colorIcon} />,
     password: <Password color={colorIcon} />,
     record: <AcademicRecord color={colorIcon} />,
+    time: <Time color={colorIcon} />,
+    remote: <Remote color={colorIcon} />,
     noIcon: <></>,
   }
 

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]

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

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<ComponentProps<typeof EventsList>>
+): RenderResult =>
   render(
     <ChakraProvider>
       <EventsList
@@ -18,6 +22,7 @@ const renderComponent = (onClick?: () => void): RenderResult =>
         text="Curso"
         time="19:00 hrs."
         type="in-person"
+        {...props}
       />
     </ChakraProvider>
   )
@@ -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()
+  })
 })

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 (
     <Box
       className="eventsList"
@@ -116,7 +131,30 @@ export const EventsList = ({
 
         {showCourse && !initOrEnd && (
           <Box as="span" sx={detailTextStyle}>
-            <strong>{text ? `${text}:` : 'Curso:'}</strong> {courseName}
+            {type === 'cv-events' ? <></> : <strong>{text ? `${text}:` : 'Curso:'}</strong>}{' '}
+            {courseName}
+          </Box>
+        )}
+
+        {showEventDuration && (
+          <Box display="flex" flexDirection="row" gap="8px" flexWrap="wrap">
+            <Box
+              as="span"
+              sx={detailTextStyle}
+              paddingRight="8px"
+              borderRight={`1px solid ${vars('colors-neutral-platinum')}`}
+            >
+              <Box as="span" sx={eventIconStyle}>
+                <Remote color={vars('colors-main-ziggurat')} />
+              </Box>
+              Link clase online
+            </Box>
+            <Box as="span" sx={detailTextStyle}>
+              <Box as="span" sx={eventIconStyle}>
+                <Time color={vars('colors-main-ziggurat')} />
+              </Box>
+              {duration} min
+            </Box>
           </Box>
         )}