├── .prettierignore
├── .eslintignore
├── .babelrc
├── example
    └── src
    │   ├── images
    │       ├── Sofia Acey.jpg
    │       ├── Joseph Barish.jpg
    │       └── Sarah Benson.jpg
    │   ├── .gitignore
    │   ├── Home.js
    │   ├── images.js
    │   ├── example.js
    │   ├── sections
    │       ├── Section.js
    │       ├── Example.js
    │       ├── Modals.js
    │       ├── Navigation.js
    │       ├── Grid.js
    │       ├── Highlight.js
    │       ├── ChartCard.js
    │       ├── Submenus.js
    │       ├── Cards.js
    │       ├── SlidingSidebar.js
    │       ├── FooterBar.js
    │       ├── Navbar.js
    │       ├── MediaCard.js
    │       ├── Lists.js
    │       ├── TableCard.js
    │       ├── BaseCard.js
    │       ├── RichTextCard.js
    │       ├── SummaryCard.js
    │       ├── ListSearch.js
    │       ├── FileCard.js
    │       ├── ListDetail.js
    │       ├── FormCard.js
    │       └── DoubleNavbar.js
    │   ├── index.html
    │   ├── About.js
    │   ├── App.js
    │   ├── example.less
    │   └── Documentation.js
├── .editorconfig
├── src
    ├── CardBody.js
    ├── index.js
    ├── List.js
    ├── Cards.js
    ├── CardTitle.js
    ├── CardFooter.js
    ├── CardHeader.js
    ├── SummaryItem.js
    ├── ChartCanvas.js
    ├── ListGroupItemText.js
    ├── Container.js
    ├── ListGroupItemHeader.js
    └── Card.js
├── .gitignore
├── bower.json
├── package-scripts.js
├── .eslintrc.js
├── README.md
├── rollup.config.js
├── webpack.config.js
├── lib
    ├── index.js
    ├── CardBody.js
    ├── List.js
    ├── Cards.js
    ├── Card.js
    ├── CardTitle.js
    ├── Container.js
    ├── CardFooter.js
    ├── CardHeader.js
    ├── SummaryItem.js
    ├── ChartCanvas.js
    ├── ListGroupItemText.js
    └── ListGroupItemHeader.js
├── package.json
└── dist
    ├── react-bootcards.min.js
    ├── react-bootcards.es.js
    └── react-bootcards.js


