Blog

Liberada versión 1.72.0 del catálogo de componentes web
MANUEL GUTIERREZ BORRAS publicado el jun 26, 2025

La versión 1.72.0 del catálogo de componentes web transversal, se ha liberado en los repositorios digitales de medios de la STIC.

Versión Actual

Versión: 1.72.0
Fecha Publicación:

Próxima Release

Versión: 1.73.0
Fecha Prevista de Publicación:


Podréis consultarlos desde el Storybook del SAS.

Otros recursos

Recordad que el acceso a los Storybook es a través de la red corporativa del SAS.

Para cualquier duda pueden escribirnos a la Lista de Arquitectura( l-arquitectura.stic.sspa@juntadeandalucia.es ) y trataremos de daros soporte con la mayor brevedad que nos sea posible

CHANGELOG

🎉 ¡Lanzamiento v1.72.0 del Sistema de Diseño STIC!

📅 Publicado el 23 de junio de 2025

Prepárate para una versión con mejoras clave, nuevas propiedades y correcciones que afinan aún más la experiencia con nuestros componentes. Aquí te contamos todo lo nuevo:


Catálogo de componentes

✨ Nuevas funcionalidades

🔹 @sas/wc-stic-button-set
    ➕ Se ha añadido la propiedad title para mejorar la accesibilidad y ofrecer más contexto al usuario.

🔹 @sas/wc-stic-filters y @sas/wc-stic-filters-area
    ➕ Ahora incluyen la propiedad id para una gestión más precisa y personalizada de los filtros.

🛠️ Correcciones importantes

🔧 @sas/wc-stic-button y @sas/wc-stic-button-v2
    ✔ Se solucionaron errores en el comportamiento de la propiedad title.

🔧 @sas/wc-stic-input-v2-date
    ✔ Corregido el comportamiento de las propiedades min, max y value en la carga inicial.
    ✔ Mejorada la validación cuando se selecciona una fecha y el campo es required.

🔧 @sas/wc-stic-filters y @sas/wc-stic-filters-area
    ✔ Se arregló el tratamiento de los filtros visibles no obligatorios con valor al salir del componente.

Liberada versión 1.71.0 del catálogo de componentes web
MANUEL GUTIERREZ BORRAS publicado el jun 16, 2025

La versión 1.71.0 del catálogo de componentes web transversal, se ha liberado en los repositorios digitales de medios de la STIC.

Versión Actual

Versión: 1.71.0
Fecha Publicación:

Próxima Release

Versión: 1.72.0
Fecha Prevista de Publicación:


Podréis consultarlos desde el Storybook del SAS.

Otros recursos

Recordad que el acceso a los Storybook es a través de la red corporativa del SAS.

Para cualquier duda pueden escribirnos a la Lista de Arquitectura( l-arquitectura.stic.sspa@juntadeandalucia.es ) y trataremos de daros soporte con la mayor brevedad que nos sea posible

CHANGELOG

Release 1.71.0 – Sistema de Diseño & Catálogo de Componentes STIC

📅 Fecha: 16 de junio de 2025

Sistema de Diseño

  • ¡Nuevo componente disponible! — Segmented control v1.5.1

    El nuevo componente Segmented Control ya está disponible en la guía de estilo diseñística. Permite a los usuarios escoger una única opción dentro de un conjunto, similar a un grupo de botones segmentados.

    🗂️ Uso recomendado

    ✅ Mejores prácticas

    🎨 Consideraciones de diseño

    • Debe tener buen contraste visual y no basarse solo en el color para indicar el estado activo, especialmente si hay solo dos opciones zeroheight.com+3reddit.com+3developer.apple.com+3.

    • Puede presentarse con estilos inspirados en las guías de Apple o adaptarse a otros sistemas de diseño según el branding.

    🛠️ Integración y recursos

    • La documentación incluye: ejemplos de uso, casos de filtro o cambio de vista, pautas de accesibilidad y componentes compatibles (texto/icono).

    • Facilita consistencia visual, usabilidad avanzada y ahorro de tiempo en implementación.

    Más información y ejemplos de uso disponibles en el Sistema de diseño.


Catálogo de componentes

✨ Novedades

🔧 Nuevos componentes y especializaciones

Se suman al catálogo dos nuevas variantes del componente stic-notification para mejorar la comunicación en tus interfaces:

🔗 Más info en la documentación del componente stic-notification

✍️ Mejoras en componentes existentes

  • @sas/wc-stic-filter-chip-text
    Ahora incluye:

    • pattern: permite definir un patrón de validación para el texto.

    • validityStateMessage: mensaje personalizado al fallar la validación.

  • @sas/wc-stic-filter-chip-set
    El modelo SticFilterChipSetTextType también incorpora:

    • pattern

    • validityMessage

