Journey Map

Mapa de jornada com N estágios em colunas coloridas, conectores entre etapas e itens com ícones opcionais. Ideal para visualizar processos multi-etapas.

components/journey-map.cssAbrir no Figma

Uso

Quando e como utilizar o journey map para representar processos em etapas.

Formato JSON — Espera um objeto { stages: [{ label, color, items }] } onde cada stage contém um array de itens com label, icon e description opcionais.
Formato CSV — Agrupa automaticamente pelo campo estagio. Cada linha vira um item; campos cor/color definem a cor do estágio e nome/label/titulo definem o nome do item.

Use o journey map para representar fluxos com 2 a 6 estágios. Para processos lineares com etapa ativa, prefira o componente Stepper.

Exemplos

Veja abaixo o exemplo interativo do journey map com estágios, itens e conectores.

Carregando exemplo...

Anatomia

Estrutura interna do componente e seus elementos.

Parte	Elemento	Descrição
Container	`.journey-map`	Wrapper principal, largura 100%
Título	`.journey-map__title`	Título do mapa, heading 18px w600
Grid	`.journey-map__grid`	Grid responsivo com auto-fit e gap 16px
Estágio	`.journey-map__stage`	Coluna com border-top colorido e fundo neutro
Header	`.journey-map__stage-header`	Barra com label e badge de contagem
Label	`.journey-map__stage-label`	Nome do estágio, 14px w600
Count	`.journey-map__stage-count`	Badge pill com total de itens
Items	`.journey-map__stage-items`	Lista flex-column com gap 8px
Item	`.journey-map__item`	Linha com ícone e texto, hover interativo
Ícone	`.journey-map__item-icon`	SVG 20x20 com cor do estágio
Texto	`.journey-map__item-text`	Wrapper flex-1 para label e descrição
Item Label	`.journey-map__item-label`	Nome do item, 13px w500
Descrição	`.journey-map__item-description`	Texto auxiliar, 12px
Conector	`.journey-map__connector`	Seta → entre estágios
Vazio	`.journey-map__empty`	Estado quando não há estágios

Ícones

Como os ícones são renderizados dentro dos itens do mapa.

O componente renderiza ícones placeholder (SVG genérico com círculo) baseados no campo icon de cada item. Em produção, substitua pelos ícones do Icon Park ou SVGs customizados do projeto. O placeholder utiliza currentColor e herda a cor do estágio via --stage-color.

Propriedades

Classes disponíveis para configurar o journey map.

Propriedade	Tipo	Default	Descrição
`.journey-map`	`classe`	—	Container principal do mapa de jornada.
`.journey-map__title`	`classe`	—	Título do mapa (18px w600).
`.journey-map__grid`	`classe`	—	Grid CSS responsivo de estágios (auto-fit, minmax 250px).
`.journey-map__stage`	`classe`	—	Coluna de estágio com border-top colorido via --stage-color.
`.journey-map__stage-header`	`classe`	—	Header do estágio com label e contagem.
`.journey-map__stage-label`	`classe`	—	Nome do estágio (14px w600).
`.journey-map__stage-count`	`classe`	—	Badge pill com contagem de itens do estágio.
`.journey-map__stage-items`	`classe`	—	Lista vertical de itens dentro do estágio.
`.journey-map__item`	`classe`	—	Item individual com hover e border-radius.
`.journey-map__item-icon`	`classe`	—	Ícone à esquerda do item (20x20).
`.journey-map__item-text`	`classe`	—	Wrapper de texto (label + description).
`.journey-map__item-label`	`classe`	—	Nome do item (13px w500).
`.journey-map__item-description`	`classe`	—	Descrição em fonte menor (12px).
`.journey-map__connector`	`classe`	—	Seta entre estágios (caractere →).
`.journey-map__empty`	`classe`	—	Estado vazio com borda tracejada e texto centralizado.

Código

Snippets prontos para copiar e usar no seu projeto.

HTML estático

html

