fix(react-image): add prop validations

[#86938454]

src/pivotal-ui/components/images.scss

@@ -189,7 +189,7 @@ categories:
 Images in react can be responsive and/or wrapped in a link.
 
 ```react_example
-<UI.Image src="http://placehold.it/1000x100" responsive="true" href="http://google.com" />
+<UI.Image src="http://placehold.it/1000x100" responsive={true} href="http://google.com" />
 ```
 
 

src/pivotal-ui/javascripts/images.jsx

@@ -5,30 +5,26 @@ var React = require('react/addons');
 var setClass = React.addons.classSet;
 
 var UIImage = React.createClass({
+  propTypes: {
+    responsive: React.PropTypes.bool,
+    href: React.PropTypes.string,
+    src: React.PropTypes.string.isRequired
+  },
+
   render: function () {
+    var {responsive, href, src, children, ...other} = this.props;
+
     var classes = setClass({
-      'img-responsive': this.props.responsive
+      'img-responsive': responsive
     });
 
-    var href = this.props.href;
-    delete this.props.href;
-
-    if (href){
-      return(
-        <a href={href}>
-          <img {...this.props} className={classes}>
-            {this.props.children}
-          </img>
-        </a>
-        );
-    }
-    else {
-      return (
-        <img {...this.props} className={classes}>
-          {this.props.children}
-        </img>
-        );
-    }
+    var image = (
+      <img {...other} src={src} className={classes}>
+        {children}
+      </img>
+    );
+
+    return (href) ? <a href={href}>{image}</a> : image;
   }
 });
 

test/javascripts/image_spec.js

@@ -11,7 +11,7 @@ describe('Image', function() {
     this.node = $('<div id="container"></div>').appendTo('body').get(0);
 
     React.render(
-      <Image src="http://placehold.it/20x20" href="http://google.com" responsive="true" />,
+      <Image src="http://placehold.it/20x20" href="http://google.com" responsive={true} />,
       this.node
     );
   });