fix(react-media): Allow Media to take a className.

Signed-off-by: Paul Meskers <pmeskers@pivotal.io>
pivotal-cf · Feb 2, 2015 · d4c10b2 · d4c10b2
1 parent 02bb247
commit d4c10b2
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/src/pivotal-ui/javascripts/media.jsx b/src/pivotal-ui/javascripts/media.jsx
@@ -60,6 +60,10 @@ var Media = React.createClass({
       'media-stackable-lg': stackSize === 'large'
     });
 
+    if (this.props.className) {
+      classes += ' ' + this.props.className;
+    }
+
     var bodyClasses = setClass({
       'media-body': true,
       'media-middle': vAlign === 'middle',

diff --git a/test/javascripts/media_spec.js b/test/javascripts/media_spec.js
@@ -25,6 +25,7 @@ describe('Media', function() {
       React.render(
         Media({
           children: "fop",
+          className: "media-class",
           leftImage: image
         }),
         this.node
@@ -34,9 +35,11 @@ describe('Media', function() {
     it("creates a Media component", function() {
       expect($('#container .media .media-body')).toContainText('fop');
     });
-  });
-
 
+    it("passes the provided className onto the .media element", function() {
+      expect($('#container .media')).toHaveClass('media-class');
+    });
+  });
 
   describe("when left image src is set", function() {
     describe("when left image src is set", function() {
@@ -54,7 +57,7 @@ describe('Media', function() {
       it("displays the media-left link with an image inside", function() {
         expect($('#container .media .media-left img').attr('src')).toEqual('http://placehold.it/20x20');
       });
- 
+
       it("sets an alt on the left image when the leftAlt property is set", function() {
         expect($('#container .media .media-left img').attr('alt')).toEqual('my fancy image description');
       });