LuCostas commented 1 year ago

Calendario

Nombre en Obelisco Calendario

Tipo de componente Átomo | Molécula | Organismo | Plantilla

Links UI Kit | Ficha Figma | Estándares | Storybook

Ejemplo en Bootstrap Tablas. El calendario es una tabla.

Ejemplos de aplicación en BA Calendario interreligioso | Calendario 2024

Requerimiento

Empatar componente entre Storybook y UI Kit
Chequear usabilidad y accesibilidad del componente

marusaad commented 9 months ago

Se comenzó el análisis UX del componente y se estableció el alcance de la actualización del mismo en base a las posibilidades técnicas que ofrece Drupal.

Conclusiones del análisis

❌ Calendario vs Date Picker El date picker es un input de fecha dentro de forms. Hoy en día está en storybook y el calendario que se despliega viene por defecto según el navegador. Pisarlo con estilos de Obelisco implica romper el componente. Se podrá ver cuando el componente esté en Angular.

❌ Calendario que tenemos en el UI Kit Actualmente no está en producción, y también cumple la función de date picker conformando un organismo con una lista de selección única. Queda registrado en análisis de componentes, pero ya no formará parte del UI Kit.

✅ Calendario estático para Drupal En base al análisis de las necesidades el requerimiento sería crear un componente de calendario para drupal en versión desktop y mobile con el que conformar la página de calendarios anuales que se utiliza hoy en día.

Especificaciones para empezar Dispositivo Variantes: mobile, desktop

Número de calendario Estados: seleccionado, deseleccionado

Referencias Variantes: sin referencias, con lista de referencias.

Nota sobre el calendario anual de Drupal Si bien su uso podría conducir a construir un template, creemos que la disposición del calendario de esta manera presenta problemas de usabilidad y accesibilidad como:

Dificultad cuando hay muchas fechas a destacar por mes o múltiples calendarios. Cuando hay muchos calendarios y se distinguen cada uno por un color, es dificil para los usuarios retener de cuál se trata. Además, las listas de referencias serían mucho más largas implicando un uso de un colapsable que no es una buena práctica en ese contexto. Decidimos mostrar por ahora una referencia en baja al uso de colapsable en la ficha, pero no incluirlo dentro del componente como una variante.
Posibilidad de otro tipo de visualización: en base a benchmarks de otras páginas gubernamentales, las fechas importantes suelen mostrarse a modo de lista, un componente más accesible también para formato mobile.

Por lo tanto, antes de poder construir un template debemos ver si es la mejor solución a nivel UX y UI para la organización del contenido.

Diehault commented 9 months ago

¡Hola! 🤓 Subimos lo que hemos actualizado y tenemos hasta ahora del Calendario, según las últimas reuniones y ajustes.

¿Qué hicimos?

Construimos el componente en el UI Kit: definimos nomenclatura, estructura del componente y variantes.
Redactamos la ficha del componente: construimos la ficha y ajustamos definiciones según lo que conversamos en la reunión junto a Contenidos.

¿Cómo se ve ahora el componente en el UI Kit?

¿Cómo se ve la ficha hasta ahora?

¿Falta algo? 👀

Falta incorporar el código HTML a la sección de accesibilidad, que tiene que ver con el cambio de colores al interactuar con los días del mes, para cerrar todo el contenido.

marusaad commented 9 months ago

Notas Colapsables Para el caso puntual de NBA del que sale el requerimiento de calendarios anuales, se permitió el uso de colapsables (especialmente para el calendario interreligioso) cuando la lista de referencias superen las 5 líneas. Como queremos desalentar ese uso mientras como evolutivo pensamos si es necesario mostrar el calendario anual de esta forma (o si es necesario un template), no lo mostramos en el UI Kit. Por ahora queda disponible en Storybook pero en un futuro debe volver a verse este tema.

Grillas El gap horizontal entre calendarios debe ser de 32px, pero por las grillas de bootstrap, a nivel desarrollo queda en 19px.

Title Se eliminó el uso de tooltip en pos de un title.

@camilembo queda para revisión

marusaad commented 4 months ago

¡Hola! 🦥

Actualizamos el componente aprovechando la actualización general de la guía tipográfica.

¿Qué hicimos?

Se cambiaron los estilos de texto de los componentes base .Día y .Referencias de Nunito a Open Sans en Cuerpo/M. Se realizó este cambio porque Titulares/S tiene un interlineado de 20px y al incorporarlo cambiarían todas las medidas del organismo.
Se cambiaron los estilos tipográficos para el encabezado del calendario (Titulares/L) y los días de la semana (Curepo/S) según la nueva escala.
Se cambiaron los estilos tipográficos para las referencias (Cuerpo/S) y el gap entre cada una (antes era 4px, ahora es 8px)
Corregimos propiedades

¿Cómo se ve la página del componente en el UI Kit?

NicoAltamirano commented 2 months ago

📢 Nuevo requerimiento

Issues relacionados

311

Qué

Actualizar el componente según el nuevo estilo de grillas de la v.2 de Obelisco.

Por qué

Para estandarizar tamaños, modulación y visualizaciones de todos los componentes.

Quién lo va a trabajar

Diseñadores

Quién lo va a revisar

PM + SGOs

Criterios de aceptación

[x] El componente se ajusta a la grilla 4px.
[x] El componente tiene una medida definida para mobile, tablet y desktop.
[x] El componente tiene una modulación definida para mobile, tablet y desktop.
[x] El componente tiene su handoff para desarrollo y está marcado como ready for dev.
[x] El componente está documentado.

🕰️ Changelog

CHANGELOG	Descripción
Agregado	-
Arreglado	Actualmente, el Calendario funciona internamente con la propiedad “fill” para el armado de las columnas, lo que hace que en Mobile la distancia entre ítems/días/números no sea siempre un número entero. En Tablet, al ajustar el tamaño a 3 columnas de la grilla, sí quedan números enteros de espaciado que coinciden con la grilla de 4px.
Eliminado	-
Obsoleto	-
Cambiado	Viendo cómo se comportan los espacios en Mobile, y teniendo en cuenta que la diferencia de tamaño no es mucha con lo que debería ocupar en Calendario en Tablet, podríamos únicamente cambiar el width general del Calendario y todos los elementos internos se adaptarían.

✏️ Notas

[EV]: -

marusaad commented 3 weeks ago

📢 Nuevo requerimiento

Issues relacionados

300

Qué

Actualizar los estilos de color del componente aplicando las variables correspondientes a la v2 de Obelisco.

Por qué

Porque posiciona al sistema en un nivel de calidad superior al cumplir con los criterios de accesibilidad de la WCAG, y facilita la adopción, la personalización y la escalabilidad a nivel global.