diff --git a/README.md b/README.md
index 8532924..d17a1bd 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,7 @@ This package gives you react-router compatible substitutes for:
- `Button` -> `ButtonLink`
- `MenuItem` -> `MenuItemLink`
- `ListGroupItem` -> `ListGroupItemLink`
+- `Thumbnail` -> `ThumbnailLink`
Turning this:
diff --git a/assets/thumbnail.png b/assets/thumbnail.png
new file mode 100644
index 0000000..6c05a89
Binary files /dev/null and b/assets/thumbnail.png differ
diff --git a/package.json b/package.json
index df6209e..295cfe3 100644
--- a/package.json
+++ b/package.json
@@ -64,7 +64,7 @@
"node-libs-browser": "^0.5.2",
"phantomjs": "^1.9.13",
"react": ">0.10.0",
- "react-bootstrap": ">=0.15",
+ "react-bootstrap": ">=0.22.4",
"react-router": ">=0.13.1",
"release-script": "^0.2.1",
"shelljs": "^0.5.1",
diff --git a/src/ThumbnailLink.js b/src/ThumbnailLink.js
new file mode 100644
index 0000000..979e8f6
--- /dev/null
+++ b/src/ThumbnailLink.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import Thumbnail from 'react-bootstrap/lib/Thumbnail';
+import LinkMixin from './LinkMixin';
+
+const ThumbnailLink = React.createClass({
+ mixins: [
+ LinkMixin
+ ],
+
+ render() {
+ return (
+
+ {this.props.children}
+
+ );
+ }
+});
+
+export default ThumbnailLink;
diff --git a/src/index.js b/src/index.js
index ad52ac2..865a6a9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,3 +3,4 @@ export ListGroupItemLink from './ListGroupItemLink';
export MenuItemLink from './MenuItemLink';
export NavItemLink from './NavItemLink';
export RouterOverlayTrigger from './RouterOverlayTrigger';
+export ThumbnailLink from './ThumbnailLink';
diff --git a/tests/ThumbnailLink.spec.js b/tests/ThumbnailLink.spec.js
new file mode 100644
index 0000000..224b155
--- /dev/null
+++ b/tests/ThumbnailLink.spec.js
@@ -0,0 +1,105 @@
+/* globals describe, it, assert, expect */
+
+import React from 'react/addons';
+import ThumbnailLink from '../src/ThumbnailLink';
+import Router, { Route } from 'react-router';
+import { Foo } from './TestHandlers';
+import TestLocation from 'react-router/lib/locations/TestLocation';
+let { click } = React.addons.TestUtils.Simulate;
+
+describe('A ThumbnailLink', function () {
+ describe('with params and a query', function () {
+ it('knows how to make its href', function () {
+ let ThumbnailLinkHandler = React.createClass({
+ render() {
+ return ;
+ }
+ });
+
+ let routes = [
+ ,
+
+ ];
+
+ let div = document.createElement('div');
+ let testLocation = new TestLocation();
+ testLocation.history = ['/link'];
+
+ Router.run(routes, testLocation, function (Handler) {
+ React.render(, div, function () {
+ let a = div.querySelector('a');
+ expect(a.getAttribute('href')).to.equal('/foo/baz?qux=quux');
+ });
+ });
+ });
+ });
+
+ describe('when clicked', function () {
+ it('calls a user defined click handler', function (done) {
+ let ThumbnailLinkHandler = React.createClass({
+ handleClick(event) {
+ assert.ok(true);
+ done();
+ },
+
+ render() {
+ return ;
+ }
+ });
+
+ let routes = [
+ ,
+
+ ];
+ let div = document.createElement('div');
+ let testLocation = new TestLocation();
+ testLocation.history = ['/link'];
+
+ Router.run(routes, testLocation, function (Handler) {
+ React.render(, div, function () {
+ click(div.querySelector('a'));
+ });
+ });
+ });
+
+ it('transitions to the correct route', function (done) {
+ let div = document.createElement('div');
+ let testLocation = new TestLocation();
+ testLocation.history = ['/link'];
+
+ let ThumbnailLinkHandler = React.createClass({
+ handleClick() {
+ // just here to make sure click handlers don't prevent it from happening
+ },
+
+ render() {
+ return ;
+ }
+ });
+
+ let routes = [
+ ,
+
+ ];
+
+ let steps = [];
+
+ steps.push(function () {
+ click(div.querySelector('a'), {button: 0});
+ });
+
+ steps.push(function () {
+ expect(div.innerHTML).to.match(/Foo/);
+ done();
+ });
+
+ Router.run(routes, testLocation, function (Handler) {
+ React.render(, div, function () {
+ steps.shift()();
+ });
+ });
+ });
+
+ });
+
+});
diff --git a/tests/index.js b/tests/index.js
index d38bc23..6d99e29 100644
--- a/tests/index.js
+++ b/tests/index.js
@@ -14,4 +14,5 @@ import './ListGroupItemLink.spec.js';
import './MenuItemLink.spec.js';
import './NavItemLink.spec.js';
import './RouterOverlayTrigger.spec.js';
+import './ThumbnailLink.spec.js';
import './bower-imports-module.spec.js';
diff --git a/tests/visual/ThumbnailVisual.js b/tests/visual/ThumbnailVisual.js
new file mode 100644
index 0000000..16c75d6
--- /dev/null
+++ b/tests/visual/ThumbnailVisual.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import {Link} from 'react-router';
+import Thumbnail from 'react-bootstrap/lib/Thumbnail';
+import ThumbnailLink from '../../src/ThumbnailLink';
+
+const ThumbnailVisual = React.createClass({
+ render() {
+ return (
+
+ <-- Back to Index
+
Thumbnailink
+ Baseline (Raw React-Bootstrap)
+
+ ThumbnailLink
+
+
+ );
+ }
+});
+
+export default ThumbnailVisual;
diff --git a/tests/visual/app.js b/tests/visual/app.js
index e8913ee..8a8ad07 100644
--- a/tests/visual/app.js
+++ b/tests/visual/app.js
@@ -19,6 +19,7 @@ const routes = (
+
);
diff --git a/tests/visual/home.js b/tests/visual/home.js
index 5d9fe99..ffa8d89 100644
--- a/tests/visual/home.js
+++ b/tests/visual/home.js
@@ -11,6 +11,7 @@ const Home = React.createClass({
NavItemLink
MenuItemLink
ListGroupItemLink
+ ThumbnailLink
);