🐞 Correcciones

  • @sas/wc-stic-filter-chip-text
    ✅ Se corrigió el comportamiento del input al hacer clic en “Aplicar” si:

    • El campo ya tenía un valor predefinido.

    • El valor no fue modificado.

  • @sas/wc-stic-input-v2-date & @sas/wc-stic-input-v2-time
    🧼 Se ajustó el estilo para evitar inconsistencias visuales cuando el campo no tiene label.

Liberada versión 1.70.0 del catálogo de componentes web
MANUEL GUTIERREZ BORRAS publicado el jun 09, 2025

La versión 1.70.0 del catálogo de componentes web transversal, se ha liberado en los repositorios digitales de medios de la STIC.

Versión Actual

Versión: 1.70.0
Fecha Publicación:

Próxima Release

Versión: 1.71.0
Fecha Prevista de Publicación:


Podréis consultarlos desde el Storybook del SAS.

Otros recursos

Recordad que el acceso a los Storybook es a través de la red corporativa del SAS.

Para cualquier duda pueden escribirnos a la Lista de Arquitectura( l-arquitectura.stic.sspa@juntadeandalucia.es ) y trataremos de daros soporte con la mayor brevedad que nos sea posible

CHANGELOG

🎉 Release 1.70.0 – Sistema de Diseño & Catálogo de Componentes STIC

📅 09 de junio de 2025

Sistema de Diseño

  • 🪟 ¡Nuevo componente disponible! — Modal v1.5.1

    Ya está disponible el componente Modal en su versión 1.5.1, una ventana superpuesta que interrumpe el flujo de la interfaz para mostrar contenido relevante y captar toda la atención del usuario.

    Este componente está diseñado para bloquear la interacción con el contenido subyacente y exigir una acción o confirmación antes de continuar. Es ideal para mensajes importantes, decisiones críticas, formularios breves o flujos de pasos guiados.

    ✅ ¿Cuándo usarlo?

    • Cuando hay riesgo de pérdida de información

    • Para validar acciones que modifican el estado actual

    • Si se necesita una respuesta inmediata o binaria

    🚫 ¿Cuándo evitarlo?

    • Para acciones triviales o reversibles

    • Cuando la decisión puede resolverse sin interrumpir el flujo

    • Si no hay consecuencias claras tras la acción

    🧩 Tipos de Modal incluidos

    TipoDescripción breve
    ConfirmaciónSolicita una decisión inmediata con consecuencias visibles (“¿Guardar cambios?”).
    AdvertenciaRequiere confirmación explícita para acciones críticas o destructivas (“¿Eliminar archivo?”).
    PasivaMuestra información relevante sin requerir respuesta (“Solicitud enviada”).
    FormularioPermite completar tareas puntuales dentro de un formulario breve (“Editar contacto”).

    ⚠️ Importante

    La versión beta anterior del componente Modal quedará deprecada en la próxima versión 2.0.
    Te recomendamos migrar cuanto antes a esta nueva versión estable.

    📘 Más información y ejemplos de uso disponibles en la documentación oficial del Modal.


Catálogo de componentes

✨ Novedades

🧱 Nuevos componentes y especializaciones

  • <stic-notification-v2>: Se lanza su nueva versión como parte de la evolución del componente.

  • <stic-notification-v2-base>: ¡Nueva base para notificaciones!

🔧 Mejoras en componentes existentes

✅ <stic-select-v2> y <stic-select-multiple-v2>

  • ➕ Nuevas propiedades:

    • isLoading

    • hasLoadingError

✅ <stic-filter-chip-select> y <stic-filter-chip-select-multiple>

  • ➕ Nuevas propiedades:

    • isLoading

    • hasLoadingError

  • 🔁 Nuevos eventos:

    • sticFilterChipSelect:reloadFilters

    • sticFilterChipSelectMultiple:reloadFilters
      (Se disparan al pulsar “Refrescar” con hasLoadingError activado)

✅ <stic-filter-chip-set>

  • 🧩 Los modelos SticFilterChipSetSelectType y SticFilterChipSetSelectMultipleType ahora incluyen:

    • isLoading

    • hasLoadingError

🔄 Cambios en el comportamiento

📄 <stic-sheet>

  • Modo carga (isLoading) muestra skeletons en todo su contenido.

📊 <stic-table>

  • Modo carga (isLoading) muestra skeletons en cada celda de contenido.

🐞 Correcciones

🎨 Tema <stic-theme>

  • Compatibilidad ajustada a los nuevos tokens v1.5.1.6 del Sistema de Diseño.

⚠️ Deprecados

🗑️ <stic-notification>

  • El componente clásico queda obsoleto.
    🔁 Reemplázalo por <stic-notification-v2>.

Liberada versión 1.69.0 del catálogo de componentes web
MANUEL GUTIERREZ BORRAS publicado el jun 02, 2025

