Workshop Kit · referencia del widget
Publicadopersona-card-builder
Captura estructurada de persona para la L4. El operador esboza un cliente arquetípico específico — nombre, edad, rol, hasta seis chips de detalle y un párrafo narrativo — y ve una "tarjeta del cliente" construirse en vivo junto al formulario. Doble escritura a customerCard (estructurado) y customerParagraph (el cable de prosa existente que las lecciones posteriores ya leen), así nada en el riel, generador de la L14, o lecturas de L9/L10/L12 tiene que cambiar.
Demo en vivo
Escribe un nombre, edad, rol; añade hasta seis detalles como chips; escribe un párrafo. La tarjeta a la derecha se actualiza en vivo. El avatar deriva iniciales del nombre; sin carga de imagen, sin fetch remoto — coincide con la postura de "sin fetch" de la suite.
Sin bloque de configuración — los defaults son correctos
Contrato
| Comportamiento | Notas |
|---|---|
Lee customerCard |
Pre-llena nombre + edad + rol + traits[] de commits previos. |
Lee customerParagraph |
Pre-llena el textarea narrativo — preserva lo que el operador haya escrito con el widget text-input antiguo al que reemplaza. |
Escribe customerCard |
{ name, age, role, traits: [string, …] } — el nuevo cable estructurado. L9, L13, la plantilla About de la L14 pueden optar por este para renderizado más rico. |
Escribe customerParagraph |
Cable de prosa sin cambios. L10 (horas), L12 (keyword-builder), la plantilla About de la L14 siguen leyéndolo. |
| Límite de detalles | Máximo 6 chips. Añadir un 7º dispara un anuncio en región polite; los 6 existentes no se mueven. |
| Avatar | 1–2 iniciales derivadas del nombre (primera + última palabra, mayúsculas). Fondo coloreado por palette[0] cuando esté disponible — el acento del operador. |
Marcado
Sin bloque de configuración. Los defaults son correctos porque el set de campos es fijo — nombre, edad, rol, detalles, párrafo.
Accesibilidad
- Inputs etiquetados para nombre, edad, rol, detalles. La lista de chips es un
role="list"con cada chip un<button>que anuncia "quitar: <detalle>" víaaria-label. - Añadir un detalle: escribir, presionar Enter o clic en el botón Añadir. El botón Añadir es accesible por teclado y anuncia el éxito vía una región polite.
- Contador de caracteres para el párrafo anuncia los caracteres restantes politely.
- La tarjeta de vista previa está marcada
aria-hidden="true"en el avatar visual y etiquetada con el encabezado para que los lectores de pantalla no lean las iniciales dos veces.
Por qué doble escritura
El "persona-card-builder" del plan eleva un párrafo libre a campos estructurados. Pero el iframe del riel existente, la plantilla About de la L14 y las lecciones posteriores (L9, L10, L12) todas leen customerParagraph como prosa. Reescribir todas ellas para leer una tarjeta estructurada es un refactor más grande de lo que este widget justifica. La doble escritura resuelve la tensión: el widget es dueño de la estructura, la prosa sigue siendo el cable canónico, el lado estructurado está disponible el momento que un consumidor quiera leerlo.
Dónde se publica
Código fuente
/tools/_shared/workshop/persona-card-builder.js — ~250 LOC. Exporta { tag, contextKeys, mount, serialize } según el contrato de widgets del Workshop Kit. Define su propio set de strings bilingüe inline — sin necesidad de round-trip por i18n.es.json porque los strings son etiquetas internas del widget.