Skip to content

Commit b782807

Browse files
eddywashereeddywashere
authored
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
1 parent ff09c64 commit b782807

43 files changed

Lines changed: 1433 additions & 2 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docs/lib/Components/CardPage.jsx‎

Lines changed: 228 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,228 @@
1+
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
2+
import React from 'react';
3+
import { PrismCode } from 'react-prism';
4+
import Helmet from 'react-helmet';
5+
6+
import CardExample from '../examples/Card';
7+
import CardContentExample from '../examples/CardContentTypes';
8+
import CardSizingExample from '../examples/CardSizing';
9+
import CardAlignmentExample from '../examples/CardAlignment';
10+
import CardHeaderFooterExample from '../examples/CardHeaderFooter';
11+
import CardImageCapsExample from '../examples/CardImageCaps';
12+
import CardImageOverlayExample from '../examples/CardImageOverlay';
13+
import CardBackgroundsExample from '../examples/CardBackgrounds';
14+
import CardGroupsExample from '../examples/CardGroups';
15+
import CardDecksExample from '../examples/CardDecks';
16+
import CardColumnsExample from '../examples/CardColumns';
17+
18+
const CardExampleSource = require('!!raw!../examples/Card.jsx');
19+
const CardContentExampleSource = require('!!raw!../examples/CardContentTypes.jsx');
20+
const CardSizingExampleSource = require('!!raw!../examples/CardSizing.jsx');
21+
const CardAlignmentExampleSource = require('!!raw!../examples/CardAlignment.jsx');
22+
const CardHeaderFooterExampleSource = require('!!raw!../examples/CardHeaderFooter.jsx');
23+
const CardImageCapsExampleSource = require('!!raw!../examples/CardImageCaps.jsx');
24+
const CardImageOverlayExampleSource = require('!!raw!../examples/CardImageOverlay.jsx');
25+
const CardBackgroundsExampleSource = require('!!raw!../examples/CardBackgrounds.jsx');
26+
const CardGroupsExampleSource = require('!!raw!../examples/CardGroups.jsx');
27+
const CardDecksExampleSource = require('!!raw!../examples/CardDecks.jsx');
28+
const CardColumnsExampleSource = require('!!raw!../examples/CardColumns.jsx');
29+
30+
export default class CardPage extends React.Component {
31+
render() {
32+
return (
33+
<div>
34+
<Helmet title="Card" />
35+
<h3>Card</h3>
36+
<hr />
37+
<div className="docs-example">
38+
<CardExample />
39+
</div>
40+
<pre>
41+
<PrismCode className="language-jsx">
42+
{CardExampleSource}
43+
</PrismCode>
44+
</pre>
45+
<h4>Properties</h4>
46+
<pre>
47+
<PrismCode className="language-jsx">
48+
{`Card.propTypes = {
49+
// Pass in a Component to override default element
50+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
51+
inverse: PropTypes.bool,
52+
color: PropTypes.string,
53+
block: PropTypes.bool,
54+
className: PropTypes.any
55+
};
56+
57+
CardBlock.propTypes = {
58+
// Pass in a Component to override default element
59+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
60+
className: PropTypes.any
61+
};
62+
63+
CardColumns.propTypes = {
64+
// Pass in a Component to override default element
65+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
66+
className: PropTypes.any
67+
};
68+
69+
CardDeck.propTypes = {
70+
// Pass in a Component to override default element
71+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
72+
className: PropTypes.any,
73+
// enable flexbox version of component (removes extra classes)
74+
flex: PropTypes.bool
75+
};
76+
77+
CardFooter.propTypes = {
78+
// Pass in a Component to override default element
79+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
80+
className: PropTypes.any
81+
};
82+
83+
CardGroup.propTypes = {
84+
// Pass in a Component to override default element
85+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
86+
className: PropTypes.any
87+
};
88+
89+
CardHeader.propTypes = {
90+
// Pass in a Component to override default element
91+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
92+
className: PropTypes.any
93+
};
94+
95+
CardImg.propTypes = {
96+
// Pass in a Component to override default element
97+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
98+
className: PropTypes.any,
99+
// Use top or bottom to position image via "card-img-top" or "card-img-bottom"
100+
top: PropTypes.bool,
101+
bottom: PropTypes.bool
102+
};
103+
104+
CardImgOverlay.propTypes = {
105+
// Pass in a Component to override default element
106+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
107+
className: PropTypes.any
108+
};
109+
110+
CardLink.propTypes = {
111+
// Pass in a Component to override default element
112+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
113+
className: PropTypes.any
114+
};
115+
116+
CardSubtitle.propTypes = {
117+
// Pass in a Component to override default element
118+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
119+
className: PropTypes.any
120+
};
121+
122+
CardText.propTypes = {
123+
// Pass in a Component to override default element
124+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
125+
className: PropTypes.any
126+
};
127+
128+
CardTitle.propTypes = {
129+
// Pass in a Component to override default element
130+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
131+
className: PropTypes.any
132+
};`}
133+
</PrismCode>
134+
</pre>
135+
<h3>Content Types</h3>
136+
<div className="docs-example">
137+
<CardContentExample />
138+
</div>
139+
<pre>
140+
<PrismCode className="language-jsx">
141+
{CardContentExampleSource}
142+
</PrismCode>
143+
</pre>
144+
<h3>Sizing</h3>
145+
<div className="docs-example">
146+
<CardSizingExample />
147+
</div>
148+
<pre>
149+
<PrismCode className="language-jsx">
150+
{CardSizingExampleSource}
151+
</PrismCode>
152+
</pre>
153+
<h3>Text alignment</h3>
154+
<div className="docs-example">
155+
<CardAlignmentExample />
156+
</div>
157+
<pre>
158+
<PrismCode className="language-jsx">
159+
{CardAlignmentExampleSource}
160+
</PrismCode>
161+
</pre>
162+
<h3>Header and Footer</h3>
163+
<div className="docs-example">
164+
<CardHeaderFooterExample />
165+
</div>
166+
<pre>
167+
<PrismCode className="language-jsx">
168+
{CardHeaderFooterExampleSource}
169+
</PrismCode>
170+
</pre>
171+
<h3>Image caps</h3>
172+
<div className="docs-example">
173+
<CardImageCapsExample />
174+
</div>
175+
<pre>
176+
<PrismCode className="language-jsx">
177+
{CardImageCapsExampleSource}
178+
</PrismCode>
179+
</pre>
180+
<h3>Image overlays</h3>
181+
<div className="docs-example">
182+
<CardImageOverlayExample />
183+
</div>
184+
<pre>
185+
<PrismCode className="language-jsx">
186+
{CardImageOverlayExampleSource}
187+
</PrismCode>
188+
</pre>
189+
<h3>Background variants</h3>
190+
<div className="docs-example">
191+
<CardBackgroundsExample />
192+
</div>
193+
<pre>
194+
<PrismCode className="language-jsx">
195+
{CardBackgroundsExampleSource}
196+
</PrismCode>
197+
</pre>
198+
<h3>Groups</h3>
199+
<div className="docs-example">
200+
<CardGroupsExample />
201+
</div>
202+
<pre>
203+
<PrismCode className="language-jsx">
204+
{CardGroupsExampleSource}
205+
</PrismCode>
206+
</pre>
207+
<h3>Decks</h3>
208+
<div className="docs-example">
209+
<CardDecksExample />
210+
</div>
211+
<pre>
212+
<PrismCode className="language-jsx">
213+
{CardDecksExampleSource}
214+
</PrismCode>
215+
</pre>
216+
<h3>Columns</h3>
217+
<div className="docs-example">
218+
<CardColumnsExample />
219+
</div>
220+
<pre>
221+
<PrismCode className="language-jsx">
222+
{CardColumnsExampleSource}
223+
</PrismCode>
224+
</pre>
225+
</div>
226+
);
227+
}
228+
}