La versión 1.69.0 del catálogo de componentes web transversal, se ha liberado en los repositorios digitales de medios de la STIC.

Versión Actual

Versión: 1.69.0
Fecha Publicación:

Próxima Release

Versión: 1.70.0
Fecha Prevista de Publicación:


Podréis consultarlos desde el Storybook del SAS.

Otros recursos

Recordad que el acceso a los Storybook es a través de la red corporativa del SAS.

Para cualquier duda pueden escribirnos a la Lista de Arquitectura( l-arquitectura.stic.sspa@juntadeandalucia.es ) y trataremos de daros soporte con la mayor brevedad que nos sea posible

CHANGELOG

🚀 ¡Nueva versión 1.69.0 disponible!

📅 Fecha: 2 de junio de 2025

¡Ya está disponible la versión 1.69.0 del Sistema de Diseño y el Catálogo de Componentes STIC!
Esta versión llega con nuevos componentes, mejoras importantes y correcciones clave que refuerzan la experiencia de desarrollo y diseño.


Catálogo de componentes

🆕 Nuevos componentes y especializaciones

  • <stic-uploader>
    Nuevo componente para subir archivos con distintas modalidades:

    • 📂 <stic-uploader-drag-drop>: permite arrastrar y soltar archivos fácilmente.

✨ Mejoras en componentes existentes

  • @sas/stic-button-set
    ➕ Nueva propiedad: isLoading
    Muestra el estado de carga del grupo de botones.

  • @sas/stic-sheet
    ➕ Nueva propiedad: isLoading
    Controla el estado de carga del botón primario en el pie del componente.

🔄 Cambios visuales

  • Se reemplaza el componente de carga <stic-circular-progress> por el nuevo <stic-progress-indicator-circle> en:
    @sas/stic-button, @sas/stic-button-v2, @sas/stic-fab-button, @sas/stic-infinity-scroll, @sas/stic-table.

  • También se actualiza <stic-linear-progress> por <stic-progress-indicator-bar> en:
    @sas/stic-infinity-scroll-more-button, @sas/stic-pagination.

🛠️ Correcciones

  • @sas/wc-stic-input-v2
    🐞 Solucionado el comportamiento inesperado al no definir la propiedad value.

  • @sas/wc-stic-filter-area
    ✅ Arreglos en:

    • Visibilidad de filtros obligatorios al eliminar su valor.

    • Borrado correcto del filtro filter-chip-select-multiple dentro de filtros obligatorios.

🧯 Componente obsoleto (Deprecado)

  • @sas/wc-stic-file-upload
    ⚠️ Este componente ha sido depreciado.
    Se recomienda usar en su lugar:

    • <stic-uploader-button>

    • <stic-uploader-drag-drop>

Liberada versión 1.68.0 del catálogo de componentes web
MANUEL GUTIERREZ BORRAS publicado el may 26, 2025

La versión 1.68.0 del catálogo de componentes web transversal, se ha liberado en los repositorios digitales de medios de la STIC.

Versión Actual

Versión: 1.68.0
Fecha Publicación:

Próxima Release

Versión: 1.69.0
Fecha Prevista de Publicación:


Podréis consultarlos desde el Storybook del SAS.

Otros recursos

Recordad que el acceso a los Storybook es a través de la red corporativa del SAS.

Para cualquier duda pueden escribirnos a la Lista de Arquitectura( l-arquitectura.stic.sspa@juntadeandalucia.es ) y trataremos de daros soporte con la mayor brevedad que nos sea posible

CHANGELOG

🎉 ¡Nueva versión 1.68.0 disponible!

Sistema de Diseño & Catálogo de Componentes STIC
📅 26 de mayo de 2025

Sistema de Diseño

  • 📢 Nuevo Componente: Notification

    Nos complace anunciar la incorporación del componente Notification a nuestro sistema de diseño documentado en Zeroheight. Este componente está diseñado para comunicar mensajes importantes de manera clara y no intrusiva, mejorando la experiencia del usuario y manteniendo la coherencia visual en nuestras interfaces.

    🔔 Características principales:

    • Tipos de notificación: Soporta múltiples variantes como info, success, warning, error, entre otros, cada uno con su iconografía y estilo distintivos.

    • Contenido personalizable: Permite definir títulos, mensajes y acciones secundarias según las necesidades específicas de cada caso.

    • Accesibilidad: Cumple con los estándares de accesibilidad, asegurando que todos los usuarios puedan interactuar con las notificaciones de manera efectiva.

    • Integración sencilla: Fácil de implementar en diferentes contextos dentro de nuestras aplicaciones, garantizando una comunicación efectiva con el usuario.

    Para más detalles y ejemplos de uso, visita la documentación completa en Zeroheight: https://zeroheight.com/7f71786e5/p/464104-notification


Catálogo de componentes

🚀 Novedades

