feat: Card Component (#243)

* color variations * outline and inverse * remove import * inverse buttons * outlines and cleanup * loading disabled states * prop cleanup * reorder stories * add more stories for chromatic coverage * disabled outline buttons * Card prototype design * dot notation * default padding for Card Header, Section and Footer * add card child component prop tables * make sure radius corners aren't hidden by background color * wip * organize * more examples and styling * card with table story * tests, proptypes and documentation * fix childGap type * Update Card.stories.mdx * minor refactor, fixing tests * keying improvements * Update Card.stories.mdx * Update Card.test.jsx * cleanup * DisplayType * Update CardFooter.test.jsx * use DisplayType in Box Co-authored-by: Juan Fabrega <[email protected]>
palmetto · Oct 1, 2020 · 508e0db · 508e0db
1 parent 06a3c17
commit 508e0db
Show file tree

Hide file tree

Showing 19 changed files with 716 additions and 28 deletions.
diff --git a/.babelrc b/.babelrc
@@ -8,7 +8,8 @@
       ],
       "plugins": [
         "@babel/plugin-transform-regenerator",
-        "@babel/plugin-transform-runtime"
+        "@babel/plugin-transform-runtime",
+        "@babel/plugin-proposal-class-properties"
       ]
     },
     "build": {
@@ -18,7 +19,8 @@
         "@babel/preset-typescript"
       ],
       "plugins": [
-        "babel-plugin-typescript-to-proptypes"
+        "babel-plugin-typescript-to-proptypes",
+        "@babel/plugin-proposal-class-properties"
       ]
     },
     "storybook": {

diff --git a/package.json b/package.json
@@ -63,6 +63,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.10.3",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
     "@babel/plugin-transform-regenerator": "^7.10.4",
     "@babel/plugin-transform-runtime": "^7.10.4",
     "@babel/polyfill": "^7.10.4",

diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx
@@ -17,9 +17,9 @@ import getDimensionCss from '../../lib/getDimensionCss';
 import getSpacingCss from '../../lib/getSpacingCss';
 import getElementType from '../../lib/getElementType';
 import getFlexCss from '../../lib/getFlexCss';
-// import BorderType from '../../types';
+import { DisplayType } from '../../lib/types';
 
-interface BoxProps {
+export interface BoxProps {
   /**
    * The element type to be rendered.
    */
@@ -68,6 +68,7 @@ interface BoxProps {
   className?: string;
   /**
    * The amount of spacing between child elements.
+   * Can be a single [spacing value](?path=/docs/design-tokens-spacing--page).
    */
   childGap?: PALMETTO_SPACING;
   /**
@@ -85,7 +86,7 @@ interface BoxProps {
   /**
    * Display property. Only select values supported.
    */
-  display?: 'flex' | 'inline-flex' | 'block' | 'inline-block' | 'inline' | 'inherit';
+  display?: DisplayType;
   /**
    * Can be used as shorthand for the flexbox css properties `flex-grow`, `flex-shrink`, `flex-basis`
    */
@@ -117,10 +118,13 @@ interface BoxProps {
   | 'start'
   | 'stretch';
   /**
-   * Amount of space around the element. It models itself after the css shorthand property,
+   * Amount of space around the element.
+   * Can be a single [spacing value](?path=/docs/design-tokens-spacing--page).
+   * Can also be a string of [spacing value](?path=/docs/design-tokens-spacing--page)
+   * that models itself after the css shorthand property,
    * where you can set the margin area on all four sides of an element.It is shorthand for top, right, bottom, left.
    */
-  margin?: PALMETTO_SPACING;
+  margin?: PALMETTO_SPACING | string;
   /**
    * The maximum height of the element. Can be given a standard css value (px, rem, em, %),
    * or a [height token](/?path=/docs/design-tokens-height--page)
@@ -146,10 +150,13 @@ interface BoxProps {
   | 'initial'
   | 'unset';
   /**
-   * Amount of space within the element around the Box contents. It models itself after the css shorthand property,
+   * Amount of space within the element around the Box contents.
+   * Can be a single [spacing value](?path=/docs/design-tokens-spacing--page).
+   * Can also be a string of [spacing value](?path=/docs/design-tokens-spacing--page)
+   * that models itself after the css shorthand property,
    * where you can set the margin area on all four sides of an element. It is shorthand for top, right, bottom, left.
    */
-  padding?: PALMETTO_SPACING;
+  padding?: PALMETTO_SPACING | string;
   /**
    * Set the radius of all corners
    */
@@ -172,31 +179,30 @@ interface BoxProps {
  */
 const Box: FC<BoxProps> = ({
   as = 'div',
-  align,
-  alignContent,
-  alignSelf,
+  align = undefined,
+  alignContent = undefined,
+  alignSelf = undefined,
   background = undefined,
-  // basis,
   border = undefined,
-  children,
+  children = undefined,
   childGap = undefined,
   className = '',
   color = undefined,
   display = 'flex',
   direction = 'column',
-  flex,
+  flex = undefined,
   fontSize = 'inherit',
   height = undefined,
-  justify,
-  margin,
-  maxHeight,
-  maxWidth,
+  justify = undefined,
+  margin = undefined,
+  maxHeight = undefined,
+  maxWidth = undefined,
   overflow = 'initial',
   padding = undefined,
   radius = undefined,
-  wrap,
+  wrap = undefined,
   width = undefined,
-  ...rest
+  ...restProps
 }) => {
   const marginCss = getSpacingCss('m', margin);
   const paddingCss = getSpacingCss('p', padding);
@@ -206,7 +212,7 @@ const Box: FC<BoxProps> = ({
   const maxWidthCss = getDimensionCss('mw', maxWidth);
   const flexCss = getFlexCss(flex);
 
-  const wrapClass = wrap ? 'flex-wrap' : 'flex-nowrap';
+  const wrapClass = display.includes('flex') && wrap ? 'flex-wrap' : 'flex-nowrap';
 
   const boxClasses = classNames(
     className,
@@ -255,11 +261,14 @@ const Box: FC<BoxProps> = ({
    * Shallow merges existing classes of child node with a className based on the childGap value.
    */
   const decorateChildren = (child: ReactElement, i: number, childrenArr: ReactElement[]) => {
-    if (i === childrenArr.length - 1) return child; // Child gap does not apply to last element in the list.
+    if (i === childrenArr.length - 1 || !child) return child; // Not gap if child is last element.
 
     const childClasses = classNames(child.props.className, childGapClass);
 
-    return cloneElement(child, { className: childClasses });
+    return cloneElement(child, {
+      className: childClasses,
+      key: child.key ?? i,
+    });
   };
 
   if (childGapClass && Array.isArray(children)) {
@@ -270,7 +279,7 @@ const Box: FC<BoxProps> = ({
 
   return createElement(
     element,
-    { className: boxClasses, style: boxStyles, ...rest },
+    { className: boxClasses, style: boxStyles, ...restProps },
     decoratedChildren,
   );
 };

diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss
@@ -0,0 +1,14 @@
+.card {
+  box-shadow:
+    0 1px 5px 0 rgba(0, 0, 0, 0.05),
+    0 1px 2px rgba(0, 0, 0, 0.05),
+    0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.card-section+.card-section {
+  border-top: 1px solid var(--card-border-color);
+}
+
+.card-footer {
+  border-top: 1px solid var(--card-border-color);
+}