News Card

Dados

Linha de notícia para feed, com ponto de sentimento (alta, baixa ou neutro), título, fonte, horário e ação de abrir.

Carregando

Instalação

Recebe correções por update de versão. O caminho recomendado.

npm i @trdr/ui

import { NewsCard } from "@trdr/ui/news-card"

Uso

import { NewsCard, NewsCardSentiment } from "@trdr/ui/news-card"

export function Exemplo() {
  return <NewsCard />
}

Variantes

GrupoValoresPadrão
sentiment
updownneutral
neutral

Props

NewsCardPropsestende Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof newsCardDotVariants>
PropTipoDescrição
titlestringTitulo da noticia. Vira link quando `href` esta presente.
sourcestringNome da fonte (ex.: "InfoMoney").
timestringHorario ja formatado (ex.: "ha 12 min", "09:32"). O componente nao formata data nem hora.
sentiment?NewsCardSentimentSentimento da noticia para o ativo. Controla a cor do ponto; o rotulo (Alta/Baixa/Neutro) sempre acompanha por texto, nunca so pela cor.
href?stringURL da noticia original. Quando presente, o titulo vira um link que abre em nova aba.
onOpen?() => voidChamado ao clicar no botao de abrir. Quando ausente e `href` existe, o botao abre `href` numa nova aba por padrao. O botao de abrir e o titulo (quando `href` existe) sao dois controles irmaos, nunca um dentro do outro: o legado (`NewsCard.tsx` do Hub antigo) envolvia a linha inteira num `<a>` e colocava um `<button onClick={onShare}>` dentro dele, o que aninha controle interativo dentro de link (invalido para leitor de tela). Aqui o titulo e o botao vivem lado a lado.

Quando usar

Use o NewsCard para uma linha de um feed de noticias sobre um ativo ou o mercado: titulo, fonte, horario e, quando fizer sentido, o sentimento da noticia (alta, baixa ou neutro) para o ativo em questao. Empilhe varios dentro de um container com borda para formar o feed (ver a demo: um div com borda envolvendo varios NewsCard, cada um ja trazendo sua propria border-b).

Quando nao usar

Nao use para uma noticia isolada em destaque (com imagem, resumo longo, call-to-action): isso pede um Card normal, composto a mao. Nao use so para marcar sentimento de preco fora do contexto de noticia: o par text-context-trading-up/down direto, ou o QuoteTable, resolve melhor.

Anatomia

NewsCard e fechado (title/source/time/sentiment/href/onOpen), mas composto por cima do primitivo Item (ItemMedia, ItemContent, ItemTitle, ItemActions): o ponto de sentimento usa ItemMedia, o titulo e o meta usam ItemContent/ItemTitle, e o botao de abrir usa ItemActions. Por isso as partes internas carregam data-slot="item-*" (do Item), nao "news-card-*", exceto a raiz (data-slot="news-card") e o meta/acao proprios (data-slot="news-card-meta", data-slot="news-card-action").

  • Ponto de sentimento: cor por sentiment (up/down/neutral), usando context-trading-up/down (preco, nao sucesso/erro de UI). O ponto e aria-hidden: o rotulo textual (Alta/Baixa/Neutro) fica num texto visualmente oculto antes do titulo, porque cor nunca pode ser a unica pista.
  • Titulo: vira um link (<a target="_blank">) quando href esta presente; senao e texto simples.
  • Meta: fonte e horario, separados por um ponto decorativo. O horario e font-mono (CONTRACT secao 6: horario e numero).
  • Acao de abrir: um botao de icone, sempre presente, chama onOpen quando informado; senao, se houver href, abre numa nova aba por padrao.

Migracao do componente legado

O NewsCard do Hub antigo (src/components/ui/NewsCard.tsx, Figma 66:2373) envolvia a linha inteira num <a> quando havia href, e colocava um <button onClick={onShare}> dentro desse link. Isso aninha um controle interativo dentro de outro (invalido para leitor de tela: um <button> nao pode viver dentro de um <a>). Aqui o titulo (quando vira link) e o botao de abrir sao dois controles irmaos, nunca um dentro do outro. O callback tambem foi renomeado de onShare para onOpen, mais preciso para o que o botao faz (abrir a noticia, nao compartilhar).

Acessibilidade

  • O ponto de sentimento e decorativo (aria-hidden); o rotulo Alta/Baixa/Neutro precede o titulo como texto visualmente oculto, para o sentimento nunca depender so da cor.
  • O botao de abrir tem aria-label unico por noticia (inclui o titulo), para quem navega por leitor de tela distinguir os varios botoes "Abrir noticia" de um feed longo.
  • Quando href existe, o titulo e um link de verdade com target="_blank" e rel="noreferrer"; o botao de abrir ao lado nao fica aninhado dentro dele.

Slots e tokens

Todo elemento renderizado carrega um data-slot para estilizar partes internas sem depender de classe da biblioteca. Os tokens listados são extraídos do código fonte.

[data-slot="news-card"][data-slot="news-card-action"][data-slot="news-card-meta"]
17 tokens usados
bg-content-tertiarybg-context-trading-downbg-context-trading-upbg-surface-secondaryborder-bborder-border-subtleoutline-nonering-offset-2ring-offset-backgroundring-ringtext-b3text-b4text-content-brandtext-content-errortext-content-primarytext-content-successtext-content-tertiary