🧩 Nuevos componentes y especializaciones

¡Seguimos creciendo! Ahora tienes disponibles:

  • stic-uploader
    Un componente listo para facilitar la carga de archivos.

    • stic-uploader-button
      Una especialización pensada para una experiencia aún más sencilla y clara.

📊 Mejoras en componentes existentes

  • @sas/stic-progress-indicator-bar
    Se ha añadido la variable hideUpperText para un control visual más preciso.

🛠️ Ajustes y correcciones

  • @sas/wc-stic-theme
    Adaptado a los nuevos tokens v1.5.1.5 del Sistema de Diseño. ¡Más consistencia y flexibilidad!

Liberada versión 1.67.0 del catálogo de componentes web
MANUEL GUTIERREZ BORRAS publicado el may 19, 2025

La versión 1.67.0 del catálogo de componentes web transversal, se ha liberado en los repositorios digitales de medios de la STIC.

Versión Actual

Versión: 1.67.0
Fecha Publicación:

Próxima Release

Versión: 1.68.0
Fecha Prevista de Publicación:


Podréis consultarlos desde el Storybook del SAS.

Otros recursos

Recordad que el acceso a los Storybook es a través de la red corporativa del SAS.

Para cualquier duda pueden escribirnos a la Lista de Arquitectura( l-arquitectura.stic.sspa@juntadeandalucia.es ) y trataremos de daros soporte con la mayor brevedad que nos sea posible

CHANGELOG

Sistema de Diseño

  • 🆕 Actualización de Tokens – Versión 1.5.1.5

    Estilos actualizados disponibles: Acceder a la última versión de Tokens

    🔹 Novedades

    Se han añadido nuevos tokens para ampliar el sistema de diseño:

    • color.teal-on-dark

    • color.mint-on-dark

    • color.sunset-on-dark

    • color.mulberry-on-dark

    • color.info-on-dark

    • color.success-on-dark

    • color.warning-on-dark

    • color.error-on-dark

    • color.fill.status.info-on-dark

    • color.fill.status.success-on-dark

    • color.fill.status.warning-on-dark

    • color.fill.status.error-on-dark


Catálogo de componentes

🆕 Novedades

  • Nuevo componente especializado:
    🧩 <stic-input-v2-checkbox> ya disponible como parte del paquete @sas/wc-stic-input-v2.

🎨 Modificaciones

  • @sas/wc-stic-checkbox
    🔧 Se actualiza el diseño visual del componente según las nuevas pautas del Sistema de Diseño.

  • @sas/wc-stic-checkbox-group, @sas/wc-stic-transfer-list, @sas/wc-stic-tree-view
    🔁 El componente interno <stic-input-checkbox> ha sido reemplazado por <stic-input-v2-checkbox> para un comportamiento más consistente.

🐞 Correcciones

  • @sas/wc-stic-filter-chip
    ✅ En <stic-filter-chip-text>, se corrigió el valor de la etiqueta (label) a "Valor" y se eliminó el placeholder innecesario.

⚠️ Deprecado

  • @sas/wc-stic-checkbox
    🚫 Se marca como obsoleta la variable reducedTouchTarget, así como todas las variables CSS del componente.

🗑️ Eliminado

  • @sas/wc-stic-checkbox
    🧹 Se eliminó la dependencia con Material Design.

Liberada versión 1.66.0 del catálogo de componentes web
MANUEL GUTIERREZ BORRAS publicado el may 12, 2025

La versión 1.66.0 del catálogo de componentes web transversal, se ha liberado en los repositorios digitales de medios de la STIC.

Versión Actual

Versión: 1.66.0
Fecha Publicación:

Próxima Release

Versión: 1.67.0
Fecha Prevista de Publicación:


Podréis consultarlos desde el Storybook del SAS.

Otros recursos

Recordad que el acceso a los Storybook es a través de la red corporativa del SAS.

Para cualquier duda pueden escribirnos a la Lista de Arquitectura( l-arquitectura.stic.sspa@juntadeandalucia.es ) y trataremos de daros soporte con la mayor brevedad que nos sea posible

CHANGELOG

Catálogo de componentes

Modificado

  • @sas/wc-stic-button
    • Actualizada información de deprecados tanto en el fichero README.md como en la estructura en storyBook.
  • @sas/wc-stic-filter-chip, @sas/wc-stic-filter-chip-set, @sas/wc-stic-filters, @sas/wc-stic-filters-area
    • Cambiada la variable reset por delete.

Corregido

  • @sas/wc-stic-filters, @sas/wc-stic-filters-area
    • Corregida la funcionalidad del botón "Eliminar" de acuerdo con SdD v1.5.1.
    • Corregida la funcionalidad del botón "Añadir filtros" de acuerdo con SdD v1.5.1.