/.prettierignore:
--------------------------------------------------------------------------------
1 | dist/
2 | example/dist/
3 | lib/
4 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | lib/*
2 | dist/*
3 | coverage/*
4 | example/dist/*
5 | node_modules/*
6 | bower_components/*
7 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "ignore": ["node-modules/**", "src/index.umd.js"],
3 |   "presets": [ "env", "stage-0", "react"]
4 | }
5 | 


--------------------------------------------------------------------------------
/example/src/images/Sofia Acey.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kobanyan/react-bootcards/HEAD/example/src/images/Sofia Acey.jpg


--------------------------------------------------------------------------------
/example/src/images/Joseph Barish.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kobanyan/react-bootcards/HEAD/example/src/images/Joseph Barish.jpg


--------------------------------------------------------------------------------
/example/src/images/Sarah Benson.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kobanyan/react-bootcards/HEAD/example/src/images/Sarah Benson.jpg


--------------------------------------------------------------------------------
/example/src/.gitignore:
--------------------------------------------------------------------------------
1 | ## This file is here to ensure it is included in the gh-pages branch,
2 | ## when `gulp deploy` is used to push updates to the demo site.
3 | 
4 | # Dependency directory
5 | node_modules
6 | 
7 | #
8 | example
9 | 


--------------------------------------------------------------------------------
/example/src/Home.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | class Home extends React.Component {
 4 |   constructor(props) {
 5 |     super(props);
 6 |   }
 7 | 
 8 |   render() {
 9 |     return <div>Home</div>;
10 |   }
11 | }
12 | 
13 | export default Home;
14 | 


--------------------------------------------------------------------------------
/example/src/images.js:
--------------------------------------------------------------------------------
 1 | import sofia from './images/Sofia Acey.jpg';
 2 | import joseph from './images/Joseph Barish.jpg';
 3 | import sarah from './images/Sarah Benson.jpg';
 4 | 
 5 | const images = {
 6 |   sofia,
 7 |   joseph,
 8 |   sarah
 9 | };
10 | 
11 | export default images;
12 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # This file is for unifying the coding style for different editors and IDEs
 2 | # editorconfig.org
 3 | root = true
 4 | 
 5 | [*]
 6 | end_of_line = lf
 7 | charset = utf-8
 8 | trim_trailing_whitespace = false
 9 | insert_final_newline = true
10 | indent_style = space
11 | indent_size = 2
12 | 
13 | [*.json]
14 | indent_style = space
15 | indent_size = 2
16 | 


--------------------------------------------------------------------------------
/example/src/example.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import { BrowserRouter as Router } from 'react-router-dom';
 4 | 
 5 | import App from './App';
 6 | 
 7 | import 'highlight.js/styles/github.css';
 8 | import './example.less';
 9 | 
10 | ReactDOM.render(
11 |   <Router>
12 |     <App />
13 |   </Router>,
14 |   document.getElementById('root')
15 | );
16 | 


--------------------------------------------------------------------------------
/src/CardBody.js:
--------------------------------------------------------------------------------
 1 | import PropTypes from 'prop-types';
 2 | import React from 'react';
 3 | import { Panel } from 'react-bootstrap';
 4 | 
 5 | class CardBody extends React.Component {
 6 |   render() {
 7 |     return <Panel.Body {...this.props}>{this.props.children}</Panel.Body>;
 8 |   }
 9 | }
10 | 
11 | CardBody.propTypes = {
12 |   children: PropTypes.node
13 | };
14 | 
15 | export default CardBody;
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | 
 5 | # Runtime data
 6 | pids
 7 | *.pid
 8 | *.seed
 9 | 
10 | # Coverage tools
11 | lib-cov
12 | coverage
13 | coverage.html
14 | .cover*
15 | 
16 | # Dependency directory
17 | node_modules
18 | 
19 | # Example build directory
20 | example/dist
21 | .publish
22 | 
23 | # Editor and other tmp files
24 | *.swp
25 | *.un~
26 | *.iml
27 | *.ipr
28 | *.iws
29 | *.sublime-*
30 | .idea/
31 | *.DS_Store
32 | 


--------------------------------------------------------------------------------
/example/src/sections/Section.js:
--------------------------------------------------------------------------------
 1 | import PropTypes from 'prop-types';
 2 | import React from 'react';
 3 | import classNames from 'classnames';
 4 | 
 5 | class Section extends React.Component {
 6 |   render() {
 7 |     return (
 8 |       <div
 9 |         {...this.props}
10 |         className={classNames(this.props.className, 'bs-docs-section')}
11 |       >
12 |         {this.props.children}
13 |       </div>
14 |     );
15 |   }
16 | }
17 | 
18 | Section.propTypes = {
19 |   children: PropTypes.node,
20 |   className: PropTypes.string
21 | };
22 | 
23 | export default Section;
24 | 


--------------------------------------------------------------------------------
/example/src/sections/Example.js:
--------------------------------------------------------------------------------
 1 | import PropTypes from 'prop-types';
 2 | import React from 'react';
 3 | import classNames from 'classnames';
 4 | 
 5 | class Example extends React.Component {
 6 |   render() {
 7 |     const classes = {
 8 |       'bs-example': true,
 9 |       'bs-example-type': true
10 |     };
11 |     return (
12 |       <div
13 |         {...this.props}
14 |         className={classNames(this.props.className, classes)}
15 |       >
16 |         {this.props.children}
17 |       </div>
18 |     );
19 |   }
20 | }
21 | 
22 | Example.propTypes = {
23 |   children: PropTypes.node,
24 |   className: PropTypes.string
25 | };
26 | 
27 | export default Example;
28 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-bootcards",
 3 |   "version": "0.2.0",
 4 |   "description": "react-bootcards",
 5 |   "main": "dist/react-bootcards.min.js",
 6 |   "homepage": "https://github.com/kobanyan/react-bootcards",
 7 |   "authors": [
 8 |     "kobanyan"
 9 |   ],
10 |   "moduleType": [
11 |     "amd",
12 |     "globals",
13 |     "node"
14 |   ],
15 |   "keywords": [
16 |     "react",
17 |     "react-component",
18 |     "bootstrap",
19 |     "bootcards"
20 |   ],
21 |   "license": "MIT",
22 |   "ignore": [
23 |     ".editorconfig",
24 |     ".gitignore",
25 |     "package.json",
26 |     "src",
27 |     "node_modules",
28 |     "example",
29 |     "test"
30 |   ]
31 | }
32 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import Container from './Container';
 2 | import Cards from './Cards';
 3 | import List from './List';
 4 | import ListGroupItemHeader from './ListGroupItemHeader';
 5 | import ListGroupItemText from './ListGroupItemText';
 6 | import Card from './Card';
 7 | import CardHeader from './CardHeader';
 8 | import CardTitle from './CardTitle';
 9 | import CardFooter from './CardFooter';
10 | import CardBody from './CardBody';
11 | import SummaryItem from './SummaryItem';
12 | import ChartCanvas from './ChartCanvas';
13 | 
14 | export {
15 |   Container,
16 |   Cards,
17 |   List,
18 |   ListGroupItemHeader,
19 |   ListGroupItemText,
20 |   Card,
21 |   CardHeader,
22 |   CardTitle,
23 |   CardFooter,
24 |   CardBody,
25 |   SummaryItem,
26 |   ChartCanvas
27 | };
28 | 


--------------------------------------------------------------------------------
/src/List.js:
--------------------------------------------------------------------------------
 1 | import PropTypes from 'prop-types';
 2 | import React from 'react';
 3 | import classNames from 'classnames';
 4 | import { Col } from 'react-bootstrap';
 5 | 
 6 | class List extends React.Component {
 7 |   constructor(props) {
 8 |     super(props);
 9 |   }
10 | 
11 |   render() {
12 |     const { listClassName, className, ...props } = this.props;
13 |     return (
14 |       <Col {...props} className={classNames(className, listClassName)}>
15 |         {this.props.children}
16 |       </Col>
17 |     );
18 |   }
19 | }
20 | 
21 | List.propTypes = {
22 |   children: PropTypes.node,
23 |   className: PropTypes.string,
24 |   listClassName: PropTypes.string
25 | };
26 | 
27 | List.defaultProps = {
28 |   listClassName: 'bootcards-list'
29 | };
30 | 
31 | export default List;
32 | 


--------------------------------------------------------------------------------
/src/Cards.js:
--------------------------------------------------------------------------------
 1 | import PropTypes from 'prop-types';
 2 | import React from 'react';
 3 | import classNames from 'classnames';
 4 | import { Col } from 'react-bootstrap';
 5 | 
 6 | class Cards extends React.Component {
 7 |   constructor(props) {
 8 |     super(props);
 9 |   }
10 | 
11 |   render() {
12 |     const { cardsClassName, className, ...props } = this.props;
13 |     return (
14 |       <Col {...props} className={classNames(className, cardsClassName)}>
15 |         {this.props.children}
16 |       </Col>
17 |     );
18 |   }
19 | }
20 | 
21 | Cards.propTypes = {
22 |   cardsClassName: PropTypes.string,
23 |   children: PropTypes.node,
24 |   className: PropTypes.string
25 | };
26 | 
27 | Cards.defaultProps = {
28 |   cardsClassName: 'bootcards-cards'
29 | };
30 | 
31 | export default Cards;
32 | 


--------------------------------------------------------------------------------
/package-scripts.js:
--------------------------------------------------------------------------------
 1 | const npsUtils = require('nps-utils');
 2 | const series = npsUtils.series;
 3 | const rimraf = npsUtils.rimraf;
 4 | const concurrent = npsUtils.concurrent;
 5 | 
 6 | module.exports = {
 7 |   scripts: {
 8 |     build: {
 9 |       description: 'clean dist directory and run all builds',
10 |       default: series(
11 |         rimraf('dist'),
12 |         rimraf('lib'),
13 |         concurrent.nps('build.rollup', 'build.babel')
14 |       ),
15 |       rollup: 'rollup --config',
16 |       babel: 'babel src -d lib'
17 |     },
18 |     publish: {
19 |       default: series(
20 |         rimraf('example/dist'),
21 |         'webpack --progress -p',
22 |         'cp example/src/.gitignore example/dist/.gitignore',
23 |         'gh-pages -d example/dist'
24 |       )
25 |     }
26 |   }
27 | };
28 | 


--------------------------------------------------------------------------------
/src/CardTitle.js:
--------------------------------------------------------------------------------
 1 | import PropTypes from 'prop-types';
 2 | import React from 'react';
 3 | import classNames from 'classnames';
 4 | 
 5 | class CardTitle extends React.Component {
 6 |   constructor(props) {
 7 |     super(props);
 8 |   }
 9 | 
10 |   render() {
11 |     const { componentClass, titleClassName, className, ...props } = this.props;
12 |     const Component = componentClass;
13 |     return (
14 |       <Component {...props} className={classNames(className, titleClassName)}>
15 |         {this.props.children}
16 |       </Component>
17 |     );
18 |   }
19 | }
20 | 
21 | CardTitle.propTypes = {
22 |   children: PropTypes.node,
23 |   className: PropTypes.string,
24 |   componentClass: PropTypes.string,
25 |   titleClassName: PropTypes.string
26 | };
27 | 
28 | CardTitle.defaultProps = {
29 |   componentClass: 'h3',
30 |   titleClassName: 'panel-title'
31 | };
32 | 
33 | export default CardTitle;
34 | 


--------------------------------------------------------------------------------
/src/CardFooter.js:
--------------------------------------------------------------------------------
 1 | import PropTypes from 'prop-types';
 2 | import React from 'react';
 3 | import classNames from 'classnames';
 4 | 
 5 | class CardFooter extends React.Component {
 6 |   constructor(props) {
 7 |     super(props);
 8 |   }
 9 | 
10 |   render() {
11 |     const { componentClass, footerClassName, className, ...props } = this.props;
12 |     const Component = componentClass;
13 |     return (
14 |       <Component {...props} className={classNames(className, footerClassName)}>
15 |         {this.props.children}
16 |       </Component>
17 |     );
18 |   }
19 | }
20 | 
21 | CardFooter.propTypes = {
22 |   children: PropTypes.node,
23 |   className: PropTypes.string,
24 |   componentClass: PropTypes.string,
25 |   footerClassName: PropTypes.string
26 | };
27 | 
28 | CardFooter.defaultProps = {
29 |   componentClass: 'div',
30 |   footerClassName: 'panel-footer'
31 | };
32 | 
33 | export default CardFooter;
34 | 


--------------------------------------------------------------------------------
/src/CardHeader.js:
--------------------------------------------------------------------------------
 1 | import PropTypes from 'prop-types';
 2 | import React from 'react';
 3 | import classNames from 'classnames';
 4 | 
 5 | class CardHeader extends React.Component {
 6 |   constructor(props) {
 7 |     super(props);
 8 |   }
 9 | 
10 |   render() {
11 |     const { componentClass, headerClassName, className, ...props } = this.props;
12 |     const Component = componentClass;
13 |     return (
14 |       <Component {...props} className={classNames(className, headerClassName)}>
15 |         {this.props.children}
16 |       </Component>
17 |     );
18 |   }
19 | }
20 | 
21 | CardHeader.propTypes = {
22 |   children: PropTypes.node,
23 |   className: PropTypes.string,
24 |   componentClass: PropTypes.string,
25 |   headerClassName: PropTypes.string
26 | };
27 | 
28 | CardHeader.defaultProps = {
29 |   componentClass: 'div',
30 |   headerClassName: 'panel-heading'
31 | };
32 | 
33 | export default CardHeader;
34 | 


--------------------------------------------------------------------------------
/example/src/sections/Modals.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Alert } from 'react-bootstrap';
 3 | 
 4 | import Section from './Section';
 5 | 
 6 | class Modals extends React.Component {
 7 |   render() {
 8 |     return (
 9 |       <Section id="doc-modals">
10 |         <h2>Modals</h2>
11 |         <p className="lead">
12 |           Sometimes, you'll want to put something like a form or an important
13 |           message in a modal, obscuring the other content completely.
14 |         </p>
15 |         <p>
16 |           The markup is quite similar to Cards, with a header, body, and footer.
17 |         </p>
18 |         <Alert bsStyle="warning">
19 |           Remember to wrap buttons in the header of your modals in &lt;div
20 |           className=&quot;btn-group&quot;&gt; or your buttons might not work.
21 |         </Alert>
22 |       </Section>
23 |     );
24 |   }
25 | }
26 | 
27 | export default Modals;
28 | 


--------------------------------------------------------------------------------
/src/SummaryItem.js:
--------------------------------------------------------------------------------
 1 | import PropTypes from 'prop-types';
 2 | import React from 'react';
 3 | import classNames from 'classnames';
 4 | 
 5 | class SummaryItem extends React.Component {
 6 |   constructor(props) {
 7 |     super(props);
 8 |   }
 9 | 
10 |   render() {
11 |     const { componentClass, itemClassName, className, ...props } = this.props;
12 |     const Component = componentClass;
13 |     return (
14 |       <Component {...props} className={classNames(className, itemClassName)}>
15 |         {this.props.children}
16 |       </Component>
17 |     );
18 |   }
19 | }
20 | 
21 | SummaryItem.propTypes = {
22 |   children: PropTypes.node,
23 |   className: PropTypes.string,
24 |   componentClass: PropTypes.string,
25 |   itemClassName: PropTypes.string
26 | };
27 | 
28 | SummaryItem.defaultProps = {
29 |   componentClass: 'a',
30 |   itemClassName: 'bootcards-summary-item'
31 | };
32 | 
33 | export default SummaryItem;
34 | 


--------------------------------------------------------------------------------
/example/src/sections/Navigation.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import Section from './Section';
 4 | 
 5 | class Navigation extends React.Component {
 6 |   render() {
 7 |     return (
 8 |       <Section id="doc-navigation">
 9 |         <h2>Navigation</h2>
10 |         <p className="lead">
11 |           Bootcards offers 3 navigation methods: the Navbar, Footer Bar, or
12 |           Sliding Sidebar.
13 |         </p>
14 |         <p>
15 |           What you use will depend on the needs of your app, and the number of
16 |           top-level navigation items. Apps with fewer items would suit using
17 |           footer navigation on mobile, as they're always accessible, but footer
18 |           navigation may be impractical for apps with many top level navigation
19 |           items as it can only fit 4 on phones.
20 |         </p>
21 |       </Section>
22 |     );
23 |   }
24 | }
25 | 
26 | export default Navigation;
27 | 


--------------------------------------------------------------------------------
/src/ChartCanvas.js:
--------------------------------------------------------------------------------
 1 | import PropTypes from 'prop-types';
 2 | import React from 'react';
 3 | import classNames from 'classnames';
 4 | 
 5 | class ChartCanvas extends React.Component {
 6 |   constructor(props) {
 7 |     super(props);
 8 |   }
 9 | 
10 |   render() {
11 |     const { componentClass, canvasClassName, className, ...props } = this.props;
12 |     const Component = componentClass;
13 |     return (
14 |       <Component {...props} className={classNames(className, canvasClassName)}>
15 |         {this.props.children}
16 |       </Component>
17 |     );
18 |   }
19 | }
20 | 
21 | ChartCanvas.propTypes = {
22 |   canvasClassName: PropTypes.string,
23 |   children: PropTypes.node,
24 |   className: PropTypes.string,
25 |   componentClass: PropTypes.string
26 | };
27 | 
28 | ChartCanvas.defaultProps = {
29 |   componentClass: 'div',
30 |   canvasClassName: 'bootcards-chart-canvas'
31 | };
32 | 
33 | export default ChartCanvas;
34 | 


--------------------------------------------------------------------------------
/example/src/sections/Grid.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import Section from './Section';
 4 | 
 5 | class Grid extends React.Component {
 6 |   render() {
 7 |     return (
 8 |       <Section id="doc-grid">
 9 |         <h2>Grid System</h2>
10 |         <p className="lead">
11 |           Bootcards builds on Twitter Bootstrap's grid system to allow separate
12 |           column scrolling in touchscreen devices.
13 |         </p>
14 |         <p>
15 |           The 2 main top-level columns are <code>.bootcards-list</code> (which
16 |           is used to navigate your app) and <code>.bootcards-cards</code> (which
17 |           contains your app's content). In desktop browsers, these will behave
18 |           like regular bootstrap columns, but on touchscreen devices the user
19 |           will be able to scroll them separately.
20 |         </p>
21 |       </Section>
22 |     );
23 |   }
24 | }
25 | 
26 | export default Grid;
27 | 


--------------------------------------------------------------------------------
/src/ListGroupItemText.js:
--------------------------------------------------------------------------------
 1 | import PropTypes from 'prop-types';
 2 | import React from 'react';
 3 | import classNames from 'classnames';
 4 | 
 5 | class ListGroupItemText extends React.Component {
 6 |   constructor(props) {
 7 |     super(props);
 8 |   }
 9 | 
10 |   render() {
11 |     const { componentClass, textClassName, className, ...props } = this.props;
12 |     const Component = componentClass;
13 |     return (
14 |       <Component {...props} className={classNames(className, textClassName)}>
15 |         {this.props.children}
16 |       </Component>
17 |     );
18 |   }
19 | }
20 | 
21 | ListGroupItemText.propTypes = {
22 |   children: PropTypes.node,
23 |   className: PropTypes.string,
24 |   componentClass: PropTypes.string,
25 |   textClassName: PropTypes.string
26 | };
27 | 
28 | ListGroupItemText.defaultProps = {
29 |   componentClass: 'p',
30 |   textClassName: 'list-group-item-text'
31 | };
32 | 
33 | export default ListGroupItemText;
34 | 


--------------------------------------------------------------------------------
/src/Container.js:
--------------------------------------------------------------------------------
 1 | import PropTypes from 'prop-types';
 2 | import React from 'react';
 3 | import classNames from 'classnames';
 4 | 
 5 | class Container extends React.Component {
 6 |   constructor(props) {
 7 |     super(props);
 8 |   }
 9 | 
10 |   render() {
11 |     const {
12 |       componentClass,
13 |       headingClassName,
14 |       className,
15 |       ...props
16 |     } = this.props;
17 |     const Component = componentClass;
18 |     return (
19 |       <Component {...props} className={classNames(className, headingClassName)}>
20 |         {this.props.children}
21 |       </Component>
22 |     );
23 |   }
24 | }
25 | 
26 | Container.propTypes = {
27 |   children: PropTypes.node,
28 |   className: PropTypes.string,
29 |   componentClass: PropTypes.string,
30 |   headingClassName: PropTypes.string
31 | };
32 | 
33 | Container.defaultProps = {
34 |   componentClass: 'div',
35 |   headingClassName: 'container'
36 | };
37 | 
38 | export default Container;
39 | 


--------------------------------------------------------------------------------
/src/ListGroupItemHeader.js:
--------------------------------------------------------------------------------
 1 | import PropTypes from 'prop-types';
 2 | import React from 'react';
 3 | import classNames from 'classnames';
 4 | 
 5 | class ListGroupItemHeader extends React.Component {
 6 |   constructor(props) {
 7 |     super(props);
 8 |   }
 9 | 
10 |   render() {
11 |     const { componentClass, headerClassName, className, ...props } = this.props;
12 |     const Component = componentClass;
13 |     return (
14 |       <Component {...props} className={classNames(className, headerClassName)}>
15 |         {this.props.children}
16 |       </Component>
17 |     );
18 |   }
19 | }
20 | 
21 | ListGroupItemHeader.propTypes = {
22 |   children: PropTypes.node,
23 |   className: PropTypes.string,
24 |   componentClass: PropTypes.string,
25 |   headerClassName: PropTypes.string
26 | };
27 | 
28 | ListGroupItemHeader.defaultProps = {
29 |   componentClass: 'h4',
30 |   headerClassName: 'list-group-item-heading'
31 | };
32 | 
33 | export default ListGroupItemHeader;
34 | 


--------------------------------------------------------------------------------
/src/Card.js:
--------------------------------------------------------------------------------
 1 | import PropTypes from 'prop-types';
 2 | import React from 'react';
 3 | import classNames from 'classnames';
 4 | import { Panel } from 'react-bootstrap';
 5 | 
 6 | class Card extends React.Component {
 7 |   constructor(props) {
 8 |     super(props);
 9 |   }
10 | 
11 |   render() {
12 |     const { cardStyle, ...props } = this.props;
13 |     const cardClassName =
14 |       cardStyle === 'default' ? null : `bootcards-${cardStyle}`;
15 |     return (
16 |       <Panel {...props} className={classNames(props.className, cardClassName)}>
17 |         {this.props.children}
18 |       </Panel>
19 |     );
20 |   }
21 | }
22 | 
23 | Card.propTypes = {
24 |   cardStyle: PropTypes.oneOf([
25 |     'default',
26 |     'chart',
27 |     'summary',
28 |     'media',
29 |     'file',
30 |     'richtext'
31 |   ]),
32 |   children: PropTypes.node,
33 |   className: PropTypes.string
34 | };
35 | 
36 | Card.defaultProps = {
37 |   cardStyle: 'default'
38 | };
39 | 
40 | export default Card;
41 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   parserOptions: {
 3 |     ecmaVersion: 6,
 4 |     sourceType: 'module',
 5 |     ecmaFeatures: {
 6 |       experimentalObjectRestSpread: true,
 7 |       jsx: true
 8 |     }
 9 |   },
10 |   env: {
11 |     browser: true,
12 |     es6: true,
13 |     node: true
14 |   },
15 |   plugins: ['react'],
16 |   rules: {
17 |     curly: [2, 'multi-line'],
18 |     'jsx-quotes': 1,
19 |     'no-shadow': 0,
20 |     'no-trailing-spaces': 0,
21 |     'no-underscore-dangle': 0,
22 |     'no-unused-expressions': 0,
23 |     'object-curly-spacing': [1, 'always'],
24 |     quotes: [2, 'single', 'avoid-escape'],
25 |     'react/jsx-boolean-value': 1,
26 |     'react/jsx-no-undef': 1,
27 |     'react/jsx-uses-react': 1,
28 |     'react/jsx-uses-vars': 1,
29 |     'react/jsx-wrap-multilines': 1,
30 |     'react/no-did-mount-set-state': 1,
31 |     'react/no-did-update-set-state': 1,
32 |     'react/no-unknown-property': 1,
33 |     'react/prop-types': 1,
34 |     'react/react-in-jsx-scope': 1,
35 |     'react/self-closing-comp': 1,
36 |     'react/sort-comp': 1,
37 |     'react/sort-prop-types': 1,
38 |     semi: 2,
39 |     strict: 0
40 |   }
41 | };
42 | 


--------------------------------------------------------------------------------
/example/src/sections/Highlight.js:
--------------------------------------------------------------------------------
 1 | import PropTypes from 'prop-types';
 2 | import React from 'react';
 3 | import ReactDOM from 'react-dom';
 4 | import classNames from 'classnames';
 5 | import hljs from 'highlight.js';
 6 | 
 7 | class Highlight extends React.Component {
 8 |   componentDidMount() {
 9 |     this.highlightCode();
10 |   }
11 | 
12 |   componentDidUpdate() {
13 |     this.highlightCode();
14 |   }
15 | 
16 |   highlightCode() {
17 |     let domNode = ReactDOM.findDOMNode(this);
18 |     let nodes = domNode.querySelectorAll('pre code');
19 |     if (nodes.length > 0) {
20 |       for (let i = 0; i < nodes.length; i++) {
21 |         hljs.highlightBlock(nodes[i]);
22 |       }
23 |     }
24 |   }
25 | 
26 |   render() {
27 |     const { className, highlightClassName, ...props } = this.props;
28 |     return (
29 |       <div {...props} className={classNames(className, 'highlight')}>
30 |         <pre>
31 |           <code className={highlightClassName}>{this.props.children}</code>
32 |         </pre>
33 |       </div>
34 |     );
35 |   }
36 | }
37 | 
38 | Highlight.propTypes = {
39 |   children: PropTypes.node,
40 |   className: PropTypes.string,
41 |   highlightClassName: PropTypes.string
42 | };
43 | 
44 | Highlight.defaultProps = {
45 |   highlightClassName: 'xml'
46 | };
47 | 
48 | export default Highlight;
49 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-bootcards
 2 | 
 3 | [Bootcards](http://bootcards.org/) components built with [React](http://facebook.github.io/react/)
 4 | 
 5 | [![NPM version](https://badge.fury.io/js/react-bootcards.svg)](https://badge.fury.io/js/react-bootcards)
 6 | [![Dependency Status](https://david-dm.org/kobanyan/react-bootcards.svg)](https://david-dm.org/kobanyan/react-bootcards)
 7 | [![devDependency Status](https://david-dm.org/kobanyan/react-bootcards/dev-status.svg)](https://david-dm.org/kobanyan/react-bootcards#info=devDependencies)
 8 | [![peerDependency Status](https://david-dm.org/kobanyan/react-bootcards/peer-status.svg)](https://david-dm.org/kobanyan/react-bootcards#info=peerDependencies)
 9 | 
10 | ## Demo & Examples
11 | 
12 | Live demo: [kobanyan.github.io/react-bootcards](http://kobanyan.github.io/react-bootcards/)
13 | 
14 | To build the examples locally, run:
15 | 
16 | ```
17 | yarn install
18 | yarn start
19 | ```
20 | 
21 | Then open [`localhost:8000`](http://localhost:8000) in a browser.
22 | 
23 | 
24 | ## Installation
25 | 
26 | The easiest way to use react-bootcards is to install it from NPM and include it in your own React build process (using [Browserify](http://browserify.org), [Webpack](http://webpack.github.io/), etc).
27 | 
28 | You can also use the standalone build by including `dist/react-bootcards.js` in your page. If you use this, make sure you have already included React, and it is available as a global variable.
29 | 
30 | ```
31 | npm install react-bootcards --save
32 | ```
33 | 
34 | or
35 | 
36 | ```
37 | yarn add react-bootcards
38 | ```
39 | 
40 | 
41 | ## License
42 | 
43 | MIT License
44 | 


--------------------------------------------------------------------------------
/example/src/sections/ChartCard.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import {
 3 |   Card,
 4 |   CardHeader,
 5 |   CardTitle,
 6 |   ChartCanvas,
 7 |   CardFooter
 8 | } from 'react-bootcards';
 9 | 
10 | import Section from './Section';
11 | import Example from './Example';
12 | 
13 | class ChartCard extends React.Component {
14 |   componentDidMount() {
15 |     Morris.Bar({
16 |       element: 'barChart',
17 |       data: [
18 |         { person: 'Guy Bardsley', sales: 550 },
19 |         { person: 'Adam Callahan', sales: 1500 },
20 |         { person: 'Arlo Geist', sales: 3750 },
21 |         { person: 'Sheila Hutchins', sales: 3500 }
22 |       ],
23 |       xkey: 'person',
24 |       ykeys: ['sales'],
25 |       labels: ['Sales'],
26 |       hideHover: 'auto',
27 |       resize: true
28 |     });
29 |   }
30 | 
31 |   render() {
32 |     return (
33 |       <Section id="doc-chartcard">
34 |         <h3>Chart Cards</h3>
35 |         <p className="lead">Chart cards contain charts powered by Morris.js.</p>
36 |         <p>
37 |           These can be used with Table cards in order to toggle between a chart
38 |           view and the raw data.
39 |         </p>
40 |         <Example>
41 |           <Card cardStyle="chart">
42 |             <CardHeader>
43 |               <CardTitle>Chart Card Heading</CardTitle>
44 |             </CardHeader>
45 |             <ChartCanvas id="barChart" />
46 |             <CardFooter>
47 |               <small>Built with Bootcards - Base Card</small>
48 |             </CardFooter>
49 |           </Card>
50 |         </Example>
51 |       </Section>
52 |     );
53 |   }
54 | }
55 | 
56 | export default ChartCard;
57 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import babel from 'rollup-plugin-babel';
 2 | import resolve from 'rollup-plugin-node-resolve';
 3 | import uglify from 'rollup-plugin-uglify';
 4 | import { minify } from 'uglify-es';
 5 | 
 6 | const name = 'react-bootcards';
 7 | const path = 'dist/react-bootcards';
 8 | const globals = {
 9 |   classnames: 'classNames',
10 |   'prop-types': 'PropTypes',
11 |   'react-dom': 'ReactDOM',
12 |   'react-bootstrap': 'ReactBootstrap',
13 |   react: 'React'
14 | };
15 | const external = Object.keys(globals);
16 | const babelOptions = production => {
17 |   let result = {
18 |     babelrc: false,
19 |     presets: [['env', { modules: false }], 'stage-0', 'react'],
20 |     plugins: ['external-helpers']
21 |   };
22 |   if (production) {
23 |     result.plugins.push('transform-react-remove-prop-types');
24 |   }
25 |   return result;
26 | };
27 | 
28 | export default [
29 |   {
30 |     input: 'src/index.js',
31 |     output: {
32 |       file: path + '.es.js',
33 |       format: 'es'
34 |     },
35 |     external: external,
36 |     plugins: [babel(babelOptions(false))]
37 |   },
38 |   {
39 |     input: 'src/index.js',
40 |     output: {
41 |       name: name,
42 |       file: path + '.js',
43 |       format: 'umd'
44 |     },
45 |     globals: globals,
46 |     external: external,
47 |     plugins: [babel(babelOptions(false)), resolve()]
48 |   },
49 |   {
50 |     input: 'src/index.js',
51 |     output: {
52 |       name: name,
53 |       file: path + '.min.js',
54 |       format: 'umd'
55 |     },
56 |     globals: globals,
57 |     external: external,
58 |     plugins: [babel(babelOptions(true)), resolve(), uglify({}, minify)]
59 |   }
60 | ];
61 | 


--------------------------------------------------------------------------------
/example/src/sections/Submenus.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import Section from './Section';
 4 | import Highlight from './Highlight';
 5 | 
 6 | class Submenus extends React.Component {
 7 |   render() {
 8 |     return (
 9 |       <Section id="doc-submenus">
10 |         <h4>Submenus</h4>
11 |         <p>
12 |           Using the standard Bootstap 'collapse' function, the offcanvas can
13 |           also contain menu options with submenu options.
14 |         </p>
15 |         <Highlight>
16 |           {
17 |             '<!--option with submenu-->\n<li class="collapse litop4">\n  <a href="#otherControls" class="bootcards-parent" data-toggle="collapse" data-parent=".collapse">\n    <i class="fa fa-lg fa-fw fa-chevron-circle-right"></i> Settings\n  </a>\n  <div id="otherControls" class="collapse in">\n    <ul class="nav navmenu-nav"><li >\n      <a href="#" ><i class="fa fa-lg fa-fw fa-cog"></i> General</a></li>\n    <li>\n      <a href="#"><i class="fa fa-lg fa-fw fa-user"></i> Account</a>\n    </li>\n     <li>\n      <a href="#"><i class="fa fa-lg fa-fw fa-refresh"></i> Sync</a>\n    </li>\n    </ul>\n  </div>\n</li>'
18 |           }
19 |         </Highlight>
20 |         <p>
21 |           Enable the collapsible menu using the following script:{' '}
22 |           <code>$('.collapse').collapse();</code>
23 |         </p>
24 |         <p>
25 |           For more details, see{' '}
26 |           <a
27 |             href="http://getbootstrap.com/javascript/#collapse"
28 |             target="_blank"
29 |           >
30 |             here
31 |           </a>.
32 |         </p>
33 |       </Section>
34 |     );
35 |   }
36 | }
37 | 
38 | export default Submenus;
39 | 


--------------------------------------------------------------------------------
/example/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <meta charset="utf-8">
 4 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
 6 |   <title>Bootcards documentation</title>
 7 |   <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 8 |   <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootcards/1.1.0/css/bootcards-desktop.min.css">
 9 |   <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-CmLV3WR+cw/TcN50vJSYAs2EAzhDD77tQvGcmoZ1KEzxtpl2K5xkrpFz9N2H9ClN" crossorigin="anonymous">
10 |   <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
11 |   <link rel="stylesheet" href="example.css">
12 | </head>
13 | <body>
14 |   <div id="root"></div>
15 |   <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
16 |   <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
17 |   <script src="http://cdnjs.cloudflare.com/ajax/libs/bootcards/1.1.0/js/bootcards.min.js"></script>
18 |   <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
19 |   <script src="http://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.js"></script>
20 |   <script src="common.js"></script>
21 |   <script src="example.js"></script>
22 | </body>
23 | 


--------------------------------------------------------------------------------
/example/src/About.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Row, Well } from 'react-bootstrap';
 3 | 
 4 | class About extends React.Component {
 5 |   constructor(props) {
 6 |     super(props);
 7 |   }
 8 | 
 9 |   render() {
10 |     return (
11 |       <Row>
12 |         <Well className="col-md-6">
13 |           <p>
14 |             Bootcards is an open source project created by{' '}
15 |             <a href="http://www.twitter.com/markleusink" target="_blank">
16 |               @markleusink
17 |             </a>,{' '}
18 |             <a href="http://www.twitter.com/sives" target="_blank">
19 |               @sives
20 |             </a>{' '}
21 |             and{' '}
22 |             <a href="http://www.twitter.com/jackherbert" target="_blank">
23 |               @jackherbert
24 |             </a>{' '}
25 |             and sponsored by{' '}
26 |             <a href="http://www.teamstudio.com" target="_blank">
27 |               Teamstudio
28 |             </a>.
29 |           </p>
30 |           <p>
31 |             It was originally released on Monday April 14th 2014. It was created
32 |             to meet Teamstudio's need for a modular user interface framework
33 |             that could be used to build enterprise mobile apps very quickly. By
34 |             building on top of Bootstrap, Bootcards takes advantage of
35 |             Bootstrap's great capabilities, whilst adding support for the{' '}
36 |             <a
37 |               href="http://insideintercom.io/why-cards-are-the-future-of-the-web/"
38 |               target="_blank"
39 |             >
40 |               Cards design pattern
41 |             </a>.
42 |           </p>
43 |         </Well>
44 |       </Row>
45 |     );
46 |   }
47 | }
48 | 
49 | export default About;
50 | 


--------------------------------------------------------------------------------
/example/src/sections/Cards.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Panel, Button } from 'react-bootstrap';
 3 | import { CardHeader, CardTitle, CardBody, CardFooter } from 'react-bootcards';
 4 | 
 5 | import Section from './Section';
 6 | import Example from './Example';
 7 | 
 8 | class Cards extends React.Component {
 9 |   render() {
10 |     return (
11 |       <Section id="doc-cards">
12 |         <h2>Cards</h2>
13 |         <p className="lead">
14 |           Cards are the core of Bootcards, and contain your app's content.
15 |           Different Cards are available for different types of content (text,
16 |           tables, forms, charts, media, files, etc).
17 |         </p>
18 |         <p>
19 |           Cards are based on the same markup as Bootstrap's <code>.panel</code>.
20 |           Each card can have a <code>.panel-heading</code>,{' '}
21 |           <code>.panel-body</code> and a <code>.panel-footer</code>. All of
22 |           these are optional, so just use whichever parts your app needs. You
23 |           can even use multiple headers or footers (e.g. if you needed separate
24 |           footer areas separated by a divider).
25 |         </p>
26 |         <Example>
27 |           <Panel>
28 |             <CardHeader className="clearfix">
29 |               <CardTitle className="pull-left">Card Title</CardTitle>
30 |               <Button className="pull-right">
31 |                 <i className="fa fa-check" />
32 |                 Button
33 |               </Button>
34 |             </CardHeader>
35 |             <CardBody>
36 |               <p>Card content...</p>
37 |             </CardBody>
38 |             <CardFooter>
39 |               <small>Card footer...</small>
40 |             </CardFooter>
41 |           </Panel>
42 |         </Example>
43 |       </Section>
44 |     );
45 |   }
46 | }
47 | 
48 | export default Cards;
49 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack');
 2 | const path = require('path');
 3 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
 5 | 
 6 | module.exports = {
 7 |   context: path.resolve(__dirname, 'example/src'),
 8 |   entry: {
 9 |     example: './example.js'
10 |   },
11 |   output: {
12 |     path: path.resolve(__dirname, 'example/dist'),
13 |     filename: '[name].js',
14 |     publicPath: '/'
15 |   },
16 |   devServer: {
17 |     contentBase: path.resolve(__dirname, 'example/src'),
18 |     port: 8000
19 |   },
20 |   module: {
21 |     rules: [
22 |       {
23 |         test: /\.js$/,
24 |         exclude: [/node_modules/],
25 |         use: [
26 |           {
27 |             loader: 'babel-loader',
28 |             options: { presets: ['env'] }
29 |           }
30 |         ]
31 |       },
32 |       {
33 |         test: /\.(less|css)$/,
34 |         use: ExtractTextPlugin.extract({
35 |           fallback: 'style-loader',
36 |           use: ['css-loader', 'less-loader']
37 |         })
38 |       },
39 |       {
40 |         test: /\.jpg$/,
41 |         use: [
42 |           {
43 |             loader: 'url-loader'
44 |           }
45 |         ]
46 |       },
47 |       {
48 |         test: /\.html$/,
49 |         use: [
50 |           {
51 |             loader: 'html-loader'
52 |           }
53 |         ]
54 |       }
55 |     ]
56 |   },
57 |   resolve: {
58 |     alias: {
59 |       'react-bootcards': path.resolve(__dirname, 'src/index')
60 |     }
61 |   },
62 |   plugins: [
63 |     new webpack.optimize.CommonsChunkPlugin({
64 |       name: 'common',
65 |       filename: 'common.js',
66 |       minChunk: 2
67 |     }),
68 |     new HtmlWebpackPlugin({
69 |       filename: 'index.html',
70 |       inject: false,
71 |       template: path.resolve(__dirname, 'example/src/index.html')
72 |     }),
73 |     new ExtractTextPlugin('example.css')
74 |   ]
75 | };
76 | 


--------------------------------------------------------------------------------
/example/src/sections/SlidingSidebar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import Section from './Section';
 4 | import Highlight from './Highlight';
 5 | 
 6 | class SlidingSidebar extends React.Component {
 7 |   render() {
 8 |     return (
 9 |       <Section id="doc-slidingsidebar">
10 |         <h3>Sliding Sidebar ('offcanvas')</h3>
11 |         <p className="lead">
12 |           The Sliding Sidebar offers complex apps more space navigation items.
13 |         </p>
14 |         <p>
15 |           This is hidden by default, and accessed when required via a Menu
16 |           button on the left-hand side of the Navbar.
17 |         </p>
18 |         <p>
19 |           On desktop browsers, the Sliding Sidebar is inactive, as it's
20 |           unnecessary.
21 |         </p>
22 |         <p>The Sliding Sidebar consists of two elements:</p>
23 |         <li>A button to show/ hide the sidebar:</li>
24 |         <p />
25 |         <Highlight>
26 |           {
27 |             '<button type="button" class="btn btn-default btn-menu" data-toggle="offcanvas">\n  <i class="fa fa-lg fa-bars"></i>\n  <span>Menu</span>\n</button>'
28 |           }
29 |         </Highlight>
30 |         <p>
31 |           Bootcards tries to find the element that has{' '}
32 |           <code>data-toggle="offcanvas"</code> and attaches a handler to show/
33 |           hide the menu.
34 |         </p>
35 |         <li>The menu:</li>
36 |         <p />
37 |         <Highlight>
38 |           {
39 |             '<div class="navmenu offcanvas offcanvas-left">\n  <ul class="nav">\n    <li class="active">\n      <a href="#">\n        <i class="fa fa-lg fa-users"></i>\n        Contacts\n      </a>\n    </li>\n    <li>\n      <a href="#">\n        <i class="fa fa-lg fa-building-o"></i>\n        Companies\n      </a>\n    </li>\n    <li>\n      <a href="#">\n        <i class="fa fa-lg fa-gears"></i>\n        Settings\n      </a>\n    </li>\n  </ul>\n</div>'
40 |           }
41 |         </Highlight>
42 |       </Section>
43 |     );
44 |   }
45 | }
46 | 
47 | export default SlidingSidebar;
48 | 


--------------------------------------------------------------------------------
/example/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Link, Route } from 'react-router-dom';
 3 | import { Navbar, Nav, NavItem } from 'react-bootstrap';
 4 | import { LinkContainer } from 'react-router-bootstrap';
 5 | import { Container } from 'react-bootcards';
 6 | import Home from './Home';
 7 | import Documentation from './Documentation';
 8 | import About from './About';
 9 | 
10 | class App extends React.Component {
11 |   render() {
12 |     return (
13 |       <div>
14 |         <Navbar inverse fixedTop>
15 |           <Navbar.Header>
16 |             <Navbar.Brand>
17 |               <Link to="/react-bootcards" title="Bootcards">
18 |                 Bootcards
19 |               </Link>
20 |             </Navbar.Brand>
21 |           </Navbar.Header>
22 |           <Nav>
23 |             <NavItem eventKey={1}>
24 |               <LinkContainer to="/react-bootcards">
25 |                 <span>
26 |                   <i className="fa fa-home" /> Home
27 |                 </span>
28 |               </LinkContainer>
29 |             </NavItem>
30 |             <NavItem eventKey={2}>
31 |               <LinkContainer to="/react-bootcards/documentation">
32 |                 <span>
33 |                   <i className="fa fa-book" /> Documentation
34 |                 </span>
35 |               </LinkContainer>
36 |             </NavItem>
37 |             <NavItem eventKey={3}>
38 |               <LinkContainer to="/react-bootcards/about">
39 |                 <span>
40 |                   <i className="fa fa-info-circle" /> About
41 |                 </span>
42 |               </LinkContainer>
43 |             </NavItem>
44 |           </Nav>
45 |         </Navbar>
46 |         <Container>
47 |           <Route exact path="/" component={Home} />
48 |           <Route exact path="/react-bootcards" component={Home} />
49 |           <Route
50 |             path="/react-bootcards/documentation"
51 |             component={Documentation}
52 |           />
53 |           <Route path="/react-bootcards/about" component={About} />
54 |         </Container>
55 |       </div>
56 |     );
57 |   }
58 | }
59 | 
60 | export default App;
61 | 


--------------------------------------------------------------------------------
/example/src/sections/FooterBar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import Section from './Section';
 4 | import Highlight from './Highlight';
 5 | 
 6 | class FooterBar extends React.Component {
 7 |   render() {
 8 |     return (
 9 |       <Section id="doc-footerbar">
10 |         <h3>Footer Bar</h3>
11 |         <p className="lead">
12 |           The Footer Bar offers usable mobile navigation for simpler apps with a
13 |           few important navigation items.
14 |         </p>
15 |         <p>
16 |           This uses Bootstrap's <code>.navbar-fixed-footer</code> markup, with a{' '}
17 |           <code>.btn-group</code> to contain the navigation elements. These are
18 |           styled to look like native footer tabs on iOS and Android devices.
19 |         </p>
20 |         <p>
21 |           On desktop, the footer reverts to a simple, website-style footer to
22 |           hold items like copyright information, version numbers, etc. These are
23 |           contained in <code>.bootcards-desktop-footer</code>, and hidden from
24 |           mobile devices.
25 |         </p>
26 |         <Highlight>
27 |           {
28 |             '<div class="navbar navbar-default navbar-fixed-bottom">\n  <div class="container">\n    <div class="btn-group">\n      <a href="#" class="btn btn-default active">\n        <i class="fa fa-2x fa-users"></i>\n        Contacts\n      </a>\n      <a href="#" class="btn btn-default">\n        <i class="fa fa-2x fa-building-o"></i>\n        Companies\n      </a>\n      <a href="#" class="btn btn-default">\n        <i class="fa fa-2x fa-gears"></i>\n        Settings\n      </a>\n    </div>\n    <div class="bootcards-desktop-footer clearfix">\n      <p class="pull-left">Text for desktop footer goes here</p>\n      <p class="pull-left">More text for desktop footer goes here</p>\n   </div>\n  </div>\n</div>'
29 |           }
30 |         </Highlight>
31 |         <p>
32 |           Apply the <code>.bootcards-nofooter</code> to the{' '}
33 |           <code>&lt;body&gt;</code> element for layouts without a footer: this
34 |           will remove the standard bottom padding.
35 |         </p>
36 |       </Section>
37 |     );
38 |   }
39 | }
40 | 
41 | export default FooterBar;
42 | 


--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | exports.ChartCanvas = exports.SummaryItem = exports.CardBody = exports.CardFooter = exports.CardTitle = exports.CardHeader = exports.Card = exports.ListGroupItemText = exports.ListGroupItemHeader = exports.List = exports.Cards = exports.Container = undefined;
 7 | 
 8 | var _Container = require('./Container');
 9 | 
10 | var _Container2 = _interopRequireDefault(_Container);
11 | 
12 | var _Cards = require('./Cards');
13 | 
14 | var _Cards2 = _interopRequireDefault(_Cards);
15 | 
16 | var _List = require('./List');
17 | 
18 | var _List2 = _interopRequireDefault(_List);
19 | 
20 | var _ListGroupItemHeader = require('./ListGroupItemHeader');
21 | 
22 | var _ListGroupItemHeader2 = _interopRequireDefault(_ListGroupItemHeader);
23 | 
24 | var _ListGroupItemText = require('./ListGroupItemText');
25 | 
26 | var _ListGroupItemText2 = _interopRequireDefault(_ListGroupItemText);
27 | 
28 | var _Card = require('./Card');
29 | 
30 | var _Card2 = _interopRequireDefault(_Card);
31 | 
32 | var _CardHeader = require('./CardHeader');
33 | 
34 | var _CardHeader2 = _interopRequireDefault(_CardHeader);
35 | 
36 | var _CardTitle = require('./CardTitle');
37 | 
38 | var _CardTitle2 = _interopRequireDefault(_CardTitle);
39 | 
40 | var _CardFooter = require('./CardFooter');
41 | 
42 | var _CardFooter2 = _interopRequireDefault(_CardFooter);
43 | 
44 | var _CardBody = require('./CardBody');
45 | 
46 | var _CardBody2 = _interopRequireDefault(_CardBody);
47 | 
48 | var _SummaryItem = require('./SummaryItem');
49 | 
50 | var _SummaryItem2 = _interopRequireDefault(_SummaryItem);
51 | 
52 | var _ChartCanvas = require('./ChartCanvas');
53 | 
54 | var _ChartCanvas2 = _interopRequireDefault(_ChartCanvas);
55 | 
56 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
57 | 
58 | exports.Container = _Container2.default;
59 | exports.Cards = _Cards2.default;
60 | exports.List = _List2.default;
61 | exports.ListGroupItemHeader = _ListGroupItemHeader2.default;
62 | exports.ListGroupItemText = _ListGroupItemText2.default;
63 | exports.Card = _Card2.default;
64 | exports.CardHeader = _CardHeader2.default;
65 | exports.CardTitle = _CardTitle2.default;
66 | exports.CardFooter = _CardFooter2.default;
67 | exports.CardBody = _CardBody2.default;
68 | exports.SummaryItem = _SummaryItem2.default;
69 | exports.ChartCanvas = _ChartCanvas2.default;


--------------------------------------------------------------------------------
/lib/CardBody.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | 
 7 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 8 | 
 9 | var _propTypes = require('prop-types');
10 | 
11 | var _propTypes2 = _interopRequireDefault(_propTypes);
12 | 
13 | var _react = require('react');
14 | 
15 | var _react2 = _interopRequireDefault(_react);
16 | 
17 | var _reactBootstrap = require('react-bootstrap');
18 | 
19 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
20 | 
21 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
22 | 
23 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
24 | 
25 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
26 | 
27 | var CardBody = function (_React$Component) {
28 |   _inherits(CardBody, _React$Component);
29 | 
30 |   function CardBody() {
31 |     _classCallCheck(this, CardBody);
32 | 
33 |     return _possibleConstructorReturn(this, (CardBody.__proto__ || Object.getPrototypeOf(CardBody)).apply(this, arguments));
34 |   }
35 | 
36 |   _createClass(CardBody, [{
37 |     key: 'render',
38 |     value: function render() {
39 |       return _react2.default.createElement(
40 |         _reactBootstrap.Panel.Body,
41 |         this.props,
42 |         this.props.children
43 |       );
44 |     }
45 |   }]);
46 | 
47 |   return CardBody;
48 | }(_react2.default.Component);
49 | 
50 | CardBody.propTypes = {
51 |   children: _propTypes2.default.node
52 | };
53 | 
54 | exports.default = CardBody;


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-bootcards",
 3 |   "version": "0.2.0",
 4 |   "description": "react-bootcards",
 5 |   "main": "lib/index.js",
 6 |   "jsnext:main": "dist/react-bootcards.es.js",
 7 |   "module": "dist/react-bootcards.es.js",
 8 |   "author": "kobanyan",
 9 |   "homepage": "https://github.com/kobanyan/react-bootcards",
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "https://github.com/kobanyan/react-bootcards.git"
13 |   },
14 |   "bugs": {
15 |     "url": "https://github.com/kobanyan/react-bootcards/issues"
16 |   },
17 |   "dependencies": {
18 |     "classnames": "^2.2.6",
19 |     "prop-types": "^15.6.2"
20 |   },
21 |   "devDependencies": {
22 |     "babel-cli": "^6.26.0",
23 |     "babel-core": "^6.26.0",
24 |     "babel-loader": "^7.1.1",
25 |     "babel-plugin-external-helpers": "^6.22.0",
26 |     "babel-plugin-transform-react-remove-prop-types": "^0.4.8",
27 |     "babel-preset-env": "^1.6.1",
28 |     "babel-preset-react": "^6.24.1",
29 |     "babel-preset-stage-0": "^6.24.1",
30 |     "babel-register": "^6.26.0",
31 |     "cross-env": "^5.0.5",
32 |     "css-loader": "^0.28.7",
33 |     "eslint": "^4.6.1",
34 |     "eslint-plugin-react": "^7.3.0",
35 |     "extract-text-webpack-plugin": "^3.0.0",
36 |     "gh-pages": "^1.1.0",
37 |     "highlight.js": "^9.12.0",
38 |     "html-loader": "^0.5.1",
39 |     "html-webpack-plugin": "^2.30.1",
40 |     "husky": "^0.14.3",
41 |     "less": "^2.7.2",
42 |     "less-loader": "^4.0.5",
43 |     "less-plugin-clean-css": "^1.5.1",
44 |     "lint-staged": "^4.3.0",
45 |     "nps": "^5.7.1",
46 |     "nps-utils": "^1.3.0",
47 |     "prettier": "^1.13.7",
48 |     "react": "^16.4.1",
49 |     "react-bootstrap": "^0.32.1",
50 |     "react-dom": "^16.4.1",
51 |     "react-router-bootstrap": "^0.24.4",
52 |     "react-router-dom": "^4.3.1",
53 |     "rollup": "^0.49.2",
54 |     "rollup-plugin-babel": "^3.0.2",
55 |     "rollup-plugin-commonjs": "^8.2.0",
56 |     "rollup-plugin-node-resolve": "^3.0.0",
57 |     "rollup-plugin-uglify": "^2.0.1",
58 |     "style-loader": "^0.18.2",
59 |     "uglify-es": "^3.0.28",
60 |     "url-loader": "^1.0.1",
61 |     "webpack": "^3.5.5",
62 |     "webpack-dev-server": "^2.7.1"
63 |   },
64 |   "peerDependencies": {
65 |     "react": "^16.0",
66 |     "react-dom": "^16.0",
67 |     "react-bootstrap": "^0.24"
68 |   },
69 |   "scripts": {
70 |     "build": "nps build",
71 |     "lint": "eslint .",
72 |     "deploy": "cross-env NODE_ENV=production nps publish",
73 |     "start": "webpack-dev-server --progress",
74 |     "precommit": "lint-staged"
75 |   },
76 |   "keywords": [
77 |     "react",
78 |     "react-component",
79 |     "bootstrap",
80 |     "bootcards"
81 |   ],
82 |   "lint-staged": {
83 |     "*.js": [
84 |       "prettier --single-quote --write",
85 |       "eslint"
86 |     ]
87 |   }
88 | }
89 | 


--------------------------------------------------------------------------------
/example/src/sections/Navbar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import Section from './Section';
 4 | import Highlight from './Highlight';
 5 | 
 6 | class Navbar extends React.Component {
 7 |   render() {
 8 |     return (
 9 |       <Section id="doc-navbar">
10 |         <h3>Navbar</h3>
11 |         <p className="lead">
12 |           The Bootcards Navbar is the main navigation system for desktop
13 |           browsers.
14 |         </p>
15 |         <p>
16 |           On desktop, it uses Bootstrap's default <code>.navbar-fixed-top</code>{' '}
17 |           styles and shows all the top level navigation items.
18 |         </p>
19 |         <p>
20 |           On mobile devices, there isn't enough space for these items, so the
21 |           Bootstrap Navbar is replaced with a simpler, more native version with
22 |           only a Title and limited space for other functions (e.g. a Back button
23 |           or Menu button). These buttons are hidden from desktop browsers, which
24 |           don't need them.
25 |         </p>
26 |         <p>
27 |           <strong>
28 |             In addition to the Navbar, you'll also need to implement one of the
29 |             other navigation structures below (Footer Bar or Sliding Sidebar) to
30 |             allow mobile users to navigate your app.
31 |           </strong>
32 |         </p>
33 |         <Highlight>
34 |           {
35 |             '<div class="navbar navbar-default navbar-fixed-top" role="navigation">\n  <div class="container">\n    <div class="navbar-header">\n      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">\n        <span class="sr-only">Toggle navigation</span>\n        <span class="icon-bar"></span>\n        <span class="icon-bar"></span>\n        <span class="icon-bar"></span>\n      </button>\n    </div>\n    <button type="button" class="btn btn-default btn-back navbar-left pull-left hidden " onclick="history.back()">\n      <i class="fa fa-lg fa-chevron-left"></i>\n      <span>Back</span>\n    </button>\n    <button type="button" class="btn btn-default btn-menu navbar-left pull-left offcanvas-toggle">\n      <i class="fa fa-lg fa-bars"></i>\n      <span>Menu</span>\n    </button>\n    <a class="navbar-brand" title="Customers v{{getAppVersion}}" href="/">Customers</a>\n    <div class="navbar-collapse collapse">\n      <ul class="nav navbar-nav">\n        <li class="active">\n          <a href="#">\n            <i class="fa fa-users"></i> \n            Contacts\n          </a>\n        </li>\n        <li>\n          <a href="#">\n            <i class="fa fa-building-o"></i> \n            Companies\n          </a>\n        </li>\n        <li>\n          <a href="#">\n            <i class="fa fa-gears"></i> \n            Settings\n          </a>\n        </li>\n      </ul>\n    </div>\n  </div>\n</div>'
36 |           }
37 |         </Highlight>
38 |       </Section>
39 |     );
40 |   }
41 | }
42 | 
43 | export default Navbar;
44 | 


--------------------------------------------------------------------------------
/example/src/sections/MediaCard.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { ButtonGroup, Button } from 'react-bootstrap';
 3 | import {
 4 |   Card,
 5 |   CardHeader,
 6 |   CardTitle,
 7 |   CardBody,
 8 |   CardFooter
 9 | } from 'react-bootcards';
10 | 
11 | import Section from './Section';
12 | import Highlight from './Highlight';
13 | import Example from './Example';
14 | 
15 | class MediaCard extends React.Component {
16 |   render() {
17 |     return (
18 |       <Section id="doc-mediacard">
19 |         <h3>Media Cards</h3>
20 |         <p className="lead">Media Cards hold larger images or videos.</p>
21 |         <Example>
22 |           <Card cardStyle="media">
23 |             <CardHeader>
24 |               <CardTitle>Media Card Heading</CardTitle>
25 |             </CardHeader>
26 |             <CardBody>
27 |               Media card description lorem ipsum dolor est compendium
28 |             </CardBody>
29 |             <img
30 |               src="http://www.teamstudio.com/Portals/218295/images/istock_000001242290small.jpg"
31 |               className="img-responsive"
32 |             />
33 |             <CardFooter>
34 |               <ButtonGroup justified>
35 |                 <ButtonGroup>
36 |                   <Button>
37 |                     <i className="fa fa-arrow-down" />
38 |                     Download
39 |                   </Button>
40 |                 </ButtonGroup>
41 |                 <ButtonGroup>
42 |                   <Button>
43 |                     <i className="fa fa-star" />
44 |                     Favorite
45 |                   </Button>
46 |                 </ButtonGroup>
47 |                 <ButtonGroup>
48 |                   <Button>
49 |                     <i className="fa fa-envelope" />
50 |                     Email
51 |                   </Button>
52 |                 </ButtonGroup>
53 |               </ButtonGroup>
54 |             </CardFooter>
55 |           </Card>
56 |         </Example>
57 |         <Highlight>
58 |           {
59 |             '<Card cardStyle="media">\n  <CardHeader>\n    <CardTitle>Media Card Heading</CardTitle>\n  </CardHeader>\n  <CardBody>\n    Media card description lorem ipsum dolor est compendium\n  </CardBody>\n  <img\n    src="http://www.teamstudio.com/Portals/218295/images/istock_000001242290small.jpg"\n    className="img-responsive"\n  />\n  <CardFooter>\n    <ButtonGroup justified>\n      <ButtonGroup>\n        <Button>\n          <i className="fa fa-arrow-down" />\n          Download\n        </Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button>\n          <i className="fa fa-star" />\n          Favorite\n        </Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button>\n          <i className="fa fa-envelope" />\n          Email\n        </Button>\n      </ButtonGroup>\n    </ButtonGroup>\n  </CardFooter>\n</Card>\n'
60 |           }
61 |         </Highlight>
62 |       </Section>
63 |     );
64 |   }
65 | }
66 | 
67 | export default MediaCard;
68 | 


--------------------------------------------------------------------------------
/example/src/sections/Lists.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { ListGroup, ListGroupItem } from 'react-bootstrap';
 3 | import {
 4 |   List,
 5 |   Card,
 6 |   ListGroupItemHeader,
 7 |   ListGroupItemText
 8 | } from 'react-bootcards';
 9 | 
10 | import Section from './Section';
11 | import Highlight from './Highlight';
12 | import Example from './Example';
13 | 
14 | import images from '../images';
15 | 
16 | class Lists extends React.Component {
17 |   render() {
18 |     return (
19 |       <Section id="doc-lists">
20 |         <h2>Lists</h2>
21 |         <p className="lead">
22 |           Bootcards Lists are used to navigate the entities in your app (e.g.
23 |           Contacts, Files, Messages, etc).
24 |         </p>
25 |         <p>
26 |           Lists are wrapped in the <code>.bootcards-list</code> class
27 |         </p>
28 |         <Example>
29 |           <List>
30 |             <Card>
31 |               <ListGroup>
32 |                 <ListGroupItem href="#">
33 |                   <img src={images.sofia} className="img-rounded pull-left" />
34 |                   <ListGroupItemHeader>Acey, Sofia</ListGroupItemHeader>
35 |                   <ListGroupItemText>Masung Corp.</ListGroupItemText>
36 |                 </ListGroupItem>
37 |                 <ListGroupItem href="#">
38 |                   <img src={images.joseph} className="img-rounded pull-left" />
39 |                   <ListGroupItemHeader>Barish, Joseph</ListGroupItemHeader>
40 |                   <ListGroupItemText>Masung Corp.</ListGroupItemText>
41 |                 </ListGroupItem>
42 |                 <ListGroupItem href="#">
43 |                   <img src={images.sarah} className="img-rounded pull-left" />
44 |                   <ListGroupItemHeader>Benson, Sarah</ListGroupItemHeader>
45 |                   <ListGroupItemText>ZetaComm</ListGroupItemText>
46 |                 </ListGroupItem>
47 |               </ListGroup>
48 |             </Card>
49 |           </List>
50 |         </Example>
51 |         <Highlight>
52 |           {
53 |             '<List>\n  <Card>\n    <ListGroup>\n      <ListGroupItem href="#">\n        <img src={images.sofia} className="img-rounded pull-left" />\n        <ListGroupItemHeader>Acey, Sofia</ListGroupItemHeader>\n        <ListGroupItemText>Masung Corp.</ListGroupItemText>\n      </ListGroupItem>\n      <ListGroupItem href="#">\n        <img src={images.joseph} className="img-rounded pull-left" />\n        <ListGroupItemHeader>Barish, Joseph</ListGroupItemHeader>\n        <ListGroupItemText>Masung Corp.</ListGroupItemText>\n      </ListGroupItem>\n      <ListGroupItem href="#">\n        <img src={images.sarah} className="img-rounded pull-left" />\n        <ListGroupItemHeader>Benson, Sarah</ListGroupItemHeader>\n        <ListGroupItemText>ZetaComm</ListGroupItemText>\n      </ListGroupItem>\n    </ListGroup>\n  </Card>\n</List>\n'
54 |           }
55 |         </Highlight>
56 |       </Section>
57 |     );
58 |   }
59 | }
60 | 
61 | export default Lists;
62 | 


--------------------------------------------------------------------------------
/example/src/sections/TableCard.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Table } from 'react-bootstrap';
 3 | import { Card, CardHeader, CardTitle, CardFooter } from 'react-bootcards';
 4 | 
 5 | import Section from './Section';
 6 | import Highlight from './Highlight';
 7 | import Example from './Example';
 8 | 
 9 | class TableCard extends React.Component {
10 |   render() {
11 |     return (
12 |       <Section id="doc-tablecard">
13 |         <h3>Table Cards</h3>
14 |         <p className="lead">Table Cards display tabular data.</p>
15 |         <p>
16 |           You can use the same table classes as Bootstrap, e.g. the{' '}
17 |           <code>.table-hover</code> and <code>.active</code> classes used in
18 |           this example.
19 |         </p>
20 |         <p>
21 |           Wrap wider tables in a{' '}
22 |           <code>&lt;div class="table-responsive"&gt;</code> so they'll be able
23 |           to scroll horizontally in narrower browsers such as mobiles, and not
24 |           be cut off.
25 |         </p>
26 |         <Example>
27 |           <Card>
28 |             <CardHeader>
29 |               <CardTitle>Table Card Title</CardTitle>
30 |             </CardHeader>
31 |             <Table responsive hover>
32 |               <thead>
33 |                 <tr className="active">
34 |                   <th>Name</th>
35 |                   <th>Forecast</th>
36 |                   <th>Quota</th>
37 |                 </tr>
38 |               </thead>
39 |               <tbody>
40 |                 <tr>
41 |                   <td>Guy Bardsley</td>
42 |                   <td>2750</td>
43 |                   <td>4000</td>
44 |                 </tr>
45 |                 <tr>
46 |                   <td>Adam Callahan</td>
47 |                   <td>3300</td>
48 |                   <td>4000</td>
49 |                 </tr>
50 |                 <tr>
51 |                   <td>
52 |                     <strong>Total</strong>
53 |                   </td>
54 |                   <td>
55 |                     <strong>6050</strong>
56 |                   </td>
57 |                   <td>
58 |                     <strong>8000</strong>
59 |                   </td>
60 |                 </tr>
61 |               </tbody>
62 |             </Table>
63 |             <CardFooter>
64 |               <small>Built with Bootcards - Table Card</small>
65 |             </CardFooter>
66 |           </Card>
67 |         </Example>
68 |         <Highlight>
69 |           {
70 |             '<Card>\n  <CardHeader>\n    <CardTitle>Table Card Title</CardTitle>\n  </CardHeader>\n  <Table responsive hover>\n    <thead>\n      <tr className="active">\n        <th>Name</th>\n        <th>Forecast</th>\n        <th>Quota</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <td>Guy Bardsley</td>\n        <td>2750</td>\n        <td>4000</td>\n      </tr>\n      <tr>\n        <td>Adam Callahan</td>\n        <td>3300</td>\n        <td>4000</td>\n      </tr>\n      <tr>\n        <td>\n          <strong>Total</strong>\n        </td>\n        <td>\n          <strong>6050</strong>\n        </td>\n        <td>\n          <strong>8000</strong>\n        </td>\n      </tr>\n    </tbody>\n  </Table>\n  <CardFooter>\n    <small>Built with Bootcards - Table Card</small>\n  </CardFooter>\n</Card>\n'
71 |           }
72 |         </Highlight>
73 |       </Section>
74 |     );
75 |   }
76 | }
77 | 
78 | export default TableCard;
79 | 


--------------------------------------------------------------------------------
/example/src/sections/BaseCard.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Button, ListGroup, ListGroupItem } from 'react-bootstrap';
 3 | import {
 4 |   Card,
 5 |   CardHeader,
 6 |   CardTitle,
 7 |   CardFooter,
 8 |   ListGroupItemHeader,
 9 |   ListGroupItemText
10 | } from 'react-bootcards';
11 | 
12 | import Section from './Section';
13 | import Highlight from './Highlight';
14 | import Example from './Example';
15 | 
16 | class BaseCard extends React.Component {
17 |   render() {
18 |     return (
19 |       <Section id="doc-basecard">
20 |         <h3>Base Cards</h3>
21 |         <p className="lead">
22 |           Base Cards display a list of information separated by dividers.
23 |         </p>
24 |         <p>
25 |           Replace the default <code>.panel-body</code> with a{' '}
26 |           <code>.list-group</code>.
27 |         </p>
28 |         <Example>
29 |           <Card>
30 |             <CardHeader className="clearfix">
31 |               <CardTitle className="pull-left">Base Card Title</CardTitle>
32 |               <Button bsStyle="primary" className="pull-right">
33 |                 <i className="fa fa-pencil" />
34 |                 Edit
35 |               </Button>
36 |             </CardHeader>
37 |             <ListGroup>
38 |               <ListGroupItem>
39 |                 <ListGroupItemText>Name</ListGroupItemText>
40 |                 <ListGroupItemHeader>John Smith</ListGroupItemHeader>
41 |               </ListGroupItem>
42 |               <ListGroupItem>
43 |                 <ListGroupItemText>Occupation</ListGroupItemText>
44 |                 <ListGroupItemHeader>Web Developer</ListGroupItemHeader>
45 |               </ListGroupItem>
46 |               <ListGroupItem>
47 |                 <ListGroupItemText>
48 |                   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
49 |                   Nullam mauris tellus, vehicula ut tellus id, suscipit dapibus
50 |                   tortor. Integer viverra turpis ac fringilla hendrerit. Sed
51 |                   faucibus posuere felis et pellentesque. Cras varius tortor
52 |                   vitae molestie tempor. Proin ut viverra elit, ac gravida
53 |                   tortor.
54 |                 </ListGroupItemText>
55 |               </ListGroupItem>
56 |             </ListGroup>
57 |             <CardFooter>
58 |               <small>Built with Bootcards - Base Card</small>
59 |             </CardFooter>
60 |           </Card>
61 |         </Example>
62 |         <Highlight>
63 |           {
64 |             '<Card>\n  <CardHeader className="clearfix">\n    <CardTitle className="pull-left">Base Card Title</CardTitle>\n    <Button bsStyle="primary" className="pull-right">\n      <i className="fa fa-pencil" />\n      Edit\n    </Button>\n  </CardHeader>\n  <ListGroup>\n    <ListGroupItem>\n      <ListGroupItemText>Name</ListGroupItemText>\n      <ListGroupItemHeader>John Smith</ListGroupItemHeader>\n    </ListGroupItem>\n    <ListGroupItem>\n      <ListGroupItemText>Occupation</ListGroupItemText>\n      <ListGroupItemHeader>Web Developer</ListGroupItemHeader>\n    </ListGroupItem>\n    <ListGroupItem>\n      <ListGroupItemText>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n        Nullam mauris tellus, vehicula ut tellus id, suscipit dapibus\n        tortor. Integer viverra turpis ac fringilla hendrerit. Sed\n        faucibus posuere felis et pellentesque. Cras varius tortor\n        vitae molestie tempor. Proin ut viverra elit, ac gravida\n        tortor.\n      </ListGroupItemText>\n    </ListGroupItem>\n  </ListGroup>\n  <CardFooter>\n    <small>Built with Bootcards - Base Card</small>\n  </CardFooter>\n</Card>\n'
65 |           }
66 |         </Highlight>
67 |       </Section>
68 |     );
69 |   }
70 | }
71 | 
72 | export default BaseCard;
73 | 


--------------------------------------------------------------------------------
/lib/List.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | 
 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 8 | 
 9 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
10 | 
11 | var _propTypes = require('prop-types');
12 | 
13 | var _propTypes2 = _interopRequireDefault(_propTypes);
14 | 
15 | var _react = require('react');
16 | 
17 | var _react2 = _interopRequireDefault(_react);
18 | 
19 | var _classnames = require('classnames');
20 | 
21 | var _classnames2 = _interopRequireDefault(_classnames);
22 | 
23 | var _reactBootstrap = require('react-bootstrap');
24 | 
25 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
26 | 
27 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
28 | 
29 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
30 | 
31 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
32 | 
33 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
34 | 
35 | var List = function (_React$Component) {
36 |   _inherits(List, _React$Component);
37 | 
38 |   function List(props) {
39 |     _classCallCheck(this, List);
40 | 
41 |     return _possibleConstructorReturn(this, (List.__proto__ || Object.getPrototypeOf(List)).call(this, props));
42 |   }
43 | 
44 |   _createClass(List, [{
45 |     key: 'render',
46 |     value: function render() {
47 |       var _props = this.props,
48 |           listClassName = _props.listClassName,
49 |           className = _props.className,
50 |           props = _objectWithoutProperties(_props, ['listClassName', 'className']);
51 | 
52 |       return _react2.default.createElement(
53 |         _reactBootstrap.Col,
54 |         _extends({}, props, { className: (0, _classnames2.default)(className, listClassName) }),
55 |         this.props.children
56 |       );
57 |     }
58 |   }]);
59 | 
60 |   return List;
61 | }(_react2.default.Component);
62 | 
63 | List.propTypes = {
64 |   children: _propTypes2.default.node,
65 |   className: _propTypes2.default.string,
66 |   listClassName: _propTypes2.default.string
67 | };
68 | 
69 | List.defaultProps = {
70 |   listClassName: 'bootcards-list'
71 | };
72 | 
73 | exports.default = List;


--------------------------------------------------------------------------------
/lib/Cards.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | 
 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 8 | 
 9 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
10 | 
11 | var _propTypes = require('prop-types');
12 | 
13 | var _propTypes2 = _interopRequireDefault(_propTypes);
14 | 
15 | var _react = require('react');
16 | 
17 | var _react2 = _interopRequireDefault(_react);
18 | 
19 | var _classnames = require('classnames');
20 | 
21 | var _classnames2 = _interopRequireDefault(_classnames);
22 | 
23 | var _reactBootstrap = require('react-bootstrap');
24 | 
25 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
26 | 
27 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
28 | 
29 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
30 | 
31 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
32 | 
33 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
34 | 
35 | var Cards = function (_React$Component) {
36 |   _inherits(Cards, _React$Component);
37 | 
38 |   function Cards(props) {
39 |     _classCallCheck(this, Cards);
40 | 
41 |     return _possibleConstructorReturn(this, (Cards.__proto__ || Object.getPrototypeOf(Cards)).call(this, props));
42 |   }
43 | 
44 |   _createClass(Cards, [{
45 |     key: 'render',
46 |     value: function render() {
47 |       var _props = this.props,
48 |           cardsClassName = _props.cardsClassName,
49 |           className = _props.className,
50 |           props = _objectWithoutProperties(_props, ['cardsClassName', 'className']);
51 | 
52 |       return _react2.default.createElement(
53 |         _reactBootstrap.Col,
54 |         _extends({}, props, { className: (0, _classnames2.default)(className, cardsClassName) }),
55 |         this.props.children
56 |       );
57 |     }
58 |   }]);
59 | 
60 |   return Cards;
61 | }(_react2.default.Component);
62 | 
63 | Cards.propTypes = {
64 |   cardsClassName: _propTypes2.default.string,
65 |   children: _propTypes2.default.node,
66 |   className: _propTypes2.default.string
67 | };
68 | 
69 | Cards.defaultProps = {
70 |   cardsClassName: 'bootcards-cards'
71 | };
72 | 
73 | exports.default = Cards;


--------------------------------------------------------------------------------
/lib/Card.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | 
 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 8 | 
 9 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
10 | 
11 | var _propTypes = require('prop-types');
12 | 
13 | var _propTypes2 = _interopRequireDefault(_propTypes);
14 | 
15 | var _react = require('react');
16 | 
17 | var _react2 = _interopRequireDefault(_react);
18 | 
19 | var _classnames = require('classnames');
20 | 
21 | var _classnames2 = _interopRequireDefault(_classnames);
22 | 
23 | var _reactBootstrap = require('react-bootstrap');
24 | 
25 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
26 | 
27 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
28 | 
29 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
30 | 
31 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
32 | 
33 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
34 | 
35 | var Card = function (_React$Component) {
36 |   _inherits(Card, _React$Component);
37 | 
38 |   function Card(props) {
39 |     _classCallCheck(this, Card);
40 | 
41 |     return _possibleConstructorReturn(this, (Card.__proto__ || Object.getPrototypeOf(Card)).call(this, props));
42 |   }
43 | 
44 |   _createClass(Card, [{
45 |     key: 'render',
46 |     value: function render() {
47 |       var _props = this.props,
48 |           cardStyle = _props.cardStyle,
49 |           props = _objectWithoutProperties(_props, ['cardStyle']);
50 | 
51 |       var cardClassName = cardStyle === 'default' ? null : 'bootcards-' + cardStyle;
52 |       return _react2.default.createElement(
53 |         _reactBootstrap.Panel,
54 |         _extends({}, props, { className: (0, _classnames2.default)(props.className, cardClassName) }),
55 |         this.props.children
56 |       );
57 |     }
58 |   }]);
59 | 
60 |   return Card;
61 | }(_react2.default.Component);
62 | 
63 | Card.propTypes = {
64 |   cardStyle: _propTypes2.default.oneOf(['default', 'chart', 'summary', 'media', 'file', 'richtext']),
65 |   children: _propTypes2.default.node,
66 |   className: _propTypes2.default.string
67 | };
68 | 
69 | Card.defaultProps = {
70 |   cardStyle: 'default'
71 | };
72 | 
73 | exports.default = Card;


--------------------------------------------------------------------------------
/lib/CardTitle.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | 
 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 8 | 
 9 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
10 | 
11 | var _propTypes = require('prop-types');
12 | 
13 | var _propTypes2 = _interopRequireDefault(_propTypes);
14 | 
15 | var _react = require('react');
16 | 
17 | var _react2 = _interopRequireDefault(_react);
18 | 
19 | var _classnames = require('classnames');
20 | 
21 | var _classnames2 = _interopRequireDefault(_classnames);
22 | 
23 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
24 | 
25 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
26 | 
27 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
28 | 
29 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
30 | 
31 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
32 | 
33 | var CardTitle = function (_React$Component) {
34 |   _inherits(CardTitle, _React$Component);
35 | 
36 |   function CardTitle(props) {
37 |     _classCallCheck(this, CardTitle);
38 | 
39 |     return _possibleConstructorReturn(this, (CardTitle.__proto__ || Object.getPrototypeOf(CardTitle)).call(this, props));
40 |   }
41 | 
42 |   _createClass(CardTitle, [{
43 |     key: 'render',
44 |     value: function render() {
45 |       var _props = this.props,
46 |           componentClass = _props.componentClass,
47 |           titleClassName = _props.titleClassName,
48 |           className = _props.className,
49 |           props = _objectWithoutProperties(_props, ['componentClass', 'titleClassName', 'className']);
50 | 
51 |       var Component = componentClass;
52 |       return _react2.default.createElement(
53 |         Component,
54 |         _extends({}, props, { className: (0, _classnames2.default)(className, titleClassName) }),
55 |         this.props.children
56 |       );
57 |     }
58 |   }]);
59 | 
60 |   return CardTitle;
61 | }(_react2.default.Component);
62 | 
63 | CardTitle.propTypes = {
64 |   children: _propTypes2.default.node,
65 |   className: _propTypes2.default.string,
66 |   componentClass: _propTypes2.default.string,
67 |   titleClassName: _propTypes2.default.string
68 | };
69 | 
70 | CardTitle.defaultProps = {
71 |   componentClass: 'h3',
72 |   titleClassName: 'panel-title'
73 | };
74 | 
75 | exports.default = CardTitle;


--------------------------------------------------------------------------------
/lib/Container.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | 
 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 8 | 
 9 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
10 | 
11 | var _propTypes = require('prop-types');
12 | 
13 | var _propTypes2 = _interopRequireDefault(_propTypes);
14 | 
15 | var _react = require('react');
16 | 
17 | var _react2 = _interopRequireDefault(_react);
18 | 
19 | var _classnames = require('classnames');
20 | 
21 | var _classnames2 = _interopRequireDefault(_classnames);
22 | 
23 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
24 | 
25 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
26 | 
27 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
28 | 
29 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
30 | 
31 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
32 | 
33 | var Container = function (_React$Component) {
34 |   _inherits(Container, _React$Component);
35 | 
36 |   function Container(props) {
37 |     _classCallCheck(this, Container);
38 | 
39 |     return _possibleConstructorReturn(this, (Container.__proto__ || Object.getPrototypeOf(Container)).call(this, props));
40 |   }
41 | 
42 |   _createClass(Container, [{
43 |     key: 'render',
44 |     value: function render() {
45 |       var _props = this.props,
46 |           componentClass = _props.componentClass,
47 |           headingClassName = _props.headingClassName,
48 |           className = _props.className,
49 |           props = _objectWithoutProperties(_props, ['componentClass', 'headingClassName', 'className']);
50 | 
51 |       var Component = componentClass;
52 |       return _react2.default.createElement(
53 |         Component,
54 |         _extends({}, props, { className: (0, _classnames2.default)(className, headingClassName) }),
55 |         this.props.children
56 |       );
57 |     }
58 |   }]);
59 | 
60 |   return Container;
61 | }(_react2.default.Component);
62 | 
63 | Container.propTypes = {
64 |   children: _propTypes2.default.node,
65 |   className: _propTypes2.default.string,
66 |   componentClass: _propTypes2.default.string,
67 |   headingClassName: _propTypes2.default.string
68 | };
69 | 
70 | Container.defaultProps = {
71 |   componentClass: 'div',
72 |   headingClassName: 'container'
73 | };
74 | 
75 | exports.default = Container;


--------------------------------------------------------------------------------
/lib/CardFooter.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | 
 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 8 | 
 9 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
10 | 
11 | var _propTypes = require('prop-types');
12 | 
13 | var _propTypes2 = _interopRequireDefault(_propTypes);
14 | 
15 | var _react = require('react');
16 | 
17 | var _react2 = _interopRequireDefault(_react);
18 | 
19 | var _classnames = require('classnames');
20 | 
21 | var _classnames2 = _interopRequireDefault(_classnames);
22 | 
23 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
24 | 
25 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
26 | 
27 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
28 | 
29 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
30 | 
31 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
32 | 
33 | var CardFooter = function (_React$Component) {
34 |   _inherits(CardFooter, _React$Component);
35 | 
36 |   function CardFooter(props) {
37 |     _classCallCheck(this, CardFooter);
38 | 
39 |     return _possibleConstructorReturn(this, (CardFooter.__proto__ || Object.getPrototypeOf(CardFooter)).call(this, props));
40 |   }
41 | 
42 |   _createClass(CardFooter, [{
43 |     key: 'render',
44 |     value: function render() {
45 |       var _props = this.props,
46 |           componentClass = _props.componentClass,
47 |           footerClassName = _props.footerClassName,
48 |           className = _props.className,
49 |           props = _objectWithoutProperties(_props, ['componentClass', 'footerClassName', 'className']);
50 | 
51 |       var Component = componentClass;
52 |       return _react2.default.createElement(
53 |         Component,
54 |         _extends({}, props, { className: (0, _classnames2.default)(className, footerClassName) }),
55 |         this.props.children
56 |       );
57 |     }
58 |   }]);
59 | 
60 |   return CardFooter;
61 | }(_react2.default.Component);
62 | 
63 | CardFooter.propTypes = {
64 |   children: _propTypes2.default.node,
65 |   className: _propTypes2.default.string,
66 |   componentClass: _propTypes2.default.string,
67 |   footerClassName: _propTypes2.default.string
68 | };
69 | 
70 | CardFooter.defaultProps = {
71 |   componentClass: 'div',
72 |   footerClassName: 'panel-footer'
73 | };
74 | 
75 | exports.default = CardFooter;


--------------------------------------------------------------------------------
/lib/CardHeader.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | 
 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 8 | 
 9 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
10 | 
11 | var _propTypes = require('prop-types');
12 | 
13 | var _propTypes2 = _interopRequireDefault(_propTypes);
14 | 
15 | var _react = require('react');
16 | 
17 | var _react2 = _interopRequireDefault(_react);
18 | 
19 | var _classnames = require('classnames');
20 | 
21 | var _classnames2 = _interopRequireDefault(_classnames);
22 | 
23 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
24 | 
25 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
26 | 
27 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
28 | 
29 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
30 | 
31 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
32 | 
33 | var CardHeader = function (_React$Component) {
34 |   _inherits(CardHeader, _React$Component);
35 | 
36 |   function CardHeader(props) {
37 |     _classCallCheck(this, CardHeader);
38 | 
39 |     return _possibleConstructorReturn(this, (CardHeader.__proto__ || Object.getPrototypeOf(CardHeader)).call(this, props));
40 |   }
41 | 
42 |   _createClass(CardHeader, [{
43 |     key: 'render',
44 |     value: function render() {
45 |       var _props = this.props,
46 |           componentClass = _props.componentClass,
47 |           headerClassName = _props.headerClassName,
48 |           className = _props.className,
49 |           props = _objectWithoutProperties(_props, ['componentClass', 'headerClassName', 'className']);
50 | 
51 |       var Component = componentClass;
52 |       return _react2.default.createElement(
53 |         Component,
54 |         _extends({}, props, { className: (0, _classnames2.default)(className, headerClassName) }),
55 |         this.props.children
56 |       );
57 |     }
58 |   }]);
59 | 
60 |   return CardHeader;
61 | }(_react2.default.Component);
62 | 
63 | CardHeader.propTypes = {
64 |   children: _propTypes2.default.node,
65 |   className: _propTypes2.default.string,
66 |   componentClass: _propTypes2.default.string,
67 |   headerClassName: _propTypes2.default.string
68 | };
69 | 
70 | CardHeader.defaultProps = {
71 |   componentClass: 'div',
72 |   headerClassName: 'panel-heading'
73 | };
74 | 
75 | exports.default = CardHeader;


--------------------------------------------------------------------------------
/lib/SummaryItem.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | 
 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 8 | 
 9 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
10 | 
11 | var _propTypes = require('prop-types');
12 | 
13 | var _propTypes2 = _interopRequireDefault(_propTypes);
14 | 
15 | var _react = require('react');
16 | 
17 | var _react2 = _interopRequireDefault(_react);
18 | 
19 | var _classnames = require('classnames');
20 | 
21 | var _classnames2 = _interopRequireDefault(_classnames);
22 | 
23 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
24 | 
25 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
26 | 
27 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
28 | 
29 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
30 | 
31 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
32 | 
33 | var SummaryItem = function (_React$Component) {
34 |   _inherits(SummaryItem, _React$Component);
35 | 
36 |   function SummaryItem(props) {
37 |     _classCallCheck(this, SummaryItem);
38 | 
39 |     return _possibleConstructorReturn(this, (SummaryItem.__proto__ || Object.getPrototypeOf(SummaryItem)).call(this, props));
40 |   }
41 | 
42 |   _createClass(SummaryItem, [{
43 |     key: 'render',
44 |     value: function render() {
45 |       var _props = this.props,
46 |           componentClass = _props.componentClass,
47 |           itemClassName = _props.itemClassName,
48 |           className = _props.className,
49 |           props = _objectWithoutProperties(_props, ['componentClass', 'itemClassName', 'className']);
50 | 
51 |       var Component = componentClass;
52 |       return _react2.default.createElement(
53 |         Component,
54 |         _extends({}, props, { className: (0, _classnames2.default)(className, itemClassName) }),
55 |         this.props.children
56 |       );
57 |     }
58 |   }]);
59 | 
60 |   return SummaryItem;
61 | }(_react2.default.Component);
62 | 
63 | SummaryItem.propTypes = {
64 |   children: _propTypes2.default.node,
65 |   className: _propTypes2.default.string,
66 |   componentClass: _propTypes2.default.string,
67 |   itemClassName: _propTypes2.default.string
68 | };
69 | 
70 | SummaryItem.defaultProps = {
71 |   componentClass: 'a',
72 |   itemClassName: 'bootcards-summary-item'
73 | };
74 | 
75 | exports.default = SummaryItem;


--------------------------------------------------------------------------------
/lib/ChartCanvas.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | 
 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 8 | 
 9 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
10 | 
11 | var _propTypes = require('prop-types');
12 | 
13 | var _propTypes2 = _interopRequireDefault(_propTypes);
14 | 
15 | var _react = require('react');
16 | 
17 | var _react2 = _interopRequireDefault(_react);
18 | 
19 | var _classnames = require('classnames');
20 | 
21 | var _classnames2 = _interopRequireDefault(_classnames);
22 | 
23 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
24 | 
25 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
26 | 
27 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
28 | 
29 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
30 | 
31 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
32 | 
33 | var ChartCanvas = function (_React$Component) {
34 |   _inherits(ChartCanvas, _React$Component);
35 | 
36 |   function ChartCanvas(props) {
37 |     _classCallCheck(this, ChartCanvas);
38 | 
39 |     return _possibleConstructorReturn(this, (ChartCanvas.__proto__ || Object.getPrototypeOf(ChartCanvas)).call(this, props));
40 |   }
41 | 
42 |   _createClass(ChartCanvas, [{
43 |     key: 'render',
44 |     value: function render() {
45 |       var _props = this.props,
46 |           componentClass = _props.componentClass,
47 |           canvasClassName = _props.canvasClassName,
48 |           className = _props.className,
49 |           props = _objectWithoutProperties(_props, ['componentClass', 'canvasClassName', 'className']);
50 | 
51 |       var Component = componentClass;
52 |       return _react2.default.createElement(
53 |         Component,
54 |         _extends({}, props, { className: (0, _classnames2.default)(className, canvasClassName) }),
55 |         this.props.children
56 |       );
57 |     }
58 |   }]);
59 | 
60 |   return ChartCanvas;
61 | }(_react2.default.Component);
62 | 
63 | ChartCanvas.propTypes = {
64 |   canvasClassName: _propTypes2.default.string,
65 |   children: _propTypes2.default.node,
66 |   className: _propTypes2.default.string,
67 |   componentClass: _propTypes2.default.string
68 | };
69 | 
70 | ChartCanvas.defaultProps = {
71 |   componentClass: 'div',
72 |   canvasClassName: 'bootcards-chart-canvas'
73 | };
74 | 
75 | exports.default = ChartCanvas;


--------------------------------------------------------------------------------
/lib/ListGroupItemText.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | 
 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 8 | 
 9 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
10 | 
11 | var _propTypes = require('prop-types');
12 | 
13 | var _propTypes2 = _interopRequireDefault(_propTypes);
14 | 
15 | var _react = require('react');
16 | 
17 | var _react2 = _interopRequireDefault(_react);
18 | 
19 | var _classnames = require('classnames');
20 | 
21 | var _classnames2 = _interopRequireDefault(_classnames);
22 | 
23 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
24 | 
25 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
26 | 
27 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
28 | 
29 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
30 | 
31 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
32 | 
33 | var ListGroupItemText = function (_React$Component) {
34 |   _inherits(ListGroupItemText, _React$Component);
35 | 
36 |   function ListGroupItemText(props) {
37 |     _classCallCheck(this, ListGroupItemText);
38 | 
39 |     return _possibleConstructorReturn(this, (ListGroupItemText.__proto__ || Object.getPrototypeOf(ListGroupItemText)).call(this, props));
40 |   }
41 | 
42 |   _createClass(ListGroupItemText, [{
43 |     key: 'render',
44 |     value: function render() {
45 |       var _props = this.props,
46 |           componentClass = _props.componentClass,
47 |           textClassName = _props.textClassName,
48 |           className = _props.className,
49 |           props = _objectWithoutProperties(_props, ['componentClass', 'textClassName', 'className']);
50 | 
51 |       var Component = componentClass;
52 |       return _react2.default.createElement(
53 |         Component,
54 |         _extends({}, props, { className: (0, _classnames2.default)(className, textClassName) }),
55 |         this.props.children
56 |       );
57 |     }
58 |   }]);
59 | 
60 |   return ListGroupItemText;
61 | }(_react2.default.Component);
62 | 
63 | ListGroupItemText.propTypes = {
64 |   children: _propTypes2.default.node,
65 |   className: _propTypes2.default.string,
66 |   componentClass: _propTypes2.default.string,
67 |   textClassName: _propTypes2.default.string
68 | };
69 | 
70 | ListGroupItemText.defaultProps = {
71 |   componentClass: 'p',
72 |   textClassName: 'list-group-item-text'
73 | };
74 | 
75 | exports.default = ListGroupItemText;


--------------------------------------------------------------------------------
/lib/ListGroupItemHeader.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | 
 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 8 | 
 9 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
10 | 
11 | var _propTypes = require('prop-types');
12 | 
13 | var _propTypes2 = _interopRequireDefault(_propTypes);
14 | 
15 | var _react = require('react');
16 | 
17 | var _react2 = _interopRequireDefault(_react);
18 | 
19 | var _classnames = require('classnames');
20 | 
21 | var _classnames2 = _interopRequireDefault(_classnames);
22 | 
23 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
24 | 
25 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
26 | 
27 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
28 | 
29 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
30 | 
31 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
32 | 
33 | var ListGroupItemHeader = function (_React$Component) {
34 |   _inherits(ListGroupItemHeader, _React$Component);
35 | 
36 |   function ListGroupItemHeader(props) {
37 |     _classCallCheck(this, ListGroupItemHeader);
38 | 
39 |     return _possibleConstructorReturn(this, (ListGroupItemHeader.__proto__ || Object.getPrototypeOf(ListGroupItemHeader)).call(this, props));
40 |   }
41 | 
42 |   _createClass(ListGroupItemHeader, [{
43 |     key: 'render',
44 |     value: function render() {
45 |       var _props = this.props,
46 |           componentClass = _props.componentClass,
47 |           headerClassName = _props.headerClassName,
48 |           className = _props.className,
49 |           props = _objectWithoutProperties(_props, ['componentClass', 'headerClassName', 'className']);
50 | 
51 |       var Component = componentClass;
52 |       return _react2.default.createElement(
53 |         Component,
54 |         _extends({}, props, { className: (0, _classnames2.default)(className, headerClassName) }),
55 |         this.props.children
56 |       );
57 |     }
58 |   }]);
59 | 
60 |   return ListGroupItemHeader;
61 | }(_react2.default.Component);
62 | 
63 | ListGroupItemHeader.propTypes = {
64 |   children: _propTypes2.default.node,
65 |   className: _propTypes2.default.string,
66 |   componentClass: _propTypes2.default.string,
67 |   headerClassName: _propTypes2.default.string
68 | };
69 | 
70 | ListGroupItemHeader.defaultProps = {
71 |   componentClass: 'h4',
72 |   headerClassName: 'list-group-item-heading'
73 | };
74 | 
75 | exports.default = ListGroupItemHeader;


--------------------------------------------------------------------------------
/example/src/example.less:
--------------------------------------------------------------------------------
  1 | body {
  2 |   margin-top: 20px;
  3 | }
  4 | 
  5 | /*docs menu*/
  6 | .docs-menu li > a {
  7 |   padding: 5px 15px !important;
  8 |   border-radius: 0;
  9 | }
 10 | .docs-menu li.active > a {
 11 |   padding-left: 13px !important;
 12 |   font-weight: 700;
 13 |   color: #000;
 14 |   background-color: rgba(0, 0, 0, 0);
 15 |   border-left: 2px solid #000;
 16 | }
 17 | .docs-menu li > a:hover,
 18 | .docs-menu li.active > a:hover {
 19 |   padding-left: 14px !important;
 20 |   color: #000;
 21 |   background-color: rgba(0, 0, 0, 0);
 22 |   border-left: 1px solid #000;
 23 |   background: none;
 24 | }
 25 | .bootcards-documentation-list .list-group-item-heading,
 26 | .bootcards-documentation-list .list-group-item-text {
 27 |   margin: 0;
 28 | }
 29 | .docs-menu li.sub > a,
 30 | .docs-menu li.active.sub > a {
 31 |   padding-left: 25px !important;
 32 |   padding-top: 3px !important;
 33 |   padding-bottom: 3px !important;
 34 | }
 35 | .docs-menu li.active.sub > a {
 36 |   padding-left: 23px !important;
 37 | }
 38 | .docs-menu li.sub > a:hover,
 39 | .docs-menu li.sub.active > a:hover {
 40 |   padding-left: 24px !important;
 41 | }
 42 | .bs-docs-section {
 43 |   padding-bottom: 20px;
 44 |   border-bottom: 1px solid #eee;
 45 |   margin-bottom: 20px;
 46 |   padding-top: 60px;
 47 |   margin-top: -40px;
 48 | }
 49 | .bs-docs-section:first-child {
 50 |   padding-top: 0;
 51 |   margin-top: 0;
 52 | }
 53 | .bs-docs-section:last-child {
 54 |   padding-bottom: 0;
 55 |   border-bottom: 0;
 56 |   margin-bottom: 0;
 57 | }
 58 | .bs-docs-section > *:first-child {
 59 |   margin-top: 0;
 60 | }
 61 | .bs-docs-section p.lead {
 62 |   margin-bottom: 10px;
 63 | }
 64 | 
 65 | /* Bootstrap Documentation styles */
 66 | .bs-example {
 67 |   position: relative;
 68 |   padding: 45px 15px 15px;
 69 |   margin: 0 -15px 15px;
 70 |   background-color: #fafafa;
 71 |   box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
 72 |   border-color: #e5e5e5 #eee #eee;
 73 |   border-style: solid;
 74 |   border-width: 1px 0;
 75 |   margin-top: 20px;
 76 | }
 77 | @media (min-width: 768px) {
 78 |   .bs-example {
 79 |     margin-left: 0;
 80 |     margin-right: 0;
 81 |     background-color: #fff;
 82 |     border-width: 1px;
 83 |     border-color: #ddd;
 84 |     border-radius: 4px 4px 0 0;
 85 |     box-shadow: none;
 86 |   }
 87 | }
 88 | .bs-example:after {
 89 |   content: "Example";
 90 |   position: absolute;
 91 |   top: 15px;
 92 |   left: 15px;
 93 |   font-size: 12px;
 94 |   font-weight: 700;
 95 |   color: #bbb;
 96 |   text-transform: uppercase;
 97 |   letter-spacing: 1px;
 98 | }
 99 | .bs-example-type .table td {
100 |   padding: 15px 0;
101 |   border-color: #eee;
102 | }
103 | .bs-example-type .table tr:first-child td {
104 |   border-top: 0;
105 | }
106 | .bs-example>p:last-child,
107 | .bs-example>ul:last-child,
108 | .bs-example>ol:last-child,
109 | .bs-example>blockquote:last-child,
110 | .bs-example>.form-control:last-child,
111 | .bs-example>.table:last-child,
112 | .bs-example>.navbar:last-child,
113 | .bs-example>.jumbotron:last-child,
114 | .bs-example>.alert:last-child,
115 | .bs-example>.panel:last-child,
116 | .bs-example>.list-group:last-child,
117 | .bs-example>.well:last-child,
118 | .bs-example>.progress:last-child,
119 | .bs-example>.table-responsive:last-child>.table {
120 |   margin-bottom: 0;
121 | }
122 | .bs-example+.highlight {
123 |   margin: -15px -15px 15px;
124 |   border-radius: 0;
125 |   border-width: 0 0 1px;
126 | }
127 | .highlight {
128 |   padding: 0;
129 |   margin-bottom: 14px;
130 |   background-color: #f7f7f9;
131 |   border: 1px solid #e1e1e8;
132 |   border-radius: 4px;
133 | }
134 | @media (min-width: 768px) {
135 |   .bs-example+.highlight {
136 |     margin-top: -16px;
137 |     margin-left: 0;
138 |     margin-right: 0;
139 |     border-width: 1px;
140 |     border-bottom-left-radius: 4px;
141 |     border-bottom-right-radius: 4px;
142 |   }
143 | }
144 | .highlight pre {
145 |   padding: 0;
146 |   margin-top: 0;
147 |   margin-bottom: 0;
148 |   background-color: transparent;
149 |   border: 0;
150 |   white-space: nowrap;
151 | }
152 | 


