Saltar al contenido
COMPAÑÍADE INNOVACIÓNDE SANTIAGO Style v10Sistema de diseño
Revisión
Menú
Índice de Kit UI
Kit UI Componentes

Representaciones.

Patrón canónico de representaciones para firmas y documentos, scribe, medicamentos y editorial sebastián.

Verlo por niveles

Primero el componente, después la variación de marca y finalmente su uso dentro de una página.

Ver y copiar el código de este render
HTML del nivel canónico
<section class="ui-sample ui-document" data-representation-list="true"><h3>Representaciones</h3><ul><li><a href="#html">HTML accesible</a><span>v4 · 42 KB</span></li><li><a href="#pdf">PDF de revisión</a><span>v4 · 284 KB</span></li><li><a href="#json">Datos estructurados</a><span>JSON · 18 KB</span></li></ul></section>

Variaciones por marca y sitio

Cada cambio visible declara su autoridad; lo que permanece canónico no se vuelve a inventar en el producto.

firmasydocumentos.cl

Firmas y Documentos

Autoridad: Feedback de revisión r14 + cis.document.v1

Representaciones

Cambia en esta marca

  • Nombre completo con espacios y color café
  • Densidad documental y metadatos de autoridad

Permanece canónico

  • Firma, digest, versión y recibo no son decoración
  • Chrome, foco y controles canónicos
innovacionsantiago.cl

Compañía de Innovación de Santiago

Autoridad: CONSTITUTION.md + LOGOS-CANONICOS.md

Formatos del informe INF-2026-007

Cambia en esta marca

  • Navegación y contenido propios del servicio
  • Acento reservado para acciones y datos

Permanece canónico

  • Mark CIS y namebrand de tres líneas
  • IBM Plex Sans, foco, espaciado y anatomía

Comparación histórica recuperable

Compara la propuesta con cortes reales del repositorio. La ausencia de una muestra se declara y nunca se reconstruye de memoria.

Estado actual
Representaciones no tiene una implementación vigente demostrada; sus ejemplos son material candidato.
Cambio propuesto
Publicar en r19 el contrato de Representaciones para Patrón canónico de representaciones para firmas y documentos, scribe, medicamentos y editorial sebastián.
Qué ocurre si respondes No
Representaciones queda fuera de r19 y sus ejemplos siguen sólo como evidencia pendiente de reformulación.

Preparando comparación histórica…

Antes / r19

La comparación convierte una regla abstracta en una diferencia visible y verificable.

r19 · correctoContrato canónico renderizado

Representaciones

  • Muestra versión, estado, partes y representación verificable.
  • Conserva historial, firma y digest fuera del puro tratamiento visual.
Antes · problema observadoAnti-ejemplo no interactivo
Documento vigenteÚltima versiónSin autoridad, versión, fecha ni digest
  • No presentes un borrador como firmado o vigente.
  • No alteres la autoridad del contrato documental desde Style.

Responsive

La misma anatomía debe conservar lectura, foco y acciones sin cortar contenido ni crear scroll horizontal en la página.

320 pxMóvil y zoom

Representaciones

1280 pxEscritorio

Formatos del informe INF-2026-007

Cobertura

DimensiónContrato
Propietario canónicoSistema de diseño CIS y Firmas y Documentos · core/core-style
ConsumidoresFirmas y Documentos, Scribe, Medicamentos y Editorial Sebastián
Dependenciascontrato documental, representaciones versionadas
Estadocandidato

Evidencia de adopción

Patrón propuesto. 0 implementaciones observadas en 0 repositorios.

La observación demuestra uso existente; la aceptación canónica sigue dependiendo de esta ficha y de su propietario.

DatoResultado
ClasificaciónPatrón propuesto
Implementaciones0 implementaciones observadas
RepositoriosNingún repositorio observado
Snapshotkit/componentes/componentes-observados.json

Consumidores observados

El inventario conserva repositorio, archivo fuente y criterio de asociación. Observar una implementación no la convierte automáticamente en canónica.

Ver implementaciones asociadas a Representaciones

Estados

Estado requerido
borrador
en revisión
firmado
archivado

Accesibilidad

  • Conserva nombre accesible, orden de lectura y foco visible.
  • Funciona a 320 px, con zoom de 200% y texto largo.
  • El color nunca es la única señal de estado o acción.
  • El contenido esencial permanece disponible sin JavaScript.

Código HTML

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia
<section class="ui-sample ui-document" data-representation-list="true"><h3>Representaciones</h3><ul><li><a href="#html">HTML accesible</a><span>v4 · 42 KB</span></li><li><a href="#pdf">PDF de revisión</a><span>v4 · 284 KB</span></li><li><a href="#json">Datos estructurados</a><span>JSON · 18 KB</span></li></ul></section>

Código TAILWIND

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia
<section class="ui-sample ui-document border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-representation-list="true"><h3>Representaciones</h3><ul class="grid gap-2"><li><a class="underline underline-offset-4" href="#html">HTML accesible</a><span>v4 · 42 KB</span></li><li><a class="underline underline-offset-4" href="#pdf">PDF de revisión</a><span>v4 · 284 KB</span></li><li><a class="underline underline-offset-4" href="#json">Datos estructurados</a><span>JSON · 18 KB</span></li></ul></section>

Código REACT

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia
export interface RepresentationListItem {
  /** Nombre de la representación («HTML accesible», «PDF firmado»). */
  label: string;
  href: string;
  /** Versión o formato y tamaño («v4 · 42 KB»); vacío lo oculta. */
  detail?: string;
}

export interface RepresentationListProps {
  title?: string;
  /** Una entrada por formato disponible del mismo documento. */
  items?: RepresentationListItem[];
  className?: string;
}

const REPRESENTATION_LIST_ITEMS: RepresentationListItem[] = [
  { label: "HTML accesible", href: "#html", detail: "v4 · 42 KB" },
  { label: "PDF de revisión", href: "#pdf", detail: "v4 · 284 KB" },
  { label: "Datos estructurados", href: "#json", detail: "JSON · 18 KB" },
];

/**
 * Lista de las representaciones de un documento (HTML, PDF, datos) con su versión o formato y tamaño; se usa en la ficha del documento para elegir en qué formato abrirlo.
 *
 * @example <RepresentationList items={[{ label: "HTML accesible", href: "/documentos/fyd-184/v4.html", detail: "v4 · 42 KB" }, { label: "PDF firmado", href: "/documentos/fyd-184/v4.pdf", detail: "v4 · 284 KB" }]} />
 */
export function RepresentationList({
  title = "Representaciones",
  items = REPRESENTATION_LIST_ITEMS,
  className,
}: RepresentationListProps) {
  return (
    <section className={["ui-document", className].filter(Boolean).join(" ")} data-representation-list>
      {title ? <h3>{title}</h3> : null}
      {items.length ? (
        <ul>
          {items.map((item, i) => (
            <li key={`${item.href}-${i}`}>
              <a href={item.href}>{item.label}</a>
              {item.detail ? <span>{item.detail}</span> : null}
            </li>
          ))}
        </ul>
      ) : null}
    </section>
  );
}