Sistema de design Agriculture.

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

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>