From 0d4826d0c49f2c5db7358480e326cd3bf26a5671 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonathan=20Steele=20=E2=9A=A1=EF=B8=8F?=
 <jonathan@steele.pro>
Date: Mon, 7 Nov 2016 22:35:14 +0000
Subject: [PATCH] CSS classes (#119)

* :sparkles: Allow custom CSS classes to be added to notification component

Fixes #118

* :books: Updating dummy app, docs
---
 addon/components/notification-message.js        |  4 ++++
 addon/services/notification-messages-service.js |  3 ++-
 tests/dummy/app/controllers/application.js      |  2 ++
 tests/dummy/app/templates/application.hbs       | 11 +++++++++++
 4 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/addon/components/notification-message.js b/addon/components/notification-message.js
index 8d0b4ddc..4d580649 100644
--- a/addon/components/notification-message.js
+++ b/addon/components/notification-message.js
@@ -14,6 +14,10 @@ export default Component.extend({
     'processedType'
   ],
 
+  classNameBindings: [
+    'notification.cssClasses'
+  ],
+
   paused: false,
 
   dismissClass: computed('notification.dismiss', function() {
diff --git a/addon/services/notification-messages-service.js b/addon/services/notification-messages-service.js
index 25dd1a5b..4bf29855 100644
--- a/addon/services/notification-messages-service.js
+++ b/addon/services/notification-messages-service.js
@@ -20,7 +20,8 @@ export default Ember.ArrayProxy.extend({
             autoClear: (Ember.isEmpty(options.autoClear) ? this.get('defaultAutoClear') : options.autoClear),
             clearDuration: options.clearDuration || this.get('defaultClearDuration'),
             onClick: options.onClick,
-            htmlContent: options.htmlContent || false
+            htmlContent: options.htmlContent || false,
+            cssClasses: options.cssClasses
         });
 
         this.pushObject(notification);
diff --git a/tests/dummy/app/controllers/application.js b/tests/dummy/app/controllers/application.js
index c4d2fd5c..8a56bd7d 100644
--- a/tests/dummy/app/controllers/application.js
+++ b/tests/dummy/app/controllers/application.js
@@ -10,6 +10,7 @@ export default Controller.extend({
   clearDuration: 2400,
   htmlContent: false,
   position: 'top',
+  cssClasses: 'profile-saved-success-notification',
 
   notifications: service('notification-messages'),
 
@@ -27,6 +28,7 @@ export default Controller.extend({
         this.get('notifications').clearAll();
       }
       this.get('notifications').addNotification({
+        cssClasses: this.get('cssClasses'),
         message: this.get('computedMessage'),
         type: this.get('type'),
         autoClear: this.get('autoClear'),
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
index 7b22f5b5..a6684dfc 100644
--- a/tests/dummy/app/templates/application.hbs
+++ b/tests/dummy/app/templates/application.hbs
@@ -198,6 +198,17 @@ this.get('notifications').success('Saved successfully!', {
       <button class="btn btn-primary" {{action "showNotifcation"}}>Show</button>
     </div>
   </div>
+  <div class="py2">
+    <h2>Notification with custom CSS</h2>
+    <hr>
+    <p>Pass a string of CSS classes to the notification component.</p>
+    {{#themed-syntax lang="js" theme="dark" class="h5" withBuffers=false}}
+this.get('notifications').success('Saved successfully!', {
+  autoClear: true,
+  cssClasses: 'profile-saved-success-notification'
+});
+    {{/themed-syntax}}
+  </div>
   <div class="py2">
     <h2>Notification with callback</h2>
     <hr>