Revisar y ajustar el flujo y consumo de estilos de forma global por medio de consulta del web componet y assets según flujo cliente monolítico

[fabianbarreto02]

Se requiere realizar el proceso de Revisar y ajustar el flujo y consumo de estilos de forma global por medio de consulta del web componet y assets según flujo cliente monolítico

Sub Tareas

• [x] Revisar el flujo actual en el cliente monolítico para el consumo del repositorio assets https://github.com/udistrital/assets/blob/develop/urano-style.css y consumo del web componet https://github.com/udistrital/web-components

https://github.com/udistrital/sga_cliente/blob/73773df25262409732b81719db802dcc5814909e/src/app/app.component.scss#L1

• [x] Documentar como funciona el flujo actual del proceso del consumo de estilos de forma global
• [x] Migrar la funcionalidad a la arquitectura de micro clientes para el consumo de los estilos del cliente ( paleta de colores, login, sidebar, header y footer)
• [x] Documentar la implementación del consumo general de estilos

Criterios de aceptación

• [ ] Revisión del flujo actual
• [ ] Implementar o ajustar el flujo en el micro cliente
• [ ] Documentar el desarrollo

Requerimientos

No aplica

Definition of Ready - DoR

• [x] Está refinada y estimada en puntos de historia por el equipo.
• [x] Incluye la descripción y criterios de aceptación, con el detalle funcional y especificaciones técnicas, de forma entendible por cualquier miembro del equipo.
• [x] No tiene bloqueos que impidan su ejecución.
• [x] Las dependencias están identificadas y resueltas.
• [x] Puede ser probada dentro del Sprint.

Definition of Done - DoD - Desarrollo

• [x] Desarrollo en local.
• [x] Push en Feature.
• [x] Pruebas locales (funcionales).
• [x] PR a Develop.
• [ ] Criterios de aceptación cumplidos.
• [ ] Documentación de issue realizada.
• [ ] Aprobada por SM/Líder técnico.

[fabianbarreto02]

https://pruebasconfiguracion.portaloas.udistrital.edu.co/

[redflox]

Documentación del Flujo de Consumo de Estilos Globales en sga_cliente

1. Carga de Estilos Globales

La aplicación importa un archivo de estilos CSS globales usando la URL en el archivo app.component.scss:

@import url("https://pruebasassets.portaloas.udistrital.edu.co/urano-style.css");

Este import se encuentra en el componente raíz de la aplicación, lo que significa que los estilos estarán disponibles en toda la aplicación.

2. Definición de variables CSS

El archivo urano-style.css define un conjunto de variables CSS dentro del selector :root, como se muestra a continuación:

:root {
  --primary: #03678F!important;
  --color0: #DBE9EF;
  // Más variables...
}

Estas variables se utilizan para mantener un esquema de colores coherente y fácilmente modificable a lo largo de la aplicación.

3. Uso de Variables CSS en Componentes

Dentro de los componentes, se hace uso de las variables CSS para asignar estilos. Esto se logra con var(--nombre-variable):

.checkbox-assistance deep a {
  color: var(--primary);
  // ...
}

Esto facilita la actualización de estilos a través de la aplicación al modificar las variables en urano-style.css o cargando un archivo diferente que contenga la misma definicion de estas variables, se recomiendo que este archivo solo maneje la paleta de colores para cumplir con el principio de responsabilidad unica.

[redflox]

Codepen

Temas

• URANO

[redflox]

Cómo configurar el tema

Para configurar el tema en la infraestructura de microclientes, es necesario ajustar:

1. Consumo de los assets
2. Consumo de la paleta de colores
3. Favicon

1. Consumo de los assets

Para poder configurar el consumo de los assets, se tiene que modificar la variable de entorno que se ubica en el root llamada appname, en este caso, está configurada con el valor de "sga".

Estas variables de entorno se envían como props al microfrontend core.

El core recibe las variables de entorno del root y hace uso de la variable appname para realizar consultas al servicio de assets de acuerdo con el valor del app name. Veamos un ejemplo:

• Si appname="sga"

• Si appname="polux"

2. Consumo de la paleta de colores

El consumo de la paleta de colores se hace desde el microfrontend core al servicio de assets.

Para configurar diferentes paletas de colores, se tiene que modificar el @import url("paleta-de-colores") que se encuentra en /src/styles.scss.

Si se observa la imagen, se realiza la importación de un archivo css, el cual contiene la paleta de colores. Se puede cambiar la url para que consuma otra paleta de colores o realizar una nueva, agregarla al repositorio de assets y redesplegar el servicio para poder consumir la nueva paleta de colores.

3. Favicon

Para cambiar el favicon de la aplicación:

Es necesario modificar el favicon.ico que se encuentra en el root. Aunque cada microfrontend tiene un favicon, el único que se tiene en cuenta para la aplicación es el del root.

[redflox]

TERMINADO