Pular para o conteúdo principal

TransactionListItem

Componente para exibir itens de lista com informações estruturadas em níveis hierárquicos. Ideal para transações financeiras, notificações e outros dados que precisam ser apresentados de forma organizada.

Importação​

import { TransactionListItem } from '@useblu/ocean-react';

Importação específica (recomendado para tree-shaking)​

import { TransactionListItem } from '@useblu/ocean-react/TransactionListItem';

Importação de tipos TypeScript​

import type { TransactionListItemProps } from '@useblu/ocean-react';

// Uso em componente customizado
const MyTransactionItem: React.FC<TransactionListItemProps> = (props) => {
  return <TransactionListItem {...props} />;
};

Playground Interativo​

Explore o componente TransactionListItem no playground interativo do Storybook:

🚀 Abrir no Storybook

Uso básico​

<List>
  <TransactionListItem>Item básico</TransactionListItem>
  <TransactionListItem>Outro item simples</TransactionListItem>
  <TransactionListItem>Terceiro item</TransactionListItem>
</List>

Estrutura hierárquica​

O TransactionListItem suporta até 4 níveis de informação:

<List>
  <TransactionListItem
    level2="Informação secundária"
    level3="Detalhes adicionais"
    level4="Informação extra"
  >
    Título principal (Level 1)
  </TransactionListItem>
</List>

Variações​

Com ícones​

Use ícones para melhor identificação visual:

<List>
  <TransactionListItem icon={<StarOutline />}>
    Item com estrela
  </TransactionListItem>
  <TransactionListItem icon={<Reply />}>Item com resposta</TransactionListItem>
  <TransactionListItem icon={<LockClosed />}>
    Item com cadeado
  </TransactionListItem>
</List>
🚀 Abrir no Storybook

Com valores monetários​

Para transações financeiras com valores positivos/negativos:

<List>
  <TransactionListItem value="R$ 150,00" positive>
    Receita
  </TransactionListItem>
  <TransactionListItem value="R$ 75,50">Despesa</TransactionListItem>
  <TransactionListItem value="+ U$ 1.200,00" positive>
    Crédito internacional
  </TransactionListItem>
</List>
🚀 Abrir no Storybook

Com múltiplos níveis​

Para informações detalhadas e estruturadas:

<List>
  <TransactionListItem level2="Banco do Brasil" level3="Conta corrente">
    Transferência bancária
  </TransactionListItem>
  <TransactionListItem
    level2="Cartão de crédito"
    level3="Final 1234"
    level4="Parcela 2/12"
  >
    Compra parcelada
  </TransactionListItem>
</List>
🚀 Abrir no Storybook

Com tags e tempo​

Para categorização e timestamp:

<List>
  <TransactionListItem
    tags={<Tag>Pendente</Tag>}
    time="10:30"
    level2="Aguardando aprovação"
  >
    Transferência PIX
  </TransactionListItem>
  <TransactionListItem
    tags={
      <Tag variant="highlight" type="important">
        Aprovado
      </Tag>
    }
    time="14:15"
    level2="Processado com sucesso"
  >
    Pagamento boleto
  </TransactionListItem>
</List>
🚀 Abrir no Storybook

Com subitens​

Para mostrar detalhes expandíveis:

<List>
  <TransactionListItem
    withChevron
    value="R$ 100,00"
    subItens={
      <List>
        <TransactionListItem level2="Taxa de serviço" value="R$ 2,50">
          Cobrança adicional
        </TransactionListItem>
        <TransactionListItem level2="Imposto" value="R$ 5,00">
          IOF
        </TransactionListItem>
      </List>
    }
  >
    Transferência TED
  </TransactionListItem>
</List>
🚀 Abrir no Storybook

Exemplos práticos​

Extrato bancário​

<List>
  <TransactionListItem
    icon={<Reply />}
    level2="Banco do Brasil"
    level3="Conta corrente - 12345-6"
    level4="PIX"
    value="R$ 250,00"
    positive
    time="09:30"
    tags={
      <Tag variant="highlight" type="important">
        Concluído
      </Tag>
    }
  >
    Transferência recebida
  </TransactionListItem>
  <TransactionListItem
    icon={<LockClosed />}
    level2="Cartão de crédito"
    level3="Final 1234"
    value="R$ 89,90"
    time="14:20"
    tags={<Tag>Pendente</Tag>}
  >
    Compra online
  </TransactionListItem>
</List>

Lista de notificações​

<List>
  <TransactionListItem
    icon={<LockClosed />}
    level2="Segurança"
    tags={
      <Tag variant="highlight" type="important">
        Importante
      </Tag>
    }
    time="10:15"
  >
    Nova tentativa de login
  </TransactionListItem>
  <TransactionListItem
    icon={<EyeOutline />}
    level2="Sistema"
    tags={<Tag>Info</Tag>}
    time="08:45"
  >
    Atualização disponível
  </TransactionListItem>
</List>
🚀 Abrir no Storybook

Hierarquia invertida​

Use isInverted para inverter a hierarquia tipográfica entre Level 1 e Level 2. Quando ativado, Level 1 (children) recebe fonte menor (description) e Level 2 recebe fonte maior (paragraph), dando destaque visual ao beneficiário:

<List>
  <TransactionListItem
    icon={<Reply />}
    level2="Transferência PIX"
    value="R$ 250,00"
    positive
  >
    João da Silva
  </TransactionListItem>
  <TransactionListItem
    icon={<Reply />}
    level2="Transferência PIX"
    value="R$ 250,00"
    positive
    isInverted
  >
    João da Silva
  </TransactionListItem>