--------------------------------------------------------------------------------
/example/src/sections/RichTextCard.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import {
 3 |   Card,
 4 |   CardHeader,
 5 |   CardTitle,
 6 |   CardBody,
 7 |   CardFooter
 8 | } from 'react-bootcards';
 9 | 
10 | import Section from './Section';
11 | import Highlight from './Highlight';
12 | import Example from './Example';
13 | 
14 | class RichTextCard extends React.Component {
15 |   render() {
16 |     return (
17 |       <Section id="doc-richtextcard">
18 |         <h3>Rich Text Cards</h3>
19 |         <p className="lead">
20 |           Rich Text Cards are designed for longer passages of text, which may
21 |           include various heading levels, paragraphs and lists.
22 |         </p>
23 |         <p>
24 |           They have more padding around the <code>.panel-content</code> to help
25 |           readability.
26 |         </p>
27 |         <Example>
28 |           <Card cardStyle="richtext">
29 |             <CardHeader>
30 |               <CardTitle>Rich Text Card Heading</CardTitle>
31 |             </CardHeader>
32 |             <CardBody>
33 |               <p className="lead">
34 |                 Lead body copy vivamus sagittis lacus vel augue laoreet rutrum
35 |                 faucibus dolor auctor. Duis mollis, est non commodo luctus.
36 |               </p>
37 |               <h1>Heading 1</h1>
38 |               <h2>Heading 2</h2>
39 |               <h3>Heading 3</h3>
40 |               <h4>Heading 4</h4>
41 |               <h5>Heading 5</h5>
42 |               <h6>Heading 6</h6>
43 |               <p>
44 |                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
45 |                 lobortis pretium nisl. Etiam at vestibulum purus, sit amet
46 |                 blandit mi. Duis enim lectus, tempus nec varius sed,
47 |                 sollicitudin quis velit. Fusce quis sem porttitor, euismod ante
48 |                 vitae, ultricies erat.
49 |               </p>
50 |               <ul>
51 |                 <li>Duis cursus dui et turpis gravida sollicitudin.</li>
52 |                 <li>
53 |                   Donec eget mauris feugiat, euismod purus nec, feugiat neque.
54 |                 </li>
55 |                 <li>
56 |                   Nunc erat est, molestie eget magna in, consectetur euismod
57 |                   lorem.
58 |                 </li>
59 |               </ul>
60 |               <ol>
61 |                 <li>Sed luctus congue orci quis tempus.</li>
62 |                 <li>Praesent in viverra lorem.</li>
63 |                 <li>
64 |                   Suspendisse augue lacus, porta quis imperdiet at, posuere vel
65 |                   nulla.
66 |                 </li>
67 |               </ol>
68 |             </CardBody>
69 |             <CardFooter>
70 |               <small>Built with Bootcards - Rich Text Card</small>
71 |             </CardFooter>
72 |           </Card>
73 |         </Example>
74 |         <Highlight>
75 |           {
76 |             '<Card cardStyle="richtext">\n  <CardHeader>\n    <CardTitle>Rich Text Card Heading</CardTitle>\n  </CardHeader>\n  <CardBody>\n    <p className="lead">\n      Lead body copy vivamus sagittis lacus vel augue laoreet rutrum\n      faucibus dolor auctor. Duis mollis, est non commodo luctus.\n    </p>\n    <h1>Heading 1</h1>\n    <h2>Heading 2</h2>\n    <h3>Heading 3</h3>\n    <h4>Heading 4</h4>\n    <h5>Heading 5</h5>\n    <h6>Heading 6</h6>\n    <p>\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla\n      lobortis pretium nisl. Etiam at vestibulum purus, sit amet\n      blandit mi. Duis enim lectus, tempus nec varius sed,\n      sollicitudin quis velit. Fusce quis sem porttitor, euismod ante\n      vitae, ultricies erat.\n    </p>\n    <ul>\n      <li>Duis cursus dui et turpis gravida sollicitudin.</li>\n      <li>\n        Donec eget mauris feugiat, euismod purus nec, feugiat neque.\n      </li>\n      <li>\n        Nunc erat est, molestie eget magna in, consectetur euismod\n        lorem.\n      </li>\n    </ul>\n    <ol>\n      <li>Sed luctus congue orci quis tempus.</li>\n      <li>Praesent in viverra lorem.</li>\n      <li>\n        Suspendisse augue lacus, porta quis imperdiet at, posuere vel\n        nulla.\n      </li>\n    </ol>\n  </CardBody>\n  <CardFooter>\n    <small>Built with Bootcards - Rich Text Card</small>\n  </CardFooter>\n</Card>\n'
77 |           }
78 |         </Highlight>
79 |       </Section>
80 |     );
81 |   }
82 | }
83 | 
84 | export default RichTextCard;
85 | 


