Banner

[camilagaldo]

Banner

Nombre en Obelisco Banner

Descripción del componente Los banners muestran mensajes importantes y breves, a modo de aviso general, para informar a los usuarios sobre temas de diverso interés. Se muestran al ancho completo.

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

Links UI Kit | Estándares| Storybook

Ejemplo en Bootstrap Alerta en Bootstrap

Ejemplos de aplicación en BA Mensajes de información, peligro, advertencia y éxito.

Requerimiento Incorporar otro tipo de alerta que no corresponda a un feedback hacia al usuario dentro de un proceso.

[Fcunsolo]

Requerimiento Incorporar un elemento configurable (alerta, atención e información) para hacer ciertos avisos importantes en la web.

Análisis

• Se analiza incorporar alertas de ancho completo para que convivan con el contenido del sitio.
• Se analiza la ubicación en el viewport de estas alertas (ancladas arriba, abajo o intercaladas con el contenido) y la posible necesidad del usuario de "descartarlas".
• Se hace benchmark de distintas tipologías de alertas (Entes gubernamentales, Retails, Empresas de tecnología, etc.)

Se analiza qué tipo de acciones podemos ofrecer al usuario:

• Solo texto
• Texto + link
• Texto + botón
• Texto + link + botón
• Texto + 2 botones

Se descartó la exploración de alertas semánticas, de ancho completo, que convivan con las actuales.

Conclusiones

• Se opta por la creación de un tipo de alertas "no semánticas".
• Este tipo de alertas no se ejecutan como feedback a alguna acción del usuario, sino que están disponibilizadas como un módulo más de información.
• Se disponibilizan 2 tipos: Info (Celeste 50) y Aviso (Grisulado 90)
• La alerta de Info se usa en casos eventuales/urgentes. Normalmente por un período de tiempo corto, de vigencia específica.
• La alerta de Aviso carece de urgencia y es de vigencia inespecífica.
• Se desarrollan opciones Desktop y Mobile.
• Se decide no disponibilizar opciones "descartables". Como las alertas no son invasivas (no quedan fixeadas) no es necesario.
• Solo usamos el caso de alertas fixeadas abajo para los avisos de cookies. No se descartan, se aceptan o se rechazan.
• [Desktop] Si el largo del contenido supera 1 línea, el texto se trunca mostrando la elipsis "...". Requiere un "ver más"/"seguir leyendo". Debería poder entrar en una línea.
• [Mobile] Si el largo del contenido supera 3 líneas, el texto se trunca mostrando la elipsis "...". Requiere un "ver más"/"seguir leyendo".

Propiedades en Figma

Dispositivo: Desktop, Mobile

Tipo: Info, Aviso

Acciones: Solo texto, Con enlace en línea, Con botón, Con 2 botones

Alertas disponibilizadas

Dispositivo: Desktop

Dispositivo: Mobile

Pendientes

• Actualizar Branch "Alertas" https://www.figma.com/file/ToGlPBzfp1gKDmaCwKWtXS/branch/UKpMr44qTCGuB7RDUXHhrs/UI-KIT---Obelisco?type=design
• Hacer review interna de Branch
• Actualizar Ficha de Alertas
• Mergear Branch a UI KIT
• Maquetar Alertas

[Fcunsolo]

Iteración del componente

• Se llega a la definición de aislar estas "alertas no semánticas" en un nuevo componente llamado "Banner".
• El uso de estos mensajes se mantiene como en la definición anterior.
• Los tipos de alerta "Info" (Celeste 50) y "Aviso" (Grisulado 90) cambian por los tipos "Claro" (Grisulado 5) y "Oscuro" (Grisulado 90)
• Los banner "Claro" y "Oscuro" solo se diferencian entre sí por su color y contraste entre fondo y contenido.
• Ambos casos tienen la misma jerarquía, el uso de una u otra corre por parte del diseñador, para que destaquen cromáticamente en su contexto.
• Se agrega la regla de no utilizar íconos de carácter semántico que puedan confundir los banners con alertas.
• Se elimina la opción "Solo texto"
• La opción "con enlace en línea" cambia a "Con enlace".
• En la opción "con enlace" la descripción se encuentra centrada y no lleva ícono.
• Se modifica el uso de "botones fantasma" por "primarios" y "secundarios"
• La opción con un botón solo puede llevar botón secundario.
• La opción con dos botones solo puede llevar el par de botones primario y secundario
• En la opción con dos botones, en Desktop, el primario va a la derecha por el orden de lectura de izquierda a derecha.
• En la opción con dos botones, en Mobile, el primario va a la izquierda por el orden de lectura de arriba a bajo.

