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
reactstrap · Jun 26, 2016 · b782807 · b782807
1 parent ff09c64
commit b782807
Show file tree

Hide file tree

Showing 43 changed files with 1,433 additions and 2 deletions.
diff --git a/docs/lib/Components/CardPage.jsx b/docs/lib/Components/CardPage.jsx
@@ -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>
+    );
+  }
+}
diff --git a/docs/lib/Components/index.jsx b/docs/lib/Components/index.jsx
@@ -39,6 +39,10 @@ class Components extends React.Component {
           name: 'Labels',
           to: '/components/labels/'
         },
+        {
+          name: 'Card',
+          to: '/components/card/'
+        },
         {
           name: 'Navs',
           to: '/components/navs/'

diff --git a/docs/lib/examples/Card.jsx b/docs/lib/examples/Card.jsx
@@ -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;
diff --git a/docs/lib/examples/CardAlignment.jsx b/docs/lib/examples/CardAlignment.jsx
@@ -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;
diff --git a/docs/lib/examples/CardBackgrounds.jsx b/docs/lib/examples/CardBackgrounds.jsx
@@ -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;
diff --git a/docs/lib/examples/CardColumns.jsx b/docs/lib/examples/CardColumns.jsx
@@ -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;