--------------------------------------------------------------------------------
/example/src/sections/SummaryCard.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Row, Col, Label } from 'react-bootstrap';
 3 | import {
 4 |   Card,
 5 |   CardHeader,
 6 |   CardTitle,
 7 |   CardBody,
 8 |   CardFooter,
 9 |   SummaryItem
10 | } from 'react-bootcards';
11 | 
12 | import Section from './Section';
13 | import Highlight from './Highlight';
14 | import Example from './Example';
15 | 
16 | class SummaryCard extends React.Component {
17 |   render() {
18 |     return (
19 |       <Section id="doc-summarycard">
20 |         <h3>Summary Cards</h3>
21 |         <p className="lead">
22 |           Summary cards can be used on dashboards, etc to highlight important
23 |           pieces of data in your app.
24 |         </p>
25 |         <Example>
26 |           <Card cardStyle="summary">
27 |             <CardHeader>
28 |               <CardTitle>Summay Card Heading</CardTitle>
29 |             </CardHeader>
30 |             <CardBody>
31 |               <Row>
32 |                 <Col xs={6} sm={4}>
33 |                   <SummaryItem href="#">
34 |                     <i className="fa fa-3x fa-users" />
35 |                     <h4>
36 |                       Contacts <Label bsStyle="info">432</Label>
37 |                     </h4>
38 |                   </SummaryItem>
39 |                 </Col>
40 |                 <Col xs={6} sm={4}>
41 |                   <SummaryItem href="#">
42 |                     <i className="fa fa-3x fa-building-o" />
43 |                     <h4>
44 |                       Companies <Label bsStyle="info">98</Label>
45 |                     </h4>
46 |                   </SummaryItem>
47 |                 </Col>
48 |                 <Col xs={6} sm={4}>
49 |                   <SummaryItem href="#">
50 |                     <i className="fa fa-3x fa-clipboard" />
51 |                     <h4>
52 |                       Notes <Label bsStyle="danger">54</Label>
53 |                     </h4>
54 |                   </SummaryItem>
55 |                 </Col>
56 |                 <Col xs={6} sm={4}>
57 |                   <SummaryItem href="#">
58 |                     <i className="fa fa-3x fa-files-o" />
59 |                     <h4>
60 |                       Files <Label bsStyle="info">65</Label>
61 |                     </h4>
62 |                   </SummaryItem>
63 |                 </Col>
64 |                 <Col xs={6} sm={4}>
65 |                   <SummaryItem href="#">
66 |                     <i className="fa fa-3x fa-check-square-o" />
67 |                     <h4>
68 |                       Tasks <Label bsStyle="warning">109</Label>
69 |                     </h4>
70 |                   </SummaryItem>
71 |                 </Col>
72 |               </Row>
73 |             </CardBody>
74 |             <CardFooter>
75 |               <small>Built with Bootcards - Summary Card</small>
76 |             </CardFooter>
77 |           </Card>
78 |         </Example>
79 |         <Highlight>
80 |           {
81 |             '<Card cardStyle="summary">\n  <CardHeader>\n    <CardTitle>Summay Card Heading</CardTitle>\n  </CardHeader>\n  <CardBody>\n    <Row>\n      <Col xs={6} sm={4}>\n        <SummaryItem href="#">\n          <i className="fa fa-3x fa-users" />\n          <h4>\n            Contacts <Label bsStyle="info">432</Label>\n          </h4>\n        </SummaryItem>\n      </Col>\n      <Col xs={6} sm={4}>\n        <SummaryItem href="#">\n          <i className="fa fa-3x fa-building-o" />\n          <h4>\n            Companies <Label bsStyle="info">98</Label>\n          </h4>\n        </SummaryItem>\n      </Col>\n      <Col xs={6} sm={4}>\n        <SummaryItem href="#">\n          <i className="fa fa-3x fa-clipboard" />\n          <h4>\n            Notes <Label bsStyle="danger">54</Label>\n          </h4>\n        </SummaryItem>\n      </Col>\n      <Col xs={6} sm={4}>\n        <SummaryItem href="#">\n          <i className="fa fa-3x fa-files-o" />\n          <h4>\n            Files <Label bsStyle="info">65</Label>\n          </h4>\n        </SummaryItem>\n      </Col>\n      <Col xs={6} sm={4}>\n        <SummaryItem href="#">\n          <i className="fa fa-3x fa-check-square-o" />\n          <h4>\n            Tasks <Label bsStyle="warning">109</Label>\n          </h4>\n        </SummaryItem>\n      </Col>\n    </Row>\n  </CardBody>\n  <CardFooter>\n    <small>Built with Bootcards - Summary Card</small>\n  </CardFooter>\n</Card>\n'
82 |           }
83 |         </Highlight>
84 |       </Section>
85 |     );
86 |   }
87 | }
88 | 
89 | export default SummaryCard;
90 | 