Liberada versión 1.65.0 del catálogo de componentes web
MANUEL GUTIERREZ BORRAS publicado el may 05, 2025

La versión 1.65.0 del catálogo de componentes web transversal, se ha liberado en los repositorios digitales de medios de la STIC.

Versión Actual

Versión: 1.65.0
Fecha Publicación:

Próxima Release

Versión: 1.66.0
Fecha Prevista de Publicación:


Podréis consultarlos desde el Storybook del SAS.

Otros recursos

Recordad que el acceso a los Storybook es a través de la red corporativa del SAS.

Para cualquier duda pueden escribirnos a la Lista de Arquitectura( l-arquitectura.stic.sspa@juntadeandalucia.es ) y trataremos de daros soporte con la mayor brevedad que nos sea posible

CHANGELOG

Sistema de Diseño

  • confetti ball Nuevo componente disponible: Progress indicator

    El nuevo componente Progress Indicator ya está disponible en nuestra biblioteca de diseño en Zeroheight. Este componente permite a los usuarios visualizar el avance de procesos o flujos de trabajo de manera clara y estructurada, mejorando la experiencia de usuario en tareas secuenciales.designsystems.media

    Características principales:

    • Diseño adaptable: Compatible con múltiples plataformas y dispositivos, asegurando una integración fluida en diversos entornos.

    • Personalización: Permite ajustar estilos y comportamientos según las necesidades específicas del proyecto.

    • Accesibilidad: Diseñado siguiendo las mejores prácticas para garantizar su uso por parte de todos los usuarios, incluyendo aquellos con discapacidades.

    Para más detalles sobre su implementación y ejemplos de uso, puedes consultar la documentación completa en el siguiente enlace:

    link  Progress Indicator en Zeroheight

    Este componente es ideal para indicar el progreso en formularios, procesos de registro, encuestas y cualquier flujo que requiera mostrar etapas completadas y pendientes.


Catálogo de componentes

Añadido

  • @sas/wc-stic-input-v2
    • Añadida especialización <stic-input-v2-radio>.

Modificado

  • @sas/wc-stic-radio

    • Modificación visual del componente de acuerdo al sistema de diseño.

  • @sas/wc-stic-select-v2, @sas/wc-stic-filter-select y @sas/wc-stic-filter-chip-text

    • Actualizado componente interno <stic-input-text> a <stic-input-text-v2>.

Deprecado

  • @sas/wc-stic-radio
    • Deprecada la variable reducedTouchTarget.
    • Deprecadas todas las variables CSS.

Eliminado

  • @sas/wc-stic-radio
    • Eliminada la dependencia con el componente <mwc-radio> de material.
Liberada versión 1.64.0 del catálogo de componentes web
MANUEL GUTIERREZ BORRAS publicado el abr 28, 2025

La versión 1.64.0 del catálogo de componentes web transversal, se ha liberado en los repositorios digitales de medios de la STIC.

Versión Actual

Versión: 1.64.0
Fecha Publicación:

Próxima Release

Versión: 1.65.0
Fecha Prevista de Publicación:


Podréis consultarlos desde el Storybook del SAS.

Otros recursos

Recordad que el acceso a los Storybook es a través de la red corporativa del SAS.

Para cualquier duda pueden escribirnos a la Lista de Arquitectura( l-arquitectura.stic.sspa@juntadeandalucia.es ) y trataremos de daros soporte con la mayor brevedad que nos sea posible

CHANGELOG

Catálogo de componentes

Añadido

Deprecado

  • @sas/wc-stic-circular-progress

    • Se depreca el componente <stic-circular-progress>. En su lugar usar <stic-progress-indicator-circle>.

  • @sas/wc-stic-linear-progress

    • Se depreca el componente <stic-linear-progress>. En su lugar usar <stic-progress-indicator-bar>.
Liberada versión 1.63.0 del catálogo de componentes web
MANUEL GUTIERREZ BORRAS publicado el abr 22, 2025

La versión 1.63.0 del catálogo de componentes web transversal, se ha liberado en los repositorios digitales de medios de la STIC.

Versión Actual

Versión: 1.63.0
Fecha Publicación:

Próxima Release

Versión: 1.64.0
Fecha Prevista de Publicación:


Podréis consultarlos desde el Storybook del SAS.

Otros recursos

Recordad que el acceso a los Storybook es a través de la red corporativa del SAS.

Para cualquier duda pueden escribirnos a la Lista de Arquitectura( l-arquitectura.stic.sspa@juntadeandalucia.es ) y trataremos de daros soporte con la mayor brevedad que nos sea posible

CHANGELOG

Catálogo de componentes

🆕 Añadido

  • 🚧 Nuevos componentes

Se han desarrollado los nuevos componentes definidos por el Sistema de Diseño dentro del componente Input, completando todas sus especializaciones, a excepción de las que pertenecen al patrón Input Group:


  • 🔧 Mejoras en componentes existentes

