feat(card): initial card implementation

packages/paste-core/components/card/src/index.tsx

@@ -1,26 +1,31 @@
 import * as React from 'react';
 import {Box} from '@twilio-paste/box';
-import {SpaceProps} from '@twilio-paste/types';
+import {PaddingProps, BorderWidthProps, BorderColorProps, BorderStyleProps} from '@twilio-paste/types';
 import {StaticDiv} from '@twilio-paste/types/src/DomTypes';
-import {errorOnBadProps, spacingProps} from './utilities';
-
-interface CardFooterProps extends SpaceProps, StaticDiv {}
-
-const cardProps = spacingProps;
-const cardFooterProps = spacingProps;
+import {
+  errorOnBadProps,
+  spacingProps,
+  borderWidthProps,
+  borderStyleProps,
+  borderColorProps,
+  paddingProps,
+} from './utilities';
+
+interface CardFooterProps extends PaddingProps, StaticDiv {}
+const cardFooterProps = paddingProps;
 
 const CardFooter: React.FunctionComponent<CardFooterProps> = ({children, ...attributes}) => {
   errorOnBadProps(attributes, cardFooterProps);
 
   return (
     <Box
+      as="article"
       borderTopWidth="borderWidth10"
       borderBottomWidth="borderWidth0"
       borderLeftWidth="borderWidth0"
       borderRightWidth="borderWidth0"
       marginTop="space40"
       paddingTop="space40"
-      borderColor="colorBorder"
       borderStyle="solid"
       {...attributes}
     >
@@ -29,18 +34,21 @@ const CardFooter: React.FunctionComponent<CardFooterProps> = ({children, ...attr
   );
 };
 
-interface CardProps extends SpaceProps, StaticDiv {}
+interface CardProps extends PaddingProps, BorderStyleProps, BorderColorProps, BorderWidthProps, StaticDiv {}
+const cardProps = [...paddingProps, ...borderWidthProps, ...borderColorProps, ...borderStyleProps];
 
 const Card: React.FunctionComponent<CardProps> = ({children, ...attributes}) => {
   errorOnBadProps(attributes, cardProps);
 
   return (
     <Box
+      as="article"
       borderWidth="borderWidth20"
       borderColor="colorBorder"
       borderStyle="solid"
       borderRadius="borderRadius20"
       padding="space60"
+      backgroundColor="colorBackgroundBody"
       {...attributes}
     >
       {children}

packages/paste-core/components/card/src/utilities.tsx

@@ -1,6 +1,9 @@
 const marginProps = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft'];
 const paddingProps = ['padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'];
 const spacingProps = [...marginProps, ...paddingProps];
+const borderWidthProps = ['borderWidth', 'borderBottomWidth', 'borderLeftWidth', 'borderRightWidth', 'borderTopWidth'];
+const borderColorProps = ['borderColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor'];
+const borderStyleProps = ['borderStyle', 'borderTopStyle', 'borderRightStyle', 'borderBottomStyle', 'borderLeftStyle'];
 
 const errorOnBadProps = (props: {[key: string]: any}, propWhitelist: string[]): void => {
   // Object.keys might be slow in the hot path
@@ -13,4 +16,4 @@ const errorOnBadProps = (props: {[key: string]: any}, propWhitelist: string[]):
   }
 };
 
-export {marginProps, paddingProps, spacingProps, errorOnBadProps};
+export {marginProps, paddingProps, spacingProps, borderWidthProps, borderColorProps, borderStyleProps, errorOnBadProps};

packages/paste-core/components/card/stories/index.stories.tsx

@@ -1,12 +1,40 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import {Heading} from '@twilio-paste/heading';
+import {withKnobs, select} from '@storybook/addon-knobs';
 import {Text} from '@twilio-paste/text';
 import {Card, CardFooter} from '../src';
 
+import {Padding, Space} from '@twilio-paste/types';
+
+const space = [
+  'space0',
+  'space10',
+  'space100',
+  'space110',
+  'space120',
+  'space130',
+  'space140',
+  'space150',
+  'space160',
+  'space170',
+  'space180',
+  'space190',
+  'space20',
+  'space200',
+  'space30',
+  'space40',
+  'space50',
+  'space60',
+  'space70',
+  'space80',
+  'space90',
+];
+
 storiesOf('Components|Card', module)
+  .addDecorator(withKnobs)
   .add('Default', () => (
-    <Card>
+    <Card padding={select('padding', space, 'space10') as Padding}>
       <Heading as="h2">With a heading</Heading>
       <Text>Body</Text>
       <CardFooter>
@@ -27,7 +55,7 @@ storiesOf('Components|Card', module)
     </Card>
   ))
   .add('Prop Passthrough', () => (
-    <Card aria-busy aria-atomic data-qahook="ZeCard!" id="12">
+    <Card aria-busy aria-atomic data-qahook="ZeCard!">
       <Heading as="h2">With a heading</Heading>
       <Text>Body</Text>
     </Card>

packages/paste-website/src/pages/components/card/index.mdx

@@ -66,7 +66,7 @@ though children composed inside of it may commonly have event handlers.
 Acknowledging the flexibility of Card component, there are several non-negotiable 
 properties of a Card that differentiate it from a more basic page-layout element, such as Box:
 
-* A background color of $background-color-body.  
+* A background color of $color-background-body.  
 * A border width of $border-width-20.
 * A border radius of $border-radius-20.
 * A border color of $color-border.
@@ -79,30 +79,6 @@ properties of a Card that differentiate it from a more basic page-layout element
 A card is a box with default attributes defined above. The purpose of the card is to provide a consistent experience to use across the website the design team can 
 
 
-## Usage Guide
-
-
-### Installation
-
-```bash
-yarn add @twilio-paste/card
-
-or
-
-npm i @twilio-paste/card
-```
-
-### API
-
-| Prop         	| Type             	| Description                              	| Default        	|
-|--------------	|------------------	|------------------------------------------	|----------------	|
-| children?    	| React.ReactNode  	| Child components to render into the card 	| undefined         |
-| borderWidth  	| borderWidths     	| Width of the border                      	| borderWidth20  	|
-| borderColor  	| BorderColors     	| Color of the border                      	| colorBorder    	|
-| borderStyle  	| BorderStyleProps 	| Style of the border                      	| solid          	|
-| borderRadius 	| Radii            	| Radius of the border                     	| borderRadius20 	|
-| padding      	| Spacing          	| Internal spacing of the card             	| space60        	|
-
 ### Examples
 
 <LivePreview scope={{Card, Text, CardFooter, Heading}} language="jsx">
@@ -154,6 +130,31 @@ npm i @twilio-paste/card
 </LivePreview>
 
 
+## Usage Guide
+
+
+### Installation
+
+```bash
+yarn add @twilio-paste/card
+
+or
+
+npm i @twilio-paste/card
+```
+
+### API
+
+| Prop         	| Type             	| Description                              	| Default        	|
+|--------------	|------------------	|------------------------------------------	|----------------	|
+| children?    	| React.ReactNode  	| Child components to render into the card 	| undefined         |
+| borderWidth  	| borderWidths     	| Width of the border                      	| borderWidth20  	|
+| borderColor  	| BorderColors     	| Color of the border                      	| colorBorder    	|
+| borderStyle  	| BorderStyleProps 	| Style of the border                      	| solid          	|
+| borderRadius 	| Radii            	| Radius of the border                     	| borderRadius20 	|
+| padding      	| Spacing          	| Internal spacing of the card             	| space60        	|
+
+
 
 </content>