Merge pull request #8 from CGWebDev2003/feature/add-toast-class

Add toast class

Author: CGWebDev2003

CHANGELOG.md

@@ -13,4 +13,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Badge class
 - Button class
-- Link class
+- Link class
+- Spinner class
+- Toast class

neptune.js

@@ -237,4 +237,77 @@ export class Spinner {
             document.body.appendChild(newSpinner);
         }
     }
+}
+
+/**
+ * @class Toast
+ * @description Create a new Neptune Toast
+ * 
+ * @param {any} config Add your configuration
+ * 
+ * parent -> class or id of your target element, when null its document.body
+ * 
+ * icon -> add your icon
+ * 
+ * text -> add your message text
+ * 
+ * style -> primary, cta, information, success, warning, error
+ * 
+ * position -> left-top, left-bottom, right-top, right-bottom
+ * 
+ * @example
+ * const myToast = new Toast({
+ *  icon: "YOUR ICON",
+ *  text: "Test Toast",
+ *  style: "primary",
+ *  position: "top-right"
+ * });
+ */
+export class Toast {
+    constructor(config) {
+        // Create Toast
+        const newToast = document.createElement('div');
+        newToast.classList.add('toast');
+
+        // Add Icon
+        if (config.icon != null) {
+            // Create Icon
+            const newIcon = document.createElement('span');
+            newIcon.classList.add('toast-icon');
+            newIcon.innerHTML = config.icon;
+
+            // Append icon
+            newToast.appendChild(newIcon);
+        }
+
+        // Add Message
+        if (config.text != null) {
+            // Create Message
+            const newMessage = document.createElement('p');
+            newMessage.classList.add('toast-text', 'text-l');
+            newMessage.innerText = config.text;
+
+            // Append Message
+            newToast.appendChild(newMessage);
+        } else {
+            console.error('Error! Please ad a Message to your Toast!');
+        }
+
+        // Setup Style
+        if (config.style != null) {
+            newToast.classList.add('toast-' + config.style);
+        }
+
+        // Setup Position
+        if (config.position != null) {
+            newToast.classList.add('toast-' + config.position);
+        }
+
+        // Append to parent element
+        if (config.parent != null) {
+            document.querySelector(config.parent).appendChild(newToast);
+        } else {
+            document.body.appendChild(newToast);
+        }
+    }
 }