Sistema de diseño Queensland Government.

Elige una implementación de Queensland para sistema de diseño Queensland Government

Especifica el entorno de ejecución con precisión

Queensland documenta varias vías de implementación. Este estudio usa el paquete público @qld-gov-au/qgds-bootstrap5 en la versión 2.4.1, con su comportamiento de modal Bootstrap. No afirma usar la nueva línea de componentes web Lit. Indicar el nombre y la versión de la implementación evita que los lectores confundan componentes con nombres similares y reglas de inicialización incompatibles.

Distingue los ejemplos estables de las líneas en desarrollo

El repositorio oficial de componentes web marca su línea actual como alfa, mientras que la ruta Vanilla anterior es una implementación de referencia independiente. El ejemplo ejecutable aquí se mantiene en una sola ruta probada basada en Bootstrap. Antes de una migración futura, conviene volver a comprobar el marcado, los nombres de los tokens y los contratos de los componentes, en lugar de limitarse a sustituir la URL de una hoja de estilos.

Roles del tema e ilustración de recursos sistema de diseño Queensland Government

Consulta juntos los roles claro y oscuro

La tabla de parámetros incluye los roles emparejados claro y oscuro del paquete real. Las acciones principales, los colores de los enlaces, el foco y los roles de texto cambian según el contexto de la superficie. El paquete de recursos actual usa una composición clara; las entradas oscuras son valores de referencia, no indican que la página tenga un control para cambiar de tema.

Usa ilustraciones sin inventar tokens de marca

Cada tarjeta contiene una ilustración original de un documento numerado. Los cuatro fondos apagados de las ilustraciones distinguen los tipos de recursos creados para esta propuesta. Esos colores y el radio de 8px de las tarjetas son estilos propios de la aplicación y se identifican por separado de la tabla de roles publicada. La biblioteca proporciona los botones reales, el estilo de las casillas de verificación y el de los modales, que sirven de base para la interfaz.

Sistema de diseño Queensland Government Escala de lectura y contenido de las tarjetas

Cargar la tipografía pública para texto de cuerpo

El rol de texto de cuerpo del paquete utiliza su familia sans serif, con un tamaño de 1rem y una altura de línea de 1.5. La vista previa carga fuentes Noto Sans locales, de modo que el resultado no depende de una solicitud a Google Fonts. Los encabezados, las descripciones y el estado con el recuento de elementos seleccionados siguen siendo legibles cuando las tarjetas se disponen en una sola columna.

Añadir una descripción útil a cada recurso

Cada tarjeta indica un tipo, un tiempo de lectura estimado, un título concreto y un propósito breve. Las duraciones son estimaciones creadas para el taller, no datos de analítica de uso. La etiqueta de selección repite el nombre del recurso, para que la acción siga teniendo sentido cuando una tecnología de asistencia la encuentre de forma independiente. La tarjeta entera no se convierte en un objetivo de clic ambiguo.

Sistema de diseño Queensland Government Selección mediante casillas de verificación y comentarios derivados

Mantener deshabilitada la acción de revisión si no hay elementos seleccionados

Las casillas de verificación independientes permiten cualquier combinación de los cuatro recursos. Un Set almacena los índices seleccionados; el recuento y la lista de revisión se derivan de ese estado. La revisión de la selección está deshabilitada mientras el Set esté vacío. Así se evita abrir un diálogo sin contenido útil y, a la vez, el recuento visible en cero explica el motivo.

• Usar casillas de verificación independientes para una lista de varios recursos.
• Derivar el recuento de elementos seleccionados de los mismos datos que el diálogo.
• Incluir el nombre del recurso en la etiqueta de cada casilla de verificación.

Borrar la confirmación anterior después de cualquier cambio

Sistema de diseño Queensland Government Diálogo de revisión y retorno del foco

Usar el modal nativo para la revisión

La instancia de Modal Bootstrap abre un diálogo cuyo encabezado proporciona la etiqueta. El cuerpo contiene los nombres de los recursos seleccionados en ese momento, y las acciones permiten seguir editando o confirmar localmente. Escape y el control de cierre descartan el diálogo. Cuando se activa el evento nativo hidden, la aplicación devuelve el foco a «Revisar selección».

Evitar transiciones innecesarias que puedan generar condiciones de carrera

El ejemplo omite la clase de desvanecimiento opcional. Así, una acción rápida de confirmación o de Escape cierra el diálogo de inmediato, en lugar de ignorarse mientras se ejecuta una transición de apertura. El modal sigue proporcionando la gestión del foco y el comportamiento de la superposición de fondo. No se debe depender del movimiento para entender si una acción de revisión ha surtido efecto.

Sistema de diseño Queensland Government Implementación completa del paquete de recursos

Recrear exactamente el estudio local

Crear un proyecto Vite vanilla e instalar el paquete QGDS Bootstrap fijado, junto con Bootstrap y Noto Sans. Usar la ruta exportada qld.bootstrap.css del paquete en lugar de suponer una importación interna de dist. Guardar la entrada completa y queensland.css con un elemento raíz de montaje. El código fuente incluye todos los registros de recursos, las ilustraciones SVG originales, la lógica de selección y las transiciones del modal.

1. Instalar el paquete QGDS Bootstrap fijado y la fuente pública.
2. Usar la ruta exportada de la hoja de estilos con la entrada completa y CSS.
3. Seleccionar dos recursos y probar Escape y el retorno del foco.
4. Confirmar localmente, editar la selección y comprobar que se borra el resultado anterior.

Definir deliberadamente las reglas de transición y de foco del modal

