feat(notifications): Add size prop to react notifications

[Finishes #98146554]
pivotal-cf · Jul 9, 2015 · 569fcc8 · 569fcc8
1 parent ff8035e
commit 569fcc8
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 6 deletions.
diff --git a/spec/pivotal-ui-react/notification/notification_spec.js b/spec/pivotal-ui-react/notification/notification_spec.js
@@ -49,6 +49,16 @@ describe('Notification', function() {
       expect('.dropdown-menu .dropdown-notifications-none').toContainText('no notifications');
     });
   });
+
+  describe('when there are size modifiers', function() {
+    beforeEach(function() {
+      React.render(<Notifications size="h1"/>, root);
+    });
+
+    it('renders a h1 sized notification', function() {
+      expect('.dropdown-notifications-title').toHaveClass('h1');
+    });
+  });
 });
 
 describe('Alert Notifications', function() {
@@ -100,4 +110,14 @@ describe('Alert Notifications', function() {
       expect('.dropdown-menu .dropdown-notifications-none').toContainText('no alerts');
     });
   });
+
+  describe('when there are size modifiers', function() {
+    beforeEach(function() {
+      React.render(<AlertNotifications size="h1"/>, root);
+    });
+
+    it('renders a h1 sized notification', function() {
+      expect('.dropdown-notifications-title').toHaveClass('h1');
+    });
+  });
 });
diff --git a/src/pivotal-ui-react/notifications/notifications.js b/src/pivotal-ui-react/notifications/notifications.js
@@ -2,6 +2,7 @@ var React = require('react');
 var types = React.PropTypes;
 var {Icon} = require('pui-react-iconography');
 var {LinkDropdown, DropdownItem} = require('pui-react-dropdowns');
+var classnames = require('classnames');
 
 /**
  * @component Notifications
@@ -34,11 +35,12 @@ var {LinkDropdown, DropdownItem} = require('pui-react-dropdowns');
  */
 var Notifications = React.createClass({
   render() {
-    var {children} = this.props;
+    var {size, children} = this.props;
     var numChildren = React.Children.count(children);
     var badge = children ? <span className="dropdown-notifications-badge">{numChildren}</span> : null;
+    var dropdownTitleClasses = classnames('dropdown-notifications-title', size);
     var dropdownTitle = (
-      <div className="dropdown-notifications-title">
+      <div className={dropdownTitleClasses}>
         <i className="fa fa-bell"></i>
         {badge}
       </div>
@@ -85,10 +87,11 @@ var Notifications = React.createClass({
  */
 var AlertNotifications = React.createClass({
   render() {
-    var {children} = this.props;
+    var {size, children} = this.props;
     var badge = children ? <Icon name="exclamation-triangle" className="dropdown-notifications-alert"></Icon> : null;
+    var dropdownTitleClasses = classnames('dropdown-notifications-title', size);
     var dropdownTitle = (
-      <div className="dropdown-notifications-title">
+      <div className={dropdownTitleClasses}>
         <i className="fa fa-bell"></i>
         {badge}
       </div>

diff --git a/src/pivotal-ui-react/notifications/package.json b/src/pivotal-ui-react/notifications/package.json
@@ -4,6 +4,7 @@
   "homepage": "https://styleguide.pivotal.io/react_beta.html#notifications_react",
   "dependencies": {
     "pui-react-dropdowns": "1.10.0",
-    "pui-react-iconography": "1.10.0"
+    "pui-react-iconography": "1.10.0",
+    "classnames": "^2.1.3"
   }
-}
+}
diff --git a/src/pivotal-ui/components/dropdowns/dropdowns.scss b/src/pivotal-ui/components/dropdowns/dropdowns.scss
@@ -498,6 +498,46 @@ var newLabel = <UI.DefaultH3 className="mvn"><UI.Label>New</UI.Label></UI.Defaul
 ```
 */
 
+/*doc
+---
+title: Notification Sizing
+name: notifications_react_sizing
+parent: notifications_react
+---
+
+```react_example_table
+<UI.Notifications size="h1">
+  <UI.NotificationItem>Stuff</UI.NotificationItem>
+</UI.Notifications>
+
+<UI.Notifications size="h2">
+  {_.times(10, function() {
+    return <UI.NotificationItem>Stuff</UI.NotificationItem>;
+  })}
+</UI.Notifications>
+
+<UI.AlertNotifications size="h3">
+  <UI.NotificationItem>Stuff</UI.NotificationItem>
+</UI.AlertNotifications>
+
+<UI.Notifications size="h4">
+  {_.times(10, function() {
+    return <UI.NotificationItem>Stuff</UI.NotificationItem>;
+  })}
+</UI.Notifications>
+
+<UI.Notifications size="h5">
+  <UI.NotificationItem>Stuff</UI.NotificationItem>
+</UI.Notifications>
+
+<UI.AlertNotifications size="h6">
+  {_.times(10, function() {
+    return <UI.NotificationItem>Stuff</UI.NotificationItem>;
+  })}
+</UI.AlertNotifications>
+```
+*/
+
 /*doc
 ---
 title: Alerts