-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Card): add Card related components (#44)
* feat(Card): add Card related components * tests(Card): tests for card related components * docs(Card): add docs for card components
- Loading branch information
1 parent
ff09c64
commit b782807
Showing
43 changed files
with
1,433 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,228 @@ | ||
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */ | ||
import React from 'react'; | ||
import { PrismCode } from 'react-prism'; | ||
import Helmet from 'react-helmet'; | ||
|
||
import CardExample from '../examples/Card'; | ||
import CardContentExample from '../examples/CardContentTypes'; | ||
import CardSizingExample from '../examples/CardSizing'; | ||
import CardAlignmentExample from '../examples/CardAlignment'; | ||
import CardHeaderFooterExample from '../examples/CardHeaderFooter'; | ||
import CardImageCapsExample from '../examples/CardImageCaps'; | ||
import CardImageOverlayExample from '../examples/CardImageOverlay'; | ||
import CardBackgroundsExample from '../examples/CardBackgrounds'; | ||
import CardGroupsExample from '../examples/CardGroups'; | ||
import CardDecksExample from '../examples/CardDecks'; | ||
import CardColumnsExample from '../examples/CardColumns'; | ||
|
||
const CardExampleSource = require('!!raw!../examples/Card.jsx'); | ||
const CardContentExampleSource = require('!!raw!../examples/CardContentTypes.jsx'); | ||
const CardSizingExampleSource = require('!!raw!../examples/CardSizing.jsx'); | ||
const CardAlignmentExampleSource = require('!!raw!../examples/CardAlignment.jsx'); | ||
const CardHeaderFooterExampleSource = require('!!raw!../examples/CardHeaderFooter.jsx'); | ||
const CardImageCapsExampleSource = require('!!raw!../examples/CardImageCaps.jsx'); | ||
const CardImageOverlayExampleSource = require('!!raw!../examples/CardImageOverlay.jsx'); | ||
const CardBackgroundsExampleSource = require('!!raw!../examples/CardBackgrounds.jsx'); | ||
const CardGroupsExampleSource = require('!!raw!../examples/CardGroups.jsx'); | ||
const CardDecksExampleSource = require('!!raw!../examples/CardDecks.jsx'); | ||
const CardColumnsExampleSource = require('!!raw!../examples/CardColumns.jsx'); | ||
|
||
export default class CardPage extends React.Component { | ||
render() { | ||
return ( | ||
<div> | ||
<Helmet title="Card" /> | ||
<h3>Card</h3> | ||
<hr /> | ||
<div className="docs-example"> | ||
<CardExample /> | ||
</div> | ||
<pre> | ||
<PrismCode className="language-jsx"> | ||
{CardExampleSource} | ||
</PrismCode> | ||
</pre> | ||
<h4>Properties</h4> | ||
<pre> | ||
<PrismCode className="language-jsx"> | ||
{`Card.propTypes = { | ||
// Pass in a Component to override default element | ||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), | ||
inverse: PropTypes.bool, | ||
color: PropTypes.string, | ||
block: PropTypes.bool, | ||
className: PropTypes.any | ||
}; | ||
CardBlock.propTypes = { | ||
// Pass in a Component to override default element | ||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), | ||
className: PropTypes.any | ||
}; | ||
CardColumns.propTypes = { | ||
// Pass in a Component to override default element | ||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), | ||
className: PropTypes.any | ||
}; | ||
CardDeck.propTypes = { | ||
// Pass in a Component to override default element | ||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), | ||
className: PropTypes.any, | ||
// enable flexbox version of component (removes extra classes) | ||
flex: PropTypes.bool | ||
}; | ||
CardFooter.propTypes = { | ||
// Pass in a Component to override default element | ||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), | ||
className: PropTypes.any | ||
}; | ||
CardGroup.propTypes = { | ||
// Pass in a Component to override default element | ||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), | ||
className: PropTypes.any | ||
}; | ||
CardHeader.propTypes = { | ||
// Pass in a Component to override default element | ||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), | ||
className: PropTypes.any | ||
}; | ||
CardImg.propTypes = { | ||
// Pass in a Component to override default element | ||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), | ||
className: PropTypes.any, | ||
// Use top or bottom to position image via "card-img-top" or "card-img-bottom" | ||
top: PropTypes.bool, | ||
bottom: PropTypes.bool | ||
}; | ||
CardImgOverlay.propTypes = { | ||
// Pass in a Component to override default element | ||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), | ||
className: PropTypes.any | ||
}; | ||
CardLink.propTypes = { | ||
// Pass in a Component to override default element | ||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), | ||
className: PropTypes.any | ||
}; | ||
CardSubtitle.propTypes = { | ||
// Pass in a Component to override default element | ||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), | ||
className: PropTypes.any | ||
}; | ||
CardText.propTypes = { | ||
// Pass in a Component to override default element | ||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), | ||
className: PropTypes.any | ||
}; | ||
CardTitle.propTypes = { | ||
// Pass in a Component to override default element | ||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), | ||
className: PropTypes.any | ||
};`} | ||
</PrismCode> | ||
</pre> | ||
<h3>Content Types</h3> | ||
<div className="docs-example"> | ||
<CardContentExample /> | ||
</div> | ||
<pre> | ||
<PrismCode className="language-jsx"> | ||
{CardContentExampleSource} | ||
</PrismCode> | ||
</pre> | ||
<h3>Sizing</h3> | ||
<div className="docs-example"> | ||
<CardSizingExample /> | ||
</div> | ||
<pre> | ||
<PrismCode className="language-jsx"> | ||
{CardSizingExampleSource} | ||
</PrismCode> | ||
</pre> | ||
<h3>Text alignment</h3> | ||
<div className="docs-example"> | ||
<CardAlignmentExample /> | ||
</div> | ||
<pre> | ||
<PrismCode className="language-jsx"> | ||
{CardAlignmentExampleSource} | ||
</PrismCode> | ||
</pre> | ||
<h3>Header and Footer</h3> | ||
<div className="docs-example"> | ||
<CardHeaderFooterExample /> | ||
</div> | ||
<pre> | ||
<PrismCode className="language-jsx"> | ||
{CardHeaderFooterExampleSource} | ||
</PrismCode> | ||
</pre> | ||
<h3>Image caps</h3> | ||
<div className="docs-example"> | ||
<CardImageCapsExample /> | ||
</div> | ||
<pre> | ||
<PrismCode className="language-jsx"> | ||
{CardImageCapsExampleSource} | ||
</PrismCode> | ||
</pre> | ||
<h3>Image overlays</h3> | ||
<div className="docs-example"> | ||
<CardImageOverlayExample /> | ||
</div> | ||
<pre> | ||
<PrismCode className="language-jsx"> | ||
{CardImageOverlayExampleSource} | ||
</PrismCode> | ||
</pre> | ||
<h3>Background variants</h3> | ||
<div className="docs-example"> | ||
<CardBackgroundsExample /> | ||
</div> | ||
<pre> | ||
<PrismCode className="language-jsx"> | ||
{CardBackgroundsExampleSource} | ||
</PrismCode> | ||
</pre> | ||
<h3>Groups</h3> | ||
<div className="docs-example"> | ||
<CardGroupsExample /> | ||
</div> | ||
<pre> | ||
<PrismCode className="language-jsx"> | ||
{CardGroupsExampleSource} | ||
</PrismCode> | ||
</pre> | ||
<h3>Decks</h3> | ||
<div className="docs-example"> | ||
<CardDecksExample /> | ||
</div> | ||
<pre> | ||
<PrismCode className="language-jsx"> | ||
{CardDecksExampleSource} | ||
</PrismCode> | ||
</pre> | ||
<h3>Columns</h3> | ||
<div className="docs-example"> | ||
<CardColumnsExample /> | ||
</div> | ||
<pre> | ||
<PrismCode className="language-jsx"> | ||
{CardColumnsExampleSource} | ||
</PrismCode> | ||
</pre> | ||
</div> | ||
); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import React from 'react'; | ||
import { Card, CardImg, CardText, CardBlock, | ||
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> | ||
<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> | ||
</Card> | ||
</div> | ||
); | ||
}; | ||
|
||
export default Example; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
import React from 'react'; | ||
import { Card, Button, CardTitle, CardText } from 'reactstrap'; | ||
|
||
const Example = (props) => { | ||
return ( | ||
<div> | ||
<Card block> | ||
<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-xs-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-xs-right"> | ||
<CardTitle>Special Title Treatment</CardTitle> | ||
<CardText>With supporting text below as a natural lead-in to additional content.</CardText> | ||
<Button>Go somewhere</Button> | ||
</Card> | ||
</div> | ||
); | ||
}; | ||
|
||
export default Example; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
import React from 'react'; | ||
import { Card, Button, CardTitle, CardText } from 'reactstrap'; | ||
|
||
const Example = (props) => { | ||
return ( | ||
<div> | ||
<Card block inverse style={{ 'background-color': '#333', 'border-color': '#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"> | ||
<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"> | ||
<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"> | ||
<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"> | ||
<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"> | ||
<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> | ||
</div> | ||
); | ||
}; | ||
|
||
export default Example; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
import React from 'react'; | ||
import { Card, Button, CardImg, CardTitle, CardText, CardColumns, | ||
CardSubtitle, CardBlock } 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> | ||
<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> | ||
</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> | ||
<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> | ||
</Card> | ||
<Card block inverse style={{ 'background-color': '#333', 'border-color': '#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> | ||
<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> | ||
</Card> | ||
<Card block 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> | ||
</CardColumns> | ||
); | ||
}; | ||
|
||
export default Example; |
Oops, something went wrong.