--------------------------------------------------------------------------------
/example/src/sections/ListSearch.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import {
 3 |   ListGroup,
 4 |   ListGroupItem,
 5 |   Row,
 6 |   Col,
 7 |   FormGroup,
 8 |   FormControl,
 9 |   Button
10 | } from 'react-bootstrap';
11 | import {
12 |   List,
13 |   Card,
14 |   CardBody,
15 |   ListGroupItemHeader,
16 |   ListGroupItemText
17 | } from 'react-bootcards';
18 | 
19 | import Section from './Section';
20 | import Highlight from './Highlight';
21 | import Example from './Example';
22 | 
23 | import images from '../images';
24 | 
25 | class ListSearch extends React.Component {
26 |   render() {
27 |     return (
28 |       <Section id="doc-listsearch">
29 |         <h2>List Search & List Actions</h2>
30 |         <p className="lead">
31 |           A search form for when you want the user to be able to filter or
32 |           search your list, and buttons for any other list functions you need.
33 |         </p>
34 |         <p>
35 |           This goes at the top of your list, inside the <code>.modal-body</code>.
36 |           You can add or remove functions by adding/removing columns in the
37 |           containing <code>.row</code> and making sure the widths add up.
38 |         </p>
39 |         <Example>
40 |           <List>
41 |             <Card>
42 |               <CardBody>
43 |                 <form>
44 |                   <Row>
45 |                     <Col xs={9}>
46 |                       <FormGroup>
47 |                         <FormControl
48 |                           type="text"
49 |                           placeholder="Search Contacts..."
50 |                         />
51 |                         <i className="fa fa-search" />
52 |                       </FormGroup>
53 |                     </Col>
54 |                     <Col xs={3}>
55 |                       <Button bsStyle="primary" block>
56 |                         <i className="fa fa-plus" />
57 |                         Add
58 |                       </Button>
59 |                     </Col>
60 |                   </Row>
61 |                 </form>
62 |               </CardBody>
63 |               <ListGroup>
64 |                 <ListGroupItem href="#">
65 |                   <img src={images.sofia} className="img-rounded pull-left" />
66 |                   <ListGroupItemHeader>Acey, Sofia</ListGroupItemHeader>
67 |                   <ListGroupItemText>Masung Corp.</ListGroupItemText>
68 |                 </ListGroupItem>
69 |                 <ListGroupItem href="#">
70 |                   <img src={images.joseph} className="img-rounded pull-left" />
71 |                   <ListGroupItemHeader>Barish, Joseph</ListGroupItemHeader>
72 |                   <ListGroupItemText>Masung Corp.</ListGroupItemText>
73 |                 </ListGroupItem>
74 |                 <ListGroupItem href="#">
75 |                   <img src={images.sarah} className="img-rounded pull-left" />
76 |                   <ListGroupItemHeader>Benson, Sarah</ListGroupItemHeader>
77 |                   <ListGroupItemText>ZetaComm</ListGroupItemText>
78 |                 </ListGroupItem>
79 |               </ListGroup>
80 |             </Card>
81 |           </List>
82 |         </Example>
83 |         <Highlight>
84 |           {
85 |             '<List>\n  <Card>\n    <CardBody>\n      <form>\n        <Row>\n          <Col xs={9}>\n            <FormGroup>\n              <FormControl\n                type="text"\n                placeholder="Search Contacts..."\n              />\n              <i className="fa fa-search" />\n            </FormGroup>\n          </Col>\n          <Col xs={3}>\n            <Button bsStyle="primary" block>\n              <i className="fa fa-plus" />\n              Add\n            </Button>\n          </Col>\n        </Row>\n      </form>\n    </CardBody>\n    <ListGroup>\n      <ListGroupItem href="#">\n        <img src={images.sofia} className="img-rounded pull-left" />\n        <ListGroupItemHeader>Acey, Sofia</ListGroupItemHeader>\n        <ListGroupItemText>Masung Corp.</ListGroupItemText>\n      </ListGroupItem>\n      <ListGroupItem href="#">\n        <img src={images.joseph} className="img-rounded pull-left" />\n        <ListGroupItemHeader>Barish, Joseph</ListGroupItemHeader>\n        <ListGroupItemText>Masung Corp.</ListGroupItemText>\n      </ListGroupItem>\n      <ListGroupItem href="#">\n        <img src={images.sarah} className="img-rounded pull-left" />\n        <ListGroupItemHeader>Benson, Sarah</ListGroupItemHeader>\n        <ListGroupItemText>ZetaComm</ListGroupItemText>\n      </ListGroupItem>\n    </ListGroup>\n  </Card>\n</List>\n'
86 |           }
87 |         </Highlight>
88 |       </Section>
89 |     );
90 |   }
91 | }
92 | 
93 | export default ListSearch;
94 | 


--------------------------------------------------------------------------------
/example/src/sections/FileCard.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { ListGroup, ListGroupItem, ButtonGroup, Button } from 'react-bootstrap';
 3 | import {
 4 |   Card,
 5 |   CardHeader,
 6 |   CardTitle,
 7 |   CardFooter,
 8 |   ListGroupItemHeader,
 9 |   ListGroupItemText
10 | } from 'react-bootcards';
11 | 
12 | import Section from './Section';
13 | import Highlight from './Highlight';
14 | import Example from './Example';
15 | 
16 | class FileCard extends React.Component {
17 |   render() {
18 |     return (
19 |       <Section id="doc-filecard">
20 |         <h3>File Cards</h3>
21 |         <p className="lead">
22 |           File Cards are intended to show information and functions for
23 |           non-media file formats (PDFs, Word documents, spreadsheets, etc).
24 |         </p>
25 |         <Example>
26 |           <Card cardStyle="file">
27 |             <CardHeader>
28 |               <CardTitle>File Card Heading</CardTitle>
29 |             </CardHeader>
30 |             <ListGroup>
31 |               <ListGroupItem>
32 |                 <a href="#">
33 |                   <i className="icon-file-pdf" />
34 |                 </a>
35 |                 <ListGroupItemHeader>
36 |                   <a href="#">File Name Goes Here</a>
37 |                 </ListGroupItemHeader>
38 |                 <ListGroupItemText>
39 |                   <strong>PDF</strong>
40 |                 </ListGroupItemText>
41 |                 <ListGroupItemText>
42 |                   <strong>3.2Mb</strong>
43 |                 </ListGroupItemText>
44 |               </ListGroupItem>
45 |               <ListGroupItem>
46 |                 <ListGroupItemText>
47 |                   <strong>Added by John Smith on 5 March 2014</strong>
48 |                 </ListGroupItemText>
49 |               </ListGroupItem>
50 |               <ListGroupItem>
51 |                 <ListGroupItemText>
52 |                   MediaFile card description lorem ipsum dolor sit amet,
53 |                   consectetur adipiscing elit. Vestibulum commodo, nulla ut
54 |                   porta interdum, mi mi venenatis felis, vitae pellentesque ante
55 |                   eros at enim.
56 |                 </ListGroupItemText>
57 |               </ListGroupItem>
58 |             </ListGroup>
59 |             <CardFooter>
60 |               <ButtonGroup justified>
61 |                 <ButtonGroup>
62 |                   <Button>
63 |                     <i className="fa fa-arrow-down" />
64 |                     Download
65 |                   </Button>
66 |                 </ButtonGroup>
67 |                 <ButtonGroup>
68 |                   <Button>
69 |                     <i className="fa fa-star" />
70 |                     Favorite
71 |                   </Button>
72 |                 </ButtonGroup>
73 |                 <ButtonGroup>
74 |                   <Button>
75 |                     <i className="fa fa-envelope" />
76 |                     Email
77 |                   </Button>
78 |                 </ButtonGroup>
79 |               </ButtonGroup>
80 |             </CardFooter>
81 |           </Card>
82 |         </Example>
83 |         <Highlight>
84 |           {
85 |             '<Card cardStyle="file">\n  <CardHeader>\n    <CardTitle>File Card Heading</CardTitle>\n  </CardHeader>\n  <ListGroup>\n    <ListGroupItem>\n      <a href="#">\n        <i className="icon-file-pdf" />\n      </a>\n      <ListGroupItemHeader>\n        <a href="#">File Name Goes Here</a>\n      </ListGroupItemHeader>\n      <ListGroupItemText>\n        <strong>PDF</strong>\n      </ListGroupItemText>\n      <ListGroupItemText>\n        <strong>3.2Mb</strong>\n      </ListGroupItemText>\n    </ListGroupItem>\n    <ListGroupItem>\n      <ListGroupItemText>\n        <strong>Added by John Smith on 5 March 2014</strong>\n      </ListGroupItemText>\n    </ListGroupItem>\n    <ListGroupItem>\n      <ListGroupItemText>\n        MediaFile card description lorem ipsum dolor sit amet,\n        consectetur adipiscing elit. Vestibulum commodo, nulla ut\n        porta interdum, mi mi venenatis felis, vitae pellentesque ante\n        eros at enim.\n      </ListGroupItemText>\n    </ListGroupItem>\n  </ListGroup>\n  <CardFooter>\n    <ButtonGroup justified>\n      <ButtonGroup>\n        <Button>\n          <i className="fa fa-arrow-down" />\n          Download\n        </Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button>\n          <i className="fa fa-star" />\n          Favorite\n        </Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button>\n          <i className="fa fa-envelope" />\n          Email\n        </Button>\n      </ButtonGroup>\n    </ButtonGroup>\n  </CardFooter>\n</Card>\n'
86 |           }
87 |         </Highlight>
88 |       </Section>
89 |     );
90 |   }
91 | }
92 | 
93 | export default FileCard;
94 | 


--------------------------------------------------------------------------------
/example/src/sections/ListDetail.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { ListGroup, ListGroupItem, Row, Col } from 'react-bootstrap';
 3 | import {
 4 |   List,
 5 |   Card,
 6 |   ListGroupItemHeader,
 7 |   ListGroupItemText
 8 | } from 'react-bootcards';
 9 | 
