Merge pull request #33 from mickelsonmichael/dev

Add icons feature

README.md

@@ -31,6 +31,7 @@ To customize a Snackbar, pass the function a JS object with any of the following
 | container   | `DOMNode` or `string`| `document.body` | If a string is provided, the string is passed to `querySelector` to find the container|
 | width       | `string`             |                 | Any valid CSS value for `width` |
 | speed       | `string` or `number` |                 | Any valid CSS value for `transition-duration` or a duration in milliseconds |
+| icon        | `string`             |                 | `"exclamation"`, `"danger"`, `"warn"`, `"question"`, `"question-mark"`, `"info"`, `"add"`, `"plus"`, or any single character. Longer strings will be concatenated |
 
 ### Actions
 

dist/js-snackbar.css

@@ -97,7 +97,7 @@
 
 .js-snackbar__status {
     display: none;
-    width: 15px;
+    min-width: 15px;
     margin-right: 5px;
     border-radius: 3px 0 0 3px;
     background-color: transparent;
@@ -107,7 +107,9 @@
  .js-snackbar__status.js-snackbar--warning,
  .js-snackbar__status.js-snackbar--danger,
  .js-snackbar__status.js-snackbar--info {
-    display: block;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .js-snackbar__status.js-snackbar--success  {
@@ -126,6 +128,18 @@
     background-color: #2196f3;
 }
 
+.js-snackbar__icon {
+    display: block;
+    border: 2px solid white;
+    font-weight: bold;
+    border-radius: 20px;
+    height: 20px;
+    width: 20px;
+    text-align: center;
+    margin: 0 5px;
+    font-family: monospace;
+}
+
 .js-snackbar__action {
     display: flex;
     align-items: center;

dist/js-snackbar.js

@@ -38,7 +38,8 @@ function SnackBar(userOptions) {
       position: userOptions?.position ?? "br",
       container: userOptions?.container ?? document.body,
       width: userOptions?.width,
-      speed: userOptions?.speed
+      speed: userOptions?.speed,
+      icon: userOptions?.icon
     };
   }
 
@@ -118,42 +119,80 @@ function SnackBar(userOptions) {
     function createInnerSnackbar() {
       var innerSnack = document.createElement("div");
       innerSnack.classList.add("js-snackbar", "js-snackbar--show");
-      applyColorTo(innerSnack);
+      applyColorAndIconTo(innerSnack);
       insertMessageTo(innerSnack);
       addActionsTo(innerSnack);
       addDismissButtonTo(innerSnack);
       return innerSnack;
     }
 
-    function applyColorTo(element) {
+    function applyColorAndIconTo(element) {
       if (!_Options.status) return;
       var status = document.createElement("span");
       status.classList.add("js-snackbar__status");
+      applyColorTo(status);
+      applyIconTo(status);
+      element.appendChild(status);
 
-      switch (_Options.status) {
-        case "success":
-        case "green":
-          status.classList.add("js-snackbar--success");
-          break;
-
-        case "warning":
-        case "alert":
-        case "orange":
-          status.classList.add("js-snackbar--warning");
-          break;
+      function applyColorTo(element) {
+        switch (_Options.status) {
+          case "success":
+          case "green":
+            element.classList.add("js-snackbar--success");
+            break;
+
+          case "warning":
+          case "alert":
+          case "orange":
+            element.classList.add("js-snackbar--warning");
+            break;
+
+          case "danger":
+          case "error":
+          case "red":
+            element.classList.add("js-snackbar--danger");
+            break;
+
+          default:
+            element.classList.add("js-snackbar--info");
+            break;
+        }
+      }
 
-        case "danger":
-        case "error":
-        case "red":
-          status.classList.add("js-snackbar--danger");
-          break;
+      function applyIconTo(element) {
+        if (!_Options.icon) return;
+        var icon = document.createElement("span");
+        icon.classList.add("js-snackbar__icon");
+
+        switch (_Options.icon) {
+          case "exclamation":
+          case "warn":
+          case "danger":
+            icon.innerText = "!";
+            break;
+
+          case "info":
+          case "question":
+          case "question-mark":
+            icon.innerText = "?";
+            break;
+
+          case "plus":
+          case "add":
+            icon.innerText = "+";
+            break;
+
+          default:
+            if (_Options.icon.length > 1) {
+              console.warn("Invalid icon character provided: ", _Options.icon);
+            }
+
+            icon.innerText = _Options.icon.substr(0, 1);
+            break;
+        }
 
-        default:
-          status.classList.add("js-snackbar--info");
-          break;
+        element.appendChild(icon);
       }
-
-      element.appendChild(status);
     }
 
     function insertMessageTo(element) {