Skip to content

Commit cb30941

Browse files
JordanTheriaultJordanTheriault
committed
Added thumbnail component including docs and tests
1 parent 83d6220 commit cb30941

13 files changed

Lines changed: 183 additions & 10 deletions

‎docs/assets/thumbnail.png‎

3.84 KB
Loading

‎docs/assets/thumbnaildiv.png‎

4.06 KB
Loading

‎docs/client.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import './assets/style.css';
55
import './assets/carousel.png';
66
import './assets/logo.png';
77
import './assets/favicon.ico';
8+
import './assets/thumbnail.png';
9+
import './assets/thumbnaildiv.png';
810

911
import 'codemirror/mode/javascript/javascript';
1012
import 'codemirror/theme/solarized.css';

‎docs/examples/.eslintrc‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
"Table",
4949
"TabPane",
5050
"Tooltip",
51-
"Well"
51+
"Well",
52+
"Thumbnail"
5253
}
5354
}

‎docs/examples/ThumbnailAnchor.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const thumbnailInstance = (
2+
<Grid>
3+
<Row>
4+
<Col xs={6} md={3}>
5+
<Thumbnail href='#' alt='171x180' src='/assets/thumbnail.png' />
6+
</Col>
7+
<Col xs={6} md={3}>
8+
<Thumbnail href='#' alt='171x180' src='/assets/thumbnail.png' />
9+
</Col>
10+
<Col xs={6} md={3}>
11+
<Thumbnail href='#' alt='171x180' src='/assets/thumbnail.png' />
12+
</Col>
13+
</Row>
14+
</Grid>
15+
);
16+
17+
React.render(thumbnailInstance, mountNode);

‎docs/examples/ThumbnailDiv.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
const thumbnailInstance = (
2+
<Grid>
3+
<Row>
4+
<Col xs={6} md={4}>
5+
<Thumbnail src='/assets/thumbnaildiv.png' alt='242x200'>
6+
<h3>Thumbnail label</h3>
7+
<p>Description</p>
8+
<p>
9+
<Button bsStyle='primary'>Button</Button>&nbsp;
10+
<Button bsStyle='default'>Button</Button>
11+
</p>
12+
</Thumbnail>
13+
</Col>
14+
<Col xs={6} md={4}>
15+
<Thumbnail src='/assets/thumbnaildiv.png' alt='242x200'>
16+
<h3>Thumbnail label</h3>
17+
<p>Description</p>
18+
<p>
19+
<Button bsStyle='primary'>Button</Button>&nbsp;
20+
<Button bsStyle='default'>Button</Button>
21+
</p>
22+
</Thumbnail>
23+
</Col>
24+
<Col xs={6} md={4}>
25+
<Thumbnail src='/assets/thumbnaildiv.png' alt='242x200'>
26+
<h3>Thumbnail label</h3>
27+
<p>Description</p>
28+
<p>
29+
<Button bsStyle='primary'>Button</Button>&nbsp;
30+
<Button bsStyle='default'>Button</Button>
31+
</p>
32+
</Thumbnail>
33+
</Col>
34+
</Row>
35+
</Grid>
36+
);
37+
38+
React.render(thumbnailInstance, mountNode);

