Merge pull request #16 from codewithkyle/v2.1.0

V2.1.0

Author: codewithkyle

.gitignore

@@ -11,3 +11,5 @@ snackbar-component.js
 snackbar-component.js.map
 toast-component.js
 toast-component.js.map
+notify.min.mjs
+notify.mjs

CHANGELOG.md

@@ -7,6 +7,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [2.1.0] - 2020-11-09
+
+### Added
+
+- ability to autofocus buttons ([#14](https://github.com/codewithkyle/notifyjs/issues/14))
+- CDN compatible version (ES Module)
+- role attributes to snackbar and toast notifications
+- toast notificaitons can contain buttons ([#15](https://github.com/codewithkyle/notifyjs/issues/15))
+- toast notification timers ([#13](https://github.com/codewithkyle/notifyjs/issues/13))
+- updated readme
+
+### Fixed
+
+- toast notifications now stack with oldest notifications appearing at the bottom (better UX/expected notification behavior)
+
 ## [2.0.3] - 2020-09-16
 
 ### Fixed
@@ -115,7 +130,9 @@ 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/v2.0.1...HEAD
+[unreleased]: https://github.com/codewithkyle/notifyjs/compare/v2.1.0...HEAD
+[2.1.0]: https://github.com/codewithkyle/notifyjs/compare/v2.0.3...v2.1.0
+[2.0.3]: https://github.com/codewithkyle/notifyjs/compare/v2.0.1...v2.0.3
 [2.0.1]: https://github.com/codewithkyle/notifyjs/compare/v2.0.0...v2.0.1
 [2.0.0]: https://github.com/codewithkyle/notifyjs/compare/v1.2.0...v2.0.0
 [1.2.0]: https://github.com/codewithkyle/notifyjs/compare/v1.1.0...v1.2.0

README.md

@@ -1,6 +1,6 @@
 # Notify.js
 
-Notify.js is a hyper-lightweight utility library helping to manage simple [snackbar](https://material.io/develop/web/components/snackbars/) and [toaster](https://www.carbondesignsystem.com/components/notification/code/) notifications.
+Notify.js is a hyper-lightweight utility library for managing simple [snackbar](https://material.io/develop/web/components/snackbars/) and [toaster](https://www.carbondesignsystem.com/components/notification/code/) notifications.
 
 ## Installation
 
@@ -10,8 +10,23 @@ Download Notify.js via NPM:
 npm i --save @codewithkyle/notifyjs
 ```
 
+Or use the CDN version:
+
+```javascript
+import { Notifier, snackbar, toast } from "https://cdn.jsdelivr.net/npm/@codewithkyle/notifyjs@2.1.0/notify.min.mjs;
+```
+
 ## Usage
 
+1. [Notification Manager](#notification-manager)
+1. [Global Notifications](#global-manager)
+1. [Snackbar Notification](#snackbar-notification)
+    1. [Snackbar Interface](#snackbar-interface)
+    1. [Snackbar HTML Structure](#snackbar-html-structure)
+1. [Toast Notification](#toast-notification)
+    1. [Toast Interface](#toast-interface)
+    1. [Toast HTML Structure](#toast-html-structure)
+
 There are two ways to use this package. You can create a Notification Manager or use the global manager. Each manager has a queue and new notifications are placed in the queue in the order that they're requested. The queue can be skipped by settings the `force` value to true.
 
 ### Notification Manager
@@ -53,12 +68,31 @@ notifier.toast({
     title: "Toast notificaitons require a title",
     message: "And they require a message",
 });
+
+// Adds an action button
+notifier.snackbar({
+    message: "All snackbar notifications require a message",
+    buttons: [
+        {
+            label: "Update",
+            callback: () => {
+                console.log("User clicked the update button");
+            },
+        },
+    ],
+});
 ```
 
+---
+
 ## Snackbar Notification
 
+Snackbar notifications are great for quick one-off notifications.
+
+### Snackbar Interface 
+
 ```typescript
-interface NotificationOptions {
+interface SnackbarNotification {
     message: string;
     duration?: number; // in seconds
     closeable?: boolean;
@@ -67,31 +101,15 @@ interface NotificationOptions {
         callback: Function;
         ariaLabel?: string;
         classes?: Array<string> | string;
+        autofocus?: boolean;
     }>;
     force?: boolean;
     classes?: Array<string> | string;
+    autofocus?: boolean;
 }
 ```
 
-### User Interaction
-
-Notify.js also allows for user interactions via a button element. The action requires a custom label for the button along with a callback function that will be called when the `click` event is fired on the button.
-
-```typescript
-notify({
-    message: "A new version of this application is available",
-    buttons: [
-        {
-            label: "Update",
-            callback: () => {
-                console.log("User clicked the update button");
-            },
-        },
-    ],
-});
-```
-
-### HTML Structure
+### Snackbar HTML Structure
 
 ```html
 <snackbar-component>
@@ -105,8 +123,14 @@ notify({
 </snackbar-component>
 ```
 
+---
+
 ## Toast Notification
 
+Toaster notifications are great for application-like notification systems where users will need to recieve warnings, updates, successes, and errors.
+
+### Toast Interface 
+
 ```typescript
 type ToasterNotification = {
     title: string;
@@ -115,10 +139,19 @@ type ToasterNotification = {
     icon?: string; // svg or img
     duration?: number; // in seconds
     classes?: string[];
+    autofocus?: boolean;
+    buttons?: Array<{
+        label: string;
+        callback: Function;
+        ariaLabel?: string;
+        classes?: Array<string> | string;
+        autofocus?: boolean;
+    }>;
+    timer?: "vertical" | "horizontal";
 };
 ```
 
-### HTML Structure
+### Toast HTML Structure
 
 ```html
 <toaster-component>
@@ -129,6 +162,9 @@ type ToasterNotification = {
         <copy-wrapper>
             <h3>Title</h3>
             <p>Custom notification message</p>
+            <toast-actions>
+                <button>Action</button>
+            </toast-actions>
         </copy-wrapper>
         <button>
             <svg />