Componente actualizado

Propiedades actualizadas

Branch del componente "Banner" https://www.figma.com/file/ToGlPBzfp1gKDmaCwKWtXS/branch/UKpMr44qTCGuB7RDUXHhrs/UI-KIT---Obelisco?type=design

Branch de la ficha "Banner" https://www.figma.com/file/Pi8vXNQiMDtCNvV1aTCQX7/branch/7FoMHRfK97umYTJa4NcK5s/Fichas?type=design

Pendientes

• Mergear Branch a UI KIT
• Maquetar Alertas

[camilembo]

Equipo de desarrollo subió el banner a storybook el 07/08/2023 Se hizo el merge el día 10/08/2023

[marusaad]

Correcciones y actualizaciones

• Abrir nuevamente la branch del UI Kit para cambiar el ancho del componente banner para mobile. Actualmente tiene 328px y debería tener 360px para ocupar el ancho completo de la grilla de mobile incluyendo márgenes.

• Abrir nuevamente la branch de ficha de banner para incorporar en la parte de usabilidad la cantidad máxima de caracteres recomendada para alertas: 110 caracteres incluyendo espaciados. En el caso de que se exceda de esa cantidad o de las 3 líneas de texto estipuladas, el texto se trunca, pero no se recomienda.

[Diehault]

¡Hola! 😎​

Dejo por acá la actualización de banner según la weekly del día martes 19/12/2023. Estuvimos trabajando en el UI Kit, faltaría solo sumar la información correspondiente a la ficha.

¿Qué hicimos?

• Actualizamos el Banner dentro del UI Kit, siguiendo con la nueva plantilla y diseño.
• Cambiamos el tamaño de la versión mobile de 328px a 360px para que coincidiera con el tamaño completo del dispositivo.

[Diehault]

¡Hola! 🚁 Actualizamos la ficha de banner y está lista para subir a Estándares.

Por acá sumo el link a la branch de la ficha: https://www.figma.com/file/Pi8vXNQiMDtCNvV1aTCQX7/branch/37QA7XJvgT8iGNy5GwjGWf/Fichas?type=design&node-id=4795%3A275&mode=design&t=FZw8wpVsLCMDJGGy-1.

¿Qué hicimos?

• Revisamos y actualizamos las descripciones de toda la ficha en general.

• Sumamos el máximo de caracteres para el componente y el comportamiento del contenido al superar el mismo.

  ¿Cómo quedó la ficha?

[Diehault]

¡Hola! 🦥​ Actualizamos la ficha del componente para incorporar la explicación sobre el comportamiento del banner cuando es de enlace, donde el texto no se trunca.

¿Qué hicimos?

• Sumamos a la descripción de "Banner con enlace" lo que sucede con el contenido.
• Sumamos a las buenas y malas prácticas la aclaración de que el texto no se trunca para el "Banner con enlace".

¿Cómo se ve la ficha?

[marusaad]

Se actualizó el componente con los nuevos estilos tipográficos.

[NicoAltamirano]

📢 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	Variante para dispositivos tablet con 36px de padding por lado.
Arreglado	Para dispositivos Desktop se modificó el padding a 129px. por lado
Eliminado	Cell
Obsoleto	Cell
Cambiado	Modificamos la variante Enlace ya que el texto no se debería truncar.

✏️ Notas

• [EV]: -

[Diehault]

📢 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

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

🕰️ Changelog

CHANGELOG	Descripción
Agregado	Actualizamos el componente incluyendo la colección de variables con la nueva paleta de colores.
Arreglado
Eliminado
Obsoleto
Cambiado	Incorporamos los botones primarios como patrón de diseño dentro del uso de botones.

✏️ Notas

• El componente Banner nos sirvió para definir patrones de acción dentro de nuestros patrones de diseño. Al momento de ver a fondo nuestros patrones, podemos tomar este componente de referencia.
• Para la versión con fondo oscuro, el componente Banner no tiene 2 botones primarios, sino que incorpora 1 botón primario filled y 1 botón claro ($light) outlined.