Skip to content

Commit

Permalink
fix(images): Images get responsive class only with flag
Browse files Browse the repository at this point in the history
If an image does not have a responsive flag, it won't get the responsive
class.

This fixes the problem with the images in media blocks not showing up.

[Finishes #99966308]
  • Loading branch information
Caroline Taymor committed Jul 28, 2015
1 parent 74c1f4a commit 447a6a0
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 21 deletions.
49 changes: 31 additions & 18 deletions spec/pivotal-ui-react/image/image_spec.js
Original file line number Diff line number Diff line change
@@ -1,35 +1,36 @@
require('../spec_helper');
import {itPropagatesAttributes} from '../support/shared_examples';

var Image = require('../../../src/pivotal-ui-react/images/images').Image;
function renderImage(responsive){
React.render(
<Image
src="http://placehold.it/20x20"
href="http://google.com"
className="my-img-class"
id="my-img-id"
style={{opacity: '0.5'}}
responsive={responsive}/>,
root
);
}
describe('Image', function() {
beforeEach(function() {
var Image = require('../../../src/pivotal-ui-react/images/images').Image;
React.render(
<Image
src="http://placehold.it/20x20"
href="http://google.com"
className="my-img-class"
id="my-img-id"
style={{opacity: '0.5'}}
responsive={true}/>,
root
);
});

afterEach(function() {
React.unmountComponentAtNode(root);
});

describe('when responsive', function() {
beforeEach(function() {
renderImage(true);
});
describe('when the href is set', function() {
it('wraps the image in an link', function() {
expect('a img').toExist();
});
});

describe('when image responsive is set to true', function() {
it('adds the image-responsive class to the image', function() {
expect('img').toHaveClass('img-responsive');
});
it('adds the image-responsive class to the image', function() {
expect('img').toHaveClass('img-responsive');
});

itPropagatesAttributes('img', {className: 'my-img-class', id: 'my-img-id', style: {opacity: '0.5'}});
Expand All @@ -38,3 +39,15 @@ describe('Image', function() {
expect('img').toHaveAttr('src', 'http://placehold.it/20x20');
});
});


describe('when image responsive is not set to true', function() {
beforeEach(function() {
renderImage(false);
});

it('does not add the image-responsive class to the image', function() {
expect('img').not.toHaveClass('img-responsive');
});
});
});
8 changes: 5 additions & 3 deletions src/pivotal-ui-react/images/images.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,12 @@ var Image = React.createClass({
},

render() {
var {responsive, href, children, ...other} = this.props;
const props = mergeProps(other, {className: 'img-responsive'});
let {responsive, href, children, ...props} = this.props;
if (responsive) {
props = mergeProps(props, {className: 'img-responsive'});
}

var image = <img {...props}>{children}</img>;
const image = <img {...props}>{children}</img>;
return href ? <a {...{href}}>{image}</a> : image;
}
});
Expand Down

0 comments on commit 447a6a0

Please sign in to comment.