@handled-ai/design-system 0.20.1 → 0.20.2

package/src/prototype/__tests__/detail-view-timeline-system-events.test.tsx

@@ -1,3 +1,4 @@
+import "@testing-library/jest-dom/vitest"
 import { describe, it, expect, vi, beforeEach } from "vitest"
 import React from "react"
 import { render, fireEvent } from "@testing-library/react"
@@ -181,14 +182,19 @@ describe("DetailView timeline system-events toggle", () => {
       '[data-testid="system-events-toggle"]',
     ) as HTMLElement
     fireEvent.click(toggle)
+    expect(toggle).toHaveAttribute("aria-pressed", "true")
     expect(container.textContent).toContain("Score updated +3")
 
     // Collapse the timeline
     expandTimeline(container)
+    expect(toggle).toHaveAttribute("aria-pressed", "true")
+    expect(container.textContent).not.toContain("Score updated +3")
+
     // Re-expand
     expandTimeline(container)
 
     // System events should still be visible (toggle didn't change)
+    expect(toggle).toHaveAttribute("aria-pressed", "true")
     expect(container.textContent).toContain("Score updated +3")
   })
 
@@ -203,15 +209,20 @@ describe("DetailView timeline system-events toggle", () => {
     const badge = container.querySelector('[data-testid="hidden-count-badge"]')
     expect(badge).not.toBeNull()
     expect(badge?.textContent).toBe("2")
+    expect(badge).toHaveClass("min-w-[18px]")
   })
 
-  it("calls localStorage.setItem when toggle changes", () => {
+  it("calls localStorage.setItem when toggle changes and shows a stronger pressed style", () => {
     const { container } = render(<DetailView {...baseProps()} />)
     expandTimeline(container)
     const toggle = container.querySelector(
       '[data-testid="system-events-toggle"]',
     ) as HTMLElement
+    expect(toggle).toHaveAttribute("aria-pressed", "false")
     fireEvent.click(toggle)
+    expect(toggle).toHaveAttribute("aria-pressed", "true")
+    expect(toggle.className).toContain("border-primary/40")
+    expect(toggle.className).toContain("bg-primary/10")
     expect(localStorageMock.setItem).toHaveBeenCalledWith(
       "test-show-score-changes",
       "true",
@@ -301,12 +312,15 @@ describe("DetailView timeline system-events toggle", () => {
     expect(toggle).toBeNull()
   })
 
-  it("shows footer hint when timeline is expanded and system events are hidden", () => {
+  it("shows footer hint below the case-panel timeline when timeline is expanded and system events are hidden", () => {
     const { container } = render(<DetailView {...baseProps()} />)
     expandTimeline(container)
+    const timeline = container.querySelector('[data-variant="case-panel"]')
     const hint = container.querySelector('[data-testid="timeline-footer-hint"]')
+    expect(timeline).not.toBeNull()
     expect(hint).not.toBeNull()
     expect(hint?.textContent).toBe("Score changes are hidden.")
+    expect(timeline?.compareDocumentPosition(hint as Node)).toBe(Node.DOCUMENT_POSITION_FOLLOWING)
   })
 
   it("shows visible footer hint with count when system events are shown", () => {

package/src/prototype/prototype-inbox-view.tsx

@@ -48,6 +48,7 @@ import {
   type SuggestedContact,
 } from "../components/suggested-actions"
 import { TimelineActivity, type TimelineEvent } from "../components/timeline-activity"
+import { cn } from "../lib/utils"
 import type {
   QueueItem,
   InboxViewConfig,
@@ -296,13 +297,23 @@ function TimelineSection({
           <button
             type="button"
             onClick={() => setShowSystemEvents((prev) => !prev)}
-            className="flex shrink-0 items-center gap-1.5 rounded-full border border-border bg-background px-2.5 py-1 text-[11px] font-medium text-muted-foreground transition-colors hover:bg-muted/40 hover:text-foreground cursor-pointer"
+            className={cn(
+              "flex shrink-0 cursor-pointer items-center gap-1.5 rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors hover:text-foreground",
+              showSystemEvents
+                ? "border-primary/40 bg-primary/10 text-primary shadow-sm hover:bg-primary/15"
+                : "border-border bg-background text-muted-foreground hover:bg-muted/40"
+            )}
             aria-pressed={showSystemEvents}
             data-testid="system-events-toggle"
           >
             {toggleLabel}
             <span
-              className="inline-flex items-center justify-center rounded-full bg-muted px-1.5 text-[10px] font-semibold min-w-[18px] tabular-nums"
+              className={cn(
+                "inline-flex min-w-[18px] items-center justify-center rounded-full px-1.5 text-[10px] font-semibold tabular-nums",
+                showSystemEvents
+                  ? "bg-primary/15 text-primary ring-1 ring-primary/30"
+                  : "bg-muted text-muted-foreground ring-1 ring-border/70"
+              )}
               data-testid="hidden-count-badge"
             >
               {hiddenCount}
@@ -314,7 +325,7 @@ function TimelineSection({
       {/* Timeline body */}
       {showTimeline && visibleEvents.length > 0 && (
         <div className="mt-3">
-          <TimelineActivity events={visibleEvents} />
+          <TimelineActivity events={visibleEvents} variant="case-panel" />
         </div>
       )}