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
reactstrap · Aug 16, 2017 · c4609e2 · c4609e2
1 parent 5faa94d
commit c4609e2
Show file tree

Hide file tree

Showing 23 changed files with 159 additions and 136 deletions.
diff --git 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
@@ -1,18 +1,18 @@
 import React from 'react';
-import { Card, CardImg, CardText, CardBlock,
+import { Card, CardImg, CardText, CardBody,
   CardTitle, CardSubtitle, Button } from 'reactstrap';
 
 const Example = (props) => {
   return (
     <div>
       <Card>
         <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap" />
-        <CardBlock>
+        <CardBody>
           <CardTitle>Card title</CardTitle>
           <CardSubtitle>Card subtitle</CardSubtitle>
           <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
           <Button>Button</Button>
-        </CardBlock>
+        </CardBody>
       </Card>
     </div>
   );

diff --git 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 (
     <div>
-      <Card block>
+      <Card body>
         <CardTitle>Special Title Treatment</CardTitle>
         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
         <Button>Go somewhere</Button>
       </Card>
-      <Card block className="text-center">
+      <Card body className="text-center">
         <CardTitle>Special Title Treatment</CardTitle>
         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
         <Button>Go somewhere</Button>
       </Card>
-      <Card block className="text-right">
+      <Card body className="text-right">
         <CardTitle>Special Title Treatment</CardTitle>
         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
         <Button>Go somewhere</Button>

diff --git 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 (
     <div>
-      <Card block inverse style={{ backgroundColor: '#333', borderColor: '#333' }}>
+      <Card body inverse style={{ backgroundColor: '#333', borderColor: '#333' }}>
         <CardTitle>Special Title Treatment</CardTitle>
         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
         <Button>Button</Button>
       </Card>
-      <Card block inverse color="primary">
+      <Card body inverse color="primary">
         <CardTitle>Special Title Treatment</CardTitle>
         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
         <Button color="secondary">Button</Button>
       </Card>
-      <Card block inverse color="success">
+      <Card body inverse color="success">
         <CardTitle>Special Title Treatment</CardTitle>
         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
         <Button color="secondary">Button</Button>
       </Card>
-      <Card block inverse color="info">
+      <Card body inverse color="info">
         <CardTitle>Special Title Treatment</CardTitle>
         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
         <Button color="secondary">Button</Button>
       </Card>
-      <Card block inverse color="warning">
+      <Card body inverse color="warning">
         <CardTitle>Special Title Treatment</CardTitle>
         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
         <Button color="secondary">Button</Button>
       </Card>
-      <Card block inverse color="danger">
+      <Card body inverse color="danger">
         <CardTitle>Special Title Treatment</CardTitle>
         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
         <Button color="secondary">Button</Button>

diff --git 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 (
     <CardColumns>
       <Card>
         <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
-        <CardBlock>
+        <CardBody>
           <CardTitle>Card title</CardTitle>
           <CardSubtitle>Card subtitle</CardSubtitle>
           <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>
           <Button>Button</Button>
-        </CardBlock>
+        </CardBody>
       </Card>
       <Card>
         <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
       </Card>
       <Card>
-        <CardBlock>
+        <CardBody>
           <CardTitle>Card title</CardTitle>
           <CardSubtitle>Card subtitle</CardSubtitle>
           <CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
           <Button>Button</Button>
-        </CardBlock>
+        </CardBody>
       </Card>
-      <Card block inverse style={{ backgroundColor: '#333', borderColor: '#333' }}>
+      <Card body inverse style={{ backgroundColor: '#333', borderColor: '#333' }}>
         <CardTitle>Special Title Treatment</CardTitle>
         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
         <Button>Button</Button>
       </Card>
       <Card>
         <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
-        <CardBlock>
+        <CardBody>
           <CardTitle>Card title</CardTitle>
           <CardSubtitle>Card subtitle</CardSubtitle>
           <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>
           <Button>Button</Button>
-        </CardBlock>
+        </CardBody>
       </Card>
-      <Card block inverse color="primary">
+      <Card body inverse color="primary">
         <CardTitle>Special Title Treatment</CardTitle>
         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
         <Button color="secondary">Button</Button>

diff --git 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 (
     <div>
       <Card>
-        <CardBlock>
+        <CardBody>
           <CardTitle>Card title</CardTitle>
           <CardSubtitle>Card subtitle</CardSubtitle>
-        </CardBlock>
+        </CardBody>
         <img width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap" />
-        <CardBlock>
+        <CardBody>
           <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
           <CardLink href="#">Card Link</CardLink>
           <CardLink href="#">Another Link</CardLink>
-        </CardBlock>
+        </CardBody>
       </Card>
     </div>
   );

diff --git 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 (
     <CardDeck>
       <Card>
         <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
-        <CardBlock>
+        <CardBody>
           <CardTitle>Card title</CardTitle>
           <CardSubtitle>Card subtitle</CardSubtitle>
           <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>
           <Button>Button</Button>
-        </CardBlock>
+        </CardBody>
       </Card>
       <Card>
         <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
-        <CardBlock>
+        <CardBody>
           <CardTitle>Card title</CardTitle>
           <CardSubtitle>Card subtitle</CardSubtitle>
           <CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
           <Button>Button</Button>
-        </CardBlock>
+        </CardBody>
       </Card>
       <Card>
         <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
-        <CardBlock>
+        <CardBody>
           <CardTitle>Card title</CardTitle>
           <CardSubtitle>Card subtitle</CardSubtitle>
           <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>
           <Button>Button</Button>
-        </CardBlock>
+        </CardBody>
       </Card>
     </CardDeck>
   );

diff --git 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 (
     <CardGroup>
       <Card>
         <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
-        <CardBlock>
+        <CardBody>
           <CardTitle>Card title</CardTitle>
           <CardSubtitle>Card subtitle</CardSubtitle>
           <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>
           <Button>Button</Button>
-        </CardBlock>
+        </CardBody>
       </Card>
       <Card>
         <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
-        <CardBlock>
+        <CardBody>
           <CardTitle>Card title</CardTitle>
           <CardSubtitle>Card subtitle</CardSubtitle>
           <CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
           <Button>Button</Button>
-        </CardBlock>
+        </CardBody>
       </Card>
       <Card>
         <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
-        <CardBlock>
+        <CardBody>
           <CardTitle>Card title</CardTitle>
           <CardSubtitle>Card subtitle</CardSubtitle>
           <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>
           <Button>Button</Button>
-        </CardBlock>
+        </CardBody>
       </Card>
     </CardGroup>
   );

diff --git a/docs/lib/examples/CardHeaderFooter.js b/docs/lib/examples/CardHeaderFooter.js
@@ -1,27 +1,27 @@
 import React from 'react';
-import { Card, Button, CardHeader, CardFooter, CardBlock,
+import { Card, Button, CardHeader, CardFooter, CardBody,
   CardTitle, CardText } from 'reactstrap';
 
 const Example = (props) => {
   return (
     <div>
       <Card>
         <CardHeader>Header</CardHeader>
-        <CardBlock>
+        <CardBody>
           <CardTitle>Special Title Treatment</CardTitle>
           <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
           <Button>Go somewhere</Button>
-        </CardBlock>
+        </CardBody>
         <CardFooter>Footer</CardFooter>
       </Card>
 
       <Card>
         <CardHeader tag="h3">Featured</CardHeader>
-        <CardBlock>
+        <CardBody>
           <CardTitle>Special Title Treatment</CardTitle>
           <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
           <Button>Go somewhere</Button>
-        </CardBlock>
+        </CardBody>
         <CardFooter className="text-muted">Footer</CardFooter>
       </Card>
     </div>

diff --git 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 (
     <div>
       <Card>
         <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap" />
-        <CardBlock>
+        <CardBody>
           <CardTitle>Card Title</CardTitle>
           <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>
           <CardText>
             <small className="text-muted">Last updated 3 mins ago</small>
           </CardText>
-        </CardBlock>
+        </CardBody>
       </Card>
       <Card>
-        <CardBlock>
+        <CardBody>
           <CardTitle>Card Title</CardTitle>
           <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>
           <CardText>
             <small className="text-muted">Last updated 3 mins ago</small>
           </CardText>
-        </CardBlock>
+        </CardBody>
         <CardImg bottom width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap" />
       </Card>
     </div>

diff --git 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 (
     <div>
-      <Card block outline color="secondary">
+      <Card body outline color="secondary">
         <CardTitle>Special Title Treatment</CardTitle>
         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
         <Button>Button</Button>
       </Card>
-      <Card block outline color="primary">
+      <Card body outline color="primary">
         <CardTitle>Special Title Treatment</CardTitle>
         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
         <Button color="secondary">Button</Button>
       </Card>
-      <Card block outline color="success">
+      <Card body outline color="success">
         <CardTitle>Special Title Treatment</CardTitle>
         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
         <Button color="secondary">Button</Button>
       </Card>
-      <Card block outline color="info">
+      <Card body outline color="info">
         <CardTitle>Special Title Treatment</CardTitle>
         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
         <Button color="secondary">Button</Button>
       </Card>
-      <Card block outline color="warning">
+      <Card body outline color="warning">
         <CardTitle>Special Title Treatment</CardTitle>
         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
         <Button color="secondary">Button</Button>
       </Card>
-      <Card block outline color="danger">
+      <Card body outline color="danger">
         <CardTitle>Special Title Treatment</CardTitle>
         <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
         <Button color="secondary">Button</Button>

diff --git a/docs/lib/examples/CardSizing.js b/docs/lib/examples/CardSizing.js
@@ -5,14 +5,14 @@ const Example = (props) => {
   return (
     <Row>
       <Col sm="6">
-        <Card block>
+        <Card body>
           <CardTitle>Special Title Treatment</CardTitle>
           <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
           <Button>Go somewhere</Button>
         </Card>
       </Col>
       <Col sm="6">
-        <Card block>
+        <Card body>
           <CardTitle>Special Title Treatment</CardTitle>
           <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
           <Button>Go somewhere</Button>