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
  • );