PD-549: Refactor Card component to be a styled wrapper for Box (#306)

* initial commit * make Box root element of Card * thank u Brooke * fix Box exports * update readme and rename prop * yarn changeset * fix breaking tests
mongodb · Mar 9, 2020 · 208d881 · 208d881
1 parent 97cadc1
commit 208d881
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 32 deletions.
diff --git a/.changeset/loud-badgers-lay.md b/.changeset/loud-badgers-lay.md
@@ -0,0 +1,6 @@
+---
+'@leafygreen-ui/card': major
+'@leafygreen-ui/box': minor
+---
+
+Refactor Card component to be a styled wrapper for Box
diff --git a/packages/box/src/index.ts b/packages/box/src/index.ts
@@ -1,2 +1,3 @@
-import Box from './Box';
+import Box, { BoxProps } from './Box';
+export { BoxProps };
 export default Box;
diff --git a/packages/card/README.md b/packages/card/README.md
@@ -22,8 +22,8 @@ npm install @leafygreen-ui/card
 import Card from '@leafygreen-ui/card';
 
 <Card
-  as='div'
   className='card-styles'
+  component='div'
 >
   This is my card component
 </Card>
@@ -32,15 +32,15 @@ import Card from '@leafygreen-ui/card';
 **Output HTML**
 
 ```HTML
- <div class="leafygreen-ui-1xf4bcx">This is a card component</div>
+<div class="leafygreen-ui-1lu17q2 card-styles">This is my card component</div>
 ```
 
 ## Properties
 
-| Prop        | Type                          | Description                                                                                                                                        | Default   |
-| ----------- | ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
-| `as`        | `HTML Tag` or `React Element` | Determines the root element. For example, `Link` or `a` tags can be supplied to replace `div` from being the DOM element that wraps the component. | `section` |
-| `className` | `string`                      | Adds a className to the class attribute                                                                                                            |           |
-| `children`  | `node`                        | The children of the rendered inside of the `<Card/>` component.                                                                                    |           |
+Card is a styled wrapper for the Box component. Any properties you would pass to Box can also be passed to Card.
 
-_Any other properties will be spread on the input element._
+| Prop        | Type     | Description                             | Default |
+| ----------- | -------- | --------------------------------------- | ------- |
+| `className` | `string` | Adds a className to the class attribute |         |
+
+_Any other properties will be spread on the Box element._
diff --git a/packages/card/package.json b/packages/card/package.json
@@ -14,7 +14,8 @@
   },
   "dependencies": {
     "@leafygreen-ui/lib": "^4.0.0",
-    "@leafygreen-ui/palette": "^2.0.0"
+    "@leafygreen-ui/palette": "^2.0.0",
+    "@leafygreen-ui/box": "^1.0.0"
   },
   "gitHead": "dd71a2d404218ccec2e657df9c0263dc1c15b9e0"
 }
diff --git a/packages/card/src/Card.spec.tsx b/packages/card/src/Card.spec.tsx
@@ -25,14 +25,14 @@ describe('packages/Card', () => {
     expect(renderedCard.textContent).toBe(children);
   });
 
-  test(`renders inside of a section tag by default`, () => {
-    expect(renderedCard.tagName.toLowerCase()).toBe('section');
+  test(`renders inside of a div tag by default`, () => {
+    expect(renderedCard.tagName.toLowerCase()).toBe('div');
   });
 
   test(`renders component inside of a React Element/HTML tag based on as prop`, () => {
     const newCardId = 'newCardID';
     const { getByTestId } = render(
-      <Card data-testid={newCardId} as="section">
+      <Card data-testid={newCardId} component="section">
         Card!
       </Card>,
     );

diff --git a/packages/card/src/Card.tsx b/packages/card/src/Card.tsx
@@ -2,7 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { uiColors } from '@leafygreen-ui/palette';
-import { HTMLElementProps } from '@leafygreen-ui/lib';
+import Box, { BoxProps } from '@leafygreen-ui/box';
+import omit from 'lodash/omit';
 
 const containerStyle = css`
   background-color: white;
@@ -17,31 +18,16 @@ const containerStyle = css`
   }
 `;
 
-interface CardProps {
-  children: React.ReactNode;
-  as?: React.ElementType<any>;
-  className?: string;
-}
-
-function Card({ children, as = 'section', className, ...rest }: CardProps) {
-  const Root = as;
+function Card<T extends React.ReactNode>(props: BoxProps<T>) {
+  const rest = omit(props as any, ['className']);
 
-  return (
-    <Root
-      {...(rest as HTMLElementProps<any>)}
-      className={cx(containerStyle, className)}
-    >
-      {children}
-    </Root>
-  );
+  return <Box className={cx(containerStyle, props.className)} {...rest} />;
 }
 
 Card.displayName = 'Card';
 
 Card.propTypes = {
-  children: PropTypes.node,
   as: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  className: PropTypes.string,
 };
 
 export default Card;
diff --git a/packages/card/tsconfig.json b/packages/card/tsconfig.json
@@ -14,6 +14,9 @@
     },
     {
       "path": "../palette"
+    },
+    {
+      "path": "../box"
     }
   ]
 }