Sistema di design Agriculture.

Sistema di design Agriculture Core ed Emotion

Inizia con il provider reale

AgDS è una libreria React stilizzata tramite Emotion. Core avvolge l’applicazione e fornisce gli stili di reset, le variabili CSS e la configurazione del tema. L’importazione del tema scelto proviene da @ag.ds-next/react/ag-branding; è separata da Core, non una prop del provider inventata per ogni componente.

L’esempio autonomo è un’interpretazione esplicita di HTML/CSS dei token e degli stati delle attività documentati. Non dichiara di eseguire la libreria React. La sua macchina a stati è utile per esaminare il comportamento delle dipendenze; l’esempio completo di React mostra il percorso effettivo dei componenti da usare nell’implementazione.

Leggi la specifica di supporto

Sistema di design Agriculture Ruoli e scala tipografica del sistema

Leggibile senza scaricare font

AgDS usa uno stack di font di sistema, che comprende il font dell’interfaccia della piattaforma e i fallback Helvetica e Arial. La scala tipografica documentata va da xs 14px, sm 16px, md 20px e lg 24px; i ruoli più grandi variano sui dispositivi mobili: xl da 28 a 32px, xxl da 32 a 40px e xxxl da 40 a 48px.

Le altezze di riga sono allineate a una griglia di 4px tramite il sistema tipografico. Usa i ruoli fontSize e lineHeight del componente invece di moltiplicare ogni dimensione del font per un rapporto arbitrario. L’anteprima usa la dimensione sm per il testo del corpo, un titolo di 32px sui dispositivi mobili e di 40px sui viewport più ampi, senza scaricare font.

Leggi la specifica di supporto

Sistema di design Agriculture Spaziatura e props responsive

I numeri rappresentano token basati su rem

In AgDS, una spaziatura di 1.5 corrisponde a 24px con la dimensione standard della radice; non significa 1.5px. La sequenza di spaziatura documentata include 0.25=4px, 0.5=8px, 0.75=12px, 1=16px, 2=32px e 3=48px. FormStack usa 2 per la spaziatura tra i campi, mentre i gruppi fieldset più ampi usano 3.

Le props responsive accettano oggetti con breakpoint denominati. Box padding={{xs:1,md:3}} imposta un padding iniziale di 16px, che passa a 48px a 768px. Le chiavi intermedie omesse ereditano il valore precedente. È una soluzione più esplicita di una serie di override CSS indipendenti.

Leggi la specifica di supporto

Sistema di design Agriculture Il colore in primo piano dipende dallo sfondo

Usa insieme i ruoli chiari e scuri

Il riferimento cromatico definisce ruoli abbinati per primo piano, sfondo, bordo e sistema. Il testo chiaro è #313131, il testo attenuato #626262 e il colore d’azione #00558b. Nella palette scura, il colore d’azione diventa #9ee8ff. Un colore d’azione segnala l’interattività e non va usato come decorazione arbitraria su un’attività che non può essere aperta.

L’anteprima usa la palette chiara e un link d’azione blu sottolineato. Il lavoro bloccato è mostrato come testo accompagnato da una spiegazione, non come controllo blu che ignora i clic senza dare spiegazioni. Il completamento è indicato a parole e con uno stile verde; il colore non è mai l’unico elemento che comunica lo stato.

Leggi la specifica di supporto

Sistema di design Agriculture TaskList è navigazione

Distingui disponibilità e completamento

Il vero TaskList accetta elementi e un flag ordered facoltativo. Ogni elemento ha un’etichetta e uno stato; href attiva la navigazione, mentre se href è omesso è possibile usare un pulsante onClick. I valori di stato disponibili sono todo, doing, done, doneRecently, blocked e notRequired.

Usa questa struttura per le transazioni con più attività, soprattutto se il lavoro riprende in sessioni diverse. Un singolo campo non richiede un elenco di attività. Nell’esempio, la preparazione della merce e quella dell’itinerario sono prerequisiti separati; la voce di revisione non è disponibile finché entrambi non sono completati. È una regola dimostrativa locale, non una decisione sull’idoneità all’importazione.

• todo significa che l’attività può essere avviata.
• blocked significa che i prerequisiti impediscono di iniziare; spiega il motivo.
• notRequired significa che l’attività non è più pertinente; non equivale a completata.

Leggi la specifica di supporto

Sistema di design Agriculture Dipendenze e attività recenti

Un badge di stato non applica una regola

L’applicazione calcola se è possibile avviare la revisione in base ai due valori di completamento. Non basta modificare l’etichetta di un badge: il gestore di attivazione deve applicare la stessa regola. Nell’esempio, la voce di revisione non disponibile non è un link attivo. Completare un prerequisito aggiorna il conteggio e sblocca la revisione solo quando entrambi i prerequisiti sono soddisfatti.

Lo stato documentato doneRecently fornisce un feedback temporaneo quando si torna a un elenco. Nell’anteprima, l’attività appena completata viene evidenziata per un breve periodo, prima di passare allo stato di completamento. Il ripristino riporta allo stato con i prerequisiti, rendendo la transizione ripetibile senza server né account.

Leggi la specifica di supporto

Sistema di design Agriculture Contesto accanto all’elenco delle attività

Mantieni visibile il record di esempio

Un riepilogo compatto sopra le attività identifica il record fittizio, la merce e il riferimento. Questi attributi descrivono un singolo record, quindi è appropriato usare un elenco di definizioni. Nell’implementazione di React, SummaryList, SummaryListItem, SummaryListItemTerm e SummaryListItemDescription forniscono l’equivalente documentato.

Il pannello di preparazione attivo rimane nel normale flusso sotto l’elenco delle attività. Spiega cosa significa completare l’attività in questa demo, quindi propone una conferma esplicita. All’apertura, il titolo del pannello riceve il focus; al completamento, il focus torna al titolo dell’elenco. Non simula il caricamento di prove, la convalida di una licenza o l’invio di una dichiarazione.

Leggi la specifica di supporto

Sistema di design Agriculture Configurazione client e server

Scegli un percorso di rendering concreto

Per un’applicazione React esistente renderizzata lato client, installa @ag.ds-next/react con le dipendenze peer React ed Emotion, quindi usa la composizione Core mostrata qui. Non serve ipotizzare un file globale CSS: la libreria genera gli stili con Emotion.

L’App Router di Next.js richiede l’integrazione ufficiale RootStyleRegistry per raccogliere e inserire gli stili Emotion durante il rendering lato server. La documentazione fornisce quel registry e un wrapper Core. Un esempio solo client non dimostra la correttezza del rendering lato server: considera il registry collegato parte di quel percorso d’integrazione specifico.

1. Installa il pacchetto React e le dipendenze Emotion.
2. Avvolgi l’applicazione con Core e il tema scelto.
3. Genera gli elementi di TaskList dallo stato dell’applicazione e applica le dipendenze nei gestori.
4. Per il rendering lato server, integra il registry degli stili documentato e verifica l’hydration.

Leggi la specifica di supporto

Sistema di design Agriculture Esempi di componenti del sistema di design

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>