feat(Card): update card design (#36)

* feat(Card): update card design

* Update Card.tsx

package.json

@@ -116,7 +116,7 @@
     "@rollup/rollup-linux-x64-gnu": "^4.9.6"
   },
   "dependencies": {
-    "@hyphen/hyphen-design-tokens": "^3.1.1",
+    "@hyphen/hyphen-design-tokens": "^3.2.0",
     "@popperjs/core": "^2.11.8",
     "@types/react-modal": "^3.16.3",
     "classnames": "^2.5.1",

src/components/Card/Card.module.scss

@@ -1,47 +1,6 @@
-.card-background {
-  background-color: var(
-    --card-background-color,
-    var(--color-background-primary)
-  );
-}
-
-.card-radius {
-  border-radius: var(--card-border-radius, var(--size-border-radius-lg));
-}
-
-.card-shadow {
-  box-shadow: var(--card-box-shadow, var(--size-box-shadow-sm));
-}
-
 .card-section-border {
   + .card-section-border {
     border-top: 1px solid
-      var(--card-section-border-color, var(--color-border-default));
+      var(--card-section-border-color, var(--color-border-subtle));
   }
 }
-
-.card-subdued {
-  background-color: var(
-    --card-subdued-background-color,
-    var(--color-base-grey-50)
-  );
-  box-shadow: none;
-
-  .card-section-border {
-    + .card-section-border {
-      border-top: 1px solid
-        var(--card-section-subdued-border-color, var(--color-border-default));
-    }
-  }
-}
-
-.card-footer-background {
-  background-color: var(
-    --card-footer-background-color,
-    var(--color-background-secondary)
-  );
-}
-
-.card-footer-border-color {
-  border-color: var(--card-section-border-color, var(--color-border-default));
-}

src/components/Card/Card.stories.tsx

@@ -19,6 +19,7 @@ export const OverviewCard = () => (
     <Card.Section>
       <p>Card content</p>
     </Card.Section>
+    <Card.Section title="Section Two">Another section</Card.Section>
     <Card.Footer>Footer</Card.Footer>
   </Card>
 );

src/components/Card/Card.tsx

@@ -1,78 +1,37 @@
-import {
-  BorderRadiusSize,
-  BoxShadowSize,
-  BackgroundColor,
-  ResponsiveProp,
-} from '../../types';
 import { Box, BoxProps } from '../Box/Box';
 import { CardFooter, CardHeader, CardSection } from './components';
 import React, { ReactNode } from 'react';
 
-import classNames from 'classnames';
-import styles from './Card.module.scss';
-
 export interface CardProps extends BoxProps {
-  /**
-   * If defined as a prop, this value will take higher precedence than the corresponding component design token value
-   * Any valid background color token or url() for an image
-   */
-  background?: BackgroundColor;
   /**
    * The Card's contents.
    */
   children?: ReactNode;
-  /**
-   * visually subdue the appearance of the entire card.
-   */
-  subdued?: boolean;
-  /**
-   * If defined as a prop, this value will take higher precedence than the corresponding component design token value
-   * Radius of the Card's corners
-   */
-  radius?: BorderRadiusSize | ResponsiveProp<BorderRadiusSize>;
-  /**
-   * If defined as a prop, this value will take higher precedence than the corresponding component design token value
-   * The size of the drop shadow applied to the Card
-   */
-  shadow?: BoxShadowSize | ResponsiveProp<BoxShadowSize>;
 }
 
 export const CardBaseComponent: React.FC<CardProps> = React.forwardRef(
   (
     {
-      background = undefined,
       children,
       subdued,
-      className = undefined,
       overflow = 'hidden',
       display = 'block',
-      radius = undefined,
-      shadow = undefined,
       width = '100',
       ...restProps
     },
     ref
   ) => {
-    const classes = classNames(
-      {
-        [styles['card-background']]: background === undefined && !subdued,
-        [styles['card-radius']]: radius === undefined,
-        [styles['card-shadow']]: shadow === undefined && !subdued,
-        [styles['card-subdued']]: subdued,
-      },
-      className
-    );
-
     return (
       <Box
-        background={background}
+        background={subdued ? 'secondary' : 'primary'}
+        borderWidth="sm"
+        borderColor="subtle"
         overflow={overflow}
         display={display}
         ref={ref}
+        shadow="2xs"
         width={width}
-        radius={radius}
-        shadow={shadow}
-        className={classes}
+        radius="lg"
         {...restProps}
       >
         {children}

src/components/Card/components/CardFooter/CardFooter.tsx

@@ -1,53 +1,27 @@
 import { Box, BoxProps } from '../../../Box/Box';
 import React, { FC, ReactNode } from 'react';
-
-import { BackgroundColor, BorderColor } from '../../../../types';
-import classNames from 'classnames';
-import styles from '../../Card.module.scss';
-
 export interface CardFooterProps extends BoxProps {
   /**
    * Contents of the Footer.
    */
   children?: ReactNode;
-  /**
-   * If defined as a prop, this value will take higher precedence than the corresponding component design token value
-   * Any valid background color token, or a `url()` for an image
-   */
-  background?: BackgroundColor;
-  /**
-   * If defined as a prop, this value will take higher precedence than the corresponding component design token value
-   * Any valid border color token
-   * Or a responsive prop with borderColor for each breakpoint.
-   */
-  borderColor?: BorderColor;
   /**
    * Additional props to be spread to rendered element
    */
   [x: string]: any; // eslint-disable-line
 }
 
 export const CardFooter: FC<CardFooterProps> = ({
-  background = undefined,
-  borderColor = undefined,
+  background = 'secondary',
+  borderColor = 'subtle',
   borderWidth = 'xs 0 0 0',
   children = null,
-  className,
   display = 'block',
   padding = '2xl',
   ...restProps
 }) => {
-  const classes = classNames(
-    {
-      [styles['card-footer-background']]: background === undefined,
-      [styles['card-footer-border-color']]: borderColor === undefined,
-    },
-    className
-  );
-
   return (
     <Box
-      className={classes}
       display={display}
       padding={padding}
       background={background}