From 65f684e6d0f9bbcdafbb2a33219111565547a9f0 Mon Sep 17 00:00:00 2001 From: johnsmccain Date: Tue, 23 Jun 2026 13:25:25 +0100 Subject: [PATCH 1/4] Add notification system demo page with toast and inline banner variants - Create demo page at /demo/notifications with mock triggers - Add toast queue with success, info, warning, error variants - Add inline banner examples with all variants - Include mock flows for save, failure, and timeout scenarios - Display accessibility features and stacking limit controls Closes #477 --- src/app/demo/notifications/page.tsx | 158 ++++++++++++++++++++++++++++ 1 file changed, 158 insertions(+) create mode 100644 src/app/demo/notifications/page.tsx diff --git a/src/app/demo/notifications/page.tsx b/src/app/demo/notifications/page.tsx new file mode 100644 index 0000000..b9c119c --- /dev/null +++ b/src/app/demo/notifications/page.tsx @@ -0,0 +1,158 @@ +"use client"; + +import { useState } from "react"; +import { useToast } from "@/components/notifications/ToastProvider"; +import { InlineBanner } from "@/components/ui/InlineBanner"; +import { Button } from "@/components/ui/Button"; + +export default function NotificationsDemo() { + const { pushToast, dismissToast, setLimit, limit, toasts } = useToast(); + const [showBanner, setShowBanner] = useState<"success" | "info" | "warning" | "error" | null>(null); + + const handleToast = (variant: "success" | "info" | "warning" | "error") => { + const messages = { + success: { title: "Changes saved", description: "Your settings have been updated successfully." }, + info: { title: "New feature available", description: "Check out the latest updates in your dashboard." }, + warning: { title: "Session expiring soon", description: "Please save your work before your session ends." }, + error: { title: "Save failed", description: "Could not save your changes. Please try again." }, + }; + + pushToast({ + title: messages[variant].title, + description: messages[variant].description, + variant, + duration: 4500, + }); + }; + + const handleMockFlow = (flow: "save" | "failure" | "timeout") => { + switch (flow) { + case "save": + pushToast({ title: "Saving...", description: "Please wait while we save your changes.", variant: "info", duration: 2000 }); + setTimeout(() => { + pushToast({ title: "Changes saved", description: "Your settings have been updated successfully.", variant: "success", duration: 4500 }); + }, 2000); + break; + case "failure": + pushToast({ title: "Processing...", description: "Please wait while we process your request.", variant: "info", duration: 2000 }); + setTimeout(() => { + pushToast({ title: "Request failed", description: "Network error occurred. Please check your connection.", variant: "error", duration: 5000 }); + }, 2000); + break; + case "timeout": + pushToast({ title: "Connecting...", description: "Establishing connection to server.", variant: "info", duration: 2000 }); + setTimeout(() => { + pushToast({ title: "Connection timeout", description: "Server did not respond in time. Please.try again.", variant: "warning", duration: 5500 }); + }, 2000); + break; + } + }; + + return ( +
+
+
+

Notification System Demo

+

Demonstrates toast notifications and inline banners with all variants.

+
+ + {/* Toast Queue Section */} +
+

Toast Notifications

+
+
+
+

Stacking Limit

+

Current limit: {limit}

+
+
+ + + + +
+
+
+

Active toasts: {toasts.length}

+
+
+ +
+ + + + +
+ +
+

Mock Common Flows

+
+ + + +
+
+
+ + {/* Inline Banner Section */} +
+

Inline Banners

+
+ + + + +
+ + {showBanner && ( +
+ + This is an inline banner with the {showBanner} variant. It can be used for page-level messages that require user attention. + + +
+ )} +
+ + {/* Accessibility Notes */} +
+

Accessibility Features

+
+
+
+
+

Keyboard Focusable

+

Close buttons are focusable with Tab key and can be activated with Enter/Space

+
+
+
+
+
+

Screen Reader Announcements

+

Uses aria-live regions for polite (info/success) and assertive (warning/error) announcements

+
+
+
+
+
+

Pause on Hover/Focus

+

Auto-dismiss timer pauses when hovering or focusing on toast

+
+
+
+
+
+

Auto-Dismiss (3-6s)

+

Toasts automatically dismiss after 3-6 seconds (configurable)

+
+
+
+
+
+
+ ); +} From 04d9a7d9a4df58621607bc942f166be57542c403 Mon Sep 17 00:00:00 2001 From: johnsmccain Date: Tue, 23 Jun 2026 13:28:14 +0100 Subject: [PATCH 2/4] Add notification center and preferences with 44px touch target - Fix Switch component to meet 44px minimum touch target requirement - Update demo page to include notification center with preferences - Notification center already implements pagination and read/unread states - Preference updates persist in localStorage via useNotificationPreferences hook - Notification items show title, timestamp, status icon, and action buttons - Unread items have clear visual distinction with left border accent Closes #476 --- src/app/demo/notifications/page.tsx | 30 +++++++++++++++++++++++++++++ src/components/ui/Switch.tsx | 9 +-------- 2 files changed, 31 insertions(+), 8 deletions(-) diff --git a/src/app/demo/notifications/page.tsx b/src/app/demo/notifications/page.tsx index b9c119c..6d46fe0 100644 --- a/src/app/demo/notifications/page.tsx +++ b/src/app/demo/notifications/page.tsx @@ -4,10 +4,12 @@ import { useState } from "react"; import { useToast } from "@/components/notifications/ToastProvider"; import { InlineBanner } from "@/components/ui/InlineBanner"; import { Button } from "@/components/ui/Button"; +import { NotificationCenter } from "@/components/notifications/NotificationCenter"; export default function NotificationsDemo() { const { pushToast, dismissToast, setLimit, limit, toasts } = useToast(); const [showBanner, setShowBanner] = useState<"success" | "info" | "warning" | "error" | null>(null); + const [showNotificationCenter, setShowNotificationCenter] = useState(false); const handleToast = (variant: "success" | "info" | "warning" | "error") => { const messages = { @@ -118,6 +120,27 @@ export default function NotificationsDemo() { )} + {/* Notification Center Section */} +
+

Notification Center

+
+
+
+

In-App Notification Center

+

View and manage transaction and system event notifications

+
+ +
+ {showNotificationCenter && ( +
+ +
+ )} +
+
+ {/* Accessibility Notes */}

Accessibility Features

@@ -150,6 +173,13 @@ export default function NotificationsDemo() {

Toasts automatically dismiss after 3-6 seconds (configurable)

+
+
+
+

44px Touch Target

+

Preference toggle controls meet minimum touch target requirements

+
+
diff --git a/src/components/ui/Switch.tsx b/src/components/ui/Switch.tsx index b1220dd..56bbb46 100644 --- a/src/components/ui/Switch.tsx +++ b/src/components/ui/Switch.tsx @@ -9,7 +9,7 @@ interface SwitchProps { export function Switch({ checked, onChange, label, disabled = false }: SwitchProps) { return ( -