<div class="journey-map">
  <h3 class="journey-map__title">Processo de Fiscalização</h3>
  <div class="journey-map__grid">
    <div class="journey-map__stage" style="--stage-color: #3B82F6">
      <div class="journey-map__stage-header">
        <span class="journey-map__stage-label">Planejamento</span>
        <span class="journey-map__stage-count">2</span>
      </div>
      <div class="journey-map__stage-items">
        <div class="journey-map__item">
          <span class="journey-map__item-icon">
            <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="24" cy="24" r="20" stroke="currentColor" stroke-width="2.5" fill="none"/>
              <circle cx="24" cy="24" r="4" fill="currentColor"/>
            </svg>
          </span>
          <div class="journey-map__item-text">
            <div class="journey-map__item-label">Definir escopo</div>
            <div class="journey-map__item-description">Selecionar área e período</div>
          </div>
        </div>
        <div class="journey-map__item">
          <div class="journey-map__item-text">
            <div class="journey-map__item-label">Alocar equipe</div>
          </div>
        </div>
      </div>
    </div>

    <div class="journey-map__connector">→</div>

    <div class="journey-map__stage" style="--stage-color: #F59E0B">
      <div class="journey-map__stage-header">
        <span class="journey-map__stage-label">Execução</span>
        <span class="journey-map__stage-count">1</span>
      </div>
      <div class="journey-map__stage-items">
        <div class="journey-map__item">
          <div class="journey-map__item-text">
            <div class="journey-map__item-label">Visita em campo</div>
            <div class="journey-map__item-description">Coleta de dados e evidências</div>
          </div>
        </div>
      </div>
    </div>

    <div class="journey-map__connector">→</div>

    <div class="journey-map__stage" style="--stage-color: #10B981">
      <div class="journey-map__stage-header">
        <span class="journey-map__stage-label">Conclusão</span>
        <span class="journey-map__stage-count">1</span>
      </div>
      <div class="journey-map__stage-items">
        <div class="journey-map__item">
          <div class="journey-map__item-text">
            <div class="journey-map__item-label">Emitir relatório</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

DataLoader (auto-init)

html

<div data-arenito="journey-map"
     data-endpoint="/api/jornada"
     data-format="json"
     data-title="Jornada do Processo"
     data-show-icons="true"
     data-show-descriptions="true">
</div>

Factory (JavaScript)

import { renderJourneyMap } from 'arenito/components/journey-map.js';

const el = document.querySelector('#meu-mapa');

renderJourneyMap(el, {
  stages: [
    {
      label: 'Triagem',
      color: '#3B82F6',
      items: [
        { label: 'Receber demanda', icon: 'inbox', description: 'Via protocolo' },
        { label: 'Classificar prioridade', icon: 'flag' }
      ]
    },
    {
      label: 'Análise',
      color: '#F59E0B',
      items: [
        { label: 'Avaliar documentos', icon: 'document' }
      ]
    },
    {
      label: 'Despacho',
      color: '#10B981',
      items: [
        { label: 'Emitir parecer', icon: 'check' }
      ]
    }
  ]
}, { title: 'Fluxo de Atendimento', showIcons: true, showDescriptions: true });

Fonte de Dados

Estrutura esperada no formato JSON para alimentar o journey map.

json

{
  "stages": [
    {
      "label": "Planejamento",
      "color": "#3B82F6",
      "items": [
        {
          "label": "Definir escopo",
          "icon": "scope",
          "description": "Selecionar área e período de atuação"
        },
        {
          "label": "Alocar equipe",
          "icon": "team"
        }
      ]
    },
    {
      "label": "Execução",
      "color": "#F59E0B",
      "items": [
        {
          "label": "Visita em campo",
          "icon": "location",
          "description": "Coleta de dados e evidências"
        }
      ]
    }
  ]
}

O DataLoader também aceita CSV flat com a coluna estagio para agrupamento automático. Campos adicionais: cor/color, nome/label/titulo, icone/icon, descricao/description.

Responsividade

Comportamento do componente em diferentes tamanhos de tela.

Breakpoint	Comportamento
Desktop (> 768px)	Estágios em grid horizontal com colunas auto-fit (min 250px)
Mobile (≤ 768px)	Estágios empilhados em coluna única; conectores rotacionam 90°

O grid utiliza repeat(auto-fit, minmax(250px, 1fr)), garantindo quebra natural conforme o espaço disponível. Conectores entre estágios ajustam sua orientação automaticamente.

Dark Mode

Adaptações automáticas no modo escuro via classe .dark.

Elemento	Light	Dark
Stage background	`--surface-base-neutral-container-default`	`--surface-base-neutral-container-default`
Stage header	`color-mix(--stage-color 8%)`	`color-mix(--stage-color 12%)`
Count badge	`color-mix(--stage-color 15%)`	`color-mix(--stage-color 20%)`
Item hover	`--surface-base-neutral-container-emphasis`	`--surface-base-neutral-container-emphasis`

O dark mode funciona automaticamente via variáveis semânticas. Os ajustes em .dark aumentam a opacidade do color-mix para manter o contraste em fundos escuros.

Journey Map ​

Uso ​

Exemplos ​

Anatomia ​

Ícones ​

Propriedades ​

Código ​

HTML estático ​

DataLoader (auto-init) ​

Factory (JavaScript) ​

Fonte de Dados ​

Responsividade ​

Dark Mode ​