feat(PCV-1094): se agrega la caja eventos (#638)

Co-authored-by: Daniel Montoya <[email protected]>
eclass · Oct 15, 2024 · 7885994 · 7885994
1 parent bbefc9d
commit 7885994
Show file tree

Hide file tree

Showing 14 changed files with 449 additions and 85 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="https://cdn-platform.eclass.com/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Documentacion ui-kit eclass</title>
   </head>

diff --git a/src/documentation/pages/Organisms/Events.tsx b/src/documentation/pages/Organisms/Events.tsx
@@ -1,33 +1,137 @@
 import { FC } from 'react'
 import { MyHeading, MyText, MyTittle, Code } from '@/documentation/components'
-// import { dataFake } from '@/organisms/CourseList/utils'
+import { Eventos } from '@/organisms/Events'
+import { Box } from '@chakra-ui/react'
 
-// const dataFakeEvents = []
+const dataFakeEvents = [
+  {
+    typeEvent: 'LARGE_EVENTS', // Nombre del tipo de evento
+    itemsEvent: {
+      id: '1', // ID Secuencial
+      eventTitle: 'Resuelve tus dudas en vivo | Martes',
+      startDate: '04/27/2024', // Si llega en el formato mejor
+      startTime: '14:00 hrs', // puede llegar la hora sola o con el texto
+      buttonInfo: 'Ver información del evento',
+      redirect: 'https://.....', // Enlace de redirección al evento o ruta
+      eventImage:
+        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT76y4DAhqWAlCspmGYWcbxSDnLw3p1FzJQKA&usqp=CAU', // Imagen del evento
+      isMobile: false, // Si es mobile o no
+    },
+  },
+  {
+    typeEvent: 'LARGE_EVENTS', // Nombre del tipo de evento
+    itemsEvent: {
+      id: '1', // ID Secuencial
+      eventTitle: 'Resuelve tus dudas en vivo | Martes',
+      startDate: '04/27/2024', // Si llega en el formato mejor
+      startTime: '14:00 hrs', // puede llegar la hora sola o con el texto
+      buttonInfo: 'Ver información del evento',
+      redirect: 'https://.....', // Enlace de redirección al evento o ruta
+      eventImage:
+        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT76y4DAhqWAlCspmGYWcbxSDnLw3p1FzJQKA&usqp=CAU', // Imagen del evento
+      isMobile: true, // Si es mobile o no
+    },
+  },
+  {
+    typeEvent: 'SMALL_EVENTS', // Nombre del tipo de evento
+    itemsEvent: {
+      id: '1', // ID Secuencial
+      eventTitle: 'Resuelve tus dudas en vivo | Martes',
+      startDate: '04/27/2024', // Si llega en el formato mejor
+      startTime: '14:00 hrs', // puede llegar la hora sola o con el texto
+      buttonInfo: 'Ver información del evento',
+      redirect: 'https://.....', // Enlace de redirección al evento o ruta
+      eventImage:
+        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT76y4DAhqWAlCspmGYWcbxSDnLw3p1FzJQKA&usqp=CAU', // Imagen del evento
+      isMobile: true, // Si es mobile o no
+    },
+  },
+]
 
-const Events: FC = () => {
+const EventsPage: FC = () => {
   return (
     <>
-      <MyHeading>Events</MyHeading>
+      <MyHeading>Eventos</MyHeading>
       <MyText>
-        Las alertas embebidas se utiliza en contextos en los que es necesario que el usuario pueda
-        visualizar cada vez que lo necesite el feedback o estado de una solicitud al sistema
-        <i>
-          (Ej: El estado de una clase en vivo ya agendada, alertar sobre condiciones para repetir
-          una evaluación, etc)
-        </i>
+        Los eventos estan contenidos en una nueva caja, la cual cuenta con 3 disenios distintos
+        agrupados en dos tipos
+        <strong> LARGE_EVENTS</strong> y <strong> SMALL_EVENTS.</strong>
+        LARGE_EVENTS: contiene un responsive para mobile y desktop.
       </MyText>
-      <Code text="import { Alert } from '@eclass/ui-kit'" />
+      <MyTittle>Types Definidos</MyTittle>
+      <MyText>El componente Eventos requiere el siguiente typado:</MyText>
 
+      <Code
+        text={`export interface EventosProps {
+typeEvent: 'SMALL_EVENTS' | 'LARGE_EVENTS' | string // Tipo de caja
+isMobile?: boolean // Si es mobile o no
+itemsEvent: ItemsEventsProps // Objeto de eventos
+}
+
+export interface ItemsEventsProps {
+id: string // Key para ordenar
+eventTitle: string // Titulo del evento
+startDate: string // Fecha de inicio del evento
+startTime: string // Hora de inicio del evento
+buttonInfo: string // Texto del boton
+redirect: string // Link de redireccion
+eventImage: string // Imagen del evento
+targetBlank?: boolean // Si abre en nueva pestaña
+isMobile?: boolean // Si es mobile o no
+}
+
+`}
+      />
+      <i>Se deja en espanol debido a que Event es una funcion nativa</i>
+      <Code text="import { Eventos } from '@eclass/ui-kit'" />
+      <Eventos {...dataFakeEvents[2]} />
       <MyTittle>Estados</MyTittle>
-      <MyText>Existen 4 posibles estados que definen el ícono y color de la alerta.</MyText>
+      <MyText>Existen 3 posibles estados que definen el diseño del evento.</MyText>
+      <Box display="grid" gap="16px">
+        <MyText>
+          <strong>LARGE_EVENTS</strong>
+        </MyText>
+        <Eventos {...dataFakeEvents[0]} />
+        <MyText>
+          <strong>LARGE_EVENTS para Mobile</strong>
+        </MyText>
+        <Eventos {...dataFakeEvents[1]} />
+        <MyText>
+          <strong>SMALL_EVENTS o por defecto</strong>
+        </MyText>
+        <Eventos {...dataFakeEvents[2]} />
+      </Box>
+      <MyTittle>Modo de uso</MyTittle>
+      <MyText>
+        El Evento se utiliza de manera bastante simple siguiendo el siguiente ejemplo:
+      </MyText>
       <Code
-        text='<Alert state="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Alert>
-            <Alert state="success">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Alert>
-            <Alert state="error">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Alert>
-            <Alert state="warning">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Alert>'
+        text="// importamos el componente
+import { Eventos } from '@eclass/ui-kit'
+//Definimos las propieaddes para el Evento
+const dataFakeEvents = {
+{
+typeEvent: 'LARGE_EVENTS',
+itemsEvent: {
+id: '1',
+eventTitle: 'Resuelve tus dudas en vivo | Martes',
+startDate: '04/27/2024',
+startTime: '14:00 hrs',
+buttonInfo: 'Ver información del evento',
+redirect: 'https://.....',
+eventImage:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT76y4DAhqWAlCspmGYWcbxSDnLw3p1FzJQKA&usqp=CAU',
+isMobile: false,
+},
+}
+}
+
+// Utilizamos el componente
+<Eventos {...dataFakeEvents} />
+"
       />
+      <Eventos {...dataFakeEvents[0]} />
     </>
   )
 }
 
-export default Events
+export default EventsPage
diff --git a/src/documentation/pages/Organisms/Resources.tsx b/src/documentation/pages/Organisms/Resources.tsx
@@ -1,4 +1,5 @@
 import { FC } from 'react'
+import { Box } from '@chakra-ui/react'
 import { MyHeading, MyText, MyTittle, MyLink, Code } from '@/documentation/components'
 import { Resources } from '@/organisms/Resources'
 
@@ -10,7 +11,6 @@ const dataFakeEvents = [
     resourceDetail: 'Fechas importantes de tus cursos',
     resourceLink: 'https://www.oas.org/juridico/spanish/mesicic2_col_ley_30_sp.pdf',
     resourceTextDownload: 'Descargar',
-    resourceNameFile: 'Calendario semestral',
   },
   {
     id: '1',
@@ -19,7 +19,6 @@ const dataFakeEvents = [
     resourceDetail: 'Fechas importantes de tus cursos',
     resourceLink: 'https://www.oas.org/juridico/spanish/mesicic2_col_ley_30_sp.pdf',
     resourceTextDownload: 'Descargar',
-    resourceNameFile: 'Calendario semestral',
   },
 ]
 
@@ -28,7 +27,7 @@ const ResourcesPage: FC = () => {
     <>
       <MyHeading>Resource</MyHeading>
       <MyText>
-        Los recursos son casos que se usan para mostrar información relevante para el usuario del
+        Los recursos son cajas que se usan para mostrar información relevante para el usuario del
         recurso disponible para descargar, estos estan en diferentes formatos y estan adaptados para
         que segun sea el formato definido en{' '}
         <MyLink href="https://www.figma.com/design/DFrZMrJAQIQdzJnIYxD5Qm/Cajas-curso-CV%2FV8?node-id=2871-5674&node-type=frame&t=Yckoe1FoUThTM8DA-0">
@@ -55,9 +54,10 @@ const ResourcesPage: FC = () => {
 `}
       />
       <Code text="import { Resources } from '@eclass/ui-kit'" />
-
-      <Resources {...dataFakeEvents[0]} />
-      <Resources {...dataFakeEvents[1]} />
+      <Box display="flex" gap="8px">
+        <Resources {...dataFakeEvents[0]} />
+        <Resources {...dataFakeEvents[1]} />
+      </Box>
 
       <MyTittle>Tipos de iconos en los recursos disponibles</MyTittle>
       <MyText>

diff --git a/src/organisms/Events/Eventos.tsx b/src/organisms/Events/Eventos.tsx
@@ -0,0 +1,12 @@
+import { FC } from 'react'
+import { EventosProps } from './EventsTypes'
+import { SmallBox, LargeBox } from './TypeBox'
+
+export const Eventos: FC<EventosProps> = ({ typeEvent, itemsEvent }) => {
+  // Retornamos tipo de caja evento
+  if (typeEvent === 'LARGE_EVENTS') {
+    return <LargeBox {...itemsEvent} />
+  } else {
+    return <SmallBox {...itemsEvent} />
+  }
+}
diff --git a/src/organisms/Events/Events.tsx b/src/organisms/Events/Events.tsx
diff --git a/src/organisms/Events/EventsTypes.d.ts b/src/organisms/Events/EventsTypes.d.ts
@@ -0,0 +1,17 @@
+export interface EventosProps {
+  typeEvent: 'SMALL_EVENTS' | 'LARGE_EVENTS' | string
+  isMobile?: boolean
+  itemsEvent: ItemsEventsProps
+}
+
+export interface ItemsEventsProps {
+  id: string
+  eventTitle: string
+  startDate: string
+  startTime: string
+  buttonInfo: string
+  redirect: string
+  eventImage: string
+  targetBlank?: boolean
+  isMobile?: boolean
+}
diff --git a/src/organisms/Events/Icons/Calendar.tsx b/src/organisms/Events/Icons/Calendar.tsx
@@ -0,0 +1,29 @@
+import { FC } from 'react'
+import { Icon } from '@chakra-ui/react'
+
+interface CalendarProps {
+  color?: string
+}
+
+export const Calendar: FC<CalendarProps> = ({ color = 'white' }) => {
+  return (
+    <Icon
+      width="16px"
+      height="17px"
+      viewBox="0 0 16 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15 2.5H13V0.5H11V2.5H9V0.5H7V2.5H5V0.5H3V2.5H1C0.447 2.5 0 2.947 0 3.5V15.5C0 16.053 0.447 16.5 1 16.5H15C15.553 16.5 16 16.053 16 15.5V3.5C16 2.947 15.553 2.5 15 2.5ZM14 14.5H2V5.5H14V14.5Z"
+        fill={color}
+      />
+      <path d="M6 7.5H4V9.5H6V7.5Z" fill={color} />
+      <path d="M9 7.5H7V9.5H9V7.5Z" fill={color} />
+      <path d="M6 10.5H4V12.5H6V10.5Z" fill={color} />
+      <path d="M9 10.5H7V12.5H9V10.5Z" fill={color} />
+      <path d="M12 7.5H10V9.5H12V7.5Z" fill={color} />
+      <path d="M12 10.5H10V12.5H12V10.5Z" fill={color} />
+    </Icon>
+  )
+}
diff --git a/src/organisms/Events/Icons/Clock.tsx b/src/organisms/Events/Icons/Clock.tsx
@@ -0,0 +1,25 @@
+import { FC } from 'react'
+import { Icon } from '@chakra-ui/react'
+
+interface ClockProps {
+  color?: string
+}
+
+export const Clock: FC<ClockProps> = ({ color = 'white' }) => {
+  return (
+    <Icon
+      width="16px"
+      height="17px"
+      viewBox="0 0 16 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 8.5C0 4.1 3.6 0.5 8 0.5C12.4 0.5 16 4.1 16 8.5C16 12.9 12.4 16.5 8 16.5C3.6 16.5 0 12.9 0 8.5ZM7 9.5H12V7.5H9V4.5H7V9.5Z"
+        fill={color}
+      />
+    </Icon>
+  )
+}
diff --git a/src/organisms/Events/Icons/index.ts b/src/organisms/Events/Icons/index.ts
@@ -0,0 +1,2 @@
+export * from './Calendar'
+export * from './Clock'
diff --git a/src/organisms/Events/TypeBox/LargeBox.tsx b/src/organisms/Events/TypeBox/LargeBox.tsx
@@ -0,0 +1,83 @@
+import { FC } from 'react'
+import { Box, Flex, Text, Link } from '@chakra-ui/react'
+import { ItemsEventsProps } from '../EventsTypes'
+import { vars } from '@/theme'
+import { Calendar, Clock } from '../Icons'
+
+export const LargeBox: FC<ItemsEventsProps> = ({
+  id,
+  eventTitle,
+  startDate,
+  startTime,
+  buttonInfo,
+  redirect,
+  eventImage,
+  targetBlank,
+  isMobile,
+}) => {
+  return (
+    <Link
+      key={id}
+      href={redirect}
+      _hover={{ textDecoration: 'none' }}
+      target={targetBlank ? '_blank' : '_self'}
+      rel={targetBlank ? 'noopener noreferrer' : undefined}
+      display="inline-block"
+    >
+      <Flex
+        cursor="pointer"
+        transition="box-shadow 0.3s ease-in-out"
+        _hover={{ shadow: 'sm' }}
+        w="fit-content"
+        borderRadius="8px"
+        display={isMobile ? 'block' : 'flex'}
+      >
+        <Box
+          width="285px"
+          height={isMobile ? '140px' : '168px'}
+          bgImage={`linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,1) 100%), url(${eventImage})`}
+          backgroundSize="cover"
+          borderRadius={isMobile ? '8px 8px 0px 0px' : '8px 0 0 8px'}
+        />
+        <Box
+          width={isMobile ? '285px' : '305px'}
+          minHeight={isMobile ? '160px' : '168px'}
+          borderRadius={isMobile ? '0 0 8px 8px' : '0 8px 8px 0'}
+          border="1px"
+          borderColor={vars('colors-neutral-platinum')}
+          display="flex"
+          flexDirection="column"
+          cursor="pointer"
+        >
+          <Box width="inherit" height="100%" padding="4" color="#555555" gap="16px" display="grid">
+            <Text fontWeight="700">{eventTitle}</Text>
+            <Box display="flex" alignItems="center" gap="4px">
+              <Calendar color={vars('colors-main-ziggurat')} />
+              <Text fontWeight="400">{startDate}</Text>
+              <Text color={vars('colors-neutral-platinum')}>|</Text>
+              <Clock color={vars('colors-main-ziggurat')} />
+              <Text>{startTime}</Text>
+            </Box>
+          </Box>
+          <Box
+            borderTop={`1px solid ${vars('colors-neutral-platinum')}`}
+            width="100%"
+            height="50px"
+            padding="12px"
+            backgroundColor="white"
+            alignItems="center"
+            display="flex"
+            justifyContent="center"
+            borderRadius=" 0 0 8px 8px"
+            fontSize="16px"
+            fontFamily="Roboto"
+            color={vars('colors-main-deepSkyBlue')}
+            fontWeight="500"
+          >
+            {buttonInfo}
+          </Box>
+        </Box>
+      </Flex>
+    </Link>
+  )
+}