feat(react-notifications): add alert notifications to react

[Finishes #87635924] Signed-off-by: Nicole Sullivan <nsullivan@pivotal.io>
pivotal-cf · Feb 4, 2015 · cb05714 · cb05714
1 parent 0e6ffc7
commit cb05714
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 0 deletions.
diff --git a/src/pivotal-ui/components/dropdowns.scss b/src/pivotal-ui/components/dropdowns.scss
@@ -367,6 +367,38 @@ var newLabel = <UI.DefaultH3><UI.Label>New</UI.Label></UI.DefaultH3>;
   </UI.NotificationItem>
 </UI.Notifications>
 ```
+*/
+
+/*doc
+---
+title: Alerts
+name: alert_notifications_react
+parent: notifications_react
+---
+
+Here's an example if there are no alerts:
+
+```react_example_table
+<UI.AlertNotifications />
+```
+
+Here's an example if there are alerts:
+
+```jsx_example
+var alertImage = <UI.Icon name="exclamation-triangle" className="h4 type-warn-2 mrm" />;
+```
+
+```react_example_table
+<UI.AlertNotifications>
+  <UI.NotificationItem href="http://media.giphy.com/media/Qvw9p4uX7IBy0/giphy.gif">
+    <UI.Flag leftImage={alertImage}>
+      <UI.DefaultH5 className="media-heading mbn type-dark-1">WARNING</UI.DefaultH5>
+      <p className="type-sm type-neutral-5 mvn">Click for Cute Gif</p>
+    </UI.Flag>
+  </UI.NotificationItem>
+</UI.AlertNotifications>
+```
+
 
 */
 
diff --git a/src/pivotal-ui/javascripts/components.js b/src/pivotal-ui/javascripts/components.js
@@ -97,6 +97,7 @@ module.exports = {
   LowlightDropdown: require('./dropdowns.jsx').LowlightDropdown,
 
   Notifications: require('./notifications.js').Notifications,
+  AlertNotifications: require('./notifications.js').AlertNotifications,
   NotificationItem: require('./notifications.js').NotificationItem,
 
   Label: require('./labels.jsx').Label,

diff --git a/src/pivotal-ui/javascripts/notifications.js b/src/pivotal-ui/javascripts/notifications.js
@@ -37,6 +37,37 @@ var Notifications = React.createClass({
   }
 });
 
+var AlertNotifications = React.createClass({
+  render: function () {
+    var children = this.props.children;
+
+    if(!this.props.children){
+      children = (
+        <DropdownItem>
+          <div className="dropdown-notifications-none">
+            <Icon name='bell' className='type-neutral-6' />
+            <p className="type-neutral-4 em-alt mbn">no alerts</p>
+          </div>
+        </DropdownItem>
+      );
+    }
+    var badge = this.props.children ? (<Icon name="exclamation-triangle" className="dropdown-notifications-alert h4 type-warn-2"></Icon>) : null;
+
+    var dropdownTitle = (
+      <div className='dropdown-notifications-title'>
+        <i className="fa fa-bell type-neutral-6 h2 mvn"></i>
+        {badge}
+      </div>
+    );
+
+    return (
+      <LinkDropdown title={dropdownTitle} className="dropdown-notifications">
+        {children}
+      </LinkDropdown>
+    );
+  }
+});
+
 var NotificationItem = React.createClass({
   render: function () {
     return (
@@ -49,5 +80,6 @@ var NotificationItem = React.createClass({
 
 module.exports = {
   Notifications,
+  AlertNotifications,
   NotificationItem
 };
diff --git a/test/javascripts/notification_spec.js b/test/javascripts/notification_spec.js
@@ -4,6 +4,7 @@ var $ = require('jquery');
 var React = require('react/addons');
 
 var Notifications = require('../../src/pivotal-ui/javascripts/notifications').Notifications;
+var AlertNotifications = require('../../src/pivotal-ui/javascripts/notifications').AlertNotifications;
 var NotificationItem = require('../../src/pivotal-ui/javascripts/notifications').NotificationItem;
 
 describe('Notification', function() {
@@ -58,3 +59,56 @@ describe('Notification', function() {
     });
   });
 });
+
+describe('Alert Notifications', function() {
+  beforeEach(function() {
+    this.node = $('<div id="container"></div>').appendTo('body').get(0);
+  });
+
+  afterEach(function() {
+    React.unmountComponentAtNode(this.node);
+    document.body.removeChild(this.node);
+  });
+
+  describe("when there are children", function() {
+    beforeEach(function() {
+      React.render(
+         <AlertNotifications>
+            <NotificationItem href='my-fee-link'>fee</NotificationItem>
+            <NotificationItem href='my-fi-link'>fi</NotificationItem>
+            <NotificationItem href='my-fo-link'>fo</NotificationItem>
+            <NotificationItem href='my-fum-link'>fum</NotificationItem>
+         </AlertNotifications>,
+        this.node);
+    });
+
+    it("renders a notification alert icon", function() {
+      expect($('#container .dropdown-notifications-title .dropdown-notifications-alert')).toHaveClass('fa-exclamation-triangle');
+    });
+
+    it("renders the children in a dropdown menu", function() {
+      expect($('#container .dropdown-menu a').first()).toContainText('fee');
+      expect($('#container .dropdown-menu a').first().attr('href')).toEqual('my-fee-link');
+
+      expect($('#container .dropdown-menu')).toContainText('fi');
+      expect($('#container .dropdown-menu')).toContainText('fo');
+      expect($('#container .dropdown-menu')).toContainText('fum');
+    });
+  });
+
+  describe("when there are no children", function() {
+    beforeEach(function() {
+      React.render(
+        <AlertNotifications />,
+        this.node);
+    });
+
+    it("does not render an alert icon", function () {
+      expect($('#container .dropdown-notifications-title')).not.toContainElement('.dropdown-notifications-alert');
+    });
+
+    it("renders the no notification message", function() {
+      expect($('#container .dropdown-menu .dropdown-notifications-none')).toContainText('no alerts');
+    });
+  });
+});