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

Prop	Tipo	Padrão	Descrição
`children`	`React.ReactNode`	-	Conteúdo principal do item (Level 1)
`level2`	`string`	-	Texto secundário (Level 2)
`level3`	`string`	-	Texto terciário (Level 3)
`level4`	`string`	-	Texto quaternário (Level 4)
`value`	`string`	-	Valor monetário ou numérico exibido
`positive`	`boolean`	`false`	Define se o valor é positivo (cor verde)
`time`	`string`	-	Horário ou timestamp
`tags`	`React.ReactNode`	-	Tags ou badges para categorização
`icon`	`React.ReactNode`	-	Ícone exibido à esquerda do item
`withChevron`	`boolean`	`false`	Exibe ícone de chevron indicando expansão
`subItens`	`React.ReactNode`	-	Subitens aninhados
`readOnly`	`boolean`	`false`	Define se o item é somente leitura
`isLoading`	`boolean`	`false`	Exibe estado de carregamento
`isInverted`	`boolean`	`false`	Inverte a hierarquia tipográfica entre Level 1 e Level 2
`className`	`string`	-	Classes CSS adicionais
`onClick`	`function`	-	Função chamada ao clicar no item

Classes CSS

Classe	Descrição
`.ods-transaction-list-item`	Estilos aplicados ao elemento raiz
`.ods-transaction-list-item__content`	Estilos aplicados ao conteúdo
`.ods-transaction-list-item__icon`	Estilos aplicados ao ícone
`.ods-transaction-list-item__information`	Estilos aplicados ao container de informações
`.ods-transaction-list-item__level1`	Estilos aplicados ao texto de nível 1
`.ods-transaction-list-item__level2`	Estilos aplicados ao texto de nível 2
`.ods-transaction-list-item__level3`	Estilos aplicados ao texto de nível 3
`.ods-transaction-list-item__level4`	Estilos aplicados ao texto de nível 4
`.ods-transaction-list-item__sub-information`	Estilos aplicados às informações do lado direito
`.ods-transaction-list-item__value`	Estilos aplicados ao valor
`.ods-transaction-list-item__tags`	Estilos aplicados às tags
`.ods-transaction-list-item__time`	Estilos aplicados ao horário
`.ods-transaction-list-item__sub-itens`	Estilos aplicados ao container de subitens
`.ods-transaction-list-item--inverted`	Inverte 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

Navegação por teclado

Tecla	Função
`Tab`	Navega entre itens da lista
`Space` / `Enter`	Ativa itens clicáveis
`Arrow Up/Down`	Navega 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

Links relacionados

List - Container para organizar TransactionListItems
Tag - Para categorização com tags
Storybook - TransactionListItem - Documentação técnica

Importação​

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

Importação de tipos TypeScript​

Playground Interativo​

Uso básico​

Estrutura hierárquica​

Variações​

Com ícones​

Com valores monetários​

Com múltiplos níveis​

Com tags e tempo​

Com subitens​

Exemplos práticos​

Extrato bancário​

Lista de notificações​

Hierarquia invertida​

Estados​

Estados de interação​

API​

Props​

Classes CSS​

Acessibilidade​

Navegação por teclado​

Melhores práticas​

✅ Faça​

❌ Não faça​

Organização da Informação​

Level 1 (children)​

Level 2​

Level 3​

Level 4​

Uso de Valores​

Estados e Feedback​

Documentação Completa​

Links relacionados​

Importação

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

Importação de tipos TypeScript

Playground Interativo

Uso básico

Estrutura hierárquica

Variações

Com ícones

Com valores monetários

Com múltiplos níveis

Com tags e tempo

Com subitens

Exemplos práticos

Extrato bancário

Lista de notificações

Hierarquia invertida

Estados

Estados de interação

API

Props

Classes CSS

Acessibilidade

Navegação por teclado

Melhores práticas

✅ Faça

❌ Não faça

Organização da Informação

Level 1 (children)

Level 2

Level 3

Level 4

Uso de Valores

Estados e Feedback

Documentação Completa

Links relacionados