Sistema de diseño Agriculture.

Sistema de diseño Agriculture Core y Emotion

Empieza con el proveedor real

AgDS es una biblioteca React con estilos aplicados mediante Emotion. Core envuelve la aplicación y proporciona estilos de restablecimiento, variables CSS y configuración del tema. La importación del tema seleccionado procede de @ag.ds-next/react/ag-branding; es independiente de Core, no una prop de proveedor inventada para cada componente.

El ejemplo independiente es una interpretación explícita de tokens y estados de tareas documentados en HTML/CSS. No afirma ejecutar la biblioteca React. Su máquina de estados sirve para examinar el comportamiento de las dependencias; el ejemplo completo de React proporciona la ruta de componentes real para la implementación.

Consulta la especificación complementaria

Sistema de diseño Agriculture Tipografía y escala del sistema

Legible sin descargar fuentes

AgDS utiliza una pila de fuentes del sistema que incluye la fuente de interfaz de la plataforma y las alternativas Helvetica y Arial. La escala tipográfica documentada va de xs 14px, sm 16px, md 20px y lg 24px, y las funciones de mayor tamaño cambian en móviles: xl 28→32px, xxl 32→40px y xxxl 40→48px.

La maquinaria tipográfica ajusta las alturas de línea a una cuadrícula de 4px. Usa las funciones fontSize y lineHeight del componente en lugar de multiplicar cada tamaño de fuente por una proporción arbitraria. La vista previa usa el tamaño de cuerpo sm, un encabezado de 32px en móviles y 40px en ventanas más grandes, y no descarga ninguna fuente.

Consulta la especificación complementaria

Sistema de diseño Agriculture Espaciado y props responsivas

Los números representan tokens basados en rem

En AgDS, un espaciado de 1.5 equivale a 24px con el tamaño de raíz estándar; no significa 1.5px. La secuencia de espaciado documentada incluye 0.25=4px, 0.5=8px, 0.75=12px, 1=16px, 2=32px y 3=48px. FormStack usa 2 para el espacio entre campos, mientras que los grupos de fieldset más grandes usan 3.

Las props responsivas aceptan objetos con puntos de quiebre con nombre. Box padding={{xs:1,md:3}} empieza en 16px y aumenta a 48px a los 768px. Las claves intermedias omitidas heredan el valor anterior. Esto es más explícito que una serie de anulaciones de CSS sin relación entre sí.

Consulta la especificación complementaria

Sistema de diseño Agriculture El primer plano depende del fondo

Usa conjuntamente las funciones claras y oscuras

La referencia de color define funciones emparejadas de primer plano, fondo, borde y sistema. El texto claro es #313131, el texto atenuado es #626262 y la acción es #00558b. La acción en modo oscuro pasa a ser #9ee8ff sobre la paleta oscura. El color de acción indica interactividad y no debe usarse como decoración arbitraria en una tarea que no se puede abrir.

La vista previa usa la paleta clara y un enlace de acción azul subrayado. El trabajo bloqueado se muestra como texto con una explicación, en lugar de como un control azul que rechaza los clics sin avisar. La finalización se expresa con palabras y un tratamiento verde; el estado nunca se comunica solo mediante el color.

Consulta la especificación complementaria

Sistema de diseño Agriculture TaskList es navegación

Separa la disponibilidad de la finalización

TaskList acepta elementos y una propiedad ordered opcional. Cada elemento tiene una etiqueta y un estado; href genera navegación, mientras que omitir href permite usar un botón onClick. Los valores de estado disponibles son todo, doing, done, doneRecently, blocked y notRequired.

Usa esta estructura para transacciones con varias tareas, especialmente para trabajos que se retoman en distintas sesiones. Un único campo no necesita una lista de tareas. En este ejemplo, la preparación de la mercancía y de la ruta son requisitos previos independientes; la revisión no está disponible hasta que se completen ambos. Esta es una regla de demostración local, no una decisión sobre la elegibilidad para importar.

• todo significa que se puede empezar la tarea.
• blocked significa que los requisitos previos impiden empezar; indica el motivo.
• notRequired significa que la tarea ya no corresponde; no equivale a que esté completada.

Consulta la especificación complementaria

Sistema de diseño Agriculture Dependencias y trabajo reciente

Una insignia de estado no hace cumplir una regla

La aplicación calcula si se puede iniciar la revisión a partir de dos valores de finalización. No basta con cambiar la etiqueta de una insignia: el controlador de activación debe aplicar la misma regla. El elemento de revisión no disponible del ejemplo no es un enlace habilitado. Al completar un requisito previo, se actualiza el recuento y la revisión se desbloquea solo cuando se cumplen ambos requisitos previos.

