Mercurial

comparison design_system/src/storybook.js @ 252:7a7581f040e8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[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
comparison
equal deleted inserted replaced
251:117c4d53c9a4 252:7a7581f040e8
6 ["/tokens", "tokens"], 6 ["/tokens", "tokens"],
7 ["/components/button", "button"], 7 ["/components/button", "button"],
8 ["/components/card", "card"], 8 ["/components/card", "card"],
9 ["/components/alert", "alert"], 9 ["/components/alert", "alert"],
10 ["/components/field", "field"], 10 ["/components/field", "field"],
11 ["/components/notifications", "notifications"],
11 ["/components/stack", "stack"], 12 ["/components/stack", "stack"],
12 ]); 13 ]);
13 14
14 function showPage(pathname) { 15 function showPage(pathname) {
15 const pageName = pages.get(pathname) || "overview"; 16 const pageName = pages.get(pathname) || "overview";
61 systemTheme.addEventListener("change", () => { 62 systemTheme.addEventListener("change", () => {
62 if (!root.dataset.zenTheme) updateThemeButton(); 63 if (!root.dataset.zenTheme) updateThemeButton();
63 }); 64 });
64 65
65 document.addEventListener("click", event => { 66 document.addEventListener("click", event => {
67 const notificationDemo = event.target.closest(
68 "[data-notification-demo]",
69 );
70 if (notificationDemo) {
71 const scope = notificationDemo.closest("zen-notifications");
72 if (!scope) return;
73 const tone = notificationDemo.dataset.tone || "info";
74 const baseId = notificationDemo.dataset.notificationId || tone;
75 const count = notificationDemo.dataset.burst === "true" ? 5 : 1;
76 for (let index = 0; index < count; index++) {
77 notificationDemo.dispatchEvent(new CustomEvent("zen-notify", {
78 bubbles: true,
79 composed: false,
80 detail: {
81 version: 1,
82 id: count > 1 ? `${baseId}-${Date.now()}-${index}` : baseId,
83 tone,
84 message: notificationDemo.dataset.message || "Notification",
85 description: notificationDemo.dataset.description,
86 announcement: tone === "error" ? "assertive" : "polite",
87 durationMs: 5000,
88 persistent: notificationDemo.dataset.persistent === "true",
89 action: notificationDemo.dataset.action === "true"
90 ? { token: `catalog-action-${Date.now()}`, label: "Retry" }
91 : undefined,
92 },
93 }));
94 }
95 return;
96 }
97
98 const dismissDemo = event.target.closest(
99 "[data-notification-dismiss-demo]",
100 );
101 if (dismissDemo) {
102 dismissDemo.dispatchEvent(new CustomEvent(
103 "zen-dismiss-notification",
104 {
105 bubbles: true,
106 composed: false,
107 detail: {
108 version: 1,
109 id: dismissDemo.dataset.notificationDismissDemo,
110 },
111 },
112 ));
113 return;
114 }
115
66 const link = event.target.closest("a[data-catalog-link]"); 116 const link = event.target.closest("a[data-catalog-link]");
67 if (!link || 117 if (!link ||
68 link.origin !== location.origin || 118 link.origin !== location.origin ||
69 event.defaultPrevented || 119 event.defaultPrevented ||
70 event.button !== 0 || 120 event.button !== 0 ||