10 | import Section from './Section';
11 | import Highlight from './Highlight';
12 | import Example from './Example';
13 | 
14 | class ListDetail extends React.Component {
15 |   render() {
16 |     return (
17 |       <Section id="doc-listdetail">
18 |         <h3>Detailed Lists</h3>
19 |         <p className="lead">
20 |           Detailed Lists can be used when you need to show more information for
21 |           each entry.
22 |         </p>
23 |         <p>
24 |           You can use Bootstrap <code>.col-*</code> <code>&lt;div&gt;</code>s
25 |           within each <code>.list-group-item</code> to show more pieces of
26 |           information in whatever format you like, and respond to different
27 |           device widths.
28 |         </p>
29 |         <Example>
30 |           <List>
31 |             <Card>
32 |               <ListGroup>
33 |                 <ListGroupItem href="#">
34 |                   <Row>
35 |                     <Col sm={6}>
36 |                       <i className="fa fa-3x fa-building-o pull-left" />
37 |                       <ListGroupItemHeader>Alparvis Ltd</ListGroupItemHeader>
38 |                       <ListGroupItemText>London, UK</ListGroupItemText>
39 |                     </Col>
40 |                     <Col sm={6}>
41 |                       <ListGroupItemText>Contractor</ListGroupItemText>
42 |                       <ListGroupItemText>$12,000 Revenue YTD</ListGroupItemText>
43 |                     </Col>
44 |                   </Row>
45 |                 </ListGroupItem>
46 |                 <ListGroupItem href="#">
47 |                   <Row>
48 |                     <Col sm={6}>
49 |                       <i className="fa fa-3x fa-building-o pull-left" />
50 |                       <ListGroupItemHeader>Camion Corp</ListGroupItemHeader>
51 |                       <ListGroupItemText>Tokyo, Japan</ListGroupItemText>
52 |                     </Col>
53 |                     <Col sm={6}>
54 |                       <ListGroupItemText>Customer</ListGroupItemText>
55 |                       <ListGroupItemText>$75,000 Revenue YTD</ListGroupItemText>
56 |                     </Col>
57 |                   </Row>
58 |                 </ListGroupItem>
59 |                 <ListGroupItem href="#">
60 |                   <Row>
61 |                     <Col sm={6}>
62 |                       <i className="fa fa-3x fa-building-o pull-left" />
63 |                       <ListGroupItemHeader>
64 |                         Derenden Systems
65 |                       </ListGroupItemHeader>
66 |                       <ListGroupItemText>Albuquerque, USA</ListGroupItemText>
67 |                     </Col>
68 |                     <Col sm={6}>
69 |                       <ListGroupItemText>Supplier</ListGroupItemText>
70 |                       <ListGroupItemText>$1.3m Revenue YTD</ListGroupItemText>
71 |                     </Col>
72 |                   </Row>
73 |                 </ListGroupItem>
74 |               </ListGroup>
75 |             </Card>
76 |           </List>
77 |         </Example>
78 |         <Highlight>
79 |           {
80 |             '<List>\n  <Card>\n    <ListGroup>\n      <ListGroupItem href="#">\n        <Row>\n          <Col sm={6}>\n            <i className="fa fa-3x fa-building-o pull-left" />\n            <ListGroupItemHeader>Alparvis Ltd</ListGroupItemHeader>\n            <ListGroupItemText>London, UK</ListGroupItemText>\n          </Col>\n          <Col sm={6}>\n            <ListGroupItemText>Contractor</ListGroupItemText>\n            <ListGroupItemText>$12,000 Revenue YTD</ListGroupItemText>\n          </Col>\n        </Row>\n      </ListGroupItem>\n      <ListGroupItem href="#">\n        <Row>\n          <Col sm={6}>\n            <i className="fa fa-3x fa-building-o pull-left" />\n            <ListGroupItemHeader>Camion Corp</ListGroupItemHeader>\n            <ListGroupItemText>Tokyo, Japan</ListGroupItemText>\n          </Col>\n          <Col sm={6}>\n            <ListGroupItemText>Customer</ListGroupItemText>\n            <ListGroupItemText>$75,000 Revenue YTD</ListGroupItemText>\n          </Col>\n        </Row>\n      </ListGroupItem>\n      <ListGroupItem href="#">\n        <Row>\n          <Col sm={6}>\n            <i className="fa fa-3x fa-building-o pull-left" />\n            <ListGroupItemHeader>\n              Derenden Systems\n            </ListGroupItemHeader>\n            <ListGroupItemText>Albuquerque, USA</ListGroupItemText>\n          </Col>\n          <Col sm={6}>\n            <ListGroupItemText>Supplier</ListGroupItemText>\n            <ListGroupItemText>$1.3m Revenue YTD</ListGroupItemText>\n          </Col>\n        </Row>\n      </ListGroupItem>\n    </ListGroup>\n  </Card>\n</List>\n'
81 |           }
82 |         </Highlight>
83 |       </Section>
84 |     );
85 |   }
86 | }
87 | 
88 | export default ListDetail;
89 | 


--------------------------------------------------------------------------------
/example/src/sections/FormCard.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import {
  3 |   ButtonGroup,
  4 |   Button,
  5 |   FormGroup,
  6 |   ControlLabel,
  7 |   FormControl,
  8 |   Col
  9 | } from 'react-bootstrap';
 10 | import {
 11 |   Card,
 12 |   CardHeader,
 13 |   CardTitle,
 14 |   CardBody,
 15 |   CardFooter
 16 | } from 'react-bootcards';
 17 | 
 18 | import Section from './Section';
 19 | import Highlight from './Highlight';
 20 | import Example from './Example';
 21 | 
 22 | class FormCard extends React.Component {
 23 |   render() {
 24 |     return (
 25 |       <Section id="doc-formcard">
 26 |         <h2>Form Cards</h2>
 27 |         <p className="lead">Form Cards are used for user input in your app.</p>
 28 |         <p>
 29 |           Replace the default <code>.panel-body</code> with a{' '}
 30 |           <code>&lt;form&gt;</code>.
 31 |         </p>
 32 |         <Example>
 33 |           <Card>
 34 |             <CardHeader className="clearfix">
 35 |               <CardTitle className="pull-left">Form Card Title</CardTitle>
 36 |               <ButtonGroup className="pull-right">
 37 |                 <Button bsStyle="danger">
 38 |                   <i className="fa fa-times" />
 39 |                   Cancel
 40 |                 </Button>
 41 |                 <Button bsStyle="success">
 42 |                   <i className="fa fa-check" />
 43 |                   Save
 44 |                 </Button>
 45 |               </ButtonGroup>
 46 |             </CardHeader>
 47 |             <CardBody>
 48 |               <form className="form-horizontal">
 49 |                 <FormGroup controlId="name">
 50 |                   <Col componentClass={ControlLabel} xs={3}>
 51 |                     Name
 52 |                   </Col>
 53 |                   <Col xs={9}>
 54 |                     <FormControl type="text" defaultValue="John Smith" />
 55 |                   </Col>
 56 |                 </FormGroup>
 57 |                 <FormGroup controlId="select">
 58 |                   <Col componentClass={ControlLabel} xs={3}>
 59 |                     Occupation
 60 |                   </Col>
 61 |                   <Col xs={9}>
 62 |                     <FormControl
 63 |                       componentClass="select"
 64 |                       defaultValue="Developer"
 65 |                     >
 66 |                       <option>Designer</option>
 67 |                       <option>Developer</option>
 68 |                       <option>Salesman</option>
 69 |                     </FormControl>
 70 |                   </Col>
 71 |                 </FormGroup>
 72 |                 <FormGroup controlId="description">
 73 |                   <Col componentClass={ControlLabel} xs={3}>
 74 |                     Description
 75 |                   </Col>
 76 |                   <Col xs={9}>
 77 |                     <FormControl
 78 |                       componentClass="textarea"
 79 |                       defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mauris tellus, vehicula ut tellus id, suscipit dapibus tortor. Integer viverra turpis ac fringilla hendrerit. Sed faucibus posuere felis et pellentesque. Cras varius tortor vitae molestie tempor. Proin ut viverra elit, ac gravida tortor."
 80 |                       rows="6"
 81 |                     />
 82 |                   </Col>
 83 |                 </FormGroup>
 84 |               </form>
 85 |             </CardBody>
 86 |             <CardFooter>
 87 |               <small>Built with Bootcards - Form Card</small>
 88 |             </CardFooter>
 89 |           </Card>
 90 |         </Example>
 91 |         <Highlight>
 92 |           {
 93 |             '<Card>\n  <CardHeader className="clearfix">\n    <CardTitle className="pull-left">Form Card Title</CardTitle>\n    <ButtonGroup className="pull-right">\n      <Button bsStyle="danger">\n        <i className="fa fa-times" />\n        Cancel\n      </Button>\n      <Button bsStyle="success">\n        <i className="fa fa-check" />\n        Save\n      </Button>\n    </ButtonGroup>\n  </CardHeader>\n  <CardBody>\n    <form className="form-horizontal">\n      <FormGroup controlId="name">\n        <Col componentClass={ControlLabel} xs={3}>\n          Name\n        </Col>\n        <Col xs={9}>\n          <FormControl type="text" defaultValue="John Smith" />\n        </Col>\n      </FormGroup>\n      <FormGroup controlId="select">\n        <Col componentClass={ControlLabel} xs={3}>\n          Occupation\n        </Col>\n        <Col xs={9}>\n          <FormControl\n            componentClass="select"\n            defaultValue="Developer"\n          >\n            <option>Designer</option>\n            <option>Developer</option>\n            <option>Salesman</option>\n          </FormControl>\n        </Col>\n      </FormGroup>\n      <FormGroup controlId="description">\n        <Col componentClass={ControlLabel} xs={3}>\n          Description\n        </Col>\n        <Col xs={9}>\n          <FormControl\n            componentClass="textarea"\n            defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mauris tellus, vehicula ut tellus id, suscipit dapibus tortor. Integer viverra turpis ac fringilla hendrerit. Sed faucibus posuere felis et pellentesque. Cras varius tortor vitae molestie tempor. Proin ut viverra elit, ac gravida tortor."\n            rows="6"\n          />\n        </Col>\n      </FormGroup>\n    </form>\n  </CardBody>\n  <CardFooter>\n    <small>Built with Bootcards - Form Card</small>\n  </CardFooter>\n</Card>\n'
 94 |           }
 95 |         </Highlight>
 96 |       </Section>
 97 |     );
 98 |   }
 99 | }
100 | 
101 | export default FormCard;
102 | 


--------------------------------------------------------------------------------
/example/src/sections/DoubleNavbar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Navbar, Nav, NavDropdown, MenuItem, NavItem } from 'react-bootstrap';
 3 | 
 4 | import Section from './Section';
 5 | import Highlight from './Highlight';
 6 | 
 7 | class DoubleNavbar extends React.Component {
 8 |   render() {
 9 |     return (
10 |       <Section id="doc-doublenavbar">
11 |         <h3>Double Navbar</h3>
12 |         <p className="lead">
13 |           The Double Navbar is meant for desktop and allows you to have two rows
14 |           of menu options.
15 |         </p>
16 |         <div>
17 |           <Navbar fluid collapseOnSelect className="bootcards-navbar-double">
18 |             <Navbar.Header>
19 |               <Navbar.Toggle />
20 |             </Navbar.Header>
21 |             <Navbar.Brand>
22 |               <a title="Bootcards Starter" href="/">
23 |                 Bootcards Starter
24 |               </a>
25 |             </Navbar.Brand>
26 |             <Navbar.Collapse>
27 |               <Nav className="bootcards-nav-secondary" pullRight>
28 |                 <NavDropdown
29 |                   eventKey={1}
30 |                   id="doublenavbar-languages"
31 |                   title={[
32 |                     <i key="icon" className="fa fa-globe" />,
33 |                     <span key="title"> Languages</span>
34 |                   ]}
35 |                 >
36 |                   <MenuItem eventKey={1.1}>Deutsch</MenuItem>
37 |                   <MenuItem eventKey={1.2}>English</MenuItem>
38 |                   <MenuItem eventKey={1.3}>Espanol</MenuItem>
39 |                 </NavDropdown>
40 |                 <NavItem eventKey={2} href="#">
41 |                   <i className="fa fa-fw fa-lock" />
42 |                   <span> Login</span>
43 |                 </NavItem>
44 |               </Nav>
45 |               <Nav className="bootcards-nav-primary" pullRight>
46 |                 <NavDropdown
47 |                   eventKey={3}
48 |                   id="doublenavbar-home"
49 |                   title={[
50 |                     <i key="icon" className="fa fa-fw fa-dashboard" />,
51 |                     <span key="title"> Home</span>
52 |                   ]}
53 |                 >
54 |                   <MenuItem eventKey={3.1} href="#">
55 |                     <i className="fa fa-fw fa-envelope-o" /> Action
56 |                   </MenuItem>
57 |                   <MenuItem eventKey={3.2} href="#">
58 |                     <i className="fa fa-fw fa-film" /> Another action
59 |                   </MenuItem>
60 |                   <MenuItem eventKey={3.3} href="#">
61 |                     <i className="fa fa-fw fa-file-o" /> Something else here
62 |                   </MenuItem>
63 |                   <MenuItem divider />
64 |                   <MenuItem eventKey={3.4} href="#">
65 |                     <i className="fa fa-fw fa-bar-chart-o" /> Separated link
66 |                   </MenuItem>
67 |                 </NavDropdown>
68 |                 <NavItem eventKey={4} href="#">
69 |                   <i className="fa fa-fw fa-briefcase" />
70 |                   <span> Portfolio</span>
71 |                 </NavItem>
72 |                 <NavItem eventKey={5} href="#">
73 |                   <i className="fa fa-fw fa-bullhorn" />
74 |                   <span> Blog</span>
75 |                 </NavItem>
76 |               </Nav>
77 |             </Navbar.Collapse>
78 |           </Navbar>
79 |         </div>
80 |         <p>
81 |           Set <code>class="has-bootcards-navbar-double"</code> on the body
82 |           element to deal with the increased height of the navbar.
83 |         </p>
84 |         <Highlight>
85 |           {
86 |             '<Navbar fluid collapseOnSelect className="bootcards-navbar-double">\n  <Navbar.Header>\n    <Navbar.Toggle />\n  </Navbar.Header>\n  <Navbar.Brand>\n    <a title="Bootcards Starter" href="/">\n      Bootcards Starter\n    </a>\n  </Navbar.Brand>\n  <Navbar.Collapse>\n    <Nav className="bootcards-nav-secondary" pullRight>\n      <NavDropdown\n        eventKey={1}\n        id="doublenavbar-languages"\n        title={[\n          <i key="icon" className="fa fa-globe" />,\n          <span key="title"> Languages</span>\n        ]}\n      >\n        <MenuItem eventKey={1.1}>Deutsch</MenuItem>\n        <MenuItem eventKey={1.2}>English</MenuItem>\n        <MenuItem eventKey={1.3}>Espanol</MenuItem>\n      </NavDropdown>\n      <NavItem eventKey={2} href="#">\n        <i className="fa fa-fw fa-lock" />\n        <span> Login</span>\n      </NavItem>\n    </Nav>\n    <Nav className="bootcards-nav-primary" pullRight>\n      <NavDropdown\n        eventKey={3}\n        id="doublenavbar-home"\n        title={[\n          <i key="icon" className="fa fa-fw fa-dashboard" />,\n          <span key="title"> Home</span>\n        ]}\n      >\n        <MenuItem eventKey={3.1} href="#">\n          <i className="fa fa-fw fa-envelope-o" /> Action\n        </MenuItem>\n        <MenuItem eventKey={3.2} href="#">\n          <i className="fa fa-fw fa-film" /> Another action\n        </MenuItem>\n        <MenuItem eventKey={3.3} href="#">\n          <i className="fa fa-fw fa-file-o" /> Something else here\n        </MenuItem>\n        <MenuItem divider />\n        <MenuItem eventKey={3.4} href="#">\n          <i className="fa fa-fw fa-bar-chart-o" /> Separated link\n        </MenuItem>\n      </NavDropdown>\n      <NavItem eventKey={4} href="#">\n        <i className="fa fa-fw fa-briefcase" />\n        <span> Portfolio</span>\n      </NavItem>\n      <NavItem eventKey={5} href="#">\n        <i className="fa fa-fw fa-bullhorn" />\n        <span> Blog</span>\n      </NavItem>\n    </Nav>\n  </Navbar.Collapse>\n</Navbar>\n'
87 |           }
88 |         </Highlight>
89 |       </Section>
90 |     );
91 |   }
92 | }
93 | 
94 | export default DoubleNavbar;
95 | 


--------------------------------------------------------------------------------
/example/src/Documentation.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { Nav, NavItem, Row, Col } from 'react-bootstrap';
  3 | import { Cards, Card, CardBody } from 'react-bootcards';
  4 | 
  5 | import Grid from './sections/Grid';
  6 | import Navigation from './sections/Navigation';
  7 | import SecNavbar from './sections/Navbar';
  8 | import DoubleNavbar from './sections/DoubleNavbar';
  9 | import FooterBar from './sections/FooterBar';
 10 | import SlidingSidebar from './sections/SlidingSidebar';
 11 | import Submenus from './sections/Submenus';
 12 | import Lists from './sections/Lists';
 13 | import ListDetail from './sections/ListDetail';
 14 | import ListSearch from './sections/ListSearch';
 15 | import SecCards from './sections/Cards';
 16 | import BaseCard from './sections/BaseCard';
 17 | import FormCard from './sections/FormCard';
 18 | import TableCard from './sections/TableCard';
 19 | import ChartCard from './sections/ChartCard';
 20 | import SummaryCard from './sections/SummaryCard';
 21 | import MediaCard from './sections/MediaCard';
 22 | import FileCard from './sections/FileCard';
 23 | import RichTextCard from './sections/RichTextCard';
 24 | import Modals from './sections/Modals';
 25 | 
 26 | class Documentation extends React.Component {
 27 |   constructor(props) {
 28 |     super(props);
 29 |     this.state = {
 30 |       selectedDocsMenu: 'doc-grid'
 31 |     };
 32 |   }
 33 | 
 34 |   handleDocsMenuSelect(eventKey) {
 35 |     this.setState({ selectedDocsMenu: eventKey });
 36 |     window.location.hash = eventKey;
 37 |   }
 38 | 
 39 |   render() {
 40 |     return (
 41 |       <Row>
 42 |         <Col sm={3} className="hidden-xs">
 43 |           <div className="docs-menu affix">
 44 |             <Nav
 45 |               bsStyle="pills"
 46 |               stacked
 47 |               onSelect={this.handleDocsMenuSelect.bind(this)}
 48 |               activeKey={this.state.selectedDocsMenu}
 49 |             >
 50 |               <NavItem className="" href="#doc-grid" eventKey="doc-grid">
 51 |                 Grid System
 52 |               </NavItem>
 53 |               <NavItem
 54 |                 className=""
 55 |                 href="#doc-navigation"
 56 |                 eventKey="doc-navigation"
 57 |               >
 58 |                 Navigation
 59 |               </NavItem>
 60 |               <NavItem className="sub" href="#doc-navbar" eventKey="doc-navbar">
 61 |                 Navbar
 62 |               </NavItem>
 63 |               <NavItem
 64 |                 className="sub"
 65 |                 href="#doc-doublenavbar"
 66 |                 eventKey="doc-doublenavbar"
 67 |               >
 68 |                 Double Navbar
 69 |               </NavItem>
 70 |               <NavItem
 71 |                 className="sub"
 72 |                 href="#doc-footerbar"
 73 |                 eventKey="doc-footerbar"
 74 |               >
 75 |                 Footer Bar
 76 |               </NavItem>
 77 |               <NavItem
 78 |                 className="sub"
 79 |                 href="#doc-slidingsidebar"
 80 |                 eventKey="doc-slidingsidebar"
 81 |               >
 82 |                 Sliding Sidebar
 83 |               </NavItem>
 84 |               <NavItem className="" href="#doc-lists" eventKey="doc-lists">
 85 |                 Lists
 86 |               </NavItem>
 87 |               <NavItem
 88 |                 className="sub"
 89 |                 href="#doc-listdetail"
 90 |                 eventKey="doc-listdetail"
 91 |               >
 92 |                 Detailed Lists
 93 |               </NavItem>
 94 |               <NavItem
 95 |                 className=""
 96 |                 href="#doc-listsearch"
 97 |                 eventKey="doc-listsearch"
 98 |               >
 99 |                 List Search &amp; List Actions
100 |               </NavItem>
101 |               <NavItem className="" href="#doc-cards" eventKey="doc-cards">
102 |                 Cards
103 |               </NavItem>
104 |               <NavItem
105 |                 className="sub"
106 |                 href="#doc-basecard"
107 |                 eventKey="doc-basecard"
108 |               >
109 |                 Base Cards
110 |               </NavItem>
111 |               <NavItem
112 |                 className="sub"
113 |                 href="#doc-formcard"
114 |                 eventKey="doc-formcard"
115 |               >
116 |                 Form Cards
117 |               </NavItem>
118 |               <NavItem
119 |                 className="sub"
120 |                 href="#doc-tablecard"
121 |                 eventKey="doc-tablecard"
122 |               >
123 |                 Table Cards
124 |               </NavItem>
125 |               <NavItem
126 |                 className="sub"
127 |                 href="#doc-chartcard"
128 |                 eventKey="doc-chartcard"
129 |               >
130 |                 Chart Cards
131 |               </NavItem>
132 |               <NavItem
133 |                 className="sub"
134 |                 href="#doc-summarycard"
135 |                 eventKey="doc-summarycard"
136 |               >
137 |                 Summary Cards
138 |               </NavItem>
139 |               <NavItem
140 |                 className="sub"
141 |                 href="#doc-mediacard"
142 |                 eventKey="doc-mediacard"
143 |               >
144 |                 Media Cards
145 |               </NavItem>
146 |               <NavItem
147 |                 className="sub"
148 |                 href="#doc-filecard"
149 |                 eventKey="doc-filecard"
150 |               >
151 |                 File Cards
152 |               </NavItem>
153 |               <NavItem
154 |                 className="sub"
155 |                 href="#doc-richtextcard"
156 |                 eventKey="doc-richtextcard"
157 |               >
158 |                 Rich Text Cards
159 |               </NavItem>
160 |               <NavItem className="" href="#doc-modals" eventKey="doc-modals">
161 |                 Modals
162 |               </NavItem>
163 |             </Nav>
164 |           </div>
165 |         </Col>
166 |         <Cards sm={9} className="bootcards-documentasion-cards">
167 |           <Card cardStyle="richtext">
168 |             <CardBody>
169 |               <Grid />
170 |               <Navigation />
171 |               <SecNavbar />
172 |               <DoubleNavbar />
173 |               <FooterBar />
174 |               <SlidingSidebar />
175 |               <Submenus />
176 |               <Lists />
177 |               <ListDetail />
178 |               <ListSearch />
179 |               <SecCards />
180 |               <BaseCard />
181 |               <FormCard />
182 |               <TableCard />
183 |               <ChartCard />
184 |               <SummaryCard />
185 |               <MediaCard />
186 |               <FileCard />
187 |               <RichTextCard />
188 |               <Modals />
189 |             </CardBody>
190 |           </Card>
191 |         </Cards>
192 |       </Row>
193 |     );
194 |   }
195 | }
196 | 
197 | export default Documentation;
198 | 