En los componentes @sas/wc-stic-filter-chip-date y @sas/wc-stic-filter-chip-date-range, ahora, si el usuario ya ha seleccionado una fecha, el calendario se abrirá directamente en el mes y año correspondientes a dicha fecha.

♻️ Cambios

  • Se ha actualizado el archivo README de los componentes:

    • @sas/wc-stic-filter-chip-date

    • @sas/wc-stic-filter-chip-date-range

🐛 Correcciones

  • @sas/wc-stic-time:
    Se ha corregido la validación de los valores mínimo y máximo.

  • @sas/wc-stic-calendar-v2:
    Ahora el valor máximo se interpreta correctamente, permitiendo seleccionar el último día habilitado incluso cuando hay diferencias horarias.

🚫 Obsoleto

  • @sas/wc-stic-input:
    El componente <stic-input> y todas sus especializaciones han sido deprecadas. Se recomienda utilizar en su lugar <stic-input-v2> y sus respectivas especializaciones.

Liberadas las versiones 1.61.0 y 1.62.0 del catálogo de componentes web
MANUEL GUTIERREZ BORRAS publicado el abr 15, 2025

Las versiones 1.61.0 y 1.62.0 del catálogo de componentes web transversal, se ha liberado en los repositorios digitales de medios de la STIC.

Versión Actual

Versión: 1.62.0
Fecha Publicación:

Próxima Release

Versión: 1.63.0
Fecha Prevista de Publicación:


Podréis consultarlos desde el Storybook del SAS.

Otros recursos

Recordad que el acceso a los Storybook es a través de la red corporativa del SAS.

Para cualquier duda pueden escribirnos a la Lista de Arquitectura( l-arquitectura.stic.sspa@juntadeandalucia.es ) y trataremos de daros soporte con la mayor brevedad que nos sea posible

CHANGELOG

Sistema de Diseño

  • 🎉 Nuevo componente disponible: Accordion

    Ya se encuentra publicado en la librería de componentes el nuevo Accordion. Este componente permite mostrar y ocultar contenido de forma expandible, ideal para organizar información en bloques colapsables y mejorar la experiencia de lectura.

    Consulta su documentación en Zeroheight para ver ejemplos de uso, variantes, y buenas prácticas de implementación:
    👉 Ver documentación del Accordion


  • 🆕 Actualización de Tokens – Versión 1.5.1.4

    Estilos actualizados disponibles: Acceder a la última versión de Tokens

    🔹 Novedades

    Se han añadido nuevos tokens para ampliar el sistema de diseño:

    • color.background.11

    • color.border.status.info

    • color.border.status.success

    • color.border.status.warning

    • color.border.status.error

    • color.border.status.spotlight

    • color.border.status.interaction

    • color.border.status.category-01

    • color.border.status.category-02

    ✏️ Cambios de nomenclatura

    Con el objetivo de mejorar la claridad y consistencia, se han actualizado los nombres de los siguientes tokens:

    • color.background.11 → color.background.inverse

    • color.border.status.info → color.border.status.info-accent

    • color.border.status.success → color.border.status.success-accent

    • color.border.status.warning → color.border.status.warning-accent

    • color.border.status.error → color.border.status.error-accent

    • color.border.status.spotlight → color.border.status.spotlight-accent

    • color.border.status.interaction → color.border.status.interaction-accent

    • color.border.status.category-01 → color.border.status.category-01-accent

    • color.border.status.category-02 → color.border.status.category-02-accent


  • 🎉 Nuevo componente disponible: Accordion
    ​El nuevo componente Progress Indicator ya está disponible en nuestra biblioteca de diseño en Zeroheight. Este componente permite a los usuarios visualizar el avance de procesos o flujos de trabajo de manera clara y estructurada, mejorando la experiencia de usuario en tareas secuenciales.​

    Características principales:

    • Diseño adaptable: Compatible con múltiples plataformas y dispositivos, asegurando una integración fluida en diversos entornos.

    • Personalización: Permite ajustar estilos y comportamientos según las necesidades específicas del proyecto.

    • Accesibilidad: Diseñado siguiendo las mejores prácticas para garantizar su uso por parte de todos los usuarios, incluyendo aquellos con discapacidades.​

    Para más detalles sobre su implementación y ejemplos de uso, puedes consultar la documentación completa en el siguiente enlace:​

    🔗 Progress Indicator en Zeroheight

    Este componente es ideal para indicar el progreso en formularios, procesos de registro, encuestas y cualquier flujo que requiera mostrar etapas completadas y pendientes.

Catálogo de componentes

