feat(PDYE-1270): docu eventslist y calendardropdown (#720)

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

Author: JaviMunita

src/documentation/components/Typography.tsx

@@ -13,11 +13,11 @@ export const MyHeading: FC = ({ children }): JSX.Element => {
   )
 }
 
-interface IMyTittle {
+interface IMyTitle {
   divider?: boolean
 }
 
-export const MyTittle: FC<IMyTittle> = ({ children, divider = true }): JSX.Element => {
+export const MyTitle: FC<IMyTitle> = ({ children, divider = true }): JSX.Element => {
   return (
     <>
       {divider && <Divider m="3rem 0" />}

src/documentation/pages/Atoms/Label.tsx

@@ -1,6 +1,6 @@
 import { Label } from '@atoms'
 import { vars } from '@/theme'
-import { MyHeading, MyText, MyTittle, ListComponent, Code } from '@/documentation/components/'
+import { MyHeading, MyText, MyTitle, ListComponent, Code } from '@/documentation/components/'
 
 export const ViewLabel = (): JSX.Element => {
   return (
@@ -15,7 +15,7 @@ export const ViewLabel = (): JSX.Element => {
       <Label>Etiqueta</Label>
       <Code text="<Label>Etiqueta</Label>" />
 
-      <MyTittle>Color de fondo y texto</MyTittle>
+      <MyTitle>Color de fondo y texto</MyTitle>
       <MyText>
         Tiene por defecto un color de fondo y de texto pero este se puede personalizar según tus
         necesidades de diseño y resaltar información de manera efectiva:
@@ -41,7 +41,7 @@ export const ViewLabel = (): JSX.Element => {
 <Label bg={vars('colors-neutral-davysGrey')} color={vars('colors-icon-ripeMango')}>davysGrey</Label>`}
       />
 
-      <MyTittle>Tamaños</MyTittle>
+      <MyTitle>Tamaños</MyTitle>
       <MyText>
         Se ofrece dos tamaños predefinidos que se adaptan a tus necesidades de diseño y
         presentación, por defecto toma el valor de <code>md</code>.

src/documentation/pages/Atoms/Ripples.tsx

@@ -2,7 +2,7 @@ import { Box } from '@chakra-ui/react'
 
 import { Ripples } from '@atoms'
 import { vars } from '@/theme'
-import { ListComponent, MyHeading, MyText, MyTittle, Code } from '@/documentation/components'
+import { ListComponent, MyHeading, MyText, MyTitle, Code } from '@/documentation/components'
 
 export const ViewRipples = (): JSX.Element => {
   return (
@@ -16,7 +16,7 @@ export const ViewRipples = (): JSX.Element => {
         <Ripples />
       </Box>
       <Code text="<Ripples>Contenido</Ripples>" />
-      <MyTittle>Personalizar</MyTittle>
+      <MyTitle>Personalizar</MyTitle>
       <MyText>
         Se permite personalizar el color del efecto de onda. Puedes elegir el color que mejor se
         adapte al diseño de tu aplicación. Además, el componente incluye un valor por defecto para

src/documentation/pages/Atoms/TinyAlert.tsx

@@ -1,5 +1,5 @@
 import { TinyAlert } from '@atoms'
-import { ListComponent, MyHeading, MyText, MyTittle, Code } from '@/documentation/components'
+import { ListComponent, MyHeading, MyText, MyTitle, Code } from '@/documentation/components'
 
 export const ViewTinyAlert = (): JSX.Element => {
   return (
@@ -13,7 +13,7 @@ export const ViewTinyAlert = (): JSX.Element => {
       <TinyAlert status="success" />
       <Code text='<TinyAlert status="success" />' />
 
-      <MyTittle>Status</MyTittle>
+      <MyTitle>Status</MyTitle>
       <MyText>
         El componente ofrece una variedad de tipos predefinidos que se adaptan a diferentes
         necesidades de diseño. Cada tipo tiene su propio propósito y apariencia, lo que te permite

src/documentation/pages/Home.tsx

@@ -1,16 +1,17 @@
-import { MyHeading, MyText, MyTittle, Code } from '../components'
+import { MyHeading, MyText, MyTitle, Code } from '../components'
 
 export const Home = (): JSX.Element => {
   return (
     <>
       <MyHeading>Información</MyHeading>
+
       <MyText>
         Este repositorio es una librería de componentes que se pensó para unificar estilos en los
         desarrollos de Eclass. <br />
         La fuente de donde se basan los componentes se encuentran en este Sistema de diseño.
       </MyText>
 
-      <MyTittle>Scripts</MyTittle>
+      <MyTitle>Scripts</MyTitle>
       <MyText>
         Los componentes están al 100% en escritas en archivos typescript.
         <br />

src/documentation/pages/Instalation.tsx

@@ -1,4 +1,4 @@
-import { MyHeading, MyText, MyTittle, Code } from '../components'
+import { MyHeading, MyText, MyTitle, Code } from '../components'
 
 export const Instalation = (): JSX.Element => {
   return (
@@ -10,7 +10,7 @@ export const Instalation = (): JSX.Element => {
         language="text"
         text="npm install @eclass/ui-kit @chakra-ui/react @emotion/react @emotion/styled framer-motion"
       />
-      <MyTittle>Implementación</MyTittle>
+      <MyTitle>Implementación</MyTitle>
       <MyText>Ejemplo de implementación en código.</MyText>
       <Code
         text={`import { ChakraProvider } from '@chakra-ui/react'

src/documentation/pages/Molecules/Buttons.tsx

@@ -1,4 +1,4 @@
-import { ListComponent, MyHeading, MyText, MyTittle, Code } from '@/documentation/components'
+import { ListComponent, MyHeading, MyText, MyTitle, Code } from '@/documentation/components'
 import { BtnPrimary, BtnSecondary, BtnTertiary, BtnLink } from '@/molecules'
 import { GoAhead, Password } from '@/atoms/Icons'
 
@@ -12,7 +12,7 @@ export const Buttons = (): JSX.Element => {
       </MyText>
       <Code text="import { BtnPrimary } from '@eclass/ui-kit'" />
 
-      <MyTittle>Tipos definidos</MyTittle>
+      <MyTitle>Tipos definidos</MyTitle>
       <MyText>
         Se liberan estos cuatro tipos de botones, de los cuales dos visualmente son botones y los
         otros son como tipo links{' '}
@@ -30,7 +30,7 @@ export const Buttons = (): JSX.Element => {
 <BtnLink>Link</BtnLink>"
       />
 
-      <MyTittle>Estados</MyTittle>
+      <MyTitle>Estados</MyTitle>
       <MyText>
         Listado con los tipos de estados que puede tener el botón bajo ciertas condiciones.
       </MyText>
@@ -49,7 +49,7 @@ export const Buttons = (): JSX.Element => {
 <BtnPrimary disabled>Disabled</BtnPrimary>"
       />
 
-      <MyTittle>Tamaños</MyTittle>
+      <MyTitle>Tamaños</MyTitle>
       <MyText>
         Por defecto el tamaño del botón es <code>regular</code> pero tienes las siguientes opciones
         de tamaño.
@@ -65,7 +65,7 @@ export const Buttons = (): JSX.Element => {
 <BtnPrimary isFullWidth>isFullWidth</BtnPrimary>"
       />
 
-      <MyTittle>Tipos Tertiary</MyTittle>
+      <MyTitle>Tipos Tertiary</MyTitle>
       <MyText>
         El <code>BtnTertiary</code> tiene tipos definidos que son los siguientes:
       </MyText>
@@ -96,12 +96,12 @@ export const Buttons = (): JSX.Element => {
 <BtnTertiary iconStatus='download'>download</BtnTertiary>
 <BtnTertiary iconStatus='noIcon'>noIcon</BtnTertiary>"
       />
-      <MyTittle>Iconos Custom</MyTittle>
+      <MyTitle>Iconos Custom</MyTitle>
       <ListComponent>
         <BtnTertiary iconCustom={<GoAhead />}>custom</BtnTertiary>
       </ListComponent>
       <Code text="<BtnTertiary iconCustom={<GoAhead />} >custom</BtnTertiary>" />
-      <MyTittle>Activo al presionar</MyTittle>
+      <MyTitle>Activo al presionar</MyTitle>
       <MyText>
         El <code>BtnTertiary</code> puede tener una propiedad <code>activeWhenPress</code> booleano
         el cual indica que al presionar o mantener focus queda azul brillante o activo:
@@ -113,7 +113,7 @@ export const Buttons = (): JSX.Element => {
       </ListComponent>
       <Code text="<BtnTertiary activeWhenPress iconCustom={<GoAhead />} >custom</BtnTertiary>" />
 
-      <MyTittle>BtnLink</MyTittle>
+      <MyTitle>BtnLink</MyTitle>
       <MyText>
         El <code>BtnLink</code> tiene la opción de ser un elemento (<code>button</code>) o un
         elemento (<code>a</code>), si la elección es esto último es necesario pasarle la url que

src/documentation/pages/Molecules/Tooltip.tsx

@@ -1,4 +1,4 @@
-import { ListComponent, MyHeading, MyText, MyTittle, Code } from '@/documentation/components'
+import { ListComponent, MyHeading, MyText, MyTitle, Code } from '@/documentation/components'
 import { NewTooltip } from '../../../molecules/Tooltip/NewTooltip'
 import { BtnPrimary } from '@/molecules'
 import { useDisclosure } from '@chakra-ui/react'
@@ -24,7 +24,7 @@ export const ViewTooltip = (): JSX.Element => {
 </NewTooltip>`}
       />
 
-      <MyTittle>Posiciones</MyTittle>
+      <MyTitle>Posiciones</MyTitle>
       <MyText>
         Se ofrece posiciones predefinidos que se adaptan a tus necesidades de diseño y presentación,
         por defecto toma el valor de <code>bottom</code>.
@@ -63,7 +63,7 @@ export const ViewTooltip = (): JSX.Element => {
   <BtnPrimary>Left</BtnPrimary>
 </NewTooltip>`}
       />
-      <MyTittle>Activar al Click</MyTittle>
+      <MyTitle>Activar al Click</MyTitle>
       <MyText>
         El componente tiene un prop booleano <code>isOpen</code> que se utiliza para mantener
         abierto o cerrado el tooltip en caso de utilizar <code>onClick</code>, usando el hook{' '}

src/documentation/pages/Organisms/Alerts.tsx

@@ -1,4 +1,4 @@
-import { ListComponent, MyHeading, MyText, MyTittle, Code } from '@/documentation/components'
+import { ListComponent, MyHeading, MyText, MyTitle, Code } from '@/documentation/components'
 import { Alert } from '@/organisms'
 import { Profile } from '@/atoms/Icons'
 
@@ -16,7 +16,7 @@ export const ViewAlert = (): JSX.Element => {
       </MyText>
       <Code text="import { Alert } from '@eclass/ui-kit'" />
 
-      <MyTittle>Estados</MyTittle>
+      <MyTitle>Estados</MyTitle>
       <MyText>Existen 4 posibles estados que definen el ícono y color de la alerta.</MyText>
       <ListComponent>
         <Alert state="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Alert>
@@ -31,7 +31,7 @@ export const ViewAlert = (): JSX.Element => {
 <Alert state="warning">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Alert>'
       />
 
-      <MyTittle>Alertas con botón primario</MyTittle>
+      <MyTitle>Alertas con botón primario</MyTitle>
       <MyText>
         Las alertas embebidas con botón se utilizan en contextos en los que además de que el usuario
         pueda visualizar cada vez que lo necesite el feedback o estado de una solicitud al sistema,
@@ -66,7 +66,7 @@ export const ViewAlert = (): JSX.Element => {
 <Alert state="warning" buttonText="Click me" onClick={() => {}}> Texto </Alert>'
       />
 
-      <MyTittle>Alertas con botón link</MyTittle>
+      <MyTitle>Alertas con botón link</MyTitle>
       <MyText>
         Opcionalmente, el botón puede ser del tipo link.Para esto, la alerta debe recibir los
         argumentos de:
@@ -89,7 +89,7 @@ export const ViewAlert = (): JSX.Element => {
         </Alert>
       </ListComponent>
 
-      <MyTittle>Alertas con botón link y boton primario,</MyTittle>
+      <MyTitle>Alertas con botón link y boton primario,</MyTitle>
       <MyText>
         Esta alerta recibe un state de alerta entre: <code>warning, error, success, info </code>.
         Adicionalmente recibe un link al final del texto y un botón primario. si se quiere que el
@@ -196,7 +196,7 @@ export const ViewAlert = (): JSX.Element => {
           iure aspernatur optio amet illo maxime, totam incidunt maiores.
         </Alert>`}
       />
-      <MyTittle>Types de Alert</MyTittle>
+      <MyTitle>Types de Alert</MyTitle>
       <MyText>Tipos implementados en el Alert</MyText>
       <Code
         text={`interface IAlertProps {