</List>
🚀 Abrir no Storybook

Estados​

Estados de interação​

<List>
  <TransactionListItem>Estado normal</TransactionListItem>
  <TransactionListItem readOnly>Item somente leitura</TransactionListItem>
  <TransactionListItem isLoading>Item carregando...</TransactionListItem>
  <TransactionListItem withChevron>Item com chevron</TransactionListItem>
</List>
🚀 Abrir no Storybook

API​

Props​

PropTipoPadrãoDescrição
childrenReact.ReactNode-Conteúdo principal do item (Level 1)
level2string-Texto secundário (Level 2)
level3string-Texto terciário (Level 3)
level4string-Texto quaternário (Level 4)
valuestring-Valor monetário ou numérico exibido
positivebooleanfalseDefine se o valor é positivo (cor verde)
timestring-Horário ou timestamp
tagsReact.ReactNode-Tags ou badges para categorização
iconReact.ReactNode-Ícone exibido à esquerda do item
withChevronbooleanfalseExibe ícone de chevron indicando expansão
subItensReact.ReactNode-Subitens aninhados
readOnlybooleanfalseDefine se o item é somente leitura
isLoadingbooleanfalseExibe estado de carregamento
isInvertedbooleanfalseInverte a hierarquia tipográfica entre Level 1 e Level 2
classNamestring-Classes CSS adicionais
onClickfunction-Função chamada ao clicar no item

Classes CSS​

ClasseDescrição
.ods-transaction-list-itemEstilos aplicados ao elemento raiz
.ods-transaction-list-item__contentEstilos aplicados ao conteúdo
.ods-transaction-list-item__iconEstilos aplicados ao ícone
.ods-transaction-list-item__informationEstilos aplicados ao container de informações
.ods-transaction-list-item__level1Estilos aplicados ao texto de nível 1
.ods-transaction-list-item__level2Estilos aplicados ao texto de nível 2
.ods-transaction-list-item__level3Estilos aplicados ao texto de nível 3
.ods-transaction-list-item__level4Estilos aplicados ao texto de nível 4
.ods-transaction-list-item__sub-informationEstilos aplicados às informações do lado direito
.ods-transaction-list-item__valueEstilos aplicados ao valor
.ods-transaction-list-item__tagsEstilos aplicados às tags
.ods-transaction-list-item__timeEstilos aplicados ao horário
.ods-transaction-list-item__sub-itensEstilos aplicados ao container de subitens
.ods-transaction-list-item--invertedInverte tamanhos de fonte entre Level 1 e Level 2

Acessibilidade​

  • ✅ Suporte completo a navegação por teclado
  • ✅ Estados de foco visíveis
  • ✅ Atributos ARIA apropriados
  • ✅ Suporte a screen readers
  • ✅ Semântica adequada para listas
  • ✅ Estados de carregamento bem sinalizados
TeclaFunção
TabNavega entre itens da lista
Space / EnterAtiva itens clicáveis
Arrow Up/DownNavega verticalmente

Melhores práticas​

✅ Faça​

  • Hierarquia consistente: Use os níveis (level2, level3, level4) de forma consistente
  • Ícones significativos: Use ícones que ajudem na identificação do conteúdo
  • Valores monetários: Use a prop positive para receitas e créditos
  • Tags descritivas: Use tags para status claros e identificáveis
  • Subitens organizados: Use subItens para detalhes que complementam a informação principal
  • Estados de loading: Use isLoading durante carregamento de dados

❌ Não faça​

  • Níveis desnecessários: Não use todos os níveis se não há informação suficiente
  • Textos muito longos: Evite textos excessivamente longos que quebram o layout
  • Ícones decorativos: Não use ícones apenas por estética, eles devem ter significado
  • Valores sem contexto: Não omita informações importantes sobre valores monetários
  • Subitens excessivos: Evite muitos níveis de aninhamento que confundem o usuário

Organização da Informação​

Level 1 (children)​

  • Propósito: Título principal, tipo de transação
  • Exemplo: "Transferência PIX", "Compra no cartão"

Level 2​

  • Propósito: Informação secundária relevante
  • Exemplo: "Banco do Brasil", "Loja XYZ"

Level 3​

  • Propósito: Detalhes específicos
  • Exemplo: "Conta corrente", "Final 1234"

Level 4​

  • Propósito: Informações complementares
  • Exemplo: "Parcela 2/12", "Taxa incluída"

Uso de Valores​

  • Positivos: Use positive={true} para receitas, créditos, entradas
  • Negativos: Valores padrão para despesas, débitos, saídas
  • Formatação: Inclua símbolo da moeda e formatação adequada
  • Sinais: Use + ou - quando necessário para clareza

Estados e Feedback​

  • Loading: Use isLoading para dados sendo carregados
  • ReadOnly: Use readOnly para itens informativos
  • Interativo: Use onClick para itens clicáveis
  • Expansível: Use withChevron para itens com subitens

Documentação Completa​

Para documentação técnica detalhada, exemplos de uso e API completa, consulte o Storybook do TransactionListItem.

No Storybook você encontrará:

  • ✅ Controles interativos para testar todas as props
  • ✅ API gerada automaticamente com tipagem completa
  • ✅ Exemplos visuais de todas as variações e estados
  • ✅ Playground para experimentação rápida