Añadido

  • Desarrollo de nuevos componentes (aun en fase de desarrollo)

  • Modificaciones en componentes existentes:

    • @sas/wc-stic-button-set

      • Añadida la propiedad disabled que permite deshabilitar el conjunto completo de botones.

    • @sas/wc-stic-tag

      • Añadidas las variantes note, attention, promotion y neutral a la propiedad type.

    • @sas/wc-stic-card

      • Añadidas las propiedades tagType, showDivider y buttonsDataSource.
      • Añadido el evento cardButtonSet:click.

Fixed

  • @sas/wc-stic-theme
    • Adaptación a tokens v1.5.1.4 del Sistema de Diseño.
  • @sas/wc-stic-filters
    • Corrección en la obtención de los filtros requeridos sobre el DataSource.
🧭 Recursos para desarrolladores "CDN centralizado"
LUIS MARTINEZ FONTIVEROS publicado el abr 02, 2025

¡Hola equipo!

Nos complace anunciar que ya está disponible el nuevo CDN corporativo que hemos implementado para facilitar el desarrollo de nuestras aplicaciones. Este CDN aloja recursos compartidos esenciales, como componentes del sistema de diseño, logotipos, iconografías y fuentes, todo listo para integrarse de manera sencilla tanto en desarrollos centralizados como departamentales.

Con esta iniciativa, buscamos optimizar el flujo de trabajo y garantizar que todos los equipos tengan acceso rápido y fácil a los recursos más actualizados, promoviendo una mayor coherencia y eficiencia en el desarrollo de nuestras aplicaciones.

Si tienes alguna duda o necesitas asistencia, no dudes en contactarnos.

¡A seguir creando juntos!

💫 Sistema de Diseño

🌐 CDN PRE | PRO | DEV

Aclaraciones sobre " Configuración de Karma y Jasmine para su correcto funcionamiento en los entornos de IC "
LUIS MARTINEZ FONTIVEROS publicado el mar 27, 2025

En este artículo se detallan los pasos necesarios para configurar Karma y Jasmine de manera adecuada, garantizando su correcto funcionamiento dentro de los entornos de IC. Esta configuración es esencial para asegurar que nuestras pruebas unitarias se ejecuten de forma efectiva y eficiente.

Subdirección de las Tecnologías de la Información y Comunicaciones

Área de Gobernanza y Calidad

Tabla de Contenido


Histórico de cambios


Los cambios en el documento vendrán acompañados de un registro de las modificaciones. De este modo se podrá realizar un seguimiento y consultar su evolución. Ordenándose de mas recientes a menos recientes, prestando especial cuidado a las cabeceras de la tablas dónde se indican las fechas de entrada en vigor y versión.

VersiónPre-release AdopciónActivaRetiroAlcance
v01r00

 




  • Versión inicial del documento

1. Introducción

Esta guía técnica aporta información sobre cómo configurar diferentes test runner  en soluciones Front-End.


1.1 Karma JS

Karma, junto con Jasmine, permite probar el mismo código Javascript en varios navegadores web  de una manera completamente automatizada.

Para su configuración se requiere establecer unos flags que dependerá de las necesidades concretas de cada proyecto Angular.

A continuación se define los flags más utilizados que el proveedor deberá probar y comprobar que funciona para la configuración de su proyecto en particular:


FlagsDescripción
--no-sandbox

Requerido para ejecutarse sin privilegios en docker.

Cuando se ejecutan pruebas JS (usando Karma) con Headless Chrome en un contenedor docker, las pruebas fallan, informándose del siguiente error "Running as root without --no-sandbox is not supported".

--headlesshabilita el modo headles de Chromes, sin interfaz gráfica.
--disable-dev-shm-usageSolo se agrega cuando se establece la variable de entorno del sistema CI o cuando se encuentra dentro de una instancia de Docker. La partición /dev/shm es demasiado pequeña en ciertos entornos de VM, lo que hace que Chrome falle o se bloquee
--disable-web-securityDeshabilitar la seguridad web en el navegador.
--disable-software-rasterizerDeshabilita el uso de Software 3D de rasterización (una serie de píxeles, puntos o líneas, que, cuando se muestran juntos, crean la imagen que se representó a través de formas)
--disable-gpuDeshabilita la aceleración de hardware GPU en el servidor



A continuación se muestra un ejemplo de configuración de Karma para desarrollo (modo Debug establecido a true)


1 Ejemplo configuración Karma: karma.conf.js 
  // Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
process.env.CHROME_BIN = require("puppeteer").executablePath();

