fix(PDYE-1230): evento con nombre unidad (#713)

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

Author: JaviMunita

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

@@ -58,7 +58,7 @@ export const EventsGroup = ({ title, events, text, colors }: IEventsGroupProps):
                 text={text}
                 type={event.type}
                 hasNotification={event.isNew}
-                showsCourseName
+                showCourse
               />
             </Box>
           )

src/organisms/Calendar/EventsList/EventsList.tsx

@@ -5,31 +5,34 @@ import { vars } from '@theme'
 
 import { NotificationIcon } from './NotificationIcon'
 
-// Nuevo componente que recibe el texto de día y hora en tres partes
 export interface IEventList {
   color?: string
   courseName?: string
   day: string
   date: string
+  name: string
   hasNotification?: boolean
-  showsCourseName?: boolean
+  showCourse?: boolean
+  showUnit?: boolean
   time: string
-  name: string
   text: string
   type: string
+  unitName?: string
 }
 
 export const EventsList = ({
   courseName,
   color,
   day,
   date,
+  name,
   hasNotification,
-  showsCourseName,
+  showCourse,
+  showUnit,
   time,
-  name,
   text,
   type,
+  unitName,
 }: IEventList): JSX.Element => {
   const [isMobile] = useMediaQuery('(max-width: 580px)')
   const border = `1px solid ${vars('colors-neutral-platinum') ?? '#E8E8E8'}`
@@ -48,6 +51,14 @@ export const EventsList = ({
     lineHeight: '100%',
   }
 
+  const detailTextStyle = {
+    color: vars('colors-neutral-gray') ?? '#808080',
+    fontSize: '14px',
+    display: 'flex',
+    gap: '4px',
+    lineHeight: 'normal',
+  }
+
   return (
     <Box className="eventsList" borderTop={border} p="16px 24px" display="flex" gap="12px">
       {!isMobile && (
@@ -75,7 +86,7 @@ export const EventsList = ({
         </Box>
       )}
 
-      <Box display="flex" flexDirection="column" gap="8px">
+      <Box display="flex" flexDirection="column" gap="8px" w="100%">
         <Box
           lineHeight="21px"
           display="flex"
@@ -106,23 +117,25 @@ export const EventsList = ({
           </Box>
         )}
 
-        {showsCourseName && !initOrEnd && (
-          <Box display="flex" gap="4px" alignItems="center">
+        {showCourse && !initOrEnd && (
+          <Box display="flex" gap="4px" alignItems="baseline">
             {isMobile && <Box height="10px" width="10px" bg={color} borderRadius="50%" />}
 
-            <Box
-              as="span"
-              color={vars('colors-neutral-gray') ?? '#808080'}
-              fontSize="14px"
-              display="flex"
-              alignItems="center"
-              gap="4px"
-              lineHeight="normal"
-            >
+            <Box as="span" sx={detailTextStyle}>
               <strong>{text ? `${text}:` : 'Curso:'}</strong> {courseName}
             </Box>
           </Box>
         )}
+
+        {showUnit && !initOrEnd && (
+          <Box display="flex" gap="4px" alignItems="baseline">
+            {isMobile && <Box height="10px" width="10px" bg={color} borderRadius="50%" />}
+
+            <Box as="span" sx={detailTextStyle}>
+              {unitName}
+            </Box>
+          </Box>
+        )}
       </Box>
     </Box>
   )