Pie de página (footer)
Closed this issue · 12 comments
Pie de página (footer)
Nombre en Obelisco
Pie de página (footer)
Tipo de componente
Organismo
Links
UI Kit | Branch | Ficha Figma | Estándares | Storybook | Informe | Excel
Ejemplo en Bootstrap
No hay
Ejemplos de aplicación en BA
Home
Se construyó una sección, que acompañará al pie de página, compuesta de una pregunta y 2 acciones (principal y secundaria). Esta información variará según el contenido del activo digital al cual se está aplicando.
Se creó en Figma como una propiedad booleana la cual se podrá activar o desactivar según necesidad dentro del componente de Pie de página.
Link a la brunch de Figma: https://www.figma.com/file/ToGlPBzfp1gKDmaCwKWtXS/branch/tLWzOsuijCT3fF4wYkswRs/UI-KIT---Obelisco?type=design&node-id=5350%3A16558&mode=design&t=yrFTSnXBAV1nMSCN-1
Por otro lado se creó una brunch con la ficha de este componente (Pie de página) en donde se actualizó el contenido sumando al pie de página el "indicador de utilidad"
Link a la ficha en Figma: https://www.figma.com/file/Pi8vXNQiMDtCNvV1aTCQX7/branch/lNnOhq5myz4wKUn50uPRh1/Fichas?type=design&node-id=1589%3A813&mode=design&t=seJUSkuZjfgDkaHk-1
Se realizó el merge en Figma el día 26/07/2023
Se reabre la tarjeta por nuevo requerimiento relacionado a generar una divisón entre el indicador y el fondo (porque los dos pueden ser de fondo secundario)
✍️ Se actualizó el componente de Pie de página y su ficha.
Indicador
Se creó el componente Indicador que estará anidado dentro del footer. De esta forma será más fácil aplicar los cambios en futuras iteraciones.
- Tiene una sola variante de dispositivo (Desktop/Mobile).
- El componente se encuentra oculto en la librería, porque es de uso interno sólo para anidarlo al footer.
- Se agregó un stroke superior para dividirlo de páginas con fondo secundario.
Pie de página
Se actualizó el componente eliminando variantes innecesarias y problemas de construcción.
- Se conservó la variante de dispositivo (Desktop/Mobile).
- Se eliminaron las demás variantes porque se aplicaron propiedades booleanas.
Ficha
Se actualizó la información de la ficha y se incorporaron nuevas imágenes a partir de los cambios realizados.
Dejamos en rojo una parte de la ficha que sabemos si sería necesario que aparezca como clarificación @camilembo. Queda a la izquierda la ficha vieja para comparar.
- Se cambió el nombre de la sección Pie de página institucional a Información gubernamental, para no generar confusiones futuras con el Bloque institucional.
Se modificó la info en la ficha
MERGE HECHO EL 02/01/2024
Actualizar los textos de la ficha de Pie de página para que se entienda mejor cuándo se usa cada variante.
Se actualizó el texto de la ficha de Pie de página según el requerimiento. Se especificó el uso de cada variante y se aclararon algunos textos de Usabilidad.
@camilembo queda para revisión
Yo lo veo bien chiques! mañana en el seguimiento que tenemos a la mañana lo pueden mostrar y ya le damos un cierre. Después de eso si todo está ok, lo comparten el canal de discord con desarrollo? :)
¡Hola! 🦔
Actualizamos el componente aprovechando la actualización general de la guía tipográfica. Encontramos algunas cosas que consideramos como evolutivos a tener en cuenta.
¿Qué hicimos?
- Cambiamos los antiguos componentes "enlaces" dentro de las diferentes secciones del componente Pie de página (footer) por el nuevo componente Enlace.
- Actualizamos los estilos tipográficos del componente.
- Cambiamos las variantes en conflicto del viejo componente Botón por instancias del nuevo componente Botón.
¿Qué cosas encontramos y creemos que pueden ser evolutivos?
- Todos los productos digitales del GCBA incluyen el versionado del producto dentro del Pie de página (footer); esto también sucede en la página web de BA. Esto podría ser parte del componente, considerando que es una práctica común, y habría que evaluar la mejor manera de incluirlo.
¿Qué dejamos anotado en la página del componente en el UI kit?
¿Cómo se ve la página del componente en la librería del UI kit?
📢 Nuevo requerimiento
Issues relacionados
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 | Se creó la variante tablet, con 36px de padding para los contenedores. |
| Arreglado | Los contenedores del footer ahora están en fill y los contenedores con enlaces en wrap para que pasen a la siguiente linea. |
| Eliminado | - |
| Obsoleto | - |
| Cambiado | Se estableció el padding vertical entre las líneas de enlaces en 16px. Se cambó el padding lateral de los contenedores de “Información útil” y legales de 141px a 129px para que se adapten al margen de la nueva grilla en Desktop. Se cambó el padding lateral del Indicador para Desktop de 141px a 129px correspondiéndose con la nueva grilla. En mobile no se realizó ningún cambio porque la grilla continúa igual. |
✏️ Notas
Ninguna nota.