Card background and border customizable (#135)

* make Card background and border customizable * add a story that changes both the Card background and the border * background -> backgroundColor and update snapshots
bufferapp · Jul 2, 2018 · b37d56d · b37d56d
1 parent 245e6de
commit b37d56d
Show file tree

Hide file tree

Showing 4 changed files with 490 additions and 177 deletions.
diff --git a/Card/index.jsx b/Card/index.jsx
@@ -1,37 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  calculateStyles,
-} from '../lib/utils';
-import {
-  fontSizeMini,
-  lineHeight,
-} from '../style/font';
-import {
-  outerSpace,
-  outerSpaceLight,
-  white,
-  mystic,
-  geyser,
-  torchRed,
-  offWhite,
-} from '../style/color';
-import {
-  borderWidth,
-  borderRadius,
-} from '../style/border';
-import {
-  transitionAnimationTime,
-  transitionAnimationType,
-} from '../style/animation';
-import {
-  boxShadowLevelOne,
-  boxShadowLevelTwo,
-} from '../style/dropShadow';
+import { calculateStyles } from '../lib/utils';
+import { fontSizeMini, lineHeight } from '../style/font';
+import { outerSpaceLight, white, mystic, geyser, torchRed } from '../style/color';
+import { borderWidth, borderRadius } from '../style/border';
+import { transitionAnimationTime, transitionAnimationType } from '../style/animation';
+import { boxShadowLevelOne, boxShadowLevelTwo } from '../style/dropShadow';
 
 const Card = ({
   children,
-  color,
+  backgroundColor,
+  borderColor,
   doublePadding,
   empty,
   faded,
@@ -45,83 +24,85 @@ const Card = ({
   shadowHeight,
   draggingPlaceholder,
 }) => {
-  const style = calculateStyles({
-    default: {
-      padding: '1.5rem',
-      fontSize: fontSizeMini,
-      lineHeight,
-      color: outerSpace,
-      backgroundColor: white,
-      border: `${borderWidth} solid ${mystic}`,
-      borderRadius,
-      transition: `box-shadow ${transitionAnimationTime} ${transitionAnimationType}`,
+  const style = calculateStyles(
+    {
+      default: {
+        padding: '1.5rem',
+        fontSize: fontSizeMini,
+        lineHeight,
+        backgroundColor: white,
+        border: `${borderWidth} solid ${mystic}`,
+        borderRadius,
+        transition: `box-shadow ${transitionAnimationTime} ${transitionAnimationType}`,
+      },
+      doublePadding: {
+        padding: '3rem',
+      },
+      empty: {
+        borderColor: geyser,
+        borderStyle: 'dashed',
+      },
+      failed: {
+        borderColor: torchRed,
+      },
+      faded: {
+        opacity: 0.5,
+      },
+      noBorder: {
+        border: `${borderWidth} solid transparent`,
+      },
+      noPadding: {
+        padding: 0,
+      },
+      hovered: {
+        boxShadow: boxShadowLevelOne,
+      },
+      backgroundColor: {
+        backgroundColor,
+      },
+      borderColor: {
+        borderColor,
+      },
+      reducedPadding: {
+        padding: '1rem',
+      },
+      shadowHeightOne: {
+        boxShadow: boxShadowLevelOne,
+      },
+      shadowHeightTwo: {
+        boxShadow: boxShadowLevelTwo,
+      },
+      draggingPlaceholder: {
+        border: `${borderWidth} dashed ${outerSpaceLight}`,
+      },
     },
-    doublePadding: {
-      padding: '3rem',
+    {
+      doublePadding,
+      empty,
+      failed,
+      faded,
+      noBorder,
+      noPadding,
+      hovered,
+      backgroundColor,
+      borderColor,
+      reducedPadding,
+      shadowHeightOne: shadowHeight === 1,
+      shadowHeightTwo: shadowHeight === 2,
+      draggingPlaceholder,
     },
-    empty: {
-      borderColor: geyser,
-      borderStyle: 'dashed',
-    },
-    failed: {
-      borderColor: torchRed,
-    },
-    faded: {
-      opacity: 0.5,
-    },
-    noBorder: {
-      border: `${borderWidth} solid transparent`,
-    },
-    noPadding: {
-      padding: 0,
-    },
-    hovered: {
-      boxShadow: boxShadowLevelOne,
-    },
-    // TODO: rename this to `backgroundColor` or similar
-    color: {
-      backgroundColor: offWhite,
-    },
-    reducedPadding: {
-      padding: '1rem',
-    },
-    shadowHeightOne: {
-      boxShadow: boxShadowLevelOne,
-    },
-    shadowHeightTwo: {
-      boxShadow: boxShadowLevelTwo,
-    },
-    draggingPlaceholder: {
-      border: `${borderWidth} dashed ${outerSpaceLight}`,
-    },
-  }, {
-    doublePadding,
-    empty,
-    failed,
-    faded,
-    noBorder,
-    noPadding,
-    hovered,
-    color,
-    reducedPadding,
-    shadowHeightOne: shadowHeight === 1,
-    shadowHeightTwo: shadowHeight === 2,
-    draggingPlaceholder,
-  });
+  );
   return (
-    <div
-      style={style}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-    >
+    <div style={style} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
       {children}
     </div>
   );
 };
 
 Card.propTypes = {
   children: PropTypes.node,
-  color: PropTypes.oneOf(['off-white']),
+  backgroundColor: PropTypes.string,
+  borderColor: PropTypes.string,
   doublePadding: PropTypes.bool,
   empty: PropTypes.bool,
   faded: PropTypes.bool,

diff --git a/Card/story.jsx b/Card/story.jsx
@@ -4,53 +4,98 @@ import { action } from '@storybook/addon-actions';
 import { checkA11y } from 'storybook-addon-a11y';
 import Card from './index';
 import Link from '../Link';
+import { denim, yellowLight, yellowUltraLight } from '../style/color';
 
 storiesOf('Card', module)
   .addDecorator(checkA11y)
   .add('default', () => (
-    <Card>What is a Product Designer? An awesome story by <Link href={'#'}>@jgadapee</Link> over on Medium! <Link href={'#'}>http://buff.ly/1LTbUqv</Link></Card>
+    <Card>
+      What is a Product Designer? An awesome story by <Link href="#">@jgadapee</Link> over on
+      Medium! <Link href="#">http://buff.ly/1LTbUqv</Link>
+    </Card>
   ))
   .add('doublePadding', () => (
-    <Card doublePadding>What is a Product Designer? An awesome story by <Link href={'#'}>@jgadapee</Link> over on Medium! <Link href={'#'}>http://buff.ly/1LTbUqv</Link></Card>
-  ))
-  .add('empty', () => (
-    <Card empty>Nothing to see here! 👻</Card>
+    <Card doublePadding>
+      What is a Product Designer? An awesome story by <Link href="#">@jgadapee</Link> over on
+      Medium! <Link href="#">http://buff.ly/1LTbUqv</Link>
+    </Card>
   ))
+  .add('empty', () => <Card empty>Nothing to see here! 👻</Card>)
   .add('failed', () => (
-    <Card failed>What is a Product Designer? An awesome story by <Link href={'#'}>@jgadapee</Link> over on Medium! <Link href={'#'}>http://buff.ly/1LTbUqv</Link></Card>
+    <Card failed>
+      What is a Product Designer? An awesome story by <Link href="#">@jgadapee</Link> over on
+      Medium! <Link href="#">http://buff.ly/1LTbUqv</Link>
+    </Card>
   ))
   .add('faded', () => (
-    <Card faded>What is a Product Designer? An awesome story by <Link href={'#'}>@jgadapee</Link> over on Medium! <Link href={'#'}>http://buff.ly/1LTbUqv</Link></Card>
+    <Card faded>
+      What is a Product Designer? An awesome story by <Link href="#">@jgadapee</Link> over on
+      Medium! <Link href="#">http://buff.ly/1LTbUqv</Link>
+    </Card>
   ))
   .add('noBorder', () => (
-    <Card noBorder>What is a Product Designer? An awesome story by <Link href={'#'}>@jgadapee</Link> over on Medium! <Link href={'#'}>http://buff.ly/1LTbUqv</Link></Card>
+    <Card noBorder>
+      What is a Product Designer? An awesome story by <Link href="#">@jgadapee</Link> over on
+      Medium! <Link href="#">http://buff.ly/1LTbUqv</Link>
+    </Card>
   ))
   .add('noPadding', () => (
-    <Card noPadding>What is a Product Designer? An awesome story by <Link href={'#'}>@jgadapee</Link> over on Medium! <Link href={'#'}>http://buff.ly/1LTbUqv</Link></Card>
+    <Card noPadding>
+      What is a Product Designer? An awesome story by <Link href="#">@jgadapee</Link> over on
+      Medium! <Link href="#">http://buff.ly/1LTbUqv</Link>
+    </Card>
   ))
   .add('hovered', () => (
-    <Card hovered>What is a Product Designer? An awesome story by <Link href={'#'}>@jgadapee</Link> over on Medium! <Link href={'#'}>http://buff.ly/1LTbUqv</Link></Card>
+    <Card hovered>
+      What is a Product Designer? An awesome story by <Link href="#">@jgadapee</Link> over on
+      Medium! <Link href="#">http://buff.ly/1LTbUqv</Link>
+    </Card>
   ))
   .add('empty + hovered', () => (
-    <Card empty hovered>What is a Product Designer? An awesome story by <Link href={'#'}>@jgadapee</Link> over on Medium! <Link href={'#'}>http://buff.ly/1LTbUqv</Link></Card>
+    <Card empty hovered>
+      What is a Product Designer? An awesome story by <Link href="#">@jgadapee</Link> over on
+      Medium! <Link href="#">http://buff.ly/1LTbUqv</Link>
+    </Card>
   ))
   .add('onMouseEnter + onMouseLeave', () => (
-    <Card
-      onMouseEnter={action('on-mouse-enter')}
-      onMouseLeave={action('on-mouse-leave')}
-    >
-      What is a Product Designer? An awesome story by <Link href={'#'}>@jgadapee</Link> over on Medium! <Link href={'#'}>http://buff.ly/1LTbUqv</Link>
+    <Card onMouseEnter={action('on-mouse-enter')} onMouseLeave={action('on-mouse-leave')}>
+      What is a Product Designer? An awesome story by <Link href="#">@jgadapee</Link> over on
+      Medium! <Link href="#">http://buff.ly/1LTbUqv</Link>
     </Card>
   ))
-  .add('off-white background color', () => (
-    <Card color={'off-white'}>What is a Product Designer? An awesome story by <Link href={'#'}>@jgadapee</Link> over on Medium! <Link href={'#'}>http://buff.ly/1LTbUqv</Link></Card>
+  .add('denim backgroundColor color', () => (
+    <Card backgroundColor={denim}>
+      What is a Product Designer? An awesome story by <Link href="#">@jgadapee</Link> over on
+      Medium! <Link href="#">http://buff.ly/1LTbUqv</Link>
+    </Card>
   ))
   .add('reducedPadding', () => (
-    <Card reducedPadding>What is a Product Designer? An awesome story by <Link href={'#'}>@jgadapee</Link> over on Medium! <Link href={'#'}>http://buff.ly/1LTbUqv</Link></Card>
+    <Card reducedPadding>
+      What is a Product Designer? An awesome story by <Link href="#">@jgadapee</Link> over on
+      Medium! <Link href="#">http://buff.ly/1LTbUqv</Link>
+    </Card>
   ))
   .add('shadowHeight=1', () => (
-    <Card shadowHeight={1}>What is a Product Designer? An awesome story by <Link href={'#'}>@jgadapee</Link> over on Medium! <Link href={'#'}>http://buff.ly/1LTbUqv</Link></Card>
+    <Card shadowHeight={1}>
+      What is a Product Designer? An awesome story by <Link href="#">@jgadapee</Link> over on
+      Medium! <Link href="#">http://buff.ly/1LTbUqv</Link>
+    </Card>
   ))
   .add('shadowHeight=2', () => (
-    <Card shadowHeight={2}>What is a Product Designer? An awesome story by <Link href={'#'}>@jgadapee</Link> over on Medium! <Link href={'#'}>http://buff.ly/1LTbUqv</Link></Card>
+    <Card shadowHeight={2}>
+      What is a Product Designer? An awesome story by <Link href="#">@jgadapee</Link> over on
+      Medium! <Link href="#">http://buff.ly/1LTbUqv</Link>
+    </Card>
+  ))
+  .add('borderColor=denim', () => (
+    <Card borderColor={denim}>
+      What is a Product Designer? An awesome story by <Link href="#">@jgadapee</Link> over on
+      Medium! <Link href="#">http://buff.ly/1LTbUqv</Link>
+    </Card>
+  ))
+  .add('borderColor=yellowLight, backgroundColor=yellowUltraLight', () => (
+    <Card borderColor={yellowLight} backgroundColor={yellowUltraLight}>
+      What is a Product Designer? An awesome story by <Link href="#">@jgadapee</Link> over on
+      Medium! <Link href="#">http://buff.ly/1LTbUqv</Link>
+    </Card>
   ));