Mercurial
diff design_system/src/storybook.js @ 252:7a7581f040e8
[ui] Add scoped notification component
Co-authored-by: Copilot <[email protected]>
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Tue, 04 Aug 2026 11:57:16 -0700 |
| parents | 117c4d53c9a4 |
| children | 2b6e732087ff |
line wrap: on
line diff
--- a/design_system/src/storybook.js Tue Aug 04 09:14:57 2026 -0700 +++ b/design_system/src/storybook.js Tue Aug 04 11:57:16 2026 -0700 @@ -8,6 +8,7 @@ ["/components/card", "card"], ["/components/alert", "alert"], ["/components/field", "field"], + ["/components/notifications", "notifications"], ["/components/stack", "stack"], ]); @@ -63,6 +64,55 @@ }); document.addEventListener("click", event => { + const notificationDemo = event.target.closest( + "[data-notification-demo]", + ); + if (notificationDemo) { + const scope = notificationDemo.closest("zen-notifications"); + if (!scope) return; + const tone = notificationDemo.dataset.tone || "info"; + const baseId = notificationDemo.dataset.notificationId || tone; + const count = notificationDemo.dataset.burst === "true" ? 5 : 1; + for (let index = 0; index < count; index++) { + notificationDemo.dispatchEvent(new CustomEvent("zen-notify", { + bubbles: true, + composed: false, + detail: { + version: 1, + id: count > 1 ? `${baseId}-${Date.now()}-${index}` : baseId, + tone, + message: notificationDemo.dataset.message || "Notification", + description: notificationDemo.dataset.description, + announcement: tone === "error" ? "assertive" : "polite", + durationMs: 5000, + persistent: notificationDemo.dataset.persistent === "true", + action: notificationDemo.dataset.action === "true" + ? { token: `catalog-action-${Date.now()}`, label: "Retry" } + : undefined, + }, + })); + } + return; + } + + const dismissDemo = event.target.closest( + "[data-notification-dismiss-demo]", + ); + if (dismissDemo) { + dismissDemo.dispatchEvent(new CustomEvent( + "zen-dismiss-notification", + { + bubbles: true, + composed: false, + detail: { + version: 1, + id: dismissDemo.dataset.notificationDismissDemo, + }, + }, + )); + return; + } + const link = event.target.closest("a[data-catalog-link]"); if (!link || link.origin !== location.origin ||