Notification center

[Spark450]

Description:

The Priority 1 version of the notification center will focus on just the popover that lists recent notifications grouped by day (e.g., Today, Yesterday, Monday etc.). Each notification communicates the event type, time, and urgency. When there are no more notifications, the center displays a friendly empty state message.

Figma design

Note: This feature will be extended later to include a Notification page that can be navigated to using the side menu, Figma design. This view will give the user additional options to filter all of their notifications.

Ideally, we can reuse the notification cards for both the page and popover.

If new component is necessary, add it to experimental folder

Acceptance Criteria:

1. Notifications popover

• [ ] Functional
  • [x] Notifications re-render immediately when underlying data changes (user action or service push).
• [ ] Variants
  • [x] default
  • [x] success
  • [x] critical
  • [x] warning
  • [x] info
  • [ ] event
• [ ] Properties
  • Timestamp
    • [x] Format follows “Human-readable display rules” (see section 3).
  • Urgent status
    • [x] If urgent = true, show “Urgent” label.
  • Read / unread
    • [x] Unread → green dot near timestamp.
    • [x] Clicking the card (or Mark all as read) removes the dot and sets read.
  • Label (optional)
    • [x] ≤ 100 characters, context specific.
  • Description (mandatory)
    • [x] ≤ 100 characters, concise (e.g., “Rita Lee assigned you a new case.”).
  • Preview (optional)
    • [ ] Shows first 50 chars of linked content when provided.
• [ ] Content
  • [x] Day groups: Today, Yesterday, weekday names, then full dates.
    • [x] On hover full date is displayed in tooltip
    • [x] Provide ARIA label for "today" and "yesterday" that is inclusive of full date e.g. Today, March 12, 2025
  • [x] Scrollable list: scrollbar appears when content exceeds max-height.
    • [x] Default max height is 710px (expose property so it can be customized by user)
  • [x] Each list item uses notification card that meets criteria in section 1.
  • [x] Empty state: show “No older notifications to display.” when list is empty.
  • [x] 25 Notifications max to show
• [x] Mark all as "read" action
  • [x] Button text “Mark all as read”.
  • [ ] On click:
    • [x] All unread cards set to read.
    • [x] All green dots disappear.
    • [x] Button visual state remains default.
• "All, Unread, Urgent" Tab
• "See all notifications" action

---

3. Human-readable display rules (timestamp)

• [x] 0 – 60 s → 45 s ago
• [x] 61 s – 59 m 59 s → 12 min ago (rounded down)
• [x] 60 m – 23 h 59 m 59 s → 3 h ago (rounded down)
• [x] 1 – 6 d 23 h 59 m 59 s → 4 d ago (not rounded)
• [x] 7 – 27 d → Mon, Jun 20 at 4:15 pm

[Spark450]

Note: this issue will need to be updated once it has had a DS evolution pass.