# Système de design Agriculture ## Aperçu de l’interface système de design Agriculture Effectuez deux vérifications préalables, ouvrez la vérification déverrouillée, puis réinitialisez l’exemple local. ## Référence de conception système de design Agriculture Documentation officielle des jetons et composants AgDS et métadonnées de @ag.ds-next/react 1.35.4. L’aperçu est une interprétation documentée en HTML/CSS ; les importations réelles de React sont fournies séparément. ### Rôles typographiques | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | xs / sm / md / lg | 14 / 16 / 20 / 24px | Rôles stables, du plus petit au plus grand. | | xl mobile → desktop | 28 → 32px | Rôle de titre adaptatif. | | xxl / xxxl mobile → desktop | 32 → 40px / 40 → 48px | Grands rôles de titre. | | Body family | System UI with Helvetica/Arial fallbacks | Aucun téléchargement de police requis. | ### Valeurs d’espacement | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | 0.25 / 0.5 / 0.75 / 1 | 4 / 8 / 12 / 16px | Contenu associé et marges intérieures réduites. | | 1.5 / 2 / 3 / 4 | 24 / 32 / 48 / 64px | Colonnes, champs, groupes et sections. | | Form field gap | 2 = 32px | Rôle de FormStack. | | Fieldset/group gap | 3 = 48px | Groupes de questions distincts. | ### Points de rupture | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | xs / sm / md | 0 / 576 / 768px | Clés d’objet responsives conçues pour le mobile d’abord. | | lg / xl / xxl | 992 / 1200 / 1600px | Seuils pour les fenêtres d’affichage plus larges. | ### Rôles de couleurs claires | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | text / muted | #313131 / #626262 | Contenu principal et complémentaire. | | action | #00558b | Éléments interactifs. | | body / bodyAlt | #ffffff / #ebebeb | Rôles de surface associés. | | border / borderMuted | #808080 / #d3d3d3 | Bordure des commandes essentielles ou séparation décorative. | ## Guide complet de système de design Agriculture Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## Core et Emotion de système de design Agriculture ### Commencez avec le véritable fournisseur > AgDS est une bibliothèque React stylée avec Emotion. Core enveloppe l’application et fournit les styles de réinitialisation, les variables CSS et la configuration du thème. L’importation du thème sélectionné provient de @ag.ds-next/react/ag-branding ; elle est distincte de Core, et non un prop de fournisseur inventé pour chaque composant. Cet exemple autonome est une interprétation explicite en HTML/CSS des jetons et états de tâches documentés. Il ne prétend pas exécuter la bibliothèque React. Sa machine à états permet d’examiner le comportement des dépendances ; l’exemple complet présente le véritable parcours d’implémentation avec les composants React. Consultez la spécification associée ## Typographie et échelle du système système de design Agriculture ### Lisible sans téléchargement de police AgDS utilise une pile de polices système, comprenant la police d’interface de la plateforme, Helvetica et Arial comme polices de secours. L’échelle typographique documentée va de xs 14px, sm 16px, md 20px et lg 24px aux rôles plus grands qui changent sur mobile : xl 28→32px, xxl 32→40px et xxxl 40→48px. Les hauteurs de ligne sont alignées sur une grille de 4px grâce aux mécanismes typographiques. Utilisez les rôles fontSize et lineHeight du composant plutôt que de multiplier chaque taille de police par un ratio arbitraire. L’aperçu utilise la taille de texte sm, un titre de 32px sur mobile et de 40px sur les écrans plus grands, sans police téléchargée. Consultez la spécification associée ## Espacement et props responsives de système de design Agriculture ### Les nombres représentent des jetons basés sur rem Dans AgDS, un espacement de 1.5 correspond à 24px avec la taille racine standard ; il ne correspond pas à 1.5px. La séquence d’espacement documentée comprend 0.25=4px, 0.5=8px, 0.75=12px, 1=16px, 2=32px et 3=48px. FormStack utilise 2 pour l’espacement entre les champs, tandis que les groupes de fieldset plus grands utilisent 3. Les props responsives acceptent des objets nommés selon les points de rupture. Box padding={{xs:1,md:3}} commence à 16px et passe à 48px à 768px. Les clés intermédiaires omises héritent de la valeur précédente. Cette approche est plus explicite qu’une série de substitutions CSS sans lien entre elles. Consultez la spécification associée ## Le premier plan s’adapte à l’arrière-plan système de design Agriculture ### Associez les rôles clairs et foncés La référence des couleurs définit des rôles associés pour le premier plan, l’arrière-plan, les bordures et les états système. Le texte clair est #313131, le texte atténué #626262 et la couleur d’action #00558b. Sur la palette foncée, la couleur d’action devient #9ee8ff. Une couleur d’action indique une interaction et ne doit pas servir de décoration arbitraire pour une tâche qui ne peut pas être ouverte. L’aperçu utilise la palette claire et un lien d’action bleu souligné. Les tâches bloquées sont présentées sous forme de texte accompagné d’une explication, plutôt que comme un contrôle bleu qui refuse silencieusement les clics. L’achèvement est exprimé par des mots et un traitement vert ; la couleur ne porte jamais le statut à elle seule. Consultez la spécification associée ## TaskList sert à la navigation dans système de design Agriculture ### Distinguez la disponibilité de l’achèvement Le véritable composant TaskList accepte des éléments et un indicateur ordered facultatif. Chaque élément possède un libellé et un statut ; href permet la navigation, tandis que son omission autorise un bouton onClick. Les valeurs de statut disponibles sont todo, doing, done, doneRecently, blocked et notRequired. Utilisez cette structure pour les transactions comportant plusieurs tâches, en particulier lorsque le travail reprend après une interruption. Un champ unique n’a pas besoin de liste de tâches. Dans cet exemple, la préparation de la marchandise et celle de l’itinéraire sont deux prérequis distincts ; l’élément d’examen reste indisponible tant qu’ils ne sont pas tous deux terminés. Il s’agit d’une règle propre à cette démonstration, et non d’une décision sur l’admissibilité à l’importation. - todo signifie que la tâche peut commencer. - blocked signifie que des prérequis empêchent de commencer ; indiquez-en la raison. - notRequired signifie que la tâche ne s’applique plus ; ce statut est différent de « terminée ». Consultez la spécification associée ## Système de design Agriculture Dépendances et travaux récents ### Un badge de statut ne fait pas respecter une règle L’application détermine si l’examen peut commencer à partir de deux valeurs d’achèvement. Modifier le libellé d’un badge ne suffit pas : le gestionnaire d’activation doit faire respecter la même règle. Dans cet exemple, l’élément d’examen indisponible n’est pas un lien actif. L’achèvement d’un prérequis met à jour le décompte et ne déverrouille l’examen que lorsque les deux prérequis sont satisfaits. Le statut documenté doneRecently fournit un retour temporaire après le retour à une liste. L’aperçu met brièvement en évidence une tâche qui vient d’être terminée, puis son statut passe à completed. La réinitialisation restaure l’état des prérequis, ce qui permet de répéter la transition sans serveur ni compte. Consultez la spécification associée ## Système de design Agriculture Contexte à côté de la liste des tâches ### Gardez la fiche d’exemple visible Un résumé compact au-dessus des tâches identifie la fiche fictive, la marchandise et la référence. Comme ces attributs décrivent une seule fiche, une liste de définitions convient. Dans une implémentation React, SummaryList, SummaryListItem, SummaryListItemTerm et SummaryListItemDescription fournissent l’équivalent documenté. Le panneau de préparation actif reste dans le flux normal, sous la liste des tâches. Il explique ce que signifie l’achèvement dans cette démonstration, puis propose une confirmation explicite. À son ouverture, le titre du panneau reçoit le focus ; une fois la tâche terminée, le focus revient au titre de la liste. Le panneau ne prétend pas téléverser de justificatif, vérifier une licence ni soumettre une déclaration. Consultez la spécification associée ## Système de design Agriculture Configuration côté client et côté serveur ### Choisissez une méthode de rendu précise Dans une application React existante rendue côté client, installez @ag.ds-next/react avec ses dépendances homologues React et Emotion, puis utilisez la composition Core présentée ici. Aucun fichier global CSS supposé n’est nécessaire : la bibliothèque génère les styles avec Emotion. Avec Next.js App Router, l’intégration officielle RootStyleRegistry est nécessaire pour collecter et insérer les styles Emotion pendant le rendu côté serveur. La documentation fournit ce registre et un composant Core. Un exemple côté client uniquement ne garantit pas que le rendu côté serveur fonctionne correctement ; le registre indiqué fait donc partie intégrante de cette méthode d’intégration distincte. 1. Installez le package React et les dépendances Emotion. 2. Enveloppez l’application avec Core et le thème choisi. 3. Générez les éléments de TaskList à partir de l’état de l’application et faites respecter les dépendances dans les gestionnaires. 4. Pour le rendu côté serveur, intégrez le registre de styles documenté et vérifiez l’hydratation. Consultez la spécification associée ## Système de design Agriculture Exemples de composants du système de design ### Core, Box adaptatif et véritable TaskList Une composition React réelle avec un état local qui tient compte des dépendances ; aucun lien de navigation fictif. ``` 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 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); } } ]} /> ; } ``` Référence du code ### Résumé d’une fiche Utilisez la véritable composition SummaryList pour afficher des valeurs nommées. ``` import { SummaryList, SummaryListItem, SummaryListItemTerm, SummaryListItemDescription } from '@ag.ds-next/react/summary-list'; Example reference PREP-1042 ``` Référence du code ### Exemple autonome complet Le document complet comprend sa mise en page, ses contrôles et son initialisation. Extrayez l’archive d’exemple liée pour obtenir les ressources de fournisseur avec leurs chemins relatifs exacts, puis servez le contenu via HTTP. ``` AgDS task dependencies

