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 ); });