ActivityItem

molecules

Activity feed row — 8px colored dot + 12px text with bold entity name + 10px muted relative time. Live region: new items announced politely to screen readers.

ARIA Role: article

Demo

Demo for ActivityItem (molecules)

Activity feed row — 8px colored dot + 12px text with bold entity name + 10px muted relative time. Live region: new items announced politely to screen readers.

Props

Prop	Type	Required	Default
`type`	`'sale' \| 'refund' \| 'new' \| 'event'`	Yes	`—`
`text`	`React.ReactNode`	Yes	`—`
`timestamp`	`string`	Yes	`—`
`relativeTime`	`string`	Yes	`—`

TypeScript Interface

interface ActivityItemProps {
  type: 'sale' | 'refund' | 'new' | 'event';
  text: React.ReactNode;
  timestamp: string;
  relativeTime: string;
}

Assertions (NASA Rule 5)

[type]All 4 props required, timestamp must be ISO 8601(NASA Rule 5)
[aria]Container <time> element must have datetime attribute matching ISO timestamp(WCAG 1.3.1)

Usage

Import

import { Activityitem } from '@epasslive/design-system'

Basic

<Activityitem />

With Variants

<Activityitem variant="primary" size="md" />