--------------------------------------------------------------------------------
/dist/react-bootcards.min.js:
--------------------------------------------------------------------------------
1 | !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("prop-types"),require("react"),require("classnames"),require("react-bootstrap")):"function"==typeof define&&define.amd?define(["exports","prop-types","react","classnames","react-bootstrap"],t):t(e["react-bootcards"]={},e.PropTypes,e.React,e.classNames,e.ReactBootstrap)}(this,function(e,t,r,n,a){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t,r=r&&r.hasOwnProperty("default")?r.default:r,n=n&&n.hasOwnProperty("default")?n.default:n;!function(){function e(e){this.value=e}function t(t){var r,n;function a(r,n){try{var o=t[r](n),l=o.value;l instanceof e?Promise.resolve(l.value).then(function(e){a("next",e)},function(e){a("throw",e)}):s(o.done?"return":"normal",o.value)}catch(e){s("throw",e)}}function s(e,t){switch(e){case"return":r.resolve({value:t,done:!0});break;case"throw":r.reject(t);break;default:r.resolve({value:t,done:!1})}(r=r.next)?a(r.key,r.arg):n=null}this._invoke=function(e,t){return new Promise(function(s,o){var l={key:e,arg:t,resolve:s,reject:o,next:null};n?n=n.next=l:(r=n=l,a(e,t))})},"function"!=typeof t.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(t.prototype[Symbol.asyncIterator]=function(){return this}),t.prototype.next=function(e){return this._invoke("next",e)},t.prototype.throw=function(e){return this._invoke("throw",e)},t.prototype.return=function(e){return this._invoke("return",e)}}();var s=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},o=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},c=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},i=function(e,t){var r={};for(var n in e)t.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n]);return r},u=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},p=function(e){function t(e){return s(this,t),u(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))}return c(t,e),o(t,[{key:"render",value:function(){var e=this.props,t=e.componentClass,a=e.headingClassName,s=e.className,o=i(e,["componentClass","headingClassName","className"]),c=t;return r.createElement(c,l({},o,{className:n(s,a)}),this.props.children)}}]),t}(r.Component);p.defaultProps={componentClass:"div",headingClassName:"container"};var m=function(e){function t(e){return s(this,t),u(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))}return c(t,e),o(t,[{key:"render",value:function(){var e=this.props,t=e.cardsClassName,s=e.className,o=i(e,["cardsClassName","className"]);return r.createElement(a.Col,l({},o,{className:n(s,t)}),this.props.children)}}]),t}(r.Component);m.defaultProps={cardsClassName:"bootcards-cards"};var f=function(e){function t(e){return s(this,t),u(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))}return c(t,e),o(t,[{key:"render",value:function(){var e=this.props,t=e.listClassName,s=e.className,o=i(e,["listClassName","className"]);return r.createElement(a.Col,l({},o,{className:n(s,t)}),this.props.children)}}]),t}(r.Component);f.defaultProps={listClassName:"bootcards-list"};var h=function(e){function t(e){return s(this,t),u(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))}return c(t,e),o(t,[{key:"render",value:function(){var e=this.props,t=e.componentClass,a=e.headerClassName,s=e.className,o=i(e,["componentClass","headerClassName","className"]),c=t;return r.createElement(c,l({},o,{className:n(s,a)}),this.props.children)}}]),t}(r.Component);h.defaultProps={componentClass:"h4",headerClassName:"list-group-item-heading"};var d=function(e){function t(e){return s(this,t),u(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))}return c(t,e),o(t,[{key:"render",value:function(){var e=this.props,t=e.componentClass,a=e.textClassName,s=e.className,o=i(e,["componentClass","textClassName","className"]),c=t;return r.createElement(c,l({},o,{className:n(s,a)}),this.props.children)}}]),t}(r.Component);d.defaultProps={componentClass:"p",textClassName:"list-group-item-text"};var C=function(e){function t(e){return s(this,t),u(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))}return c(t,e),o(t,[{key:"render",value:function(){var e=this.props,t=e.cardStyle,s=i(e,["cardStyle"]),o="default"===t?null:"bootcards-"+t;return r.createElement(a.Panel,l({},s,{className:n(s.className,o)}),this.props.children)}}]),t}(r.Component);C.defaultProps={cardStyle:"default"};var y=function(e){function t(e){return s(this,t),u(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))}return c(t,e),o(t,[{key:"render",value:function(){var e=this.props,t=e.componentClass,a=e.headerClassName,s=e.className,o=i(e,["componentClass","headerClassName","className"]),c=t;return r.createElement(c,l({},o,{className:n(s,a)}),this.props.children)}}]),t}(r.Component);y.defaultProps={componentClass:"div",headerClassName:"panel-heading"};var v=function(e){function t(e){return s(this,t),u(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))}return c(t,e),o(t,[{key:"render",value:function(){var e=this.props,t=e.componentClass,a=e.titleClassName,s=e.className,o=i(e,["componentClass","titleClassName","className"]),c=t;return r.createElement(c,l({},o,{className:n(s,a)}),this.props.children)}}]),t}(r.Component);v.defaultProps={componentClass:"h3",titleClassName:"panel-title"};var N=function(e){function t(e){return s(this,t),u(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))}return c(t,e),o(t,[{key:"render",value:function(){var e=this.props,t=e.componentClass,a=e.footerClassName,s=e.className,o=i(e,["componentClass","footerClassName","className"]),c=t;return r.createElement(c,l({},o,{className:n(s,a)}),this.props.children)}}]),t}(r.Component);N.defaultProps={componentClass:"div",footerClassName:"panel-footer"};var _=function(e){function t(){return s(this,t),u(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return c(t,e),o(t,[{key:"render",value:function(){return r.createElement(a.Panel.Body,this.props,this.props.children)}}]),t}(r.Component),b=function(e){function t(e){return s(this,t),u(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))}return c(t,e),o(t,[{key:"render",value:function(){var e=this.props,t=e.componentClass,a=e.itemClassName,s=e.className,o=i(e,["componentClass","itemClassName","className"]),c=t;return r.createElement(c,l({},o,{className:n(s,a)}),this.props.children)}}]),t}(r.Component);b.defaultProps={componentClass:"a",itemClassName:"bootcards-summary-item"};var O=function(e){function t(e){return s(this,t),u(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))}return c(t,e),o(t,[{key:"render",value:function(){var e=this.props,t=e.componentClass,a=e.canvasClassName,s=e.className,o=i(e,["componentClass","canvasClassName","className"]),c=t;return r.createElement(c,l({},o,{className:n(s,a)}),this.props.children)}}]),t}(r.Component);O.defaultProps={componentClass:"div",canvasClassName:"bootcards-chart-canvas"},e.Container=p,e.Cards=m,e.List=f,e.ListGroupItemHeader=h,e.ListGroupItemText=d,e.Card=C,e.CardHeader=y,e.CardTitle=v,e.CardFooter=N,e.CardBody=_,e.SummaryItem=b,e.ChartCanvas=O,Object.defineProperty(e,"__esModule",{value:!0})});
2 | 


--------------------------------------------------------------------------------
/dist/react-bootcards.es.js:
--------------------------------------------------------------------------------
  1 | import PropTypes from 'prop-types';
  2 | import React from 'react';
  3 | import classNames from 'classnames';
  4 | import { Col, Panel } from 'react-bootstrap';
  5 | 
  6 | var asyncGenerator = function () {
  7 |   function AwaitValue(value) {
  8 |     this.value = value;
  9 |   }
 10 | 
 11 |   function AsyncGenerator(gen) {
 12 |     var front, back;
 13 | 
 14 |     function send(key, arg) {
 15 |       return new Promise(function (resolve, reject) {
 16 |         var request = {
 17 |           key: key,
 18 |           arg: arg,
 19 |           resolve: resolve,
 20 |           reject: reject,
 21 |           next: null
 22 |         };
 23 | 
 24 |         if (back) {
 25 |           back = back.next = request;
 26 |         } else {
 27 |           front = back = request;
 28 |           resume(key, arg);
 29 |         }
 30 |       });
 31 |     }
 32 | 
 33 |     function resume(key, arg) {
 34 |       try {
 35 |         var result = gen[key](arg);
 36 |         var value = result.value;
 37 | 
 38 |         if (value instanceof AwaitValue) {
 39 |           Promise.resolve(value.value).then(function (arg) {
 40 |             resume("next", arg);
 41 |           }, function (arg) {
 42 |             resume("throw", arg);
 43 |           });
 44 |         } else {
 45 |           settle(result.done ? "return" : "normal", result.value);
 46 |         }
 47 |       } catch (err) {
 48 |         settle("throw", err);
 49 |       }
 50 |     }
 51 | 
 52 |     function settle(type, value) {
 53 |       switch (type) {
 54 |         case "return":
 55 |           front.resolve({
 56 |             value: value,
 57 |             done: true
 58 |           });
 59 |           break;
 60 | 
 61 |         case "throw":
 62 |           front.reject(value);
 63 |           break;
 64 | 
 65 |         default:
 66 |           front.resolve({
 67 |             value: value,
 68 |             done: false
 69 |           });
 70 |           break;
 71 |       }
 72 | 
 73 |       front = front.next;
 74 | 
 75 |       if (front) {
 76 |         resume(front.key, front.arg);
 77 |       } else {
 78 |         back = null;
 79 |       }
 80 |     }
 81 | 
 82 |     this._invoke = send;
 83 | 
 84 |     if (typeof gen.return !== "function") {
 85 |       this.return = undefined;
 86 |     }
 87 |   }
 88 | 
 89 |   if (typeof Symbol === "function" && Symbol.asyncIterator) {
 90 |     AsyncGenerator.prototype[Symbol.asyncIterator] = function () {
 91 |       return this;
 92 |     };
 93 |   }
 94 | 
 95 |   AsyncGenerator.prototype.next = function (arg) {
 96 |     return this._invoke("next", arg);
 97 |   };
 98 | 
 99 |   AsyncGenerator.prototype.throw = function (arg) {
100 |     return this._invoke("throw", arg);
101 |   };
102 | 
103 |   AsyncGenerator.prototype.return = function (arg) {
104 |     return this._invoke("return", arg);
105 |   };
106 | 
107 |   return {
108 |     wrap: function (fn) {
109 |       return function () {
110 |         return new AsyncGenerator(fn.apply(this, arguments));
111 |       };
112 |     },
113 |     await: function (value) {
114 |       return new AwaitValue(value);
115 |     }
116 |   };
117 | }();
118 | 
119 | 
120 | 
121 | 
122 | 
123 | var classCallCheck = function (instance, Constructor) {
124 |   if (!(instance instanceof Constructor)) {
125 |     throw new TypeError("Cannot call a class as a function");
126 |   }
127 | };
128 | 
129 | var createClass = function () {
130 |   function defineProperties(target, props) {
131 |     for (var i = 0; i < props.length; i++) {
132 |       var descriptor = props[i];
133 |       descriptor.enumerable = descriptor.enumerable || false;
134 |       descriptor.configurable = true;
135 |       if ("value" in descriptor) descriptor.writable = true;
136 |       Object.defineProperty(target, descriptor.key, descriptor);
137 |     }
138 |   }
139 | 
140 |   return function (Constructor, protoProps, staticProps) {
141 |     if (protoProps) defineProperties(Constructor.prototype, protoProps);
142 |     if (staticProps) defineProperties(Constructor, staticProps);
143 |     return Constructor;
144 |   };
145 | }();
146 | 
147 | 
148 | 
149 | 
150 | 
151 | 
152 | 
153 | var _extends = Object.assign || function (target) {
154 |   for (var i = 1; i < arguments.length; i++) {
155 |     var source = arguments[i];
156 | 
157 |     for (var key in source) {
158 |       if (Object.prototype.hasOwnProperty.call(source, key)) {
159 |         target[key] = source[key];
160 |       }
161 |     }
162 |   }
163 | 
164 |   return target;
165 | };
166 | 
167 | 
168 | 
169 | var inherits = function (subClass, superClass) {
170 |   if (typeof superClass !== "function" && superClass !== null) {
171 |     throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
172 |   }
173 | 
174 |   subClass.prototype = Object.create(superClass && superClass.prototype, {
175 |     constructor: {
176 |       value: subClass,
177 |       enumerable: false,
178 |       writable: true,
179 |       configurable: true
180 |     }
181 |   });
182 |   if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
183 | };
184 | 
185 | 
186 | 
187 | 
188 | 
189 | 
190 | 
191 | 
192 | 
193 | var objectWithoutProperties = function (obj, keys) {
194 |   var target = {};
195 | 
196 |   for (var i in obj) {
197 |     if (keys.indexOf(i) >= 0) continue;
198 |     if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
199 |     target[i] = obj[i];
200 |   }
201 | 
202 |   return target;
203 | };
204 | 
205 | var possibleConstructorReturn = function (self, call) {
206 |   if (!self) {
207 |     throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
208 |   }
209 | 
210 |   return call && (typeof call === "object" || typeof call === "function") ? call : self;
211 | };
212 | 
213 | var Container = function (_React$Component) {
214 |   inherits(Container, _React$Component);
215 | 
216 |   function Container(props) {
217 |     classCallCheck(this, Container);
218 |     return possibleConstructorReturn(this, (Container.__proto__ || Object.getPrototypeOf(Container)).call(this, props));
219 |   }
220 | 
221 |   createClass(Container, [{
222 |     key: 'render',
223 |     value: function render() {
224 |       var _props = this.props,
225 |           componentClass = _props.componentClass,
226 |           headingClassName = _props.headingClassName,
227 |           className = _props.className,
228 |           props = objectWithoutProperties(_props, ['componentClass', 'headingClassName', 'className']);
229 | 
230 |       var Component = componentClass;
231 |       return React.createElement(
232 |         Component,
233 |         _extends({}, props, { className: classNames(className, headingClassName) }),
234 |         this.props.children
235 |       );
236 |     }
237 |   }]);
238 |   return Container;
239 | }(React.Component);
240 | 
241 | Container.propTypes = {
242 |   children: PropTypes.node,
243 |   className: PropTypes.string,
244 |   componentClass: PropTypes.string,
245 |   headingClassName: PropTypes.string
246 | };
247 | 
248 | Container.defaultProps = {
249 |   componentClass: 'div',
250 |   headingClassName: 'container'
251 | };
252 | 
253 | var Cards = function (_React$Component) {
254 |   inherits(Cards, _React$Component);
255 | 
256 |   function Cards(props) {
257 |     classCallCheck(this, Cards);
258 |     return possibleConstructorReturn(this, (Cards.__proto__ || Object.getPrototypeOf(Cards)).call(this, props));
259 |   }
260 | 
261 |   createClass(Cards, [{
262 |     key: 'render',
263 |     value: function render() {
264 |       var _props = this.props,
265 |           cardsClassName = _props.cardsClassName,
266 |           className = _props.className,
267 |           props = objectWithoutProperties(_props, ['cardsClassName', 'className']);
268 | 
269 |       return React.createElement(
270 |         Col,
271 |         _extends({}, props, { className: classNames(className, cardsClassName) }),
272 |         this.props.children
273 |       );
274 |     }
275 |   }]);
276 |   return Cards;
277 | }(React.Component);
278 | 
279 | Cards.propTypes = {
280 |   cardsClassName: PropTypes.string,
281 |   children: PropTypes.node,
282 |   className: PropTypes.string
283 | };
284 | 
285 | Cards.defaultProps = {
286 |   cardsClassName: 'bootcards-cards'
287 | };
288 | 
289 | var List = function (_React$Component) {
290 |   inherits(List, _React$Component);
291 | 
292 |   function List(props) {
293 |     classCallCheck(this, List);
294 |     return possibleConstructorReturn(this, (List.__proto__ || Object.getPrototypeOf(List)).call(this, props));
295 |   }
296 | 
297 |   createClass(List, [{
298 |     key: 'render',
299 |     value: function render() {
300 |       var _props = this.props,
301 |           listClassName = _props.listClassName,
302 |           className = _props.className,
303 |           props = objectWithoutProperties(_props, ['listClassName', 'className']);
304 | 
305 |       return React.createElement(
306 |         Col,
307 |         _extends({}, props, { className: classNames(className, listClassName) }),
308 |         this.props.children
309 |       );
310 |     }
311 |   }]);
312 |   return List;
313 | }(React.Component);
314 | 
315 | List.propTypes = {
316 |   children: PropTypes.node,
317 |   className: PropTypes.string,
318 |   listClassName: PropTypes.string
319 | };
320 | 
321 | List.defaultProps = {
322 |   listClassName: 'bootcards-list'
323 | };
324 | 
325 | var ListGroupItemHeader = function (_React$Component) {
326 |   inherits(ListGroupItemHeader, _React$Component);
327 | 
328 |   function ListGroupItemHeader(props) {
329 |     classCallCheck(this, ListGroupItemHeader);
330 |     return possibleConstructorReturn(this, (ListGroupItemHeader.__proto__ || Object.getPrototypeOf(ListGroupItemHeader)).call(this, props));
331 |   }
332 | 
333 |   createClass(ListGroupItemHeader, [{
334 |     key: 'render',
335 |     value: function render() {
336 |       var _props = this.props,
337 |           componentClass = _props.componentClass,
338 |           headerClassName = _props.headerClassName,
339 |           className = _props.className,
340 |           props = objectWithoutProperties(_props, ['componentClass', 'headerClassName', 'className']);
341 | 
342 |       var Component = componentClass;
343 |       return React.createElement(
344 |         Component,
345 |         _extends({}, props, { className: classNames(className, headerClassName) }),
346 |         this.props.children
347 |       );
348 |     }
349 |   }]);
350 |   return ListGroupItemHeader;
351 | }(React.Component);
352 | 
353 | ListGroupItemHeader.propTypes = {
354 |   children: PropTypes.node,
355 |   className: PropTypes.string,
356 |   componentClass: PropTypes.string,
357 |   headerClassName: PropTypes.string
358 | };
359 | 
360 | ListGroupItemHeader.defaultProps = {
361 |   componentClass: 'h4',
362 |   headerClassName: 'list-group-item-heading'
363 | };
364 | 
365 | var ListGroupItemText = function (_React$Component) {
366 |   inherits(ListGroupItemText, _React$Component);
367 | 
368 |   function ListGroupItemText(props) {
369 |     classCallCheck(this, ListGroupItemText);
370 |     return possibleConstructorReturn(this, (ListGroupItemText.__proto__ || Object.getPrototypeOf(ListGroupItemText)).call(this, props));
371 |   }
372 | 
373 |   createClass(ListGroupItemText, [{
374 |     key: 'render',
375 |     value: function render() {
376 |       var _props = this.props,
377 |           componentClass = _props.componentClass,
378 |           textClassName = _props.textClassName,
379 |           className = _props.className,
380 |           props = objectWithoutProperties(_props, ['componentClass', 'textClassName', 'className']);
381 | 
382 |       var Component = componentClass;
383 |       return React.createElement(
384 |         Component,
385 |         _extends({}, props, { className: classNames(className, textClassName) }),
386 |         this.props.children
387 |       );
388 |     }
389 |   }]);
390 |   return ListGroupItemText;
391 | }(React.Component);
392 | 
393 | ListGroupItemText.propTypes = {
394 |   children: PropTypes.node,
395 |   className: PropTypes.string,
396 |   componentClass: PropTypes.string,
397 |   textClassName: PropTypes.string
398 | };
399 | 
400 | ListGroupItemText.defaultProps = {
401 |   componentClass: 'p',
402 |   textClassName: 'list-group-item-text'
403 | };
404 | 
405 | var Card = function (_React$Component) {
406 |   inherits(Card, _React$Component);
407 | 
408 |   function Card(props) {
409 |     classCallCheck(this, Card);
410 |     return possibleConstructorReturn(this, (Card.__proto__ || Object.getPrototypeOf(Card)).call(this, props));
411 |   }
412 | 
413 |   createClass(Card, [{
414 |     key: 'render',
415 |     value: function render() {
416 |       var _props = this.props,
417 |           cardStyle = _props.cardStyle,
418 |           props = objectWithoutProperties(_props, ['cardStyle']);
419 | 
420 |       var cardClassName = cardStyle === 'default' ? null : 'bootcards-' + cardStyle;
421 |       return React.createElement(
422 |         Panel,
423 |         _extends({}, props, { className: classNames(props.className, cardClassName) }),
424 |         this.props.children
425 |       );
426 |     }
427 |   }]);
428 |   return Card;
429 | }(React.Component);
430 | 
431 | Card.propTypes = {
432 |   cardStyle: PropTypes.oneOf(['default', 'chart', 'summary', 'media', 'file', 'richtext']),
433 |   children: PropTypes.node,
434 |   className: PropTypes.string
435 | };
436 | 
437 | Card.defaultProps = {
438 |   cardStyle: 'default'
439 | };
440 | 
441 | var CardHeader = function (_React$Component) {
442 |   inherits(CardHeader, _React$Component);
443 | 
444 |   function CardHeader(props) {
445 |     classCallCheck(this, CardHeader);
446 |     return possibleConstructorReturn(this, (CardHeader.__proto__ || Object.getPrototypeOf(CardHeader)).call(this, props));
447 |   }
448 | 
449 |   createClass(CardHeader, [{
450 |     key: 'render',
451 |     value: function render() {
452 |       var _props = this.props,
453 |           componentClass = _props.componentClass,
454 |           headerClassName = _props.headerClassName,
455 |           className = _props.className,
456 |           props = objectWithoutProperties(_props, ['componentClass', 'headerClassName', 'className']);
457 | 
458 |       var Component = componentClass;
459 |       return React.createElement(
460 |         Component,
461 |         _extends({}, props, { className: classNames(className, headerClassName) }),
462 |         this.props.children
463 |       );
464 |     }
465 |   }]);
466 |   return CardHeader;
467 | }(React.Component);
468 | 
469 | CardHeader.propTypes = {
470 |   children: PropTypes.node,
471 |   className: PropTypes.string,
472 |   componentClass: PropTypes.string,
473 |   headerClassName: PropTypes.string
474 | };
475 | 
476 | CardHeader.defaultProps = {
477 |   componentClass: 'div',
478 |   headerClassName: 'panel-heading'
479 | };
480 | 
481 | var CardTitle = function (_React$Component) {
482 |   inherits(CardTitle, _React$Component);
483 | 
484 |   function CardTitle(props) {
485 |     classCallCheck(this, CardTitle);
486 |     return possibleConstructorReturn(this, (CardTitle.__proto__ || Object.getPrototypeOf(CardTitle)).call(this, props));
487 |   }
488 | 
489 |   createClass(CardTitle, [{
490 |     key: 'render',
491 |     value: function render() {
492 |       var _props = this.props,
493 |           componentClass = _props.componentClass,
494 |           titleClassName = _props.titleClassName,
495 |           className = _props.className,
496 |           props = objectWithoutProperties(_props, ['componentClass', 'titleClassName', 'className']);
497 | 
498 |       var Component = componentClass;
499 |       return React.createElement(
500 |         Component,
501 |         _extends({}, props, { className: classNames(className, titleClassName) }),
502 |         this.props.children
503 |       );
504 |     }
505 |   }]);
506 |   return CardTitle;
507 | }(React.Component);
508 | 
509 | CardTitle.propTypes = {
510 |   children: PropTypes.node,
511 |   className: PropTypes.string,
512 |   componentClass: PropTypes.string,
513 |   titleClassName: PropTypes.string
514 | };
515 | 
516 | CardTitle.defaultProps = {
517 |   componentClass: 'h3',
518 |   titleClassName: 'panel-title'
519 | };
520 | 
521 | var CardFooter = function (_React$Component) {
522 |   inherits(CardFooter, _React$Component);
523 | 
524 |   function CardFooter(props) {
525 |     classCallCheck(this, CardFooter);
526 |     return possibleConstructorReturn(this, (CardFooter.__proto__ || Object.getPrototypeOf(CardFooter)).call(this, props));
527 |   }
528 | 
529 |   createClass(CardFooter, [{
530 |     key: 'render',
531 |     value: function render() {
532 |       var _props = this.props,
533 |           componentClass = _props.componentClass,
534 |           footerClassName = _props.footerClassName,
535 |           className = _props.className,
536 |           props = objectWithoutProperties(_props, ['componentClass', 'footerClassName', 'className']);
537 | 
538 |       var Component = componentClass;
539 |       return React.createElement(
540 |         Component,
541 |         _extends({}, props, { className: classNames(className, footerClassName) }),
542 |         this.props.children
543 |       );
544 |     }
545 |   }]);
546 |   return CardFooter;
547 | }(React.Component);
548 | 
549 | CardFooter.propTypes = {
550 |   children: PropTypes.node,
551 |   className: PropTypes.string,
552 |   componentClass: PropTypes.string,
553 |   footerClassName: PropTypes.string
554 | };
555 | 
556 | CardFooter.defaultProps = {
557 |   componentClass: 'div',
558 |   footerClassName: 'panel-footer'
559 | };
560 | 
561 | var CardBody = function (_React$Component) {
562 |   inherits(CardBody, _React$Component);
563 | 
564 |   function CardBody() {
565 |     classCallCheck(this, CardBody);
566 |     return possibleConstructorReturn(this, (CardBody.__proto__ || Object.getPrototypeOf(CardBody)).apply(this, arguments));
567 |   }
568 | 
569 |   createClass(CardBody, [{
570 |     key: 'render',
571 |     value: function render() {
572 |       return React.createElement(
573 |         Panel.Body,
574 |         this.props,
575 |         this.props.children
576 |       );
577 |     }
578 |   }]);
579 |   return CardBody;
580 | }(React.Component);
581 | 
582 | CardBody.propTypes = {
583 |   children: PropTypes.node
584 | };
585 | 
586 | var SummaryItem = function (_React$Component) {
587 |   inherits(SummaryItem, _React$Component);
588 | 
589 |   function SummaryItem(props) {
590 |     classCallCheck(this, SummaryItem);
591 |     return possibleConstructorReturn(this, (SummaryItem.__proto__ || Object.getPrototypeOf(SummaryItem)).call(this, props));
592 |   }
593 | 
594 |   createClass(SummaryItem, [{
595 |     key: 'render',
596 |     value: function render() {
597 |       var _props = this.props,
598 |           componentClass = _props.componentClass,
599 |           itemClassName = _props.itemClassName,
600 |           className = _props.className,
601 |           props = objectWithoutProperties(_props, ['componentClass', 'itemClassName', 'className']);
602 | 
603 |       var Component = componentClass;
604 |       return React.createElement(
605 |         Component,
606 |         _extends({}, props, { className: classNames(className, itemClassName) }),
607 |         this.props.children
608 |       );
609 |     }
610 |   }]);
611 |   return SummaryItem;
612 | }(React.Component);
613 | 
614 | SummaryItem.propTypes = {
615 |   children: PropTypes.node,
616 |   className: PropTypes.string,
617 |   componentClass: PropTypes.string,
618 |   itemClassName: PropTypes.string
619 | };
620 | 
621 | SummaryItem.defaultProps = {
622 |   componentClass: 'a',
623 |   itemClassName: 'bootcards-summary-item'
624 | };
625 | 
626 | var ChartCanvas = function (_React$Component) {
627 |   inherits(ChartCanvas, _React$Component);
628 | 
629 |   function ChartCanvas(props) {
630 |     classCallCheck(this, ChartCanvas);
631 |     return possibleConstructorReturn(this, (ChartCanvas.__proto__ || Object.getPrototypeOf(ChartCanvas)).call(this, props));
632 |   }
633 | 
634 |   createClass(ChartCanvas, [{
635 |     key: 'render',
636 |     value: function render() {
637 |       var _props = this.props,
638 |           componentClass = _props.componentClass,
639 |           canvasClassName = _props.canvasClassName,
640 |           className = _props.className,
641 |           props = objectWithoutProperties(_props, ['componentClass', 'canvasClassName', 'className']);
642 | 
643 |       var Component = componentClass;
644 |       return React.createElement(
645 |         Component,
646 |         _extends({}, props, { className: classNames(className, canvasClassName) }),
647 |         this.props.children
648 |       );
649 |     }
650 |   }]);
651 |   return ChartCanvas;
652 | }(React.Component);
653 | 
654 | ChartCanvas.propTypes = {
655 |   canvasClassName: PropTypes.string,
656 |   children: PropTypes.node,
657 |   className: PropTypes.string,
658 |   componentClass: PropTypes.string
659 | };
660 | 
661 | ChartCanvas.defaultProps = {
662 |   componentClass: 'div',
663 |   canvasClassName: 'bootcards-chart-canvas'
664 | };
665 | 
666 | export { Container, Cards, List, ListGroupItemHeader, ListGroupItemText, Card, CardHeader, CardTitle, CardFooter, CardBody, SummaryItem, ChartCanvas };
667 | 


