fix(media): InnerClassName passes through to the media-body

Added spec tests for flag and media for className, innerClassName, id,
and style passthrough.
Added innerClassName to scss documentation.

[Finishes #98913330]

spec/pivotal-ui-react/media/media_spec.js

@@ -124,16 +124,37 @@ describe('Media', function() {
     });
   });
 
+  describe('when custom attributes are set on media', function() {
+    beforeEach(function() {
+      var image = (<img src="http://placehold.it/20x20" />);
+      React.render((<Media leftImage={image} stackSize="medium" innerClassName="inner-test-class" className="test-class" id="test-id" style={{opacity: 1}}>fop</Media>), root);
+    });
+
+    it('the class, id, and style are passed through', function() {
+      expect('.media').toHaveClass('test-class');
+      expect('.media-body').toHaveClass('inner-test-class');
+      expect('.media').toHaveAttr('id', 'test-id');
+      expect('.media').toHaveCss({opacity: '1'});
+    });
+  });
+
   describe('Flag', function() {
     beforeEach(function() {
       var image = (<img src="http://placehold.it/20x20"/>);
-      React.render((<Flag leftImage={image} rightImage={image}>fop</Flag>), root);
+      React.render((<Flag leftImage={image} rightImage={image} innerClassName="inner-test-class" className="test-class" id="test-id" style={{opacity: 1}}>fop</Flag>), root);
     });
 
     it('adds the class media-middle to the media-body, media-left, and media-right', function() {
       expect('.media-body').toHaveClass('media-middle');
       expect('.media-left').toHaveClass('media-middle');
       expect('.media-right').toHaveClass('media-middle');
     });
+
+    it('the class, id, and style are passed through', function() {
+      expect('.media').toHaveClass('test-class');
+      expect('.media-body').toHaveClass('inner-test-class');
+      expect('.media').toHaveAttr('id', 'test-id');
+      expect('.media').toHaveCss({opacity: '1'});
+    });
   });
 });

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

@@ -56,10 +56,10 @@ var Media = React.createClass({
   },
 
   render() {
-    var {className, leftImage, leftMediaSpacing, rightImage, rightMediaSpacing, stackSize, vAlign, children, ...other} = this.props;
+    var {className, innerClassName, leftImage, leftMediaSpacing, rightImage, rightMediaSpacing, stackSize, vAlign, children, ...other} = this.props;
 
     var classes = classnames('media', stackSize && `media-stackable-${shortSizes[stackSize]}`, className);
-    var bodyClasses = classnames('media-body', vAlign && `media-${vAlign}`);
+    var bodyClasses = classnames('media-body', vAlign && `media-${vAlign}`, innerClassName);
 
     var leftMedia = leftImage ?
       <MediaObject horizontalAlignment="left" {...{vAlign, leftMediaSpacing}}>{leftImage}</MediaObject> :

src/pivotal-ui/components/media/media.scss

@@ -282,7 +282,8 @@ var mediaBasicLinkedImage = <UI.Image src='http://placehold.it/50x50' href="http
 
 ```react_example_table
 <UI.Media
-  leftImage={mediaBasicImage}>
+  leftImage={mediaBasicImage}
+  innerClassName='my-media-body'>
     left media
 </UI.Media>