diff --git a/src/pivotal-ui/components/images.scss b/src/pivotal-ui/components/images.scss
index b010b9f01..43936674e 100644
--- a/src/pivotal-ui/components/images.scss
+++ b/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
-
+
```
diff --git a/src/pivotal-ui/javascripts/images.jsx b/src/pivotal-ui/javascripts/images.jsx
index e12fed8e3..365304483 100644
--- a/src/pivotal-ui/javascripts/images.jsx
+++ b/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(
-
-
- {this.props.children}
-
-
- );
- }
- else {
- return (
-
- {this.props.children}
-
- );
- }
+ var image = (
+
+ {children}
+
+ );
+
+ return (href) ? {image} : image;
}
});
diff --git a/test/javascripts/image_spec.js b/test/javascripts/image_spec.js
index 3593cbede..8a6227e92 100644
--- a/test/javascripts/image_spec.js
+++ b/test/javascripts/image_spec.js
@@ -11,7 +11,7 @@ describe('Image', function() {
this.node = $('
').appendTo('body').get(0);
React.render(
- ,
+ ,
this.node
);
});