El estado documentado doneRecently ofrece una confirmación temporal al volver a una lista. La vista previa resalta brevemente un elemento que se acaba de completar antes de dejarlo como completado. El restablecimiento recupera el estado de los requisitos previos y permite repetir la transición sin servidor ni cuenta.

Consulta la especificación complementaria

Sistema de diseño Agriculture Contexto junto a la lista de tareas

Mantén visible el registro de ejemplo

Un resumen compacto sobre las tareas identifica el registro ficticio, el producto básico y la referencia. Estos atributos describen un único registro, por lo que es adecuado usar una lista de definiciones. En una implementación React, SummaryList, SummaryListItem, SummaryListItemTerm y SummaryListItemDescription ofrecen el equivalente documentado.

El panel de preparación activo permanece en el flujo normal, debajo de la lista de tareas. Explica qué significa completar este ejemplo y, después, ofrece una confirmación deliberada. Al abrir el panel, el foco pasa a su encabezado; al completar la acción, vuelve al encabezado de la lista. No simula subir pruebas, validar una licencia ni enviar una declaración.

Consulta la especificación complementaria

Sistema de diseño Agriculture Configuración del cliente y del servidor

Elige una ruta de renderizado concreta

Para una aplicación React existente que se renderiza en el cliente, instala @ag.ds-next/react con sus dependencias peer de React y Emotion, y luego utiliza la composición Core que se muestra aquí. No hace falta adivinar el nombre de ningún archivo global CSS: la biblioteca genera estilos con Emotion.

Next.js App Router requiere la integración oficial RootStyleRegistry para recopilar e insertar estilos de Emotion durante el renderizado en el servidor. La documentación proporciona ese registro y un contenedor Core. Un ejemplo que solo funciona en el cliente no demuestra que el renderizado en el servidor sea correcto; por tanto, considera el registro enlazado como parte de esa ruta de integración específica.

1. Instala el paquete React y las dependencias de Emotion.
2. Envuelve la aplicación con Core y el tema elegido.
3. Representa los elementos de TaskList a partir del estado de la aplicación y aplica las dependencias en los controladores de eventos.
4. Para el renderizado en el servidor, integra el registro de estilos documentado y comprueba la hidratación.

Consulta la especificación complementaria

Sistema de diseño Agriculture Ejemplos de componentes del sistema de diseño

import { useState } from 'react';
import { Core } from '@ag.ds-next/react/core';
import { theme } from '@ag.ds-next/react/ag-branding';
import { Box } from '@ag.ds-next/react/box';
import { TaskList } from '@ag.ds-next/react/task-list';

export default function PreparationTasks() {
  const [checked, setChecked] = useState(false);
  const [reviewed, setReviewed] = useState(false);
  return <Core theme={theme}>
    <Box padding={{ xs: 1, md: 3 }}>
      <TaskList ordered items={[
        { label: 'Check the example commodity',
          status: checked ? 'done' : 'todo',
          onClick: () => setChecked(true) },
        { label: 'Review the preparation record',
          status: reviewed ? 'done' : checked ? 'todo' : 'blocked',
          message: checked ? undefined : 'Complete the commodity check first',
          onClick: () => { if (checked) setReviewed(true); } }
      ]} />
    </Box>
  </Core>;
}

import { SummaryList, SummaryListItem, SummaryListItemTerm,
  SummaryListItemDescription } from '@ag.ds-next/react/summary-list';
<SummaryList>
  <SummaryListItem>
    <SummaryListItemTerm>Example reference</SummaryListItemTerm>
    <SummaryListItemDescription>PREP-1042</SummaryListItemDescription>
  </SummaryListItem>
