Skip to content

Commit c4609e2

Browse files
TheSharpieOneTheSharpieOne
committed
feat(Card): update Card for bs v4 beta
Add CardBody, depercating CardBlock Depercated Card's block prop in favor of new body prop inverse now add .text-white instead of .card-inverse outline is now border-{color} instead of card-outline-{color} color is now bg-{color} instead of card-{color} outline still uses color's value update examples update tests
1 parent 5faa94d commit c4609e2

23 files changed

Lines changed: 159 additions & 136 deletions

‎docs/lib/Components/CardPage.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,11 +52,11 @@ export default class CardPage extends React.Component {
5252
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
5353
inverse: PropTypes.bool,
5454
color: PropTypes.string,
55-
block: PropTypes.bool,
55+
body: PropTypes.bool,
5656
className: PropTypes.string
5757
};
5858
59-
CardBlock.propTypes = {
59+
CardBody.propTypes = {
6060
// Pass in a Component to override default element
6161
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
6262
className: PropTypes.string

‎docs/lib/examples/Card.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import React from 'react';
2-
import { Card, CardImg, CardText, CardBlock,
2+
import { Card, CardImg, CardText, CardBody,
33
CardTitle, CardSubtitle, Button } from 'reactstrap';
44

55
const Example = (props) => {
66
return (
77
<div>
88
<Card>
99
<CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap" />
10-
<CardBlock>
10+
<CardBody>
1111
<CardTitle>Card title</CardTitle>
1212
<CardSubtitle>Card subtitle</CardSubtitle>
1313
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
1414
<Button>Button</Button>
15-
</CardBlock>
15+
</CardBody>
1616
</Card>
1717
</div>
1818
);

‎docs/lib/examples/CardAlignment.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@ import { Card, Button, CardTitle, CardText } from 'reactstrap';
44
const Example = (props) => {
55
return (
66
<div>
7-
<Card block>
7+
<Card body>
88
<CardTitle>Special Title Treatment</CardTitle>
99
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
1010
<Button>Go somewhere</Button>
1111
</Card>
12-
<Card block className="text-center">
12+
<Card body className="text-center">
1313
<CardTitle>Special Title Treatment</CardTitle>
1414
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
1515
<Button>Go somewhere</Button>
1616
</Card>
17-
<Card block className="text-right">
17+
<Card body className="text-right">
1818
<CardTitle>Special Title Treatment</CardTitle>
1919
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
2020
<Button>Go somewhere</Button>

‎docs/lib/examples/CardBackgrounds.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,32 +4,32 @@ import { Card, Button, CardTitle, CardText } from 'reactstrap';
44
const Example = (props) => {
55
return (
66
<div>
7-
<Card block inverse style={{ backgroundColor: '#333', borderColor: '#333' }}>
7+
<Card body inverse style={{ backgroundColor: '#333', borderColor: '#333' }}>
88
<CardTitle>Special Title Treatment</CardTitle>
99
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
1010
<Button>Button</Button>
1111
</Card>
12-
<Card block inverse color="primary">
12+
<Card body inverse color="primary">
1313
<CardTitle>Special Title Treatment</CardTitle>
1414
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
1515
<Button color="secondary">Button</Button>
1616
</Card>
17-
<Card block inverse color="success">
17+
<Card body inverse color="success">
1818
<CardTitle>Special Title Treatment</CardTitle>
1919
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
2020
<Button color="secondary">Button</Button>
2121
</Card>
22-
<Card block inverse color="info">
22+
<Card body inverse color="info">
2323
<CardTitle>Special Title Treatment</CardTitle>
2424
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
2525
<Button color="secondary">Button</Button>
2626
</Card>
27-
<Card block inverse color="warning">
27+
<Card body inverse color="warning">
2828
<CardTitle>Special Title Treatment</CardTitle>
2929
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
3030
<Button color="secondary">Button</Button>
3131
</Card>
32-
<Card block inverse color="danger">
32+
<Card body inverse color="danger">
3333
<CardTitle>Special Title Treatment</CardTitle>
3434
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
3535
<Button color="secondary">Button</Button>

‎docs/lib/examples/CardColumns.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,45 @@
11
import React from 'react';
22
import { Card, Button, CardImg, CardTitle, CardText, CardColumns,
3-
CardSubtitle, CardBlock } from 'reactstrap';
3+
CardSubtitle, CardBody } from 'reactstrap';
44

55
const Example = (props) => {
66
return (
77
<CardColumns>
88
<Card>
99
<CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
10-
<CardBlock>
10+
<CardBody>
1111
<CardTitle>Card title</CardTitle>
1212
<CardSubtitle>Card subtitle</CardSubtitle>
1313
<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
1414
<Button>Button</Button>
15-
</CardBlock>
15+
</CardBody>
1616
</Card>
1717
<Card>
1818
<CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
1919
</Card>
2020
<Card>
21-
<CardBlock>
21+
<CardBody>
2222
<CardTitle>Card title</CardTitle>
2323
<CardSubtitle>Card subtitle</CardSubtitle>
2424
<CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
2525
<Button>Button</Button>
26-
</CardBlock>
26+
</CardBody>
2727
</Card>
28-
<Card block inverse style={{ backgroundColor: '#333', borderColor: '#333' }}>
28+
<Card body inverse style={{ backgroundColor: '#333', borderColor: '#333' }}>
2929
<CardTitle>Special Title Treatment</CardTitle>
3030
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
3131
<Button>Button</Button>
3232
</Card>
3333
<Card>
3434
<CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
35-
<CardBlock>
35+
<CardBody>
3636
<CardTitle>Card title</CardTitle>
3737
<CardSubtitle>Card subtitle</CardSubtitle>
3838
<CardText>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.</CardText>
3939
<Button>Button</Button>
40-
</CardBlock>
40+
</CardBody>
4141
</Card>
42-
<Card block inverse color="primary">
42+
<Card body inverse color="primary">
4343
<CardTitle>Special Title Treatment</CardTitle>
4444
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
4545
<Button color="secondary">Button</Button>

‎docs/lib/examples/CardContentTypes.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
import React from 'react';
2-
import { Card, CardImg, CardText, CardBlock, CardLink,
2+
import { Card, CardImg, CardText, CardBody, CardLink,
33
CardTitle, CardSubtitle } from 'reactstrap';
44

55
const Example = (props) => {
66
return (
77
<div>
88
<Card>
9-
<CardBlock>
9+
<CardBody>
1010
<CardTitle>Card title</CardTitle>
1111
<CardSubtitle>Card subtitle</CardSubtitle>
12-
</CardBlock>
12+
</CardBody>
1313
<img width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap" />
14-
<CardBlock>
14+
<CardBody>
1515
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
1616
<CardLink href="#">Card Link</CardLink>
1717
<CardLink href="#">Another Link</CardLink>
18-
</CardBlock>
18+
</CardBody>
1919
</Card>
2020
</div>
2121
);

‎docs/lib/examples/CardDecks.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,36 @@
11
import React from 'react';
22
import { Card, Button, CardImg, CardTitle, CardText, CardDeck,
3-
CardSubtitle, CardBlock } from 'reactstrap';
3+
CardSubtitle, CardBody } from 'reactstrap';
44

55
const Example = (props) => {
66
return (
77
<CardDeck>
88
<Card>
99
<CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
10-
<CardBlock>
10+
<CardBody>
1111
<CardTitle>Card title</CardTitle>
1212
<CardSubtitle>Card subtitle</CardSubtitle>
1313
<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
1414
<Button>Button</Button>
15-
</CardBlock>
15+
</CardBody>
1616
</Card>
1717
<Card>
1818
<CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
19-
<CardBlock>
19+
<CardBody>
2020
<CardTitle>Card title</CardTitle>
2121
<CardSubtitle>Card subtitle</CardSubtitle>
2222
<CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
2323
<Button>Button</Button>
24-
</CardBlock>
24+
</CardBody>
2525
</Card>
2626
<Card>
2727
<CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
28-
<CardBlock>
28+
<CardBody>
2929
<CardTitle>Card title</CardTitle>
3030
<CardSubtitle>Card subtitle</CardSubtitle>
3131
<CardText>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.</CardText>
3232
<Button>Button</Button>
33-
</CardBlock>
33+
</CardBody>
3434
</Card>
3535
</CardDeck>
3636
);

‎docs/lib/examples/CardGroups.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,36 @@
11
import React from 'react';
22
import { Card, Button, CardImg, CardTitle, CardText, CardGroup,
3-
CardSubtitle, CardBlock } from 'reactstrap';
3+
CardSubtitle, CardBody } from 'reactstrap';
44

55
const Example = (props) => {
66
return (
77
<CardGroup>
88
<Card>
99
<CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
10-
<CardBlock>
10+
<CardBody>
1111
<CardTitle>Card title</CardTitle>
1212
<CardSubtitle>Card subtitle</CardSubtitle>
1313
<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
1414
<Button>Button</Button>
15-
</CardBlock>
15+
</CardBody>
1616
</Card>
1717
<Card>
1818
<CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
19-
<CardBlock>
19+
<CardBody>
2020
<CardTitle>Card title</CardTitle>
2121
<CardSubtitle>Card subtitle</CardSubtitle>
2222
<CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
2323
<Button>Button</Button>
24-
</CardBlock>
24+
</CardBody>
2525
</Card>
2626
<Card>
2727
<CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
28-
<CardBlock>
28+
<CardBody>
2929
<CardTitle>Card title</CardTitle>
3030
<CardSubtitle>Card subtitle</CardSubtitle>
3131
<CardText>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.</CardText>
3232
<Button>Button</Button>
33-
</CardBlock>
33+
</CardBody>
3434
</Card>
3535
</CardGroup>
3636
);

‎docs/lib/examples/CardHeaderFooter.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
11
import React from 'react';
2-
import { Card, Button, CardHeader, CardFooter, CardBlock,
2+
import { Card, Button, CardHeader, CardFooter, CardBody,
33
CardTitle, CardText } from 'reactstrap';
44

55
const Example = (props) => {
66
return (
77
<div>
88
<Card>
99
<CardHeader>Header</CardHeader>
10-
<CardBlock>
10+
<CardBody>
1111
<CardTitle>Special Title Treatment</CardTitle>
1212
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
1313
<Button>Go somewhere</Button>
14-
</CardBlock>
14+
</CardBody>
1515
<CardFooter>Footer</CardFooter>
1616
</Card>
1717

1818
<Card>
1919
<CardHeader tag="h3">Featured</CardHeader>
20-
<CardBlock>
20+
<CardBody>
2121
<CardTitle>Special Title Treatment</CardTitle>
2222
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
2323
<Button>Go somewhere</Button>
24-
</CardBlock>
24+
</CardBody>
2525
<CardFooter className="text-muted">Footer</CardFooter>
2626
</Card>
2727
</div>

‎docs/lib/examples/CardImageCaps.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
11
import React from 'react';
2-
import { Card, CardBlock, Button, CardTitle, CardText, CardImg } from 'reactstrap';
2+
import { Card, CardBody, Button, CardTitle, CardText, CardImg } from 'reactstrap';
33

44
const Example = (props) => {
55
return (
66
<div>
77
<Card>
88
<CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap" />
9-
<CardBlock>
9+
<CardBody>
1010
<CardTitle>Card Title</CardTitle>
1111
<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
1212
<CardText>
1313
<small className="text-muted">Last updated 3 mins ago</small>
1414
</CardText>
15-
</CardBlock>
15+
</CardBody>
1616
</Card>
1717
<Card>
18-
<CardBlock>
18+
<CardBody>
1919
<CardTitle>Card Title</CardTitle>
2020
<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
2121
<CardText>
2222
<small className="text-muted">Last updated 3 mins ago</small>
2323
</CardText>
24-
</CardBlock>
24+
</CardBody>
2525
<CardImg bottom width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap" />
2626
</Card>
2727
</div>

0 commit comments

Comments
 (0)