Iconografía

[camilembo]

Nombre en Obelisco: Iconografía / Pie de página
Tipo de componente: átomo / organismo

Desde desarrollo nos solicitan sumar al pie de página 2 nuevas redes sociales: pinterest y tik tok

[camilembo]

Debemos hacer primero la brunch de íconos donde dejaremos los nuevos como componentes.
Partiendo de eso se debe mergear la brunch de iconografía y armar en una nueva brunch, esta vez de Pie de Página, para sumar a los enlaces de las redes sociales las nuevas.

[camilembo]

El día de ayer 20/07 quedó mergeada la brunch de iconografía al ui kit.
Este es el link de la brunch al pie de página con los nuevos iconos: https://www.figma.com/file/ToGlPBzfp1gKDmaCwKWtXS/branch/QEEyCebLcdfZQFADYXpPUC/UI-KIT---Obelisco?type=design&node-id=1022%3A9649&mode=design&t=qJr7dlNtulyxZ2yh-1

[Diehault]

¡Hola! 👀

Aprovechando las actualizaciones que se hicieron con el trabajo de la nueva guía tipográfica para Obelisco, también actualizamos la página de "Iconografía" dentro del UI kit. Empatamos lo que disponibilizamos hoy en día desde Storybook y el cómo lo disponibilizamos, además de que sumamos un nuevo modo de validación dentro de toda la librería, utilizando colecciones de variables y sus modos.

¿Qué hicimos?

• Actualizamos la plantilla de la página de "Iconografía" dentro del UI kit.
• Implementamos el modo "Fuera de versión" utilizando una colección de variables y modos. Esta nueva modalidad de validación también la implementamos sobre componentes, y nos permite deprecar elementos dentro de nuestra librería sin eliminarlos inmediatamente, evitando romper proyectos donde los consuman y dando un tiempo de gracia para ajustar.
• Organizamos los íconos disponibles desde la librería y esclarecimos el uso de Material Design Icons y Boxicons como nuestras librerías de íconos principales.

¿Cómo se ve ahora la página en el UI kit?

El color violeta que se ve sobre los íconos es esta capa de validación para los elementos fuera de versión.

[Diehault]

📢 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

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

🕰️ Changelog

CHANGELOG	Descripción
Agregado
Arreglado
Eliminado
Obsoleto
Cambiado

✏️ Notas

• Esta guía de estilo no sufrió cambios durante la migración.

[Diehault]

📢 Nuevo requerimiento

Qué

Actualizar la librería de íconos a Material Design Symbols Rounded.

Por qué

Como parte de la actualización y publicación de Obelisco V2 decidimos no trabajar más con librerías deprecadas, lo que dejó fuera de versión dentro de nuestro sistema de diseño a Material Icons.

Quién lo va a trabajar

Diseñadores

Quién lo va a revisar

PM + SGOs

Criterios de aceptación

• Incorporar como librería de íconos la librería de Material Design Symbols en Figma.
• Actualizar la librería de íconos dentro del UI kit y reemplazamos los íconos custom por soluciones de la nueva librería (Material Design Symbols).
• Actualizar la iconografía dentro de cada uno de los componentes del UI kit.
• Actualizar la ficha de iconografía en la web de Obelisco.
• Validar con el equipo de Desarrollo los íconos implementados en la librería.

🕰️ Changelog

CHANGELOG	Descripción
Agregado
Arreglado
Eliminado
Obsoleto
Cambiado

✏️ Notas

• Reabrimos el ticket para trabajar, dentro del Sprint que sea posible, la actualización completa de la librería iconográfica.

[marusaad]

📢 Nuevo requerimiento

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.

Quién lo va a trabajar

Diseñadores

Quién lo va a revisar

PM + SGOs

Criterios de aceptación

• El componente aplica las variables semánticas y funcionales para los elementos del mismo.
• El componente cumple con los criterios de contraste y legibilidad de la WCAG (Criterios de accesibilidad AAA)

✏️ Notas

No se cambiaron los colores de marca de, por ejemplo, los íconos de medios de pago. Se actualizaron las variables de color y también los colores de la plantilla del UI Kit.

Actualizamos el ícono de la red social X (ex Twitter). El logo no se encuentra como ícono en las librerías que tenemos (Material y BoxIcons) por lo que creamos un componente custom con el ícono como SVG y lo compartimos en su versión light y dark con desarrollo.