module.exports = function (config) {
  config.set({
    basePath: "",
    frameworks: ["jasmine", "@angular-devkit/build-angular"],
    plugins: [
      require("karma-jasmine"),
      require("karma-chrome-launcher"),
      require("karma-jasmine-html-reporter"),
      require("karma-coverage"),
      require("@angular-devkit/build-angular/plugins/karma"),
      require("karma-spec-reporter"),
    ],
    client: {
      jasmine: {
        // you can add configuration options for Jasmine here
        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
        // for example, you can disable the random execution with `random: false`
        // or set a specific seed with `seed: 4321`
      },
      clearContext: false, // leave Jasmine Spec Runner output visible in browser
    },
    jasmineHtmlReporter: {
      suppressAll: true, // removes the duplicated traces
      suppressFailed: true, // Suppress failed messages
    },
    coverageReporter: {
      dir: require("path").join(__dirname, "./coverage"),
      subdir: ".",
      reporters: [{ type: "html" }, { type: "text-summary" }, { type: "lcov" }],
      check: {
        global: {
          statements: 65,
          branches: 65,
          functions: 65,
          lines: 65,
        },
      },
    },
    reporters: ["progress", "spec", "kjhtml"],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ["ChromeHeadlessNoSandbox"],
    customLaunchers: {
      ChromeHeadlessNoSandbox: {
        base: "ChromeHeadless",
        flags: [
          "--no-sandbox", // required to run without privileges in docker
          "--user-data-dir=/tmp/chrome-test-profile",
          "--disable-web-security",
          "--remote-debugging-port=9222",
        ],
        debug: true,
      },
    },
    singleRun: false,
    restartOnFileChange: true,
  });
};


La configuración de Karma en Producción debe de contener únicamente los flags estrictamente necesarios. Por ejemplo, no debería de configurar los parámetros --watch  o --debug

También es necesario que el proyecto esté configurado con las últimas versiones estables de Jasmine y Karma para que no se produzca errores como el siguiente por versiones deprecadas:


2 Ejemplo de error ejecución de test por versión deprecada de componentes
> ng test

'karma-coverage-istanbul-reporter' usage has been deprecated since version 11.




Liberada versión 1.60.0 del catálogo de componentes web
MANUEL GUTIERREZ BORRAS publicado el mar 24, 2025

La versión 1.60.0 del catálogo de componentes web transversal, se ha liberado en los repositorios digitales de medios de la STIC.

Versión Actual

Versión: 1.60.0
Fecha Publicación:

Próxima Release

Versión: 1.61.0
Fecha Prevista de Publicación:


Podréis consultarlos desde el Storybook del SAS.

Otros recursos

Recordad que el acceso a los Storybook es a través de la red corporativa del SAS.

Para cualquier duda pueden escribirnos a la Lista de Arquitectura( l-arquitectura.stic.sspa@juntadeandalucia.es ) y trataremos de daros soporte con la mayor brevedad que nos sea posible

CHANGELOG

Sistema de Diseño

  •  Componentes

    • Nos complace anunciar la publicación del nuevo componente Uploader, diseñado para facilitar la carga de archivos con una experiencia optimizada y accesible.

    • Este componente permite a los usuarios adjuntar archivos de manera intuitiva, ofreciendo soporte para arrastrar y soltar (drag & drop), previsualización de archivos y validaciones configurables.

      📌 Características principales:
      ✔️ Soporte para múltiples archivos
      ✔️ Indicadores de progreso y estados de carga
      ✔️ Configuración flexible para restricciones de formato y tamaño
      ✔️ Interfaz accesible y adaptable a distintos contextos de uso

      Consulta la documentación completa aquí 👉 Uploader en Zeroheight

Catálogo de componentes

Añadido

Deprecado

  • @sas/wc-stic-paginator
    • Se depreca el componente <stic-paginator>. En su lugar usar <stic-pagination>.

Candidatos para la siguiente versión


Liberada versión 1.59.0 del catálogo de componentes web
MANUEL GUTIERREZ BORRAS publicado el mar 17, 2025

La versión 1.59.0 del catálogo de componentes web transversal, se ha liberado en los repositorios digitales de medios de la STIC.

Versión Actual

Versión: 1.59.0
Fecha Publicación:

Próxima Release

Versión: 1.60.0
Fecha Prevista de Publicación:


Podréis consultarlos desde el Storybook del SAS.

Otros recursos

Recordad que el acceso a los Storybook es a través de la red corporativa del SAS.

Para cualquier duda pueden escribirnos a la Lista de Arquitectura( l-arquitectura.stic.sspa@juntadeandalucia.es ) y trataremos de daros soporte con la mayor brevedad que nos sea posible

CHANGELOG

Catálogo de componentes

Añadido

  • @sas/wc-stic-table
    • Se añade el componente switch a la lista de acciones de la tabla, el cual, si se pulsa, lanza el evento table:switchChange.

Modificado

  • @sas/wc-stic-filter-chip-date, @sas/wc-stic-filter-chip-date-range
    • Actualización de ambos componentes usando <stic-calendar-v2> en lugar de <stic-calendar>.

Corregido

  • @sas/wc-stic-calendar-v2

    • Arreglado funcionamiento del rango cuando seleccionas una fecha que incluye dos meses distintos.

Candidatos para la siguiente versión