‎docs/lib/Components/index.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,10 @@ class Components extends React.Component {
3939
name: 'Labels',
4040
to: '/components/labels/'
4141
},
42+
{
43+
name: 'Card',
44+
to: '/components/card/'
45+
},
4246
{
4347
name: 'Navs',
4448
to: '/components/navs/'

‎docs/lib/examples/Card.jsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import { Card, CardImg, CardText, CardBlock,
3+
CardTitle, CardSubtitle, Button } from 'reactstrap';
4+
5+
const Example = (props) => {
6+
return (
7+
<div>
8+
<Card>
9+
<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>
11+
<CardTitle>Card title</CardTitle>
12+
<CardSubtitle>Card subtitle</CardSubtitle>
13+
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
14+
<Button>Button</Button>
15+
</CardBlock>
16+
</Card>
17+
</div>
18+
);
19+
};
20+
21+
export default Example;

‎docs/lib/examples/CardAlignment.jsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
import { Card, Button, CardTitle, CardText } from 'reactstrap';
3+
4+
const Example = (props) => {
5+
return (
6+
<div>
7+
<Card block>
8+
<CardTitle>Special Title Treatment</CardTitle>
9+
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
10+
<Button>Go somewhere</Button>
11+
</Card>
12+
<Card block className="text-xs-center">
13+
<CardTitle>Special Title Treatment</CardTitle>
14+
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
15+
<Button>Go somewhere</Button>
16+
</Card>
17+
<Card block className="text-xs-right">
18+
<CardTitle>Special Title Treatment</CardTitle>
19+
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
20+
<Button>Go somewhere</Button>
21+
</Card>
22+
</div>
23+
);
24+
};
25+
26+
export default Example;

‎docs/lib/examples/CardBackgrounds.jsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React from 'react';
2+
import { Card, Button, CardTitle, CardText } from 'reactstrap';
3+
4+
const Example = (props) => {
5+
return (
6+
<div>
7+
<Card block inverse style={{ 'background-color': '#333', 'border-color': '#333' }}>
8+
<CardTitle>Special Title Treatment</CardTitle>
9+
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
10+
<Button>Button</Button>
11+
</Card>
12+
<Card block inverse color="primary">
13+
<CardTitle>Special Title Treatment</CardTitle>
14+
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
15+
<Button color="secondary">Button</Button>
16+
</Card>
17+
<Card block inverse color="success">
18+
<CardTitle>Special Title Treatment</CardTitle>
19+
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
20+
<Button color="secondary">Button</Button>
21+
</Card>
22+
<Card block inverse color="info">
23+
<CardTitle>Special Title Treatment</CardTitle>
24+
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
25+
<Button color="secondary">Button</Button>
26+
</Card>
27+
<Card block inverse color="warning">
28+
<CardTitle>Special Title Treatment</CardTitle>
29+
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
30+
<Button color="secondary">Button</Button>
31+
</Card>
32+
<Card block inverse color="danger">
33+
<CardTitle>Special Title Treatment</CardTitle>
34+
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
35+
<Button color="secondary">Button</Button>
36+
</Card>
37+
</div>
38+
);
39+
};
40+
41+
export default Example;

‎docs/lib/examples/CardColumns.jsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React from 'react';
2+
import { Card, Button, CardImg, CardTitle, CardText, CardColumns,
3+
CardSubtitle, CardBlock } from 'reactstrap';
4+
5+
const Example = (props) => {
6+
return (
7+
<CardColumns>
8+
<Card>
9+
<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>
11+
<CardTitle>Card title</CardTitle>
12+
<CardSubtitle>Card subtitle</CardSubtitle>
13+
<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>
14+
<Button>Button</Button>
15+
</CardBlock>
16+
</Card>
17+
<Card>
18+
<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+
</Card>
20+
<Card>
21+
<CardBlock>
22+
<CardTitle>Card title</CardTitle>
23+
<CardSubtitle>Card subtitle</CardSubtitle>
24+
<CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
25+
<Button>Button</Button>
26+
</CardBlock>
27+
</Card>
28+
<Card block inverse style={{ 'background-color': '#333', 'border-color': '#333' }}>
29+
<CardTitle>Special Title Treatment</CardTitle>
30+
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
31+
<Button>Button</Button>
32+
</Card>
33+
<Card>
34+
<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>
36+
<CardTitle>Card title</CardTitle>
37+
<CardSubtitle>Card subtitle</CardSubtitle>
38+
<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>
39+
<Button>Button</Button>
40+
</CardBlock>
41+
</Card>
42+
<Card block inverse color="primary">
43+
<CardTitle>Special Title Treatment</CardTitle>
44+
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
45+
<Button color="secondary">Button</Button>
46+
</Card>
47+
</CardColumns>
48+
);
49+
};
50+
51+
export default Example;

0 commit comments

Comments
 (0)