# Sistema de design Agriculture ## Sistema de design Agriculture Prévia da interface Conclua duas verificações de pré-requisito, abra a revisão desbloqueada e redefina o exemplo local. ## Sistema de design Agriculture Referência de design Documentação oficial de tokens/componentes do AgDS e metadados de @ag.ds-next/react 1.35.4. A prévia é uma interpretação documentada de HTML/CSS; as importações reais de React são fornecidas separadamente. ### Papéis tipográficos | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | xs / sm / md / lg | 14 / 16 / 20 / 24px | Papéis estáveis de pequeno a grande. | | xl mobile → desktop | 28 → 32px | Papel responsivo para títulos. | | xxl / xxxl mobile → desktop | 32 → 40px / 40 → 48px | Papéis para títulos grandes. | | Body family | System UI with Helvetica/Arial fallbacks | Não é necessário baixar uma fonte da web. | ### Valores de espaçamento | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | 0.25 / 0.5 / 0.75 / 1 | 4 / 8 / 12 / 16px | Conteúdo relacionado e preenchimento compacto. | | 1.5 / 2 / 3 / 4 | 24 / 32 / 48 / 64px | Colunas, campos, grupos e seções. | | Form field gap | 2 = 32px | Papel de FormStack. | | Fieldset/group gap | 3 = 48px | Grupos de perguntas separados. | ### Pontos de quebra | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | xs / sm / md | 0 / 576 / 768px | Chaves de objeto responsivas com prioridade para dispositivos móveis. | | lg / xl / xxl | 992 / 1200 / 1600px | Limites para áreas de visualização maiores. | ### Papéis de cor para fundos claros | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | text / muted | #313131 / #626262 | Conteúdo principal e de apoio. | | action | #00558b | Elementos interativos. | | body / bodyAlt | #ffffff / #ebebeb | Papéis de superfície combinados. | | border / borderMuted | #808080 / #d3d3d3 | Borda de controle essencial versus divisão decorativa. | ## Sistema de design Agriculture Guia completo Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## Sistema de design Agriculture Core e Emotion ### Comece com o provider real > AgDS é uma biblioteca React estilizada com Emotion. Core envolve a aplicação e fornece estilos de redefinição, variáveis CSS e configuração de tema. A importação do tema selecionado vem de @ag.ds-next/react/ag-branding; ela é separada de Core, em vez de ser uma propriedade de provider inventada para cada componente. O exemplo independente é uma interpretação explícita de HTML/CSS dos tokens e estados de tarefa documentados. Ele não afirma executar a biblioteca React. Sua máquina de estados é útil para analisar o comportamento das dependências; o exemplo completo de React apresenta a rota com os componentes reais para implementação. Consulte a especificação de apoio ## Sistema de design Agriculture Tipografia e escala do sistema ### Legível sem baixar fontes AgDS usa uma pilha de fontes do sistema, que inclui a fonte de interface da plataforma e as alternativas Helvetica e Arial. A escala tipográfica documentada vai de xs 14px, sm 16px, md 20px e lg 24px; os papéis maiores mudam em dispositivos móveis: xl 28→32px, xxl 32→40px e xxxl 40→48px. As alturas de linha seguem uma grade de 4px por meio dos recursos tipográficos. Use os papéis fontSize e lineHeight do componente em vez de multiplicar cada fonte por uma proporção arbitrária. A prévia usa o tamanho de corpo sm, um título de 32px em dispositivos móveis e 40px em telas maiores, sem baixar fontes. Consulte a especificação de apoio ## Sistema de design Agriculture Espaçamento e propriedades responsivas ### Os números representam tokens baseados em rem Um espaçamento de 1.5 no AgDS significa 24px no tamanho raiz padrão; não significa 1.5px. A sequência de espaçamentos documentada inclui 0.25=4px, 0.5=8px, 0.75=12px, 1=16px, 2=32px e 3=48px. FormStack usa 2 para os espaços entre campos, enquanto grupos maiores de fieldset usam 3. As propriedades responsivas aceitam objetos com pontos de interrupção nomeados. Box padding={{xs:1,md:3}} começa com 16px e aumenta para 48px a partir de 768px. As chaves intermediárias omitidas herdam o valor anterior. Isso é mais explícito do que uma série de substituições CSS sem relação entre si. Consulte a especificação de apoio ## Sistema de design Agriculture A cor de primeiro plano acompanha o fundo ### Use juntos os papéis para fundos claros e escuros A referência de cores define papéis combinados de primeiro plano, fundo, borda e sistema. O texto para fundos claros é #313131, o texto atenuado é #626262 e a ação é #00558b. Em fundos escuros, a cor de ação passa a ser #9ee8ff. Uma cor de ação indica interatividade e não deve ser usada como decoração arbitrária em uma tarefa que não pode ser aberta. A prévia usa a paleta para fundos claros e um link de ação azul sublinhado. O trabalho bloqueado aparece como texto acompanhado de uma explicação, e não como um controle azul que simplesmente recusa cliques. A conclusão é indicada por palavras e pelo tratamento visual verde; a cor nunca é o único meio de comunicar o status. Consulte a especificação de apoio ## Sistema de design Agriculture TaskList é navegação ### Separe disponibilidade de conclusão O TaskList real aceita itens e uma propriedade ordered opcional. Cada item tem um rótulo e um status; href cria navegação, enquanto omitir href permite usar um botão onClick. Os valores de status disponíveis são todo, doing, done, doneRecently, blocked e notRequired. Use esta estrutura para transações com várias tarefas, especialmente trabalhos retomados entre sessões. Um único campo não precisa de uma lista de tarefas. No exemplo, a preparação da mercadoria e da rota são pré-requisitos separados; o item de revisão fica indisponível até que ambos sejam concluídos. Esta é uma regra de demonstração local, não uma decisão sobre a elegibilidade da importação. - todo significa que a tarefa pode ser iniciada. - blocked significa que os pré-requisitos impedem o início; informe o motivo. - notRequired significa que a tarefa deixou de se aplicar; é diferente de estar concluída. Consulte a especificação de apoio ## Sistema de design Agriculture Dependências e trabalho recente ### Um selo de status não impõe uma regra A aplicação determina se a revisão pode começar com base nos valores de conclusão de duas tarefas. Alterar o rótulo de um selo não basta: o manipulador de ativação precisa aplicar a mesma regra. O item de revisão indisponível no exemplo não é um link ativo. A conclusão de um pré-requisito atualiza a contagem e desbloqueia a revisão somente quando ambos os pré-requisitos são atendidos. O status documentado doneRecently é um feedback temporário exibido ao voltar para uma lista. A prévia destaca brevemente um item recém-concluído antes de indicar a conclusão de forma permanente. A redefinição restaura o estado dos pré-requisitos, permitindo repetir a transição sem servidor nem conta. Consulte a especificação de apoio ## Sistema de design Agriculture Contexto ao lado da lista de tarefas ### Mantenha o registro de exemplo visível Um resumo compacto acima das tarefas identifica o registro fictício, o produto e a referência. Como esses atributos descrevem um único registro, uma lista de definições é adequada. Em uma implementação React, SummaryList, SummaryListItem, SummaryListItemTerm e SummaryListItemDescription oferecem a composição equivalente documentada. O painel de preparação ativo permanece no fluxo normal, abaixo da lista de tarefas. Ele explica o que significa concluir neste exemplo e, em seguida, solicita uma confirmação explícita. Ao abrir, o título do painel recebe o foco; ao concluir, o foco retorna ao título da lista. O painel não finge enviar evidências, validar uma licença ou apresentar uma declaração. Consulte a especificação de apoio ## Sistema de design Agriculture Configuração do cliente e do servidor ### Escolha um caminho de renderização concreto Para uma aplicação React existente com renderização no cliente, instale @ag.ds-next/react e suas dependências peer React e Emotion; em seguida, use a composição Core mostrada aqui. Não é necessário adivinhar um arquivo global CSS: a biblioteca gera estilos com Emotion. O App Router do Next.js exige a integração oficial RootStyleRegistry para coletar e inserir estilos do Emotion durante a renderização no servidor. A documentação fornece esse registro e um wrapper Core. Um exemplo executado apenas no cliente não comprova a renderização correta no servidor; portanto, considere o registro indicado como parte desse caminho de integração específico. 1. Instale o pacote React e as dependências do Emotion. 2. Envolva a aplicação com Core e o tema escolhido. 3. Renderize os itens de TaskList a partir do estado da aplicação e imponha as dependências nos manipuladores. 4. Para renderizar no servidor, integre o registro de estilos documentado e verifique a hidratação. Consulte a especificação de apoio ## Sistema de design Agriculture Exemplos de componentes do sistema de design ### Core, Box responsivo e um TaskList real Uma composição React real, com estado local que considera dependências; sem espaços reservados para navegaçã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 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); } } ]} /> ; } ``` Referência de código ### Resumo de um registro Use a composição SummaryList real para apresentar valores identificados por nome. ``` import { SummaryList, SummaryListItem, SummaryListItemTerm, SummaryListItemDescription } from '@ag.ds-next/react/summary-list'; Example reference PREP-1042 ``` Referência de código ### Exemplo completo independente O documento completo inclui layout, controles e inicialização. Extraia o arquivo de exemplo indicado para obter os recursos do fornecedor no caminho relativo exato e, em seguida, disponibilize-o por 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.
    ``` Referência de código - Baixe o exemplo completo em Fontes. O README informa o comando exato para iniciá-lo localmente. - Mantenha os caminhos do fornecedor relativos a este documento; o arquivo inclui todos os recursos usados nesta prévia. ## Sistema de design Agriculture Configuração do agente ### Ponto de partida para implementação Os metadados e as importações do pacote nativo foram verificados no código-fonte. Uma tentativa de instalar temporariamente as dependências nativas não foi concluída; a prévia independente é uma interpretação explícita, não uma alegação de compilação nativa de React. O ZIP do exemplo completo funcional em Fontes também inclui as dependências exatas da prévia e o documento completo. Extraia os arquivos, execute python3 -m http.server 8080 nesse diretório e abra http://localhost:8080/agriculture-agds.html. Não abra exemplos baseados em módulos usando 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. ``` ### Um prompt para seu projeto ``` Use AgDS Core e TaskList para uma transação de preparação com várias tarefas. Represente explicitamente todo, doing, done, doneRecently, blocked e notRequired. Imponha os pré-requisitos na lógica da aplicação, não apenas no texto dos indicadores. Use propriedades de espaçamento responsivo, a pilha de fontes do sistema e funções de cor para primeiro plano e plano de fundo. Mantenha visível um resumo do registro e explique as tarefas bloqueadas. Evite logotipos do governo, decisões regulatórias inventadas ou falsas confirmações de envio. ``` ## Sistema de design Agriculture Fontes e escopo Exemplo educacional de padrão de serviço, com dados fictícios sobre a preparação de um produto agrícola. Não determina a elegibilidade regulatória nem envia uma transação. Não contém marcas de identidade de órgãos públicos. Os exemplos nativos de React API e a prévia interpretada são claramente diferenciados. - Agriculture Design System Página oficial de recursos do AgDS. - Fundamentos Fundamentos do sistema de design. - Componentes Elementos de interface para aplicações de serviços. - Padrões Padrões para compor tarefas completas. - Baixar o exemplo completo funcional ZIP com HTML completo, dependências locais CSS/JavaScript, licenças incluídas e instruções exatas de inicialização. Não é necessário executar uma etapa de compilação. ## Sistema de design Agriculture Recursos relacionados ### Alberta sistema de design Use os componentes web nativos e os tokens de design publicados da Alberta para criar uma lista completa de preparação, com opções acessíveis, progresso derivado e feedback de revisão transparente. ### Amsterdam Use o contrato real de Switch de código aberto da Amsterdam, com um tema neutro completo, rótulos acessíveis e preferências de leitura aplicadas imediatamente. ### B.C. sistema de design Crie um formulário de preferências de lembrete no estilo B.C., com tokens semânticos reais, controles Aria nativos de React, campos de contato condicionais e comportamento completo de validação. - [Referência de implementação](https://design-system.agriculture.gov.au/components/task-list) - [Fonte](https://design-system.agriculture.gov.au/foundations/tokens/typography) - [Fonte](https://design-system.agriculture.gov.au/foundations/tokens/spacing) - [Fonte](https://design-system.agriculture.gov.au/foundations/tokens/breakpoints) - [Fonte](https://design-system.agriculture.gov.au/foundations/tokens/colour) - [Consulte a especificação de apoio](https://design-system.agriculture.gov.au/components/core) - [Consulte a especificação de apoio](https://design-system.agriculture.gov.au/foundations/tokens/typography) - [Consulte a especificação de apoio](https://design-system.agriculture.gov.au/foundations/tokens/spacing/) - [Consulte a especificação de apoio](https://design-system.agriculture.gov.au/foundations/tokens/colour) - [Consulte a especificação de apoio](https://design-system.agriculture.gov.au/components/task-list) - [Consulte a especificação de apoio](https://design-system.agriculture.gov.au/components/summary-list) - [Consulte a especificação de apoio](https://design-system.agriculture.gov.au/guides/getting-started) - [Referência de código](https://design-system.agriculture.gov.au/components/task-list) - [Referência de código](https://design-system.agriculture.gov.au/components/summary-list) - [Agriculture Design System Página oficial de recursos do AgDS.](https://design-system.agriculture.gov.au/) - [Fundamentos Fundamentos do sistema de design.](https://design-system.agriculture.gov.au/foundations) - [Componentes Elementos de interface para aplicações de serviços.](https://design-system.agriculture.gov.au/components) - [Padrões Padrões para compor tarefas completas.](https://design-system.agriculture.gov.au/patterns)