--------------------------------------------------------------------------------
/dist/react-bootcards.js:
--------------------------------------------------------------------------------
  1 | (function (global, factory) {
  2 | 	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('prop-types'), require('react'), require('classnames'), require('react-bootstrap')) :
  3 | 	typeof define === 'function' && define.amd ? define(['exports', 'prop-types', 'react', 'classnames', 'react-bootstrap'], factory) :
  4 | 	(factory((global['react-bootcards'] = {}),global.PropTypes,global.React,global.classNames,global.ReactBootstrap));
  5 | }(this, (function (exports,PropTypes,React,classNames,reactBootstrap) { 'use strict';
  6 | 
  7 | PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes;
  8 | React = React && React.hasOwnProperty('default') ? React['default'] : React;
  9 | classNames = classNames && classNames.hasOwnProperty('default') ? classNames['default'] : classNames;
 10 | 
 11 | var asyncGenerator = function () {
 12 |   function AwaitValue(value) {
 13 |     this.value = value;
 14 |   }
 15 | 
 16 |   function AsyncGenerator(gen) {
 17 |     var front, back;
 18 | 
 19 |     function send(key, arg) {
 20 |       return new Promise(function (resolve, reject) {
 21 |         var request = {
 22 |           key: key,
 23 |           arg: arg,
 24 |           resolve: resolve,
 25 |           reject: reject,
 26 |           next: null
 27 |         };
 28 | 
 29 |         if (back) {
 30 |           back = back.next = request;
 31 |         } else {
 32 |           front = back = request;
 33 |           resume(key, arg);
 34 |         }
 35 |       });
 36 |     }
 37 | 
 38 |     function resume(key, arg) {
 39 |       try {
 40 |         var result = gen[key](arg);
 41 |         var value = result.value;
 42 | 
 43 |         if (value instanceof AwaitValue) {
 44 |           Promise.resolve(value.value).then(function (arg) {
 45 |             resume("next", arg);
 46 |           }, function (arg) {
 47 |             resume("throw", arg);
 48 |           });
 49 |         } else {
 50 |           settle(result.done ? "return" : "normal", result.value);
 51 |         }
 52 |       } catch (err) {
 53 |         settle("throw", err);
 54 |       }
 55 |     }
 56 | 
 57 |     function settle(type, value) {
 58 |       switch (type) {
 59 |         case "return":
 60 |           front.resolve({
 61 |             value: value,
 62 |             done: true
 63 |           });
 64 |           break;
 65 | 
 66 |         case "throw":
 67 |           front.reject(value);
 68 |           break;
 69 | 
 70 |         default:
 71 |           front.resolve({
 72 |             value: value,
 73 |             done: false
 74 |           });
 75 |           break;
 76 |       }
 77 | 
 78 |       front = front.next;
 79 | 
 80 |       if (front) {
 81 |         resume(front.key, front.arg);
 82 |       } else {
 83 |         back = null;
 84 |       }
 85 |     }
 86 | 
 87 |     this._invoke = send;
 88 | 
 89 |     if (typeof gen.return !== "function") {
 90 |       this.return = undefined;
 91 |     }
 92 |   }
 93 | 
 94 |   if (typeof Symbol === "function" && Symbol.asyncIterator) {
 95 |     AsyncGenerator.prototype[Symbol.asyncIterator] = function () {
 96 |       return this;
 97 |     };
 98 |   }
 99 | 
100 |   AsyncGenerator.prototype.next = function (arg) {
101 |     return this._invoke("next", arg);
102 |   };
103 | 
104 |   AsyncGenerator.prototype.throw = function (arg) {
105 |     return this._invoke("throw", arg);
106 |   };
107 | 
108 |   AsyncGenerator.prototype.return = function (arg) {
109 |     return this._invoke("return", arg);
110 |   };
111 | 
112 |   return {
113 |     wrap: function (fn) {
114 |       return function () {
115 |         return new AsyncGenerator(fn.apply(this, arguments));
116 |       };
117 |     },
118 |     await: function (value) {
119 |       return new AwaitValue(value);
120 |     }
121 |   };
122 | }();
123 | 
124 | 
125 | 
126 | 
127 | 
128 | var classCallCheck = function (instance, Constructor) {
129 |   if (!(instance instanceof Constructor)) {
130 |     throw new TypeError("Cannot call a class as a function");
131 |   }
132 | };
133 | 
134 | var createClass = function () {
135 |   function defineProperties(target, props) {
136 |     for (var i = 0; i < props.length; i++) {
137 |       var descriptor = props[i];
138 |       descriptor.enumerable = descriptor.enumerable || false;
139 |       descriptor.configurable = true;
140 |       if ("value" in descriptor) descriptor.writable = true;
141 |       Object.defineProperty(target, descriptor.key, descriptor);
142 |     }
143 |   }
144 | 
145 |   return function (Constructor, protoProps, staticProps) {
146 |     if (protoProps) defineProperties(Constructor.prototype, protoProps);
147 |     if (staticProps) defineProperties(Constructor, staticProps);
148 |     return Constructor;
149 |   };
150 | }();
151 | 
152 | 
153 | 
154 | 
155 | 
156 | 
157 | 
158 | var _extends = Object.assign || function (target) {
159 |   for (var i = 1; i < arguments.length; i++) {
160 |     var source = arguments[i];
161 | 
162 |     for (var key in source) {
163 |       if (Object.prototype.hasOwnProperty.call(source, key)) {
164 |         target[key] = source[key];
165 |       }
166 |     }
167 |   }
168 | 
169 |   return target;
170 | };
171 | 
172 | 
173 | 
174 | var inherits = function (subClass, superClass) {
175 |   if (typeof superClass !== "function" && superClass !== null) {
176 |     throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
177 |   }
178 | 
179 |   subClass.prototype = Object.create(superClass && superClass.prototype, {
180 |     constructor: {
181 |       value: subClass,
182 |       enumerable: false,
183 |       writable: true,
184 |       configurable: true
185 |     }
186 |   });
187 |   if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
188 | };
189 | 
190 | 
191 | 
192 | 
193 | 
194 | 
195 | 
196 | 
197 | 
198 | var objectWithoutProperties = function (obj, keys) {
199 |   var target = {};
200 | 
201 |   for (var i in obj) {
202 |     if (keys.indexOf(i) >= 0) continue;
203 |     if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
204 |     target[i] = obj[i];
205 |   }
206 | 
207 |   return target;
208 | };
209 | 
210 | var possibleConstructorReturn = function (self, call) {
211 |   if (!self) {
212 |     throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
213 |   }
214 | 
215 |   return call && (typeof call === "object" || typeof call === "function") ? call : self;
216 | };
217 | 
218 | var Container = function (_React$Component) {
219 |   inherits(Container, _React$Component);
220 | 
221 |   function Container(props) {
222 |     classCallCheck(this, Container);
223 |     return possibleConstructorReturn(this, (Container.__proto__ || Object.getPrototypeOf(Container)).call(this, props));
224 |   }
225 | 
226 |   createClass(Container, [{
227 |     key: 'render',
228 |     value: function render() {
229 |       var _props = this.props,
230 |           componentClass = _props.componentClass,
231 |           headingClassName = _props.headingClassName,
232 |           className = _props.className,
233 |           props = objectWithoutProperties(_props, ['componentClass', 'headingClassName', 'className']);
234 | 
235 |       var Component = componentClass;
236 |       return React.createElement(
237 |         Component,
238 |         _extends({}, props, { className: classNames(className, headingClassName) }),
239 |         this.props.children
240 |       );
241 |     }
242 |   }]);
243 |   return Container;
244 | }(React.Component);
245 | 
246 | Container.propTypes = {
247 |   children: PropTypes.node,
248 |   className: PropTypes.string,
249 |   componentClass: PropTypes.string,
250 |   headingClassName: PropTypes.string
251 | };
252 | 
253 | Container.defaultProps = {
254 |   componentClass: 'div',
255 |   headingClassName: 'container'
256 | };
257 | 
258 | var Cards = function (_React$Component) {
259 |   inherits(Cards, _React$Component);
260 | 
261 |   function Cards(props) {
262 |     classCallCheck(this, Cards);
263 |     return possibleConstructorReturn(this, (Cards.__proto__ || Object.getPrototypeOf(Cards)).call(this, props));
264 |   }
265 | 
266 |   createClass(Cards, [{
267 |     key: 'render',
268 |     value: function render() {
269 |       var _props = this.props,
270 |           cardsClassName = _props.cardsClassName,
271 |           className = _props.className,
272 |           props = objectWithoutProperties(_props, ['cardsClassName', 'className']);
273 | 
274 |       return React.createElement(
275 |         reactBootstrap.Col,
276 |         _extends({}, props, { className: classNames(className, cardsClassName) }),
277 |         this.props.children
278 |       );
279 |     }
280 |   }]);
281 |   return Cards;
282 | }(React.Component);
283 | 
284 | Cards.propTypes = {
285 |   cardsClassName: PropTypes.string,
286 |   children: PropTypes.node,
287 |   className: PropTypes.string
288 | };
289 | 
290 | Cards.defaultProps = {
291 |   cardsClassName: 'bootcards-cards'
292 | };
293 | 
294 | var List = function (_React$Component) {
295 |   inherits(List, _React$Component);
296 | 
297 |   function List(props) {
298 |     classCallCheck(this, List);
299 |     return possibleConstructorReturn(this, (List.__proto__ || Object.getPrototypeOf(List)).call(this, props));
300 |   }
301 | 
302 |   createClass(List, [{
303 |     key: 'render',
304 |     value: function render() {
305 |       var _props = this.props,
306 |           listClassName = _props.listClassName,
307 |           className = _props.className,
308 |           props = objectWithoutProperties(_props, ['listClassName', 'className']);
309 | 
310 |       return React.createElement(
311 |         reactBootstrap.Col,
312 |         _extends({}, props, { className: classNames(className, listClassName) }),
313 |         this.props.children
314 |       );
315 |     }
316 |   }]);
317 |   return List;
318 | }(React.Component);
319 | 
320 | List.propTypes = {
321 |   children: PropTypes.node,
322 |   className: PropTypes.string,
323 |   listClassName: PropTypes.string
324 | };
325 | 
326 | List.defaultProps = {
327 |   listClassName: 'bootcards-list'
328 | };
329 | 
330 | var ListGroupItemHeader = function (_React$Component) {
331 |   inherits(ListGroupItemHeader, _React$Component);
332 | 
333 |   function ListGroupItemHeader(props) {
334 |     classCallCheck(this, ListGroupItemHeader);
335 |     return possibleConstructorReturn(this, (ListGroupItemHeader.__proto__ || Object.getPrototypeOf(ListGroupItemHeader)).call(this, props));
336 |   }
337 | 
338 |   createClass(ListGroupItemHeader, [{
339 |     key: 'render',
340 |     value: function render() {
341 |       var _props = this.props,
342 |           componentClass = _props.componentClass,
343 |           headerClassName = _props.headerClassName,
344 |           className = _props.className,
345 |           props = objectWithoutProperties(_props, ['componentClass', 'headerClassName', 'className']);
346 | 
347 |       var Component = componentClass;
348 |       return React.createElement(
349 |         Component,
350 |         _extends({}, props, { className: classNames(className, headerClassName) }),
351 |         this.props.children
352 |       );
353 |     }
354 |   }]);
355 |   return ListGroupItemHeader;
356 | }(React.Component);
357 | 
358 | ListGroupItemHeader.propTypes = {
359 |   children: PropTypes.node,
360 |   className: PropTypes.string,
361 |   componentClass: PropTypes.string,
362 |   headerClassName: PropTypes.string
363 | };
364 | 
365 | ListGroupItemHeader.defaultProps = {
366 |   componentClass: 'h4',
367 |   headerClassName: 'list-group-item-heading'
368 | };
369 | 
370 | var ListGroupItemText = function (_React$Component) {
371 |   inherits(ListGroupItemText, _React$Component);
372 | 
373 |   function ListGroupItemText(props) {
374 |     classCallCheck(this, ListGroupItemText);
375 |     return possibleConstructorReturn(this, (ListGroupItemText.__proto__ || Object.getPrototypeOf(ListGroupItemText)).call(this, props));
376 |   }
377 | 
378 |   createClass(ListGroupItemText, [{
379 |     key: 'render',
380 |     value: function render() {
381 |       var _props = this.props,
382 |           componentClass = _props.componentClass,
383 |           textClassName = _props.textClassName,
384 |           className = _props.className,
385 |           props = objectWithoutProperties(_props, ['componentClass', 'textClassName', 'className']);
386 | 
387 |       var Component = componentClass;
388 |       return React.createElement(
389 |         Component,
390 |         _extends({}, props, { className: classNames(className, textClassName) }),
391 |         this.props.children
392 |       );
393 |     }
394 |   }]);
395 |   return ListGroupItemText;
396 | }(React.Component);
397 | 
398 | ListGroupItemText.propTypes = {
399 |   children: PropTypes.node,
400 |   className: PropTypes.string,
401 |   componentClass: PropTypes.string,
402 |   textClassName: PropTypes.string
403 | };
404 | 
405 | ListGroupItemText.defaultProps = {
406 |   componentClass: 'p',
407 |   textClassName: 'list-group-item-text'
408 | };
409 | 
410 | var Card = function (_React$Component) {
411 |   inherits(Card, _React$Component);
412 | 
413 |   function Card(props) {
414 |     classCallCheck(this, Card);
415 |     return possibleConstructorReturn(this, (Card.__proto__ || Object.getPrototypeOf(Card)).call(this, props));
416 |   }
417 | 
418 |   createClass(Card, [{
419 |     key: 'render',
420 |     value: function render() {
421 |       var _props = this.props,
422 |           cardStyle = _props.cardStyle,
423 |           props = objectWithoutProperties(_props, ['cardStyle']);
424 | 
425 |       var cardClassName = cardStyle === 'default' ? null : 'bootcards-' + cardStyle;
426 |       return React.createElement(
427 |         reactBootstrap.Panel,
428 |         _extends({}, props, { className: classNames(props.className, cardClassName) }),
429 |         this.props.children
430 |       );
431 |     }
432 |   }]);
433 |   return Card;
434 | }(React.Component);
435 | 
436 | Card.propTypes = {
437 |   cardStyle: PropTypes.oneOf(['default', 'chart', 'summary', 'media', 'file', 'richtext']),
438 |   children: PropTypes.node,
439 |   className: PropTypes.string
440 | };
441 | 
442 | Card.defaultProps = {
443 |   cardStyle: 'default'
444 | };
445 | 
446 | var CardHeader = function (_React$Component) {
447 |   inherits(CardHeader, _React$Component);
448 | 
449 |   function CardHeader(props) {
450 |     classCallCheck(this, CardHeader);
451 |     return possibleConstructorReturn(this, (CardHeader.__proto__ || Object.getPrototypeOf(CardHeader)).call(this, props));
452 |   }
453 | 
454 |   createClass(CardHeader, [{
455 |     key: 'render',
456 |     value: function render() {
457 |       var _props = this.props,
458 |           componentClass = _props.componentClass,
459 |           headerClassName = _props.headerClassName,
460 |           className = _props.className,
461 |           props = objectWithoutProperties(_props, ['componentClass', 'headerClassName', 'className']);
462 | 
463 |       var Component = componentClass;
464 |       return React.createElement(
465 |         Component,
466 |         _extends({}, props, { className: classNames(className, headerClassName) }),
467 |         this.props.children
468 |       );
469 |     }
470 |   }]);
471 |   return CardHeader;
472 | }(React.Component);
473 | 
474 | CardHeader.propTypes = {
475 |   children: PropTypes.node,
476 |   className: PropTypes.string,
477 |   componentClass: PropTypes.string,
478 |   headerClassName: PropTypes.string
479 | };
480 | 
481 | CardHeader.defaultProps = {
482 |   componentClass: 'div',
483 |   headerClassName: 'panel-heading'
484 | };
485 | 
486 | var CardTitle = function (_React$Component) {
487 |   inherits(CardTitle, _React$Component);
488 | 
489 |   function CardTitle(props) {
490 |     classCallCheck(this, CardTitle);
491 |     return possibleConstructorReturn(this, (CardTitle.__proto__ || Object.getPrototypeOf(CardTitle)).call(this, props));
492 |   }
493 | 
494 |   createClass(CardTitle, [{
495 |     key: 'render',
496 |     value: function render() {
497 |       var _props = this.props,
498 |           componentClass = _props.componentClass,
499 |           titleClassName = _props.titleClassName,
500 |           className = _props.className,
501 |           props = objectWithoutProperties(_props, ['componentClass', 'titleClassName', 'className']);
502 | 
503 |       var Component = componentClass;
504 |       return React.createElement(
505 |         Component,
506 |         _extends({}, props, { className: classNames(className, titleClassName) }),
507 |         this.props.children
508 |       );
509 |     }
510 |   }]);
511 |   return CardTitle;
512 | }(React.Component);
513 | 
514 | CardTitle.propTypes = {
515 |   children: PropTypes.node,
516 |   className: PropTypes.string,
517 |   componentClass: PropTypes.string,
518 |   titleClassName: PropTypes.string
519 | };
520 | 
521 | CardTitle.defaultProps = {
522 |   componentClass: 'h3',
523 |   titleClassName: 'panel-title'
524 | };
525 | 
526 | var CardFooter = function (_React$Component) {
527 |   inherits(CardFooter, _React$Component);
528 | 
529 |   function CardFooter(props) {
530 |     classCallCheck(this, CardFooter);
531 |     return possibleConstructorReturn(this, (CardFooter.__proto__ || Object.getPrototypeOf(CardFooter)).call(this, props));
532 |   }
533 | 
534 |   createClass(CardFooter, [{
535 |     key: 'render',
536 |     value: function render() {
537 |       var _props = this.props,
538 |           componentClass = _props.componentClass,
539 |           footerClassName = _props.footerClassName,
540 |           className = _props.className,
541 |           props = objectWithoutProperties(_props, ['componentClass', 'footerClassName', 'className']);
542 | 
543 |       var Component = componentClass;
544 |       return React.createElement(
545 |         Component,
546 |         _extends({}, props, { className: classNames(className, footerClassName) }),
547 |         this.props.children
548 |       );
549 |     }
550 |   }]);
551 |   return CardFooter;
552 | }(React.Component);
553 | 
554 | CardFooter.propTypes = {
555 |   children: PropTypes.node,
556 |   className: PropTypes.string,
557 |   componentClass: PropTypes.string,
558 |   footerClassName: PropTypes.string
559 | };
560 | 
561 | CardFooter.defaultProps = {
562 |   componentClass: 'div',
563 |   footerClassName: 'panel-footer'
564 | };
565 | 
566 | var CardBody = function (_React$Component) {
567 |   inherits(CardBody, _React$Component);
568 | 
569 |   function CardBody() {
570 |     classCallCheck(this, CardBody);
571 |     return possibleConstructorReturn(this, (CardBody.__proto__ || Object.getPrototypeOf(CardBody)).apply(this, arguments));
572 |   }
573 | 
574 |   createClass(CardBody, [{
575 |     key: 'render',
576 |     value: function render() {
577 |       return React.createElement(
578 |         reactBootstrap.Panel.Body,
579 |         this.props,
580 |         this.props.children
581 |       );
582 |     }
583 |   }]);
584 |   return CardBody;
585 | }(React.Component);
586 | 
587 | CardBody.propTypes = {
588 |   children: PropTypes.node
589 | };
590 | 
591 | var SummaryItem = function (_React$Component) {
592 |   inherits(SummaryItem, _React$Component);
593 | 
594 |   function SummaryItem(props) {
595 |     classCallCheck(this, SummaryItem);
596 |     return possibleConstructorReturn(this, (SummaryItem.__proto__ || Object.getPrototypeOf(SummaryItem)).call(this, props));
597 |   }
598 | 
599 |   createClass(SummaryItem, [{
600 |     key: 'render',
601 |     value: function render() {
602 |       var _props = this.props,
603 |           componentClass = _props.componentClass,
604 |           itemClassName = _props.itemClassName,
605 |           className = _props.className,
606 |           props = objectWithoutProperties(_props, ['componentClass', 'itemClassName', 'className']);
607 | 
608 |       var Component = componentClass;
609 |       return React.createElement(
610 |         Component,
611 |         _extends({}, props, { className: classNames(className, itemClassName) }),
612 |         this.props.children
613 |       );
614 |     }
615 |   }]);
616 |   return SummaryItem;
617 | }(React.Component);
618 | 
619 | SummaryItem.propTypes = {
620 |   children: PropTypes.node,
621 |   className: PropTypes.string,
622 |   componentClass: PropTypes.string,
623 |   itemClassName: PropTypes.string
624 | };
625 | 
626 | SummaryItem.defaultProps = {
627 |   componentClass: 'a',
628 |   itemClassName: 'bootcards-summary-item'
629 | };
630 | 
631 | var ChartCanvas = function (_React$Component) {
632 |   inherits(ChartCanvas, _React$Component);
633 | 
634 |   function ChartCanvas(props) {
635 |     classCallCheck(this, ChartCanvas);
636 |     return possibleConstructorReturn(this, (ChartCanvas.__proto__ || Object.getPrototypeOf(ChartCanvas)).call(this, props));
637 |   }
638 | 
639 |   createClass(ChartCanvas, [{
640 |     key: 'render',
641 |     value: function render() {
642 |       var _props = this.props,
643 |           componentClass = _props.componentClass,
644 |           canvasClassName = _props.canvasClassName,
645 |           className = _props.className,
646 |           props = objectWithoutProperties(_props, ['componentClass', 'canvasClassName', 'className']);
647 | 
648 |       var Component = componentClass;
649 |       return React.createElement(
650 |         Component,
651 |         _extends({}, props, { className: classNames(className, canvasClassName) }),
652 |         this.props.children
653 |       );
654 |     }
655 |   }]);
656 |   return ChartCanvas;
657 | }(React.Component);
658 | 
659 | ChartCanvas.propTypes = {
660 |   canvasClassName: PropTypes.string,
661 |   children: PropTypes.node,
662 |   className: PropTypes.string,
663 |   componentClass: PropTypes.string
664 | };
665 | 
666 | ChartCanvas.defaultProps = {
667 |   componentClass: 'div',
668 |   canvasClassName: 'bootcards-chart-canvas'
669 | };
670 | 
671 | exports.Container = Container;
672 | exports.Cards = Cards;
673 | exports.List = List;
674 | exports.ListGroupItemHeader = ListGroupItemHeader;
675 | exports.ListGroupItemText = ListGroupItemText;
676 | exports.Card = Card;
677 | exports.CardHeader = CardHeader;
678 | exports.CardTitle = CardTitle;
679 | exports.CardFooter = CardFooter;
680 | exports.CardBody = CardBody;
681 | exports.SummaryItem = SummaryItem;
682 | exports.ChartCanvas = ChartCanvas;
683 | 
684 | Object.defineProperty(exports, '__esModule', { value: true });
685 | 
686 | })));
687 | 


--------------------------------------------------------------------------------