test buttons

templates/devtest/toast.tmpl

@@ -3,9 +3,10 @@
 <div>
 	<h1>Toast</h1>
 	<div>
-		<button class="ui button" id="info-toast">Show Info Toast</button>
-		<button class="ui button" id="warning-toast">Show Warning Toast</button>
-		<button class="ui button" id="error-toast">Show Error Toast</button>
+		<button class="ui button toast-test-button" data-toast-level="info" data-toast-message="test info">Show Info Toast</button>
+		<button class="ui button toast-test-button" data-toast-level="warning" data-toast-message="test warning">Show Warning Toast</button>
+		<button class="ui button toast-test-button" data-toast-level="error" data-toast-message="test error">Show Error Toast</button>
+		<button class="ui button toast-test-button" data-toast-level="error" data-toast-message="test error (another)">Show Error Toast (another)</button>
 	</div>
 </div>
 

web_src/css/modules/toast.css

@@ -35,6 +35,10 @@
   align-items: center;
 }
 
+.toast-icon svg {
+  width: 30px;
+}
+
 .toast-duplicate-number::before {
   content: "(";
 }

web_src/js/standalone/devtest.js

@@ -1,11 +1,14 @@
 import {showInfoToast, showWarningToast, showErrorToast} from '../modules/toast.js';
 
-document.querySelector('#info-toast').addEventListener('click', () => {
-  showInfoToast('success 😀');
-});
-document.querySelector('#warning-toast').addEventListener('click', () => {
-  showWarningToast('warning 😐');
-});
-document.querySelector('#error-toast').addEventListener('click', () => {
-  showErrorToast('error 🙁');
-});
+function initDevtestToast() {
+  const levelMap = {info: showInfoToast, warning: showWarningToast, error: showErrorToast,};
+  for (const el of document.querySelectorAll('.toast-test-button')) {
+    el.addEventListener('click', () => {
+      const level = el.getAttribute('data-toast-level');
+      const message = el.getAttribute('data-toast-message');
+      levelMap[level](message);
+    });
+  }
+}
+
+initDevtestToast();