‎docs/src/ComponentsPage.js‎

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -449,6 +449,20 @@ const ComponentsPage = React.createClass({
449449
<ReactPlayground codeText={Samples.GridBasic} exampleClassName='bs-example-tabs' />
450450
</div>
451451

452+
{/* Thumbnail */}
453+
<div className='bs-docs-section'>
454+
<h1 id='thumbnail' className='page-header'>Thumbnail</h1>
455+
<p>Thumbnails are designed to showcase linked images with minimal required markup. You can extend the grid component with thumbnails.</p>
456+
457+
<h3>Anchor Thumbnail</h3>
458+
<p>Creates an anchor wrapping an image.</p>
459+
<ReactPlayground codeText={Samples.ThumbnailAnchor} />
460+
461+
<h3>Divider Thumbnail</h3>
462+
<p>Creates a divider wrapping an image and other children elements.</p>
463+
<ReactPlayground codeText={Samples.ThumbnailDiv} />
464+
</div>
465+
452466
{/* ListGroup */}
453467
<div className='bs-docs-section'>
454468
<h1 id='listgroup' className='page-header'>List group<small> ListGroup, ListGroupItem</small></h1>
@@ -606,15 +620,16 @@ const ComponentsPage = React.createClass({
606620
<NavItem href='#alerts' key={13}>Alerts</NavItem>
607621
<NavItem href='#carousels' key={14}>Carousels</NavItem>
608622
<NavItem href='#grids' key={15}>Grids</NavItem>
609-
<NavItem href='#listgroup' key={16}>List group</NavItem>
610-
<NavItem href='#labels' key={17}>Labels</NavItem>
611-
<NavItem href='#badges' key={18}>Badges</NavItem>
612-
<NavItem href='#jumbotron' key={19}>Jumbotron</NavItem>
613-
<NavItem href='#page-header' key={20}>Page Header</NavItem>
614-
<NavItem href='#wells' key={21}>Wells</NavItem>
615-
<NavItem href='#glyphicons' key={22}>Glyphicons</NavItem>
616-
<NavItem href='#tables' key={23}>Tables</NavItem>
617-
<NavItem href='#input' key={24}>Input</NavItem>
623+
<NavItem href='#thumbnail' key={16}>Thumbnail</NavItem>
624+
<NavItem href='#listgroup' key={17}>List group</NavItem>
625+
<NavItem href='#labels' key={18}>Labels</NavItem>
626+
<NavItem href='#badges' key={19}>Badges</NavItem>
627+
<NavItem href='#jumbotron' key={20}>Jumbotron</NavItem>
628+
<NavItem href='#page-header' key={21}>Page Header</NavItem>
629+
<NavItem href='#wells' key={22}>Wells</NavItem>
630+
<NavItem href='#glyphicons' key={23}>Glyphicons</NavItem>
631+
<NavItem href='#tables' key={24}>Tables</NavItem>
632+
<NavItem href='#input' key={25}>Input</NavItem>
618633
</Nav>
619634
<a className='back-to-top' href='#top'>
620635
Back to top

‎docs/src/ReactPlayground.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import * as modSplitButton from '../../src/SplitButton';
4040
import * as modTabbedArea from '../../src/TabbedArea';
4141
import * as modTable from '../../src/Table';
4242
import * as modTabPane from '../../src/TabPane';
43+
import * as modThumbnail from '../../src/Thumbnail';
4344
import * as modTooltip from '../../src/Tooltip';
4445
import * as modWell from '../../src/Well';
4546

@@ -88,6 +89,7 @@ const SplitButton = modSplitButton.default;
8889
const TabbedArea = modTabbedArea.default;
8990
const Table = modTable.default;
9091
const TabPane = modTabPane.default;
92+
const Thumbnail = modThumbnail.default;
9193
const Tooltip = modTooltip.default;
9294
const Well = modWell.default;
9395
/* eslint-enable */

‎docs/src/Samples.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,8 @@ export default {
6767
CarouselUncontrolled: require('fs').readFileSync(__dirname + '/../examples/CarouselUncontrolled.js', 'utf8'),
6868
CarouselControlled: require('fs').readFileSync(__dirname + '/../examples/CarouselControlled.js', 'utf8'),
6969
GridBasic: require('fs').readFileSync(__dirname + '/../examples/GridBasic.js', 'utf8'),
70+
ThumbnailAnchor: require('fs').readFileSync(__dirname + '/../examples/ThumbnailAnchor.js', 'utf8'),
71+
ThumbnailDiv: require('fs').readFileSync(__dirname + '/../examples/ThumbnailDiv.js', 'utf8'),
7072
ListGroupDefault: require('fs').readFileSync(__dirname + '/../examples/ListGroupDefault.js', 'utf8'),
7173
ListGroupLinked: require('fs').readFileSync(__dirname + '/../examples/ListGroupLinked.js', 'utf8'),
7274
ListGroupActive: require('fs').readFileSync(__dirname + '/../examples/ListGroupActive.js', 'utf8'),

‎src/Thumbnail.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React from 'react';
2+
import classSet from 'classnames';
3+
import BootstrapMixin from './BootstrapMixin';
4+
5+
const Thumbnail = React.createClass({
6+
mixins: [BootstrapMixin],
7+
8+
getDefaultProps() {
9+
return {
10+
bsClass: 'thumbnail'
11+
};
12+
},
13+
14+
render() {
15+
let classes = this.getBsClassSet();
16+
17+
if(this.props.href) {
18+
return (
19+
<a {...this.props} href={this.props.href} className={classSet(this.props.className, classes)}>
20+
<img src={this.props.src} alt={this.props.alt} />
21+
</a>
22+
);
23+
}
24+
else {
25+
if(this.props.children) {
26+
return (
27+
<div {...this.props} className={classSet(this.props.className, classes)}>
28+
<img src={this.props.src} alt={this.props.alt} />
29+
<div className="caption">
30+
{this.props.children}
31+
</div>
32+
</div>
33+
);
34+
}
35+
else {
36+
return (
37+
<div {...this.props} className={classSet(this.props.className, classes)}>
38+
<img src={this.props.src} alt={this.props.alt} />
39+
</div>
40+
);
41+
}
42+
}
43+
}
44+
});
45+
46+
export default Thumbnail;

0 commit comments

Comments
 (0)