diff --git a/docs/lib/Components/CardPage.js b/docs/lib/Components/CardPage.js index 83cde9099..534ab7708 100644 --- a/docs/lib/Components/CardPage.js +++ b/docs/lib/Components/CardPage.js @@ -52,11 +52,11 @@ export default class CardPage extends React.Component { tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), inverse: PropTypes.bool, color: PropTypes.string, - block: PropTypes.bool, + body: PropTypes.bool, className: PropTypes.string }; -CardBlock.propTypes = { +CardBody.propTypes = { // Pass in a Component to override default element tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), className: PropTypes.string diff --git a/docs/lib/examples/Card.js b/docs/lib/examples/Card.js index d0d72809d..c53a9b3a3 100644 --- a/docs/lib/examples/Card.js +++ b/docs/lib/examples/Card.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Card, CardImg, CardText, CardBlock, +import { Card, CardImg, CardText, CardBody, CardTitle, CardSubtitle, Button } from 'reactstrap'; const Example = (props) => { @@ -7,12 +7,12 @@ const Example = (props) => {
- + Card title Card subtitle Some quick example text to build on the card title and make up the bulk of the card's content. - +
); diff --git a/docs/lib/examples/CardAlignment.js b/docs/lib/examples/CardAlignment.js index 2d6101c99..5c219f665 100644 --- a/docs/lib/examples/CardAlignment.js +++ b/docs/lib/examples/CardAlignment.js @@ -4,17 +4,17 @@ import { Card, Button, CardTitle, CardText } from 'reactstrap'; const Example = (props) => { return (
- + Special Title Treatment With supporting text below as a natural lead-in to additional content. - + Special Title Treatment With supporting text below as a natural lead-in to additional content. - + Special Title Treatment With supporting text below as a natural lead-in to additional content. diff --git a/docs/lib/examples/CardBackgrounds.js b/docs/lib/examples/CardBackgrounds.js index 92cab3f19..5a04bd582 100644 --- a/docs/lib/examples/CardBackgrounds.js +++ b/docs/lib/examples/CardBackgrounds.js @@ -4,32 +4,32 @@ import { Card, Button, CardTitle, CardText } from 'reactstrap'; const Example = (props) => { return (
- + Special Title Treatment With supporting text below as a natural lead-in to additional content. - + Special Title Treatment With supporting text below as a natural lead-in to additional content. - + Special Title Treatment With supporting text below as a natural lead-in to additional content. - + Special Title Treatment With supporting text below as a natural lead-in to additional content. - + Special Title Treatment With supporting text below as a natural lead-in to additional content. - + Special Title Treatment With supporting text below as a natural lead-in to additional content. diff --git a/docs/lib/examples/CardColumns.js b/docs/lib/examples/CardColumns.js index cdb2cefa3..dc6287556 100644 --- a/docs/lib/examples/CardColumns.js +++ b/docs/lib/examples/CardColumns.js @@ -1,45 +1,45 @@ import React from 'react'; import { Card, Button, CardImg, CardTitle, CardText, CardColumns, - CardSubtitle, CardBlock } from 'reactstrap'; + CardSubtitle, CardBody } from 'reactstrap'; const Example = (props) => { return ( - + Card title Card subtitle This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. - + - + Card title Card subtitle This card has supporting text below as a natural lead-in to additional content. - + - + Special Title Treatment With supporting text below as a natural lead-in to additional content. - + Card title Card subtitle This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action. - + - + Special Title Treatment With supporting text below as a natural lead-in to additional content. diff --git a/docs/lib/examples/CardContentTypes.js b/docs/lib/examples/CardContentTypes.js index 9d3fc1939..926f47ac5 100644 --- a/docs/lib/examples/CardContentTypes.js +++ b/docs/lib/examples/CardContentTypes.js @@ -1,21 +1,21 @@ import React from 'react'; -import { Card, CardImg, CardText, CardBlock, CardLink, +import { Card, CardImg, CardText, CardBody, CardLink, CardTitle, CardSubtitle } from 'reactstrap'; const Example = (props) => { return (
- + Card title Card subtitle - + Card image cap - + Some quick example text to build on the card title and make up the bulk of the card's content. Card Link Another Link - +
); diff --git a/docs/lib/examples/CardDecks.js b/docs/lib/examples/CardDecks.js index a2e330572..c40761ee8 100644 --- a/docs/lib/examples/CardDecks.js +++ b/docs/lib/examples/CardDecks.js @@ -1,36 +1,36 @@ import React from 'react'; import { Card, Button, CardImg, CardTitle, CardText, CardDeck, - CardSubtitle, CardBlock } from 'reactstrap'; + CardSubtitle, CardBody } from 'reactstrap'; const Example = (props) => { return ( - + Card title Card subtitle This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. - + - + Card title Card subtitle This card has supporting text below as a natural lead-in to additional content. - + - + Card title Card subtitle This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action. - + ); diff --git a/docs/lib/examples/CardGroups.js b/docs/lib/examples/CardGroups.js index 48e70fb2d..aecbcc212 100644 --- a/docs/lib/examples/CardGroups.js +++ b/docs/lib/examples/CardGroups.js @@ -1,36 +1,36 @@ import React from 'react'; import { Card, Button, CardImg, CardTitle, CardText, CardGroup, - CardSubtitle, CardBlock } from 'reactstrap'; + CardSubtitle, CardBody } from 'reactstrap'; const Example = (props) => { return ( - + Card title Card subtitle This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. - + - + Card title Card subtitle This card has supporting text below as a natural lead-in to additional content. - + - + Card title Card subtitle This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action. - + ); diff --git a/docs/lib/examples/CardHeaderFooter.js b/docs/lib/examples/CardHeaderFooter.js index 12465883e..bac1ee866 100644 --- a/docs/lib/examples/CardHeaderFooter.js +++ b/docs/lib/examples/CardHeaderFooter.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Card, Button, CardHeader, CardFooter, CardBlock, +import { Card, Button, CardHeader, CardFooter, CardBody, CardTitle, CardText } from 'reactstrap'; const Example = (props) => { @@ -7,21 +7,21 @@ const Example = (props) => {
Header - + Special Title Treatment With supporting text below as a natural lead-in to additional content. - + Footer Featured - + Special Title Treatment With supporting text below as a natural lead-in to additional content. - + Footer
diff --git a/docs/lib/examples/CardImageCaps.js b/docs/lib/examples/CardImageCaps.js index 1ae4a9b0e..d3b29c46c 100644 --- a/docs/lib/examples/CardImageCaps.js +++ b/docs/lib/examples/CardImageCaps.js @@ -1,27 +1,27 @@ import React from 'react'; -import { Card, CardBlock, Button, CardTitle, CardText, CardImg } from 'reactstrap'; +import { Card, CardBody, Button, CardTitle, CardText, CardImg } from 'reactstrap'; const Example = (props) => { return (
- + Card Title This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. Last updated 3 mins ago - + - + Card Title This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. Last updated 3 mins ago - +
diff --git a/docs/lib/examples/CardOutline.js b/docs/lib/examples/CardOutline.js index bffc86e40..fd49a27b4 100644 --- a/docs/lib/examples/CardOutline.js +++ b/docs/lib/examples/CardOutline.js @@ -4,32 +4,32 @@ import { Card, Button, CardTitle, CardText } from 'reactstrap'; const Example = (props) => { return (
- + Special Title Treatment With supporting text below as a natural lead-in to additional content. - + Special Title Treatment With supporting text below as a natural lead-in to additional content. - + Special Title Treatment With supporting text below as a natural lead-in to additional content. - + Special Title Treatment With supporting text below as a natural lead-in to additional content. - + Special Title Treatment With supporting text below as a natural lead-in to additional content. - + Special Title Treatment With supporting text below as a natural lead-in to additional content. diff --git a/docs/lib/examples/CardSizing.js b/docs/lib/examples/CardSizing.js index b95a4dffe..990b316e0 100644 --- a/docs/lib/examples/CardSizing.js +++ b/docs/lib/examples/CardSizing.js @@ -5,14 +5,14 @@ const Example = (props) => { return ( - + Special Title Treatment With supporting text below as a natural lead-in to additional content. - + Special Title Treatment With supporting text below as a natural lead-in to additional content. diff --git a/docs/lib/examples/Collapse.js b/docs/lib/examples/Collapse.js index 59d8480f0..cff2b340a 100644 --- a/docs/lib/examples/Collapse.js +++ b/docs/lib/examples/Collapse.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { Collapse, Button, CardBlock, Card } from 'reactstrap'; +import { Collapse, Button, CardBody, Card } from 'reactstrap'; class Example extends Component { constructor(props) { @@ -18,12 +18,12 @@ class Example extends Component { - + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. - +
diff --git a/docs/lib/examples/CollapseEvents.js b/docs/lib/examples/CollapseEvents.js index 301df5c4b..d42229c9f 100644 --- a/docs/lib/examples/CollapseEvents.js +++ b/docs/lib/examples/CollapseEvents.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { Collapse, Button, CardBlock, Card } from 'reactstrap'; +import { Collapse, Button, CardBody, Card } from 'reactstrap'; class Example extends Component { constructor(props) { @@ -30,12 +30,12 @@ class Example extends Component {
Current state: {this.state.status}
- + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. - +
diff --git a/docs/lib/examples/Tabs.js b/docs/lib/examples/Tabs.js index 056eba43b..5c971144d 100644 --- a/docs/lib/examples/Tabs.js +++ b/docs/lib/examples/Tabs.js @@ -51,14 +51,14 @@ export default class Example extends React.Component { - + Special Title Treatment With supporting text below as a natural lead-in to additional content. - + Special Title Treatment With supporting text below as a natural lead-in to additional content. diff --git a/package.json b/package.json index 784cc36a5..516c79cc1 100644 --- a/package.json +++ b/package.json @@ -95,7 +95,7 @@ }, "peerDependencies": { "react": "^0.14.9 || ^15.3.0", - "react-dom": "^0.14.9 || ^15.3.0", + "react-dom": "^0.14.9 || ^15.3.0 || ^16.0.0", "react-transition-group": "^1.1.2" }, "devDependencies": { @@ -105,7 +105,7 @@ "babel-preset-es2015-rollup": "^3.0.0", "babel-preset-react": "^6.11.1", "babel-preset-react-app": "^0.2.1", - "bootstrap": "^4.0.0-alpha.6", + "bootstrap": "4.0.0-beta", "clean-webpack-plugin": "^0.1.8", "conventional-changelog-cli": "^1.1.1", "conventional-recommended-bump": "^0.3.0", diff --git a/src/Card.js b/src/Card.js index 595f3e515..2f8c31e8d 100644 --- a/src/Card.js +++ b/src/Card.js @@ -1,13 +1,14 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import { mapToCssModules } from './utils'; +import { mapToCssModules, deprecated } from './utils'; const propTypes = { tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), inverse: PropTypes.bool, color: PropTypes.string, - block: PropTypes.bool, + block: deprecated(PropTypes.bool, 'Please use the props "body"'), + body: PropTypes.bool, outline: PropTypes.bool, className: PropTypes.string, cssModule: PropTypes.object, @@ -23,6 +24,7 @@ const Card = (props) => { cssModule, color, block, + body, inverse, outline, tag: Tag, @@ -31,9 +33,9 @@ const Card = (props) => { const classes = mapToCssModules(classNames( className, 'card', - inverse ? 'card-inverse' : false, - block ? 'card-block' : false, - color ? `card${outline ? '-outline' : ''}-${color}` : false + inverse ? 'text-white' : false, + block || body ? 'card-body' : false, + color ? `${outline ? 'border' : 'bg'}-${color}` : false ), cssModule); return ( diff --git a/src/CardBlock.js b/src/CardBlock.js index f16a83107..9f443117c 100644 --- a/src/CardBlock.js +++ b/src/CardBlock.js @@ -1,36 +1,8 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; -import { mapToCssModules } from './utils'; +import CardBody from './CardBody'; +import { warnOnce } from './utils'; -const propTypes = { - tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - className: PropTypes.string, - cssModule: PropTypes.object, -}; - -const defaultProps = { - tag: 'div' -}; - -const CardBlock = (props) => { - const { - className, - cssModule, - tag: Tag, - ...attributes - } = props; - const classes = mapToCssModules(classNames( - className, - 'card-block' - ), cssModule); - - return ( - - ); -}; - -CardBlock.propTypes = propTypes; -CardBlock.defaultProps = defaultProps; - -export default CardBlock; +export default function CardBlock(props) { + warnOnce('The "CardBlock" component has been deprecated.\nPlease use component "CardBody".'); + return ; +} diff --git a/src/CardBody.js b/src/CardBody.js new file mode 100644 index 000000000..ebbb6f6cf --- /dev/null +++ b/src/CardBody.js @@ -0,0 +1,36 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import { mapToCssModules } from './utils'; + +const propTypes = { + tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + className: PropTypes.string, + cssModule: PropTypes.object, +}; + +const defaultProps = { + tag: 'div' +}; + +const CardBody = (props) => { + const { + className, + cssModule, + tag: Tag, + ...attributes + } = props; + const classes = mapToCssModules(classNames( + className, + 'card-body' + ), cssModule); + + return ( + + ); +}; + +CardBody.propTypes = propTypes; +CardBody.defaultProps = defaultProps; + +export default CardBody; diff --git a/src/__tests__/Card.spec.js b/src/__tests__/Card.spec.js index 7e448c7dc..003c37a7c 100644 --- a/src/__tests__/Card.spec.js +++ b/src/__tests__/Card.spec.js @@ -15,9 +15,9 @@ describe('Card', () => { expect(wrapper.text()).toBe('Yo!'); expect(wrapper.hasClass('card')).toBe(true); - expect(wrapper.hasClass('card-block')).toBe(true); - expect(wrapper.hasClass('card-primary')).toBe(true); - expect(wrapper.hasClass('card-inverse')).toBe(true); + expect(wrapper.hasClass('card-body')).toBe(true); + expect(wrapper.hasClass('bg-primary')).toBe(true); + expect(wrapper.hasClass('text-white')).toBe(true); }); it('should render with "outline" class when a color is provided', () => { @@ -25,8 +25,8 @@ describe('Card', () => { expect(wrapper.text()).toBe('Yo!'); expect(wrapper.hasClass('card')).toBe(true); - expect(wrapper.hasClass('card-block')).toBe(true); - expect(wrapper.hasClass('card-outline-primary')).toBe(true); + expect(wrapper.hasClass('card-body')).toBe(true); + expect(wrapper.hasClass('border-primary')).toBe(true); }); it('should not render with "outline" class when a color is not provided (no default)', () => { @@ -34,8 +34,8 @@ describe('Card', () => { expect(wrapper.text()).toBe('Yo!'); expect(wrapper.hasClass('card')).toBe(true); - expect(wrapper.hasClass('card-block')).toBe(true); - expect(wrapper.html()).not.toContain('card-outline'); + expect(wrapper.hasClass('card-body')).toBe(true); + expect(wrapper.html()).not.toContain('border'); }); it('should render additional classes', () => { diff --git a/src/__tests__/CardBlock.spec.js b/src/__tests__/CardBlock.spec.js index d176c362b..b01d49ff0 100644 --- a/src/__tests__/CardBlock.spec.js +++ b/src/__tests__/CardBlock.spec.js @@ -1,27 +1,11 @@ import React from 'react'; import { shallow } from 'enzyme'; -import { CardBlock } from '../'; +import { CardBlock, CardBody } from '../'; -describe('CardBlock', () => { - it('should render with "card-block" class', () => { +describe('CardBody', () => { + it('should render CardBody', () => { const wrapper = shallow(Yo!); - expect(wrapper.text()).toBe('Yo!'); - expect(wrapper.hasClass('card-block')).toBe(true); - }); - - it('should render additional classes', () => { - const wrapper = shallow(Yo!); - - expect(wrapper.hasClass('other')).toBe(true); - expect(wrapper.hasClass('card-block')).toBe(true); - }); - - it('should render custom tag', () => { - const wrapper = shallow(Yo!); - - expect(wrapper.text()).toBe('Yo!'); - expect(wrapper.hasClass('card-block')).toBe(true); - expect(wrapper.find('main').length).toBe(1); + expect(wrapper.type()).toBe(CardBody); }); }); diff --git a/src/__tests__/CardBody.spec.js b/src/__tests__/CardBody.spec.js new file mode 100644 index 000000000..c36ba458d --- /dev/null +++ b/src/__tests__/CardBody.spec.js @@ -0,0 +1,27 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import { CardBody } from '../'; + +describe('CardBody', () => { + it('should render with "card-body" class', () => { + const wrapper = shallow(Yo!); + + expect(wrapper.text()).toBe('Yo!'); + expect(wrapper.hasClass('card-body')).toBe(true); + }); + + it('should render additional classes', () => { + const wrapper = shallow(Yo!); + + expect(wrapper.hasClass('other')).toBe(true); + expect(wrapper.hasClass('card-body')).toBe(true); + }); + + it('should render custom tag', () => { + const wrapper = shallow(Yo!); + + expect(wrapper.text()).toBe('Yo!'); + expect(wrapper.hasClass('card-body')).toBe(true); + expect(wrapper.find('main').length).toBe(1); + }); +}); diff --git a/src/index.js b/src/index.js index 7df06b187..326ab3c51 100644 --- a/src/index.js +++ b/src/index.js @@ -24,6 +24,7 @@ import Card from './Card'; import CardGroup from './CardGroup'; import CardDeck from './CardDeck'; import CardColumns from './CardColumns'; +import CardBody from './CardBody'; import CardBlock from './CardBlock'; import CardLink from './CardLink'; import CardFooter from './CardFooter'; @@ -108,6 +109,7 @@ export { CardGroup, CardDeck, CardColumns, + CardBody, CardBlock, CardFooter, CardHeader,