From 447a6a0968e40b2b2b6b71e72e1a923e8657b416 Mon Sep 17 00:00:00 2001
From: Caroline Taymor <ctaymor@pivotal.io>
Date: Tue, 28 Jul 2015 12:07:49 -0700
Subject: [PATCH] fix(images): Images get responsive class only with flag

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]
---
 spec/pivotal-ui-react/image/image_spec.js | 49 ++++++++++++++---------
 src/pivotal-ui-react/images/images.js     |  8 ++--
 2 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/spec/pivotal-ui-react/image/image_spec.js b/spec/pivotal-ui-react/image/image_spec.js
index 78c4da7b0..c47a58931 100644
--- a/spec/pivotal-ui-react/image/image_spec.js
+++ b/spec/pivotal-ui-react/image/image_spec.js
@@ -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'}});
@@ -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');
+    });
+  });
+});
diff --git a/src/pivotal-ui-react/images/images.js b/src/pivotal-ui-react/images/images.js
index ce04a7fed..0cdf08059 100644
--- a/src/pivotal-ui-react/images/images.js
+++ b/src/pivotal-ui-react/images/images.js
@@ -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;
   }
 });