</SummaryList>

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>AgDS task dependencies</title><style>*{box-sizing:border-box}body{margin:0;color:#313131;font:16px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif}main{max-width:62rem;padding:48px 24px;margin:auto}h1{font-size:40px;line-height:1.2;margin:16px 0 24px}h2{font-size:24px;line-height:1.3}header{border-bottom:4px solid #00558b;padding-bottom:24px}.meta{display:flex;flex-wrap:wrap;gap:24px}dt{font-weight:bold}dd{margin:4px 0 0}.tasks{padding:0;list-style:none;margin:24px 0}.task{padding:24px 0;border-bottom:1px solid #d3d3d3;display:grid;grid-template-columns:1fr auto;gap:8px 24px}.task button{background:none;border:0;padding:0;text-decoration:underline;color:#00558b;font-family:inherit;font-size:18px;font-weight:700;line-height:1.5;text-align:left;cursor:pointer}.task p{grid-column:1/-1;margin:0;color:#626262}.status{font-size:14px;border:1px solid #808080;padding:2px 8px;align-self:start;white-space:nowrap}.task[data-state=doneRecently]{background:#e5fff6}.task[data-state=done] .status,.task[data-state=doneRecently] .status{color:#00754e}.task[data-state=blocked]{color:#626262}.panel{padding:24px;background:#f5f5f5;border-left:4px solid #00558b}.panel h2{margin-top:0}.action{font-family:inherit;font-size:16px;font-weight:700;line-height:1.5;background:#00558b;color:#fff;border:2px solid #00558b;padding:10px 16px;cursor:pointer}.reset{font:inherit;padding:10px 16px;background:white;border:2px solid #00558b;color:#00558b;margin-top:24px}button:focus-visible,h2:focus{outline:3px solid #9263de;outline-offset:4px}small{display:block;color:#626262;margin-top:24px;font-size:14px}[hidden]{display:none!important}@media(max-width:767px){main{padding:24px 16px}h1{font-size:32px}.task{grid-template-columns:1fr}.status{justify-self:start}.meta{gap:16px}.panel{padding:16px}}
</style><main><header><p>AGDS PATTERN · FICTIONAL PREPARATION RECORD</p><h1>Prepare an example consignment</h1><dl class="meta"><div><dt>Reference</dt><dd>PREP-1042</dd></div><div><dt>Example commodity</dt><dd>Dried botanical samples</dd></div><div><dt>Service mode</dt><dd>Local demonstration</dd></div></dl></header><h2 id="list-heading" tabindex="-1">Preparation tasks</h2><p id="count" role="status">0 of 2 prerequisites complete</p><ol class="tasks" id="tasks"></ol><section class="panel" id="panel" hidden><h2 id="panel-heading" tabindex="-1"></h2><p id="panel-description"></p><button class="action" id="complete" type="button">Mark example check complete</button></section><button class="reset" type="button" id="reset">Reset example</button><small>OpenDesign interpretation of AgDS tokens and task semantics; not native React rendering. No regulatory eligibility decision or submission is made.</small></main><script>
let done=[false,false],recent=-1,current=-1,reviewed=false,timer;const names=['Check commodity description','Check collection route','Review preparation record'];const descriptions=['Confirm that the fictional record says dried botanical samples. In a real service, this task would open the actual commodity questions.','Confirm that this example uses a local demonstration route. This does not check an actual transport route or import condition.','Both preparation checks are complete. This local review confirms only that the example tasks were visited; it does not submit a declaration.'];const tasks=document.querySelector('#tasks'),panel=document.querySelector('#panel');function render(){tasks.replaceChildren();for(let n=0;n<3;n++){const blocked=n===2&&!done.every(Boolean),complete=n<2?done[n]:reviewed;const state=blocked?'blocked':recent===n?'doneRecently':complete?'done':current===n?'doing':'todo';let li=document.createElement('li');li.className='task';li.dataset.state=state;let trigger=document.createElement(blocked?'strong':'button');trigger.textContent=names[n];if(!blocked){trigger.type='button';trigger.onclick=()=>{current=n;panel.hidden=false;document.querySelector('#panel-heading').textContent=names[n];document.querySelector('#panel-description').textContent=descriptions[n];document.querySelector('#complete').textContent=n===2?'Finish local review':'Mark example check complete';render();document.querySelector('#panel-heading').focus()}}let s=document.createElement('span');s.className='status';s.textContent={blocked:'Cannot start yet',done:'Completed',doneRecently:'Completed',doing:'In progress',todo:'Not started'}[state];li.append(trigger,s);if(blocked){let p=document.createElement('p');p.textContent='Complete both preparation checks before review.';li.append(p)}tasks.append(li)}document.querySelector('#count').textContent=done.filter(Boolean).length+' of 2 prerequisites complete'+(reviewed?' · Local review completed':'')};document.querySelector('#complete').onclick=()=>{if(current<2)done[current]=true;else reviewed=true;recent=current;current=-1;panel.hidden=true;render();document.querySelector('#list-heading').focus();clearTimeout(timer);timer=setTimeout(()=>{recent=-1;render()},2000)};document.querySelector('#reset').onclick=()=>{clearTimeout(timer);done=[false,false];recent=current=-1;reviewed=false;panel.hidden=true;render()};render();
</script></html>