Merge pull request #305 from gcba/feat_calendar

feat calendar - ficha
gcba · Mar 8, 2024 · 99b4515 · 99b4515
2 parents 23e80f1 + a6a5f7c
commit 99b4515
Show file tree

Hide file tree

Showing 28 changed files with 556 additions and 21 deletions.
diff --git a/src/articles/componentes/calendar.mdx b/src/articles/componentes/calendar.mdx
@@ -0,0 +1,81 @@
+---
+menu: Calendario
+title: Calendario
+description: El calendario es una representación visual en forma de tabla que exhibe eventos y fechas importantes correspondientes a los días de la semana de un mes determinado.
+position: 6
+---
+
+## Tipos de calendario
+
+* Calendario desktop: ocupa 4 columnas de la grilla desktop de Obelisco.
+
+* Calendario mobile: ocupa el total del ancho del dispositivo y se utiliza para dispositivos móviles.
+
+<div className="grisulado-10-container box-shadow-grisulado-50 content-row gap-4">
+  <img src="/componentes/calendario/Calendario.svg" alt="Calendario" className="img-fluid m-0" />
+</div>
+
+## Diseño y estructura (contexto de uso)
+
+El calendario está compuesto por un encabezado con el mes y año, una fila con los días de la semana, y 6 filas disponibles para los días del mes según corresponda. También, cuenta con una lista de referencias de las fechas seleccionadas.
+
+
+### Encabezado
+
+Contiene el mes y el año del calendario.
+
+### Fila de días de la semana
+
+Están todos los días de la semana representados por la inicial de cada día y siempre lleva fondo secundario. 
+
+### Fila de días del mes
+
+Contiene los números de todos los días del mes. Los días pueden estar seleccionados para resaltar la fecha necesaria, en gris claro para mostrar los días de meses anteriores/siguientes, u ocultos.
+
+### Referencia de una fecha del calendario
+
+Señala las fechas seleccionadas dentro del calendario a modo de lista. Cuando hay más de 5 ítems en la lista, es recomendable utilizar un colapsable para reducir la carga cognitiva de la persona usuaria.
+
+<div className="grisulado-10-container box-shadow-grisulado-50 content-row gap-4">
+  <img src="/componentes/calendario/Calendario-list.svg" alt="Calendario con lista" className="img-fluid m-0" />
+  <img src="/componentes/calendario/Calendario-accordion.svg" alt="Calendario con colapsable" className="img-fluid m-0" />
+</div>
+
+Las referencias de cada uno de los ítems listados en los calendarios pueden clasificarse por color. En este caso, las referencias cromáticas se alinean a la izquierda y se agrupan en un contenedor en la parte superior de la página y contar con el título Referencias. 
+
+<div className="grisulado-10-container box-shadow-grisulado-50 content-row gap-4 pb-0 align-items-end">
+  <img src="/componentes/calendario/Referencias-desktop.svg" alt="Referencias - desktop" className="img-fluid m-0" />
+  <img src="/componentes/calendario/Referencias-mobile.svg" alt="Referencias - mobile" className="img-fluid m-0" />
+</div>
+
+### Colores de las referencias
+
+Cuando hay más de dos referencias dentro de un mismo calendario, se puede utilizar la paleta de colores de [detalles cromáticos](https://gcba.github.io/estandares/gu%C3%ADas_de_estilos/paleta_de_colores/). Se debe cambiar el color de la tipografía al color de texto primario para garantizar un contraste óptimo. 
+
+### Disposición
+
+En mobile, los calendarios se apilan uno debajo del otro con una separación de 32px. En desktop, los calendarios se ordenan horizontalmente en filas de 3 con una separación vertical de 32px entre agrupaciones. 
+
+<div className="grisulado-10-container box-shadow-grisulado-50 content-row gap-4">
+  <img src="/componentes/calendario/Disposicion-mobile.svg" alt="Disposicion - mobile" className="img-fluid m-0" />
+</div>
+
+<div className="grisulado-10-container box-shadow-grisulado-50 content-row gap-4 pb-0 align-items-end">
+  <img src="/componentes/calendario/Disposicion-desktop.svg" alt="Disposicion - desktop" className="img-fluid m-0" />
+</div>
+
+## Usabilidad
+
+### Buenas prácticas
+
+[[si | Para cada fecha seleccionada/referenciada utilizar un Title que identifique a qué hace mención. ]]
+
+[[si | Mantener la menor cantidad de referencias posibles. En caso de que un evento tenga dos días consecutivos, utilizar el formato: “**20, 21.** Primeros dos días de Carnaval”. Si el evento cuenta con más de dos días consecutivos, utilizar el formato: “**20 al 25.** Carnaval”.  ]]
+
+[[si | En caso de requerir los colapsables, todos los calendarios que aparezcan en una misma agrupación y tengan fechas activas deberán llevar colapsables. ]]
+
+### Malas prácticas
+
+[[no | No utilizar calendarios con colapsable combinados con los calendarios con lista, esto puede romper el contenido y la diagramación de la página. ]]
+
+[[no | No incluir textos largos entre las referencias. Es importante limitar el contenido al nombre o título de lo que se señale. ]]
diff --git a/src/articles/componentes/colapsable.mdx b/src/articles/componentes/colapsable.mdx
@@ -2,7 +2,7 @@
 menu: Colapsables
 title: Colapsables
 description: Los colapsables sirven para mostrar y ocultar secciones de contenido relacionado en una página, lo que mejora la experiencia de las personas usuarias.
-position: 6
+position: 7
 ---
 
 ## Tipos de colapsables

diff --git a/src/articles/componentes/control-de-formulario.mdx b/src/articles/componentes/control-de-formulario.mdx
@@ -2,7 +2,7 @@
 menu: Formularios
 title: Formularios
 description: Los formularios permiten una comunicación directa con las personas usuarias y nos ayudan a gestionar procesos o trámites que los hacen partícipes. Los tipos de campos que usamos en ellos para comunicar los requisitos de entrada o necesidades específicas son variados. Podemos usar, por ejemplo, campos de texto, selectores, botones de radio, casillas de verificación y selectores de fecha.
-position: 11
+position: 12
 ---
 
 ## Tipos de campos de un formulario

diff --git a/src/articles/componentes/destacado.mdx b/src/articles/componentes/destacado.mdx
@@ -2,7 +2,7 @@
 menu: Destacado
 title: Destacado
 description: Los destacados permiten resaltar contenido relevante que requiere un nivel jerárquico mayor al resto de la información. Se usa para captar la atención de la persona usuaria incorporando imágenes, accionables y otros elementos interactivos.
-position: 8
+position: 9
 ---
 
 ## Tipos de destacado

diff --git a/src/articles/componentes/encabezado.mdx b/src/articles/componentes/encabezado.mdx
@@ -2,7 +2,7 @@
 menu: Header (encabezado)
 title: Header (encabezado)
 description: El header es una sección ubicada en la parte superior de la página que contiene elementos y componentes relacionados a la navegación. Su función es permitir que la persona usuaria pueda navegar y acceder intuitivamente a las diferentes secciones de un sitio.
-position: 12
+position: 13
 ---
 
 ## Tipos de header

diff --git a/src/articles/componentes/enlaces.mdx b/src/articles/componentes/enlaces.mdx
@@ -2,7 +2,7 @@
 menu: Enlace
 title: Enlace
 description: Los enlaces son hipervínculos que la persona usuaria utiliza para navegar contenidos en un sitio web. Pueden dirigir tanto a información y recursos dentro de una misma página o sitio web, como también a páginas externas.  
-position: 9
+position: 10
 ---
 
 ## Tipos de enlace

diff --git a/src/articles/componentes/etiquetas.mdx b/src/articles/componentes/etiquetas.mdx
@@ -2,7 +2,7 @@
 menu: Etiquetas
 title: Etiquetas
 description: Las etiquetas se utilizan para identificar y categorizar la información dentro de una página proporcionando más detalles a los usuarios sobre el contenido que necesitan.
-position: 10
+position: 11
 ---
 
 ## Tipos de etiquetas

diff --git a/src/articles/componentes/mapa.mdx b/src/articles/componentes/mapa.mdx
@@ -2,7 +2,7 @@
 menu: Mapa
 title: Mapa
 description: El mapa brinda contexto sobre una ubicación geográfica y redirige a la persona usuaria al mapa interactivo de Buenos Aires. A su vez, permite a las personas usuarias anticipar y planificar sus acciones.
-position: 14
+position: 15
 ---
 
 ## Tipos de mapa

diff --git a/src/articles/componentes/mensajes-de-estado.mdx b/src/articles/componentes/mensajes-de-estado.mdx
@@ -2,7 +2,7 @@
 menu: Mensajes de estado
 title: Mensajes de estado
 description: Los mensajes de estado son comunicaciones que ayudan a las personas usuarias a tomar decisiones premeditadas. Informan que algo ha ocurrido o va a ocurrir y tal vez requieran de su acción. También, sirven para reducir la incertidumbre y evitar que los usuarios cometan errores.
-position: 15
+position: 16
 ---
 
 ## Tipos de mensajes de estado

diff --git a/src/articles/componentes/miga-de-pan.mdx b/src/articles/componentes/miga-de-pan.mdx
@@ -2,7 +2,7 @@
 menu: Migas de pan
 title: Migas de pan
 description: El componente de migas de pan ayuda a los usuarios a comprender dónde se encuentran dentro de la estructura de un sitio web y moverse entre niveles.
-position: 16
+position: 17
 ---
 
 ## Tipos de migas de pan

diff --git a/src/articles/componentes/modals.mdx b/src/articles/componentes/modals.mdx
@@ -2,7 +2,7 @@
 menu: Modal
 title: Modal
 description: Los modales muestran información importante que las personas usuarias deben reconocer. Aparecen en forma de ventana sobre la interfaz y bloquean el flujo de trabajo hasta que se selecciona una acción.
-position: 17
+position: 18
 ---
 
 ## Tipos de modales

diff --git a/src/articles/componentes/navegacion.mdx b/src/articles/componentes/navegacion.mdx
@@ -2,7 +2,7 @@
 menu: Navegación y pestañas
 title: Navegación y pestañas
 description: La navegación y pestañas se utilizan para organizar el contenido relacionado. Permiten a la persona usuaria navegar entre grupos de información que aparecen dentro de un mismo contexto, mostrando una sección por vez.
-position: 18
+position: 19
 ---
 
 ## Tipos de navegación y pestañas

diff --git a/src/articles/componentes/paginado.mdx b/src/articles/componentes/paginado.mdx
@@ -2,7 +2,7 @@
 menu: Paginado
 title: Paginado
 description: El paginado se utiliza para dividir contenido o datos en varias páginas, con un control para navegar a la página siguiente o anterior.
-position: 19
+position: 20
 ---
 
 import { Pagination } from "@gcba/obelisco"

diff --git a/src/articles/componentes/panel.mdx b/src/articles/componentes/panel.mdx
@@ -2,7 +2,7 @@
 menu: Panel
 title: Panel
 description: Los paneles son agrupaciones de elementos que tienen una relación entre si. Por definición no son accionables, sino que dependen de otros elementos que tengan dicha funcionalidad.
-position: 20
+position: 21
 ---
 
 ## Tipos de paneles

diff --git a/src/articles/componentes/paso-a-paso.mdx b/src/articles/componentes/paso-a-paso.mdx
@@ -2,7 +2,7 @@
 menu: Pasos de un formulario
 title: Pasos de un formulario
 description: Es un indicador de progreso que muestra visualmente los pasos de las acciones del usuario en un formulario. Los ayuda a comprender la progresión de los formularios largos y reduce la incertidumbre a medida que completan cada pantalla.
-position: 21
+position: 22
 ---
 
 ## Tipos de pasos de un formulario

diff --git a/src/articles/componentes/pie-de-pagina.mdx b/src/articles/componentes/pie-de-pagina.mdx
@@ -2,7 +2,7 @@
 menu: Pie de página
 title: Pie de página
 description: El pie de página (o footer en Inglés) se sitúa en la parte inferior de todos los activos digitales de Gobierno. Contiene información institucional o de acceso rápido que permite a los usuarios encontrar de forma sencilla la información que necesitan.
-position: 22
+position: 23
 ---
 
 ## Diseño y estructura (contexto de uso)

diff --git a/src/articles/componentes/spinner.mdx b/src/articles/componentes/spinner.mdx
@@ -2,7 +2,7 @@
 menu: Spinner
 title: Spinner
 description: Un spinner es un indicador visual que ayuda a notificar a las personas usuarias que la carga de contenido o la recuperación de datos está en curso.
-position: 23
+position: 24
 ---
 
 ## Tipos de spinner

diff --git a/src/articles/componentes/switch.mdx b/src/articles/componentes/switch.mdx
@@ -2,7 +2,7 @@
 menu: Switch
 title: Switch
 description: Los switchs permiten que las personas usuarias alternen entre dos estados posibles, como “prendido” y “apagado”. Su efecto es automático y no necesita de una confirmación como es en el caso de un Checkbox.
-position: 24
+position: 25
 ---
 
 ## Tamaños

diff --git a/src/articles/componentes/tarjetas.mdx b/src/articles/componentes/tarjetas.mdx
@@ -2,7 +2,7 @@
 menu: Tarjetas
 title: Tarjetas
 description: Las tarjetas son componentes accionables que se utilizan en grupo para comunicar información que requiere de cierto tipo de categorización y jerarquización visual. Se visualizan en contenedores flexibles y actúan como punto de entrada a un tema en particular.
-position: 25
+position: 26
 ---
 
 ## Tipos de tarjetas

diff --git a/src/articles/componentes/tooltip.mdx b/src/articles/componentes/tooltip.mdx
@@ -2,7 +2,7 @@
 menu: Tooltip
 title: Tooltip
 description: Los tooltip muestran ayuda contextual o información sobre componentes específicos cuando un usuario se desplaza o se enfoca en ellos.
-position: 26
+position: 27
 ---
 
 ## Tipos de tooltip

diff --git a/src/utils/navigation.ts b/src/utils/navigation.ts
@@ -170,8 +170,8 @@ export const getNavigation = (): NavItem[] => {
     fakeNode(3, "Componentes", "/componentes"),
     fakeNode(4, "Contenido", "/contenido"),
     fakeNode(5, "Herramientas y recursos", "/herramientas_y_recursos"),
-    fakeNode(7, "Desplegables", "/componentes/desplegables"),
-    fakeNode(13, "Listas", "/componentes/listas")
+    fakeNode(8, "Desplegables", "/componentes/desplegables"),
+    fakeNode(14, "Listas", "/componentes/listas")
   )
 
   nodes