Add Card component (#1032)

Add Card component

docs/styleguide.config.js

@@ -14,6 +14,7 @@ module.exports = {
         '../react/Badge/index.jsx',
         '../react/Button/index.jsx',
         '../react/ButtonAction/index.jsx',
+        '../react/Card/index.jsx',
         '../react/Chip/index.jsx',
         '../react/Icon/index.jsx',
         '../react/Spinner/index.jsx',

react/Card/Readme.md

@@ -0,0 +1,11 @@
+A card is a small block used to separate some content from the rest of the UI.
+
+```
+const { Text, SubTitle } = require('../Text');
+
+<Card>
+  <SubTitle className="u-mb-1">This is a card</SubTitle>
+  <Text className="u-mb-1">This is some card content. Content can be small or huge.</Text>
+  <Button className="u-ml-0" label="Demo button" />
+</Card>
+```

react/Card/index.jsx

@@ -0,0 +1,13 @@
+import React, { PureComponent } from 'react'
+import cx from 'classnames'
+
+import styles from './styles.styl'
+
+export class Card extends PureComponent {
+  render() {
+    const { className, ...rest } = this.props
+    return <div className={cx(styles['c-card'], className)} {...rest} />
+  }
+}
+
+export default Card

react/Card/styles.styl

@@ -0,0 +1,8 @@
+@require 'tools/mixins'
+@require 'settings/palette'
+
+.c-card {
+    border rem(1) solid var(--silver)
+    border-radius rem(8)
+    padding rem(16)
+}

react/__snapshots__/examples.spec.jsx.snap

@@ -272,6 +272,15 @@ exports[`ButtonAction should render examples: ButtonAction 3`] = `
 </div>"
 `;
 
+exports[`Card should render examples: Card 1`] = `
+"<div>
+  <div class=\\"styles__c-card___YgP7B\\">
+    <div class=\\"styles__u-title-h3___1ZGqN u-mb-1\\">This is a card</div>
+    <div class=\\"styles__u-text___2UfQa u-mb-1\\">This is some card content. Content can be small or huge.</div><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj u-ml-0\\"><span><span>Demo button</span></span></button>
+  </div>
+</div>"
+`;
+
 exports[`Checkbox should render examples: Checkbox 1`] = `
 "<div>
   <form>

react/examples.spec.jsx

@@ -27,6 +27,7 @@ testComponent('Badge')
 testComponent('BarButton')
 testComponent('Button')
 testComponent('ButtonAction')
+testComponent('Card')
 testComponent('Checkbox')
 testComponent('Field')
 testComponent('Hero')

react/testFromStyleguidist.js

@@ -24,6 +24,7 @@ import ButtonAction from './ButtonAction'
 import ButtonClient from './PushClientButton'
 import BannerClient from './PushClientBanner'
 import Checkbox from './Checkbox'
+import Card from './Card'
 import Empty from './Empty'
 import Field from './Field'
 import Hero from './Hero'
@@ -78,6 +79,7 @@ const testFromStyleguidist = (name, markdown, require) => {
       'ButtonAction',
       'ButtonClient',
       'BannerClient',
+      'Card',
       'Checkbox',
       'Empty',
       'Field',
@@ -127,6 +129,7 @@ const testFromStyleguidist = (name, markdown, require) => {
       ButtonAction,
       ButtonClient,
       BannerClient,
+      Card,
       Checkbox,
       Empty,
       Field,