AGDS PATTERN · FICTIONAL PREPARATION RECORD

Prepare an example consignment

Reference
PREP-1042
Example commodity
Dried botanical samples
Service mode
Local demonstration

Preparation tasks

0 of 2 prerequisites complete

    OpenDesign interpretation of AgDS tokens and task semantics; not native React rendering. No regulatory eligibility decision or submission is made.
    ``` Référence du code - Téléchargez l’exemple complet depuis les sources. Son fichier README indique la commande exacte pour le lancer localement. - Conservez des chemins relatifs pour les ressources de fournisseur par rapport à ce document ; l’archive contient toutes les ressources utilisées par cet aperçu. ## Système de design Agriculture Configuration de l’agent IA ### Point de départ de l’implémentation Les métadonnées et les imports du package natif ont été vérifiés dans les sources. Une tentative temporaire d’installation des dépendances natives n’a pas abouti ; l’aperçu autonome est une interprétation explicite, et non un prétendu build natif React. Le fichier ZIP de l’exemple complet fonctionnel, accessible depuis les sources, fournit également les dépendances exactes de l’aperçu et le document complet. Extrayez-le, exécutez python3 -m http.server 8080 dans ce répertoire, puis ouvrez http://localhost:8080/agriculture-agds.html. N’ouvrez pas les exemples basés sur des modules avec file://. ``` npm install @ag.ds-next/react@1.35.4 @emotion/react @emotion/cache react react-dom # Existing client-rendered React app: use the complete Core/TaskList example above. # Next.js App Router: additionally integrate the official RootStyleRegistry. ``` ### Un prompt pour votre projet ``` Utilisez AgDS Core et TaskList pour une transaction de préparation comportant plusieurs tâches. Représentez explicitement les statuts todo, doing, done, doneRecently, blocked et notRequired. Faites respecter les prérequis dans la logique de l’application, et pas uniquement dans le libellé des badges. Utilisez les propriétés d’espacement adaptatif, la pile de polices système et les rôles de couleur de premier plan et d’arrière-plan. Gardez le résumé de la fiche visible et expliquez les tâches bloquées. Évitez les logos gouvernementaux, les décisions réglementaires inventées et les faux messages de confirmation de soumission. ``` ## Système de design Agriculture Sources et périmètre Exemple pédagogique de modèle de service, fondé sur des données fictives de préparation de marchandises. Il ne détermine pas l’admissibilité réglementaire et ne soumet aucune transaction. Aucun signe distinctif d’organisme public. Les exemples natifs React API et l’aperçu interprété sont clairement différenciés. - Agriculture Design System Entrée officielle pour les ressources AgDS. - Fondements Principes fondamentaux du système de design. - Composants Composants d’interface pour les applications de services. - Modèles Modèles pour composer des tâches complètes. - Télécharger l’exemple complet fonctionnel Archive ZIP comprenant le HTML complet, les dépendances locales CSS/JavaScript, les licences fournies et les instructions de lancement exactes. Aucune étape de build n’est nécessaire. ## Système de design Agriculture Ressources associées ### Alberta système de design Utilisez les composants Web natifs d’Alberta et ses jetons de design publiés pour créer une liste de préparation complète, avec des choix accessibles, une progression calculée et des commentaires de révision transparents. ### Amsterdam Utilisez le contrat réel et open source de Switch de Amsterdam, avec un thème neutre complet, des libellés accessibles et des préférences de lecture appliquées immédiatement. ### B.C. système de design Créez un formulaire de préférences de rappel inspiré de la Colombie-Britannique, avec de véritables jetons sémantiques, les commandes Aria natives de React, des champs de contact conditionnels et une validation complète. - [Référence de mise en œuvre](https://design-system.agriculture.gov.au/components/task-list) - [Source](https://design-system.agriculture.gov.au/foundations/tokens/typography) - [Source](https://design-system.agriculture.gov.au/foundations/tokens/spacing) - [Source](https://design-system.agriculture.gov.au/foundations/tokens/breakpoints) - [Source](https://design-system.agriculture.gov.au/foundations/tokens/colour) - [Consultez la spécification associée](https://design-system.agriculture.gov.au/components/core) - [Consultez la spécification associée](https://design-system.agriculture.gov.au/foundations/tokens/typography) - [Consultez la spécification associée](https://design-system.agriculture.gov.au/foundations/tokens/spacing/) - [Consultez la spécification associée](https://design-system.agriculture.gov.au/foundations/tokens/colour) - [Consultez la spécification associée](https://design-system.agriculture.gov.au/components/task-list) - [Consultez la spécification associée](https://design-system.agriculture.gov.au/components/summary-list) - [Consultez la spécification associée](https://design-system.agriculture.gov.au/guides/getting-started) - [Référence du code](https://design-system.agriculture.gov.au/components/task-list) - [Référence du code](https://design-system.agriculture.gov.au/components/summary-list) - [Agriculture Design System Entrée officielle pour les ressources AgDS.](https://design-system.agriculture.gov.au/) - [Fondements Principes fondamentaux du système de design.](https://design-system.agriculture.gov.au/foundations) - [Composants Composants d’interface pour les applications de services.](https://design-system.agriculture.gov.au/components) - [Modèles Modèles pour composer des tâches complètes.](https://design-system.agriculture.gov.au/patterns)