Added thumbnail component including docs and tests

docs/client.js

@@ -5,6 +5,8 @@ import './assets/style.css';
 import './assets/carousel.png';
 import './assets/logo.png';
 import './assets/favicon.ico';
+import './assets/thumbnail.png';
+import './assets/thumbnaildiv.png';
 
 import 'codemirror/mode/javascript/javascript';
 import 'codemirror/theme/solarized.css';

docs/examples/.eslintrc

@@ -48,6 +48,7 @@
     "Table",
     "TabPane",
     "Tooltip",
-    "Well"
+    "Well",
+    "Thumbnail"
   }
 }

docs/examples/ThumbnailAnchor.js

@@ -0,0 +1,17 @@
+const thumbnailInstance = (
+<Grid>
+  <Row>
+  <Col xs={6} md={3}>
+    <Thumbnail href='#' alt='171x180' src='/assets/thumbnail.png' />
+  </Col>
+  <Col xs={6} md={3}>
+    <Thumbnail href='#' alt='171x180' src='/assets/thumbnail.png' />
+  </Col>
+  <Col xs={6} md={3}>
+    <Thumbnail href='#' alt='171x180' src='/assets/thumbnail.png' />
+  </Col>
+  </Row>
+</Grid>
+);
+
+React.render(thumbnailInstance, mountNode);

docs/examples/ThumbnailDiv.js

@@ -0,0 +1,38 @@
+const thumbnailInstance = (
+  <Grid>
+    <Row>
+    <Col xs={6} md={4}>
+      <Thumbnail src='/assets/thumbnaildiv.png' alt='242x200'>
+        <h3>Thumbnail label</h3>
+        <p>Description</p>
+        <p>
+          <Button bsStyle='primary'>Button</Button>&nbsp;
+          <Button bsStyle='default'>Button</Button>
+        </p>
+      </Thumbnail>
+    </Col>
+    <Col xs={6} md={4}>
+      <Thumbnail src='/assets/thumbnaildiv.png' alt='242x200'>
+        <h3>Thumbnail label</h3>
+        <p>Description</p>
+        <p>
+          <Button bsStyle='primary'>Button</Button>&nbsp;
+          <Button bsStyle='default'>Button</Button>
+        </p>
+      </Thumbnail>
+    </Col>
+    <Col xs={6} md={4}>
+      <Thumbnail src='/assets/thumbnaildiv.png' alt='242x200'>
+        <h3>Thumbnail label</h3>
+        <p>Description</p>
+        <p>
+          <Button bsStyle='primary'>Button</Button>&nbsp;
+          <Button bsStyle='default'>Button</Button>
+        </p>
+      </Thumbnail>
+    </Col>
+    </Row>
+  </Grid>
+);
+
+React.render(thumbnailInstance, mountNode);

docs/src/ComponentsPage.js

