feat(notification): Notifications pass through className, style, and id

Notification follows dropdown semantics for passing through these
attributes.

[Finishes #98913374]

spec/pivotal-ui-react/dropdown/dropdown_spec.js

@@ -47,15 +47,15 @@ describe('Dropdowns', function() {
     });
 
     it('passes through className to the btn-group ', function() {
-      expect('#root .btn-group').toHaveClass('test-class');
+      expect('#root .btn-group').toHaveClass(props.className);
     });
 
     it('passes through style to the button', function() {
-      expect('#root .btn').toHaveCss({opacity: '0.5'});
+      expect('#root .btn').toHaveCss(props.style);
     });
 
     it('passes through id to the button', function() {
-      expect('#root #test-id').toExist();
+      expect('#root .btn#test-id').toExist();
     });
 
     it('creates a dropdown-toggle', () => {

spec/pivotal-ui-react/notification/notification_spec.js

@@ -1,7 +1,22 @@
 require('../spec_helper');
+import {itPropagatesAttributes} from '../support/shared_examples';
 
 describe('Notification', function() {
   var Notifications, NotificationItem;
+  var props = {
+    className: 'test-class',
+    id: 'test-id',
+    style: {
+      opacity: '0.5'
+    }
+  };
+  var itemProps = {
+    className: 'test-item-class',
+    id: 'test-item-id',
+    style: {
+      opacity: '0.75'
+    }
+  };
   beforeEach(function() {
     Notifications = require('../../../src/pivotal-ui-react/notifications/notifications').Notifications;
     NotificationItem = require('../../../src/pivotal-ui-react/notifications/notifications').NotificationItem;
@@ -14,18 +29,32 @@ describe('Notification', function() {
   describe('when there are children', function() {
     beforeEach(function() {
       React.render((
-        <Notifications>
-          <NotificationItem href="my-fee-link">fee</NotificationItem>
+        <Notifications {...props}>
+          <NotificationItem {...itemProps} 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>
         </Notifications>), root);
     });
 
+    it('passes through the className to the btn-group', function() {
+      expect('#root .btn-group').toHaveClass(props.className);
+    });
+
+    it('passes through style to the button', function() {
+      expect('#root .btn').toHaveCss(props.style);
+    });
+
+    it('passes through id to the button', function() {
+      expect('#root .btn#test-id').toExist();
+    });
+
     it('renders a notification count badge', function() {
       expect('.dropdown-notifications-title .dropdown-notifications-badge').toContainText('4');
     });
 
+    itPropagatesAttributes('#root li:first', itemProps);
+
     it('renders the children in a dropdown menu', function() {
       expect('.dropdown-menu a:eq(0)').toContainText('fee');
       expect('.dropdown-menu a:eq(0)').toHaveAttr('href', 'my-fee-link');

src/pivotal-ui-react/notifications/notifications.js

@@ -3,6 +3,8 @@ var types = React.PropTypes;
 var {Icon} = require('pui-react-iconography');
 var {LinkDropdown, DropdownItem} = require('pui-react-dropdowns');
 var classnames = require('classnames');
+var {mergeProps} = require('pui-react-helpers');
+
 
 /**
  * @component Notifications
@@ -38,7 +40,8 @@ var Notifications = React.createClass({
     size: React.PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6'])
   },
   render() {
-    var {size, children} = this.props;
+    var {size, children, ...others} = this.props;
+    var props = mergeProps(others, {className: 'dropdown-notifications'});
     var numChildren = React.Children.count(children);
     var badge = children ? <span className="dropdown-notifications-badge">{numChildren}</span> : null;
     var dropdownTitleClasses = classnames('dropdown-notifications-title', size);
@@ -56,7 +59,7 @@ var Notifications = React.createClass({
         </div>
       </li>
     );
-    return <LinkDropdown title={dropdownTitle} className="dropdown-notifications">{children}</LinkDropdown>;
+    return <LinkDropdown title={dropdownTitle} {...props}>{children}</LinkDropdown>;
   }
 });
 
@@ -129,8 +132,8 @@ var NotificationItem = React.createClass({
   },
 
   render() {
-    var {href, children} = this.props;
-    return <DropdownItem href={href}>{children}</DropdownItem>;
+    var {href, children, ...props} = this.props;
+    return <DropdownItem href={href} {...props}>{children}</DropdownItem>;
   }
 });