La ruta QGDS Bootstrap usa Bootstrap Modal, por lo que el cierre debe seguir el ciclo de vida nativo del modal. Devolver el foco a «Revisar selección» después de hidden.bs.modal en lugar de calcular un retraso. Si se añade fade más adelante, hay que tener en cuenta el periodo de transición: una solicitud de cierre inmediata mientras se abre puede ignorarse.

Generar la lista de revisión a partir de la selección actual al abrir el modal e invalidar cualquier confirmación local anterior cuando cambie una casilla de verificación. Escape debe cerrar la revisión sin modificar las selecciones. Mantener los objetivos de las casillas separados de las ilustraciones de las tarjetas evita que compitan interacciones de clic aplicadas a toda la tarjeta y proporciona a cada recurso una etiqueta de selección accesible y precisa.

Sistema de diseño Queensland Government Ejemplos de componentes del sistema de diseño

import Modal from 'bootstrap/js/dist/modal';
import '@qld-gov-au/qgds-bootstrap5/qld.bootstrap.css';
import '@fontsource/noto-sans/latin-400.css';
import '@fontsource/noto-sans/latin-700.css';
import './queensland.css';
const resources=[['Conversation planner','A short structure for a useful team discussion.','Guide','10 min'],['Observation notes','Capture what happened before interpreting why.','Worksheet','15 min'],['Decision record','Keep a reasoned account of the choice and its limits.','Template','10 min'],['Review checklist','Check content, keyboard behavior and narrow layouts.','Checklist','20 min']];document.getElementById('root').innerHTML=`<main><p class="eyebrow">QUEENSLAND DESIGN SYSTEM / ORIGINAL RESOURCE STUDY</p><h1>Build a workshop resource pack</h1><p class="lead">Choose useful sample resources, then review your local selection. No files are requested or sent.</p><div class="selection-bar"><p id="count" role="status">0 resources selected</p><button id="review" class="btn btn-primary" disabled>Review selection</button></div><div class="resource-grid">${resources.map(([title,desc,type,time],i)=>`<article class="resource-card"><div class="art art-${i}" aria-hidden="true"><span>${String(i+1).padStart(2,'0')}</span><svg viewBox="0 0 160 90"><rect x="20" y="10" width="120" height="70" rx="4"/><path d="M38 30h84M38 45h58M38 60h70"/></svg></div><div class="card-body"><p class="meta">${type} · ${time}</p><h2>${title}</h2><p>${desc}</p><div class="form-check"><input class="form-check-input" type="checkbox" value="${i}" id="resource-${i}"><label class="form-check-label" for="resource-${i}">Add ${title.toLowerCase()}</label></div></div></article>`).join('')}</div><div id="review-modal" class="modal" tabindex="-1" aria-labelledby="review-heading" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><h2 id="review-heading" class="modal-title fs-4">Review your resource pack</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close review"></button></div><div class="modal-body"><p>These original resources form a local planning list.</p><ul id="review-list"></ul><p class="small">This preview does not produce files or contact a service.</p></div><div class="modal-footer"><button class="btn btn-secondary" data-bs-dismiss="modal">Keep editing</button><button id="confirm" class="btn btn-primary">Confirm local list</button></div></div></div></div><section id="result" hidden role="status"><h2>Local list ready</h2><p id="result-text"></p><button id="clear" class="btn btn-secondary">Clear the list</button></section></main>`;const selected=new Set();const $=id=>document.getElementById(id);const modal=new Modal($('review-modal'));document.querySelectorAll('.form-check-input').forEach(input=>input.addEventListener('change',()=>{const i=Number(input.value);input.checked?selected.add(i):selected.delete(i);$('count').textContent=selected.size+' resource'+(selected.size===1?'':'s')+' selected';$('review').disabled=!selected.size;$('result').hidden=true}));$('review').addEventListener('click',()=>{$('review-list').replaceChildren(...[...selected].sort().map(i=>{const li=document.createElement('li');li.textContent=resources[i][0];return li}));modal.show()});$('review-modal').addEventListener('hidden.bs.modal',()=>$('review').focus());$('confirm').addEventListener('click',()=>{$('result-text').textContent=[...selected].sort().map(i=>resources[i][0]).join(', ')+'. Your selection is held only until this page reloads.';$('result').hidden=false;modal.hide()});$('clear').addEventListener('click',()=>{selected.clear();document.querySelectorAll('.form-check-input').forEach(i=>i.checked=false);$('count').textContent='0 resources selected';$('review').disabled=true;$('result').hidden=true;document.querySelector('.form-check-input').focus()});

body{margin:0}main{max-width:1200px;padding:32px;margin:auto}.eyebrow{font-size:14px;font-weight:700;letter-spacing:.04em}h1{max-width:26ch}.lead{max-width:65ch}.selection-bar{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;border-bottom:1px solid #ccc;margin-bottom:24px}.selection-bar p{margin:0;font-weight:700}.resource-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.resource-card{border:1px solid #ccc;border-radius:8px;overflow:hidden}.card-body{padding:24px}.card-body h2{font-size:24px;line-height:1.3}.meta{font-size:14px}.art{height:130px;display:flex;align-items:center;justify-content:space-between;padding:24px;background:#eaf4f7;color:#005e85}.art-1{background:#eef3ea;color:#3b6738}.art-2{background:#f4eef7;color:#6b427b}.art-3{background:#faf0e4;color:#8c592b}.art span{font-size:36px;font-weight:700}.art svg{width:160px;height:90px;fill:none;stroke:currentColor;stroke-width:3}.form-check{margin-top:24px}.modal-title{margin:0}.modal li{margin:12px 0}#result{margin-top:32px;padding:24px;background:#eef5f3;border-left:4px solid #20775b}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.resource-grid{grid-template-columns:1fr}.selection-bar{align-items:start;flex-direction:column}.art{height:110px}h1{font-size:34px}}