@@ -449,6 +449,20 @@ const ComponentsPage = React.createClass({
                   <ReactPlayground codeText={Samples.GridBasic} exampleClassName='bs-example-tabs' />
                 </div>
 
+                {/* Thumbnail */}
+                <div className='bs-docs-section'>
+                <h1 id='thumbnail' className='page-header'>Thumbnail</h1>
+                <p>Thumbnails are designed to showcase linked images with minimal required markup. You can extend the grid component with thumbnails.</p>
+
+                  <h3>Anchor Thumbnail</h3>
+                  <p>Creates an anchor wrapping an image.</p>
+                  <ReactPlayground codeText={Samples.ThumbnailAnchor} />
+
+                  <h3>Divider Thumbnail</h3>
+                  <p>Creates a divider wrapping an image and other children elements.</p>
+                  <ReactPlayground codeText={Samples.ThumbnailDiv} />
+                </div>
+
                 {/* ListGroup */}
                 <div className='bs-docs-section'>
                   <h1 id='listgroup' className='page-header'>List group<small> ListGroup, ListGroupItem</small></h1>
@@ -606,15 +620,16 @@ const ComponentsPage = React.createClass({
                     <NavItem href='#alerts' key={13}>Alerts</NavItem>
                     <NavItem href='#carousels' key={14}>Carousels</NavItem>
                     <NavItem href='#grids' key={15}>Grids</NavItem>
-                    <NavItem href='#listgroup' key={16}>List group</NavItem>
-                    <NavItem href='#labels' key={17}>Labels</NavItem>
-                    <NavItem href='#badges' key={18}>Badges</NavItem>
-                    <NavItem href='#jumbotron' key={19}>Jumbotron</NavItem>
-                    <NavItem href='#page-header' key={20}>Page Header</NavItem>
-                    <NavItem href='#wells' key={21}>Wells</NavItem>
-                    <NavItem href='#glyphicons' key={22}>Glyphicons</NavItem>
-                    <NavItem href='#tables' key={23}>Tables</NavItem>
-                    <NavItem href='#input' key={24}>Input</NavItem>
+                    <NavItem href='#thumbnail' key={16}>Thumbnail</NavItem>
+                    <NavItem href='#listgroup' key={17}>List group</NavItem>
+                    <NavItem href='#labels' key={18}>Labels</NavItem>
+                    <NavItem href='#badges' key={19}>Badges</NavItem>
+                    <NavItem href='#jumbotron' key={20}>Jumbotron</NavItem>
+                    <NavItem href='#page-header' key={21}>Page Header</NavItem>
+                    <NavItem href='#wells' key={22}>Wells</NavItem>
+                    <NavItem href='#glyphicons' key={23}>Glyphicons</NavItem>
+                    <NavItem href='#tables' key={24}>Tables</NavItem>
+                    <NavItem href='#input' key={25}>Input</NavItem>
                   </Nav>
                   <a className='back-to-top' href='#top'>
                   Back to top

docs/src/ReactPlayground.js

@@ -40,6 +40,7 @@ import * as modSplitButton from '../../src/SplitButton';
 import * as modTabbedArea from '../../src/TabbedArea';
 import * as modTable from '../../src/Table';
 import * as modTabPane from '../../src/TabPane';
+import * as modThumbnail from '../../src/Thumbnail';
 import * as modTooltip from '../../src/Tooltip';
 import * as modWell from '../../src/Well';
 
@@ -88,6 +89,7 @@ const SplitButton = modSplitButton.default;
 const TabbedArea = modTabbedArea.default;
 const Table = modTable.default;
 const TabPane = modTabPane.default;
+const Thumbnail = modThumbnail.default;
 const Tooltip = modTooltip.default;
 const Well = modWell.default;
 /* eslint-enable */

docs/src/Samples.js

@@ -67,6 +67,8 @@ export default {
   CarouselUncontrolled:          require('fs').readFileSync(__dirname + '/../examples/CarouselUncontrolled.js', 'utf8'),
   CarouselControlled:            require('fs').readFileSync(__dirname + '/../examples/CarouselControlled.js', 'utf8'),
   GridBasic:                     require('fs').readFileSync(__dirname + '/../examples/GridBasic.js', 'utf8'),
+  ThumbnailAnchor:               require('fs').readFileSync(__dirname + '/../examples/ThumbnailAnchor.js', 'utf8'),
+  ThumbnailDiv:                  require('fs').readFileSync(__dirname + '/../examples/ThumbnailDiv.js', 'utf8'),
   ListGroupDefault:              require('fs').readFileSync(__dirname + '/../examples/ListGroupDefault.js', 'utf8'),
   ListGroupLinked:               require('fs').readFileSync(__dirname + '/../examples/ListGroupLinked.js', 'utf8'),
   ListGroupActive:               require('fs').readFileSync(__dirname + '/../examples/ListGroupActive.js', 'utf8'),

src/Thumbnail.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import classSet from 'classnames';
+import BootstrapMixin from './BootstrapMixin';
+
+const Thumbnail = React.createClass({
+  mixins: [BootstrapMixin],
+
+  getDefaultProps() {
+    return {
+      bsClass: 'thumbnail'
+    };
+  },
+
+  render() {
+    let classes = this.getBsClassSet();
+
+    if(this.props.href) {
+      return (
+        <a {...this.props} href={this.props.href} className={classSet(this.props.className, classes)}>
+          <img src={this.props.src} alt={this.props.alt} />
+        </a>
+      );
+    }
+    else {
+      if(this.props.children) {
+        return (
+          <div {...this.props} className={classSet(this.props.className, classes)}>
+            <img src={this.props.src} alt={this.props.alt} />
+            <div className="caption">
+              {this.props.children}
+            </div>
+          </div>
+        );
+      }
+      else {
+        return (
+          <div {...this.props} className={classSet(this.props.className, classes)}>
+            <img src={this.props.src} alt={this.props.alt} />
+          </div>
+        );
+      }
+    }
+  }
+});
+
+export default Thumbnail;

src/index.js

@@ -48,6 +48,7 @@ import SubNav from './SubNav';
 import TabbedArea from './TabbedArea';
 import Table from './Table';
 import TabPane from './TabPane';
+import Thumbnail from './Thumbnail';
 import Tooltip from './Tooltip';
 import Well from './Well';
 import styleMaps from './styleMaps';
@@ -103,6 +104,7 @@ export default {
   TabbedArea,
   Table,
   TabPane,
+  Thumbnail,
   Tooltip,
   Well,
   styleMaps

src/styleMaps.js

@@ -9,6 +9,7 @@ const styleMaps = {
     'form': 'form',
     'glyphicon': 'glyphicon',
     'label': 'label',
+    'thumbnail': 'thumbnail',
     'list-group-item': 'list-group-item',
     'panel': 'panel',
     'panel-group': 'panel-group',

test/ThumbnailSpec.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import ReactTestUtils from 'react/lib/ReactTestUtils';
+import Thumbnail from '../src/Thumbnail';
+
+describe('Thumbnail', function () {
+  it('Should have a thumbnail class and be an anchor', function () {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Thumbnail href="#" src="#" alt="test" />
+    );
+    assert.ok(instance.getDOMNode().className.match(/\bthumbnail\b/));
+    assert.ok(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'a'));
+  });
+
+  it('Should have an image', function () {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Thumbnail href="#" src="#" alt="test" />
+    );
+    assert.ok(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'img'));
+  });
+
+  it('Should have a thumbnail class and be a div', function () {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Thumbnail src="#" alt="test" />
+    );
+    assert.ok(instance.getDOMNode().className.match(/\bthumbnail\b/));
+    assert.equal(instance.getDOMNode().nodeName, 'DIV');
+  });
+
+    it('Should have an image', function () {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Thumbnail src="#" alt="test" />
+    );
+    assert.ok(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'img'));
+  });
+
+    it('Should have an inner div with class caption', function () {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Thumbnail src="#" alt="test">
+        Test
+        <div>
+          Test child element
+        </div>
+      </Thumbnail>
+    );
+    assert.ok(instance.getDOMNode().lastChild.className.match(/\bcaption\b/));
+  });
+});