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

@@ -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')
+);
+```
+
+
+*/

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

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;

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