Agriculture Designsystem.

Agriculture Designsystem Core und Emotion

Mit dem tatsächlichen Provider beginnen

AgDS ist eine React-Bibliothek, die mit Emotion gestaltet wird. Core umschließt die Anwendung und stellt Reset-Stile, CSS-Variablen und die Theme-Konfiguration bereit. Der Import des ausgewählten Themes erfolgt über @ag.ds-next/react/ag-branding; es ist von Core getrennt und wird nicht etwa als erfundene Provider-Prop an jede Komponente übergeben.

Das eigenständige Beispiel ist eine explizite Interpretation dokumentierter Tokens und Aufgabenstatus mit HTML/CSS. Es gibt nicht vor, die React-Bibliothek auszuführen. Sein Zustandsautomat eignet sich dazu, das Verhalten von Abhängigkeiten zu untersuchen; das vollständige React-Beispiel zeigt den tatsächlichen Weg zur Implementierung mit Komponenten.

Unterstützende Spezifikation lesen

Agriculture Designsystem Systemschrift und Schriftgrößenskala

Ohne Schrift-Download gut lesbar

AgDS verwendet einen Systemschriftstapel mit der Plattform-Schrift für Benutzeroberflächen sowie Helvetica und Arial als Ausweichschriften. Die dokumentierte Schriftgrößenskala umfasst xs 14px, sm 16px, md 20px und lg 24px. Auf Mobilgeräten ändern sich die größeren Rollen: xl 28→32px, xxl 32→40px und xxxl 40→48px.

Die Zeilenhöhen werden über die Typografiefunktionen am 4-px-Raster ausgerichtet. Verwende die fontSize- und lineHeight-Rollen der Komponente, statt jede Schriftgröße mit einem willkürlichen Faktor zu multiplizieren. Die Vorschau verwendet die sm-Größe für Fließtext, eine Überschrift mit 32px auf Mobilgeräten und 40px auf größeren Ansichten sowie keine heruntergeladene Schrift.

Unterstützende Spezifikation lesen

Agriculture Designsystem Abstände und responsive Props

Zahlen stehen für rem-basierte Tokens

Ein Abstand von 1.5 in AgDS entspricht bei der standardmäßigen Root-Größe 24px, nicht 1.5px. Die dokumentierte Abstandsfolge umfasst 0.25=4px, 0.5=8px, 0.75=12px, 1=16px, 2=32px und 3=48px. FormStack verwendet 2 für Abstände zwischen Feldern, während größere Fieldset-Gruppen 3 verwenden.

Responsive Props akzeptieren benannte Breakpoint-Objekte. Box padding={{xs:1,md:3}} beginnt mit 16px und erhöht sich bei 768px auf 48px. Nicht angegebene Zwischenwerte übernehmen den vorherigen Wert. Das ist expliziter als eine Reihe unabhängiger CSS-Overrides.

Unterstützende Spezifikation lesen

Agriculture Designsystem Vordergrund folgt auf Hintergrund

Verwenden Sie helle und dunkle Rollen gemeinsam

Die Farbreferenz definiert zusammengehörige Rollen für Vordergrund, Hintergrund, Rahmen und System. Heller Text hat die Farbe #313131, gedämpfter Text #626262 und die Aktionsfarbe #00558b. Im dunklen Farbschema wird die Aktionsfarbe vor dunklem Hintergrund zu #9ee8ff. Eine Aktionsfarbe kennzeichnet Interaktivität und sollte nicht als beliebige Dekoration für eine Aufgabe verwendet werden, die sich nicht öffnen lässt.

Die Vorschau verwendet das helle Farbschema und einen blauen Aktionslink mit Unterstreichung. Blockierte Aufgaben werden mit einer Erklärung als Text dargestellt, nicht als blaues Steuerelement, das Klicks kommentarlos ignoriert. Der Abschluss wird durch Worte und eine grüne Darstellung kenntlich gemacht; die Farbe allein vermittelt niemals den Status.

Unterstützende Spezifikation lesen

Agriculture Designsystem TaskList dient der Navigation

Verfügbarkeit und Abschluss getrennt behandeln

Die echte TaskList akzeptiert Elemente und optional eine ordered-Angabe. Jedes Element hat eine Beschriftung und einen Status. href ermöglicht die Navigation, während ein Element ohne href als onClick-Schaltfläche verwendet werden kann. Zulässige Statuswerte sind todo, doing, done, doneRecently, blocked und notRequired.

Verwenden Sie diese Struktur für Transaktionen mit mehreren Aufgaben, insbesondere wenn die Arbeit sitzungsübergreifend fortgesetzt wird. Ein einzelnes Feld benötigt keine Aufgabenliste. Im Beispiel sind die Vorbereitung der Ware und der Route separate Voraussetzungen. Der Prüfpunkt ist erst verfügbar, wenn beide abgeschlossen sind. Dies ist eine lokale Demonstrationsregel und keine Entscheidung über die Importberechtigung.

• todo bedeutet, dass die Aufgabe begonnen werden kann.
• blocked bedeutet, dass Voraussetzungen den Beginn verhindern; geben Sie den Grund an.
• notRequired bedeutet, dass die Aufgabe nicht mehr relevant ist. Das ist nicht dasselbe wie abgeschlossen.

Unterstützende Spezifikation lesen

Agriculture Designsystem Abhängigkeiten und kürzlich erledigte Aufgaben

Ein Status-Badge erzwingt keine Regel

Die Anwendung berechnet anhand zweier Abschlusswerte, ob die Prüfung beginnen kann. Es reicht nicht aus, die Beschriftung eines Badges zu ändern: Der Aktivierungshandler muss dieselbe Regel durchsetzen. Der nicht verfügbare Prüfpunkt im Beispiel ist kein aktivierter Link. Wenn eine Voraussetzung erfüllt wird, aktualisiert sich die Anzahl. Die Prüfung wird erst freigeschaltet, wenn beide Voraussetzungen erfüllt sind.

Der dokumentierte Status doneRecently dient als vorübergehende Rückmeldung, wenn man zu einer Liste zurückkehrt. In der Vorschau wird eine gerade abgeschlossene Aufgabe kurz hervorgehoben, bevor sie als abgeschlossen angezeigt wird. Durch das Zurücksetzen wird der Zustand mit den Voraussetzungen wiederhergestellt, sodass sich der Übergang ohne Server oder Konto wiederholen lässt.

Unterstützende Spezifikation lesen

Agriculture Designsystem Kontext neben der Aufgabenliste

Den Beispieldatensatz sichtbar halten

Eine kompakte Zusammenfassung über den Aufgaben kennzeichnet den fiktiven Datensatz, die Ware und die Referenz. Diese Angaben beschreiben einen einzelnen Datensatz, daher eignet sich eine Definitionsliste. In einer React-Implementierung bieten SummaryList, SummaryListItem, SummaryListItemTerm und SummaryListItemDescription das dokumentierte Äquivalent.

Das aktive Vorbereitungspanel bleibt im normalen Dokumentfluss unter der Aufgabenliste. Es erklärt, was der Abschluss in dieser Demo bedeutet, und bietet anschließend eine ausdrückliche Bestätigung an. Beim Öffnen erhält die Überschrift des Panels den Fokus; nach dem Abschluss wird der Fokus zur Überschrift der Liste zurückgeführt. Das Panel gibt nicht vor, Belege hochzuladen, eine Lizenz zu prüfen oder eine Erklärung einzureichen.

Unterstützende Spezifikation lesen

Agriculture Designsystem Client- und Server-Setup

Einen konkreten Rendering-Pfad wählen

Installieren Sie für eine bestehende clientseitig gerenderte React-Anwendung @ag.ds-next/react zusammen mit den zugehörigen React- und Emotion-Peer-Dependencies und verwenden Sie dann die hier gezeigte Core-Komposition. Eine nicht belegte globale CSS-Datei ist nicht erforderlich: Die Bibliothek generiert Styles mit Emotion.

Der App Router von Next.js erfordert die offizielle RootStyleRegistry-Integration, um Emotion-Styles beim serverseitigen Rendering zu erfassen und einzufügen. Die Dokumentation stellt diese Registry und einen Core-Wrapper bereit. Ein Beispiel nur für clientseitiges Rendering belegt nicht die Korrektheit des serverseitigen Renderings. Betrachten Sie die verlinkte Registry daher als Teil dieses separaten Integrationspfads.

1. Installieren Sie das React-Paket und die Emotion-Abhängigkeiten.
2. Umschließen Sie die Anwendung mit Core und dem gewählten Theme.
3. Rendern Sie TaskList-Elemente anhand des Anwendungsstatus und setzen Sie Abhängigkeiten in den Handlern durch.
4. Integrieren Sie beim serverseitigen Rendering die dokumentierte Style-Registry und prüfen Sie die Hydrierung.

Unterstützende Spezifikation lesen

Agriculture Designsystem Beispiele für Designsystem-Komponenten

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>