react-bootstrap · AlexKVal · Sep 20, 2015 · Sep 5, 2015 · taion · Sep 7, 2015
diff --git a/docs/examples/ImageResponsive.js b/docs/examples/ImageResponsive.js
@@ -0,0 +1,5 @@
+const imageResponsiveInstance = (
+  <Image src="/assets/thumbnail.png" responsive />
+);
+
+React.render(imageResponsiveInstance, mountNode);
diff --git a/docs/examples/ImageShape.js b/docs/examples/ImageShape.js
@@ -0,0 +1,17 @@
+const imageShapeInstance = (
+  <Grid>
+    <Row>
+      <Col xs={6} md={4}>
+        <Image src="/assets/thumbnail.png" rounded />
+      </Col>
+      <Col xs={6} md={4}>
+        <Image src="/assets/thumbnail.png" circle />
+      </Col>
+      <Col xs={6} md={4}>
+        <Image src="/assets/thumbnail.png" thumbnail />
+      </Col>
+    </Row>
+  </Grid>
+);
+
+React.render(imageShapeInstance, mountNode);
diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
@@ -904,6 +904,22 @@ const ComponentsPage = React.createClass({
                   <h4><Anchor id="utilities-fade-props">Props</Anchor></h4>
                   <PropTable component="Fade"/>
                 </div>
+
+                {/* Images */}
+                <div className="bs-docs-section">
+                  <h1 className="page-header"><Anchor id="images">Images</Anchor></h1>
+
+                  <h3><Anchor id="image-shape">Shape</Anchor></h3>
+                  <p>Use the <code>rounded</code>, <code>circle</code> and <code>thumbnail</code> props to customise the image.</p>
+                  <ReactPlayground codeText={Samples.ImageShape} />
+
+                  <h3><Anchor id="image-responsive">Responsive</Anchor></h3>
+                  <p>Use the <code>responsive</code> to scale image nicely to the parent element.</p>
+                  <ReactPlayground codeText={Samples.ImageResponsive} />
+
+                  <h3><Anchor id="image-props">Props</Anchor></h3>
+                  <PropTable component="Image"/>
+                </div>
               </div>
 
 
@@ -948,6 +964,7 @@ const ComponentsPage = React.createClass({
                     <NavItem href="#tables" key={25}>Tables</NavItem>
                     <NavItem href="#input" key={26}>Input</NavItem>
                     <NavItem href="#utilities" key={28}>Utilities</NavItem>
+                    <NavItem href="#images" key={29}>Images</NavItem>
                   </Nav>
                   <a className="back-to-top" href="#top">
                   Back to top

diff --git a/docs/src/ReactPlayground.js b/docs/src/ReactPlayground.js
@@ -26,6 +26,7 @@ const FormControls = require('../../src/FormControls');
 const Glyphicon = require('../../src/Glyphicon');
 const Grid = require('../../src/Grid');
 const Input = require('../../src/Input');
+const Image = require('../../src/Image');
 const Jumbotron = require('../../src/Jumbotron');
 const Label = require('../../src/Label');
 const ListGroup = require('../../src/ListGroup');

diff --git a/docs/src/Samples.js b/docs/src/Samples.js
@@ -105,6 +105,8 @@ export default {
   InputHorizontal:               require('fs').readFileSync(__dirname + '/../examples/InputHorizontal.js', 'utf8'),
   InputWrapper:                  require('fs').readFileSync(__dirname + '/../examples/InputWrapper.js', 'utf8'),
   MenuItem:                      require('fs').readFileSync(__dirname + '/../examples/MenuItem.js', 'utf8'),
+  ImageResponsive:               require('fs').readFileSync(__dirname + '/../examples/ImageResponsive.js', 'utf8'),
+  ImageShape:                    require('fs').readFileSync(__dirname + '/../examples/ImageShape.js', 'utf8'),
 
   Overlay:                       require('fs').readFileSync(__dirname + '/../examples/Overlay.js', 'utf8'),
   OverlayCustom:                 require('fs').readFileSync(__dirname + '/../examples/OverlayCustom.js', 'utf8')

diff --git a/src/Image.js b/src/Image.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import classNames from 'classnames';
+
+const Image = React.createClass({
+
+  propTypes: {
+
+    /**
+     * Sets image as responsive image
+     */
+    responsive: React.PropTypes.bool,
+
+    /**
+     * Sets image shape as rounded
+     */
+    rounded: React.PropTypes.bool,
+
+    /**
+     * Sets image shape as circle
+     */
+    circle: React.PropTypes.bool,
+
+    /**
+     * Sets image shape as thumbnail
+     */
+    thumbnail: React.PropTypes.bool
+  },
+
+  getDefaultProps() {
+    return {
+      responsive: false,
+      rounded: false,
+      circle: false,
+      thumbnail: false
+    };
+  },
+
+  render() {
+    const classes = {
+      'img-responsive': this.props.responsive,
+      'img-rounded': this.props.rounded,
+      'img-circle': this.props.circle,
+      'img-thumbnail': this.props.thumbnail
+    };
+
+    return (
+      <img {...this.props}  className={classNames(this.props.className, classes)} />
+    );
+  }
+});
+
+export default Image;
diff --git a/test/ImageSpec.js b/test/ImageSpec.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import ReactTestUtils from 'react/lib/ReactTestUtils';
+import Image from '../src/Image';
+
+describe('Image', function() {
+
+  it('should be an image', function() {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Image />
+    );
+    let image = React.findDOMNode(instance);
+
+    image.nodeName.should.equal('IMG');
+  });
+
+  it('should provide src and alt prop', function() {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Image src="image.jpg" alt="this is alt" />
+    );
+    let image = React.findDOMNode(instance);
+
+    assert.equal(image.getAttribute('src'), 'image.jpg');
+    assert.equal(image.getAttribute('alt'), 'this is alt');
+  });
+
+  it('should have correct class when responsive prop is set', function() {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Image responsive />
+    );
+    let imageClassName = React.findDOMNode(instance).className;
+
+    imageClassName.should.match(/\bimg-responsive\b/);
+  });
+
+  it('should have correct class when rounded prop is set', function() {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Image rounded />
+    );
+    let imageClassName = React.findDOMNode(instance).className;
+
+    imageClassName.should.match(/\bimg-rounded\b/);
+  });
+
+  it('should have correct class when circle prop is set', function() {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Image circle />
+    );
+    let imageClassName = React.findDOMNode(instance).className;
+
+    imageClassName.should.match(/\bimg-circle\b/);
+  });
+
+  it('should have correct class when thumbnail prop is set', function() {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Image thumbnail />
+    );
+    let imageClassName = React.findDOMNode(instance).className;
+
+    imageClassName.should.match(/\bimg-thumbnail\b/);
+  });
+});