From aab48cc689152b6a688aa170b19d091982de4968 Mon Sep 17 00:00:00 2001
From: Beatrice Peng <bpeng@pivotal.io>
Date: Tue, 23 Dec 2014 16:12:56 -0500
Subject: [PATCH] feat(react-images): add image components

- images can be responsive or wrapped in a link

[#84877438]

Signed-off-by: Nicole Sullivan <nsullivan@pivotal.io>
---
 src/pivotal-ui/components/images.scss         | 25 ++++++++++++
 src/pivotal-ui/javascripts/images.jsx         | 37 ++++++++++++++++++
 .../javascripts/pivotal-ui-react.js           |  2 +
 test/spec/javascripts/image_spec.js           | 39 +++++++++++++++++++
 4 files changed, 103 insertions(+)
 create mode 100644 src/pivotal-ui/javascripts/images.jsx
 create mode 100644 test/spec/javascripts/image_spec.js

diff --git a/src/pivotal-ui/components/images.scss b/src/pivotal-ui/components/images.scss
index b05396893..b3148242f 100644
--- a/src/pivotal-ui/components/images.scss
+++ b/src/pivotal-ui/components/images.scss
@@ -179,3 +179,28 @@ For more information about setting up your svg, read this article about [svg coo
   left: 0;
 }
 
+/*doc
+---
+title: React Images
+name: image_react
+categories:
+  - Beta
+---
+Images in react can be responsive and/or wrapped in a link.
+
+```html_example
+<div id="image-example"></div>
+```
+
+```jsx_example
+
+React.render(
+  <div>
+    <Image src="http://placehold.it/1000x100" responsive="true" href="http://google.com" />
+  </div>,
+  document.getElementById('image-example')
+);
+```
+
+
+*/
diff --git a/src/pivotal-ui/javascripts/images.jsx b/src/pivotal-ui/javascripts/images.jsx
new file mode 100644
index 000000000..4a93a587a
--- /dev/null
+++ b/src/pivotal-ui/javascripts/images.jsx
@@ -0,0 +1,37 @@
+'use strict';
+
+var React = require('react/addons');
+var _ = require('lodash');
+
+var setClass = React.addons.classSet;
+
+var Image = React.createClass({
+
+
+  render: function () {
+    var classes = setClass({
+      'img-responsive': this.props.responsive
+    });
+
+    if (this.props.href){
+      return(
+        <a href={this.props.href}>
+          <img {...this.props} className={classes}>
+            {this.props.children}
+          </img>
+        </a>
+        );
+    }
+    else {
+      return (
+        <img {...this.props} className={classes}>
+          {this.props.children}
+        </img>
+        );
+    }
+  }
+});
+
+module.exports = {
+  Image: Image
+};
diff --git a/src/pivotal-ui/javascripts/pivotal-ui-react.js b/src/pivotal-ui/javascripts/pivotal-ui-react.js
index 513477a0b..aa65e7809 100644
--- a/src/pivotal-ui/javascripts/pivotal-ui-react.js
+++ b/src/pivotal-ui/javascripts/pivotal-ui-react.js
@@ -65,3 +65,5 @@ global.ClickableAltPanel = require('./panels.jsx').ClickableAltPanel;
 global.BasicPanel = require('./panels.jsx').BasicPanel;
 global.ShadowPanel = require('./panels.jsx').ShadowPanel;
 global.HighlightPanel = require('./panels.jsx').HighlightPanel;
+
+global.Image = require('./images.jsx').Image;
diff --git a/test/spec/javascripts/image_spec.js b/test/spec/javascripts/image_spec.js
new file mode 100644
index 000000000..f93fddb14
--- /dev/null
+++ b/test/spec/javascripts/image_spec.js
@@ -0,0 +1,39 @@
+'use strict';
+
+var $ = require('jquery');
+var React = require('react/addons');
+var TestUtils = React.addons.TestUtils;
+
+var Image = require('../../../src/pivotal-ui/javascripts/images.jsx').Image;
+
+describe('Image', function() {
+  beforeEach(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" />,
+      this.node
+    );
+  });
+
+  afterEach(function() {
+    React.unmountComponentAtNode(this.node);
+    document.body.removeChild(this.node);
+  });
+
+  describe('when the href is set', function() {
+    it("wraps the image in an link", function() {
+      expect($('#container a')).toContainElement('img');
+    });
+  });
+
+  describe('when image responsive is set to true', function() {
+    it("adds the image-responsive class to the image", function() {
+      expect($('#container img')).toHaveClass('img-responsive');
+    });
+  });
+
+  it("adds the gutter class to the row", function() {
+    expect($('#container img').attr('src')).toEqual('http://placehold.it/20x20');
+  });
+});