feat(alert-icons): add custom icons for alerts

frontend/src/utils/alerts/alert-icons.js

@@ -0,0 +1,16 @@
+//
+// Fontawesome icons to be used on alerts.
+//
+// If you want to add new icons stick to the format of the existing ones.
+// They are necessary due to weird unicode conversions during transpilation.
+// https://fontawesome.com/icons
+
+export const ALERT_ICONS = {
+  info: '"\\f05a"',
+  checkmark: '"\\f058"',
+  exclamation: '"\\f06a"',
+  warning: '"\\f071"',
+  cross: '"\\f00d"',
+  registered: '"\\f274"',
+  deregistered: '"\\f273"',
+};

frontend/src/utils/alerts/alerts.js

@@ -1,5 +1,6 @@
 import { Utility } from '../../core/utility';
 import './alerts.scss';
+import { ALERT_ICONS } from './alert-icons';
 
 const ALERTS_INITIALIZED_CLASS = 'alerts--initialized';
 const ALERTS_ELEVATED_CLASS = 'alerts--elevated';
@@ -16,6 +17,12 @@ const ALERT_INVISIBLE_CLASS = 'alert--invisible';
 const ALERT_AUTO_HIDE_DELAY = 10;
 const ALERT_AUTOCLOSING_MATCHER = '.alert-info, .alert-success';
 
+/*
+ * Dataset-Inputs:
+ *  - decay (data-decay): Custom time (in seconds) for this alert to stay visible
+ *  - icon (data-icon): Custom icon (from the list in alert-icons.js) to show on the alert
+ */
+
 @Utility({
   selector: '[uw-alerts]',
 })
@@ -87,6 +94,13 @@ export class Alerts {
       this._toggleAlert(alertElement);
     });
 
+    const customIcon = alertElement.dataset.icon;
+    if (customIcon && ALERT_ICONS[customIcon]) {
+      alertElement.style.setProperty('--alert-icon', ALERT_ICONS[customIcon]);
+    } else if (customIcon) {
+      throw new Error('Alert: Custom icon "' + customIcon + '" could not be found!');
+    }
+
     if (autoHideDelay > 0 && alertElement.matches(ALERT_AUTOCLOSING_MATCHER)) {
       window.setTimeout(() => this._toggleAlert(alertElement), autoHideDelay * 1000);
     }

frontend/src/utils/alerts/alerts.scss

@@ -124,7 +124,7 @@
   z-index: 40;
 
   &::before {
-    content: '\f05a';
+    content: var(--alert-icon, var(--alert-icon-default, '\f05a'));
     position: absolute;
     font-family: 'Font Awesome 5 Free';
     font-size: 24px;
@@ -189,7 +189,7 @@
   background-color: var(--color-success);
 
   .alert__icon::before {
-    content: '\f058';
+    --alert-icon-default: '\f058';
   }
 }
 
@@ -197,7 +197,7 @@
   background-color: var(--color-warning);
 
   .alert__icon::before {
-    content: '\f06a';
+    --alert-icon-default: '\f06a';
   }
 }
 
@@ -205,6 +205,6 @@
   background-color: var(--color-error);
 
   .alert__icon::before {
-    content: '\f071';
+    --alert-icon-default: '\f071';
   }
 }

templates/widgets/alerts/alerts.hamlet

@@ -3,6 +3,11 @@ $newline never
   <div .alerts__toggler>
   $forall (status, msg) <- mmsgs
     $with status2 <- bool status "info" (status == "")
+      <!--
+        TODO:
+        If a custom icon is set for this alert then add "data-icon=#{icon}" to the .alert element.
+        A list of available icons can be found in frontend/src/utils/alerts/alert-icons.js
+      -->
       <div .alert.alert-#{status2}>
         <div .alert__closer>
         <div .alert__icon>