Merge pull request #9 from codewithkyle/v2.0.0

NotifyJS v1.2.0

Author: codewithkyle

CHANGELOG.md

@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.2.0] - 2020-04-04
+
+### Added
+
+-   toaster notification `toast()` creation [#5](https://github.com/codewithkyle/notifyjs/issues/5)
+-   renames existing notification funciton to `snackbar()`
+
 ## [1.1.0] - 2020-02-11
 
 ### Added
@@ -72,7 +79,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 -   Entire existing codebase due to rewrite
 
-[unreleased]: https://github.com/codewithkyle/notifyjs/compare/v1.1.0...HEAD
+[unreleased]: https://github.com/codewithkyle/notifyjs/compare/v1.2.0...HEAD
+[1.2.0]: https://github.com/codewithkyle/notifyjs/compare/v1.1.0...v1.2.0
 [1.1.0]: https://github.com/codewithkyle/notifyjs/compare/v1.0.3...v1.1.0
 [1.0.3]: https://github.com/codewithkyle/notifyjs/compare/v1.0.2...v1.0.3
 [1.0.2]: https://github.com/codewithkyle/notifyjs/compare/v1.0.1...v1.0.2

README.md

@@ -52,7 +52,7 @@ customManager.notify({
 });
 ```
 
-## Notification Options
+## Snackbar Notification
 
 ```typescript
 interface NotificationOptions {
@@ -110,7 +110,7 @@ notify({
 });
 ```
 
-## HTML Structure
+### HTML Structure
 
 ```html
 <snackbar-component>
@@ -124,6 +124,38 @@ notify({
 </snackbar-component>
 ```
 
+## Toast Notification
+
+```typescript
+type ToasterNotification = {
+    title: string;
+    message: string;
+    closeable?: boolean;
+    icon?: string; // svg
+    duration?: number; // in seconds
+    classes?: string[];
+};
+```
+
+### HTML Structure
+
+```html
+<toaster-component>
+    <toast-component>
+        <i>
+            <svg />
+        </i>
+        <copy-wrapper>
+            <h3>Title</h3>
+            <p>Custom notification message</p>
+        </copy-wrapper>
+        <button>
+            <svg />
+        </button>
+    </toast-component>
+</toaster-component>
+```
+
 ## Stylesheets
 
 This library doesn't provide/force any CSS, for a material design styled snackbar notification [click here](https://github.com/codewithkyle/notifyjs/blob/master/test/snackbar.css).

package-lock.json

@@ -1,7 +1,7 @@
 {
     "name": "@codewithkyle/notifyjs",
-    "version": "1.1.0",
-    "description": "A simple JavaScript library for creating and managing snackbar notifications",
+    "version": "1.2.0",
+    "description": "A simple JavaScript library for creating and managing toaster & snackbar notifications",
     "main": "notify.js",
     "types": "notify.d.ts",
     "files": [
@@ -25,10 +25,7 @@
     "license": "MIT",
     "devDependencies": {
         "serve": "^11.3.0",
-        "typescript": "^3.7.4"
-    },
-    "publishConfig": {
-        "registry": "https://npm.pkg.github.com/"
+        "typescript": "^3.8.3"
     },
     "dependencies": {}
 }

package.json

@@ -2,6 +2,9 @@ import { NotificationManager } from "./notification-manager";
 
 const globalManager = new NotificationManager();
 
+/**
+ * @deprecated Use `snackbar()` instead
+ */
 const notify: (notification: {
     message: string;
     duration?: number;
@@ -16,4 +19,28 @@ const notify: (notification: {
     classes?: Array<string> | string;
 }) => void = globalManager.notify.bind(globalManager);
 
-export { NotificationManager, notify };
+const snackbar: (notification: {
+    message: string;
+    duration?: number;
+    closeable?: boolean;
+    buttons?: Array<{
+        label: string;
+        callback: Function;
+        ariaLabel?: string;
+        classes?: Array<string> | string;
+    }>;
+    force?: boolean;
+    classes?: Array<string> | string;
+}) => void = globalManager.snackbar.bind(globalManager);
+
+const toast: (notification: {
+    title: string;
+    message: string;
+    closeable?: boolean;
+    icon?: string;
+    duration?: number;
+    classes?: string[];
+    element?: HTMLElement;
+}) => void = globalManager.toast.bind(globalManager);
+
+export { NotificationManager, notify, toast, snackbar };