fix(Card): fix padding

8base · Jan 9, 2019 · 627d383 · 627d383
1 parent e373774
commit 627d383
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 50 deletions.
diff --git a/src/components/Card/Card.js b/src/components/Card/Card.js
@@ -11,7 +11,6 @@ import type { PropSizes } from '../../types';
 
 type CardPlateProps = {
   children: React$Node | (Object) => React$Node,
-  padding?: PropSizes,
   paddingOuter?: PropSizes,
   style?: Object,
   stretch?: boolean,
@@ -32,18 +31,12 @@ const Card = ({ children, paddingOuter, padding, ...rest }: CardPlateProps) => (
         ?
         children(rest)
         :
-        React.Children.map(children, child =>
-          React.cloneElement(child, { padding: child.props.padding || padding }),
-        )
+        children
     }
   </Paper>
 );
 
 
-Card.defaultProps = {
-  padding: 'md',
-};
-
 Card.Header = CardHeader;
 Card.Body = CardBody;
 Card.Section = CardSection;

diff --git a/src/components/Card/Card.stories.js b/src/components/Card/Card.stories.js
@@ -20,10 +20,10 @@ export default (asStory) => {
         </Card>
       ))
       .add('with custom paddings', () => (
-        <Card padding="xl">
-          <Card.Header>Header</Card.Header>
-          <Card.Body>Body<br /><br /><br /><br /></Card.Body>
-          <Card.Footer>Footer</Card.Footer>
+        <Card>
+          <Card.Header padding="xl">Header</Card.Header>
+          <Card.Body padding="xl">Body<br /><br /><br /><br /></Card.Body>
+          <Card.Footer padding="xl">Footer</Card.Footer>
         </Card>
       ))
       .add('with multiple sections', () => (

diff --git a/src/components/Card/Card.test.js b/src/components/Card/Card.test.js
@@ -6,31 +6,6 @@ describe('<Card />', () => {
   it('should render Card components', () => {
     const wrapper = mount(
       <Card padding="sm">
-        <Card.Header>Header</Card.Header>
-        <Card.Body>
-          <Card.Section>
-              Body
-          </Card.Section>
-        </Card.Body>
-        <Card.Footer>Footer</Card.Footer>
-      </Card>,
-    );
-
-    expect(wrapper.find(Card.Header).text()).toBe('Header');
-    expect(wrapper.find(Card.Body).text()).toBe('Body');
-    expect(wrapper.find(Card.Footer).text()).toBe('Footer');
-
-    expect(wrapper.find(Card.Header).props().padding).toBe('sm');
-    expect(wrapper.find(Card.Body).props().padding).toBe('sm');
-    expect(wrapper.find(Card.Footer).props().padding).toBe('sm');
-
-    expect(wrapper).toMatchSnapshot();
-  });
-
-
-  it('should render Card components with correct padding props', () => {
-    const wrapper = mount(
-      <Card pading="sm">
         <Card.Header padding="md">Header</Card.Header>
         <Card.Body padding="lg">
           <Card.Section>
@@ -41,9 +16,15 @@ describe('<Card />', () => {
       </Card>,
     );
 
+    expect(wrapper.find(Card.Header).text()).toBe('Header');
+    expect(wrapper.find(Card.Body).text()).toBe('Body');
+    expect(wrapper.find(Card.Footer).text()).toBe('Footer');
+
     expect(wrapper.find(Card.Header).props().padding).toBe('md');
     expect(wrapper.find(Card.Body).props().padding).toBe('lg');
     expect(wrapper.find(Card.Footer).props().padding).toBe('xl');
+
+    expect(wrapper).toMatchSnapshot();
   });
 
 

diff --git a/src/components/Card/CardBody.js b/src/components/Card/CardBody.js
@@ -41,4 +41,8 @@ const CardBody = ({ children, ...rest }: CardBodyProps) => (
   </CardBodyTag>
 );
 
+CardBody.defaultProps = {
+  padding: 'md',
+};
+
 export { cardBodyTheme, CardBody };
diff --git a/src/components/Card/CardFooter.js b/src/components/Card/CardFooter.js
@@ -30,4 +30,9 @@ const CardFooter = ({ children, ...rest }: CardFooterProps) => (
   </CardFooterTag>
 );
 
+CardFooter.defaultProps = {
+  padding: 'md',
+};
+
+
 export { cardFooterTheme, CardFooter };
diff --git a/src/components/Card/CardHeader.js b/src/components/Card/CardHeader.js
@@ -45,4 +45,9 @@ const CardHeader = ({
   );
 };
 
+CardHeader.defaultProps = {
+  padding: 'md',
+};
+
+
 export { cardHeaderTheme, CardHeader };
diff --git a/src/components/Card/__snapshots__/Card.test.js.snap b/src/components/Card/__snapshots__/Card.test.js.snap
@@ -49,16 +49,15 @@ exports[`<Card /> should render Card components 1`] = `
           className="emotion-16 emotion-1"
         >
           <CardHeader
-            key=".0"
-            padding="sm"
+            padding="md"
           >
             <Styled(cardHeader)
-              padding="sm"
+              padding="md"
               tagName="div"
             >
               <Tag
                 className="emotion-0 emotion-1"
-                padding="sm"
+                padding="md"
                 tagName="div"
               >
                 <div
@@ -70,16 +69,15 @@ exports[`<Card /> should render Card components 1`] = `
             </Styled(cardHeader)>
           </CardHeader>
           <CardBody
-            key=".1"
-            padding="sm"
+            padding="lg"
           >
             <Styled(cardBody)
-              padding="sm"
+              padding="lg"
               tagName="div"
             >
               <Tag
                 className="emotion-8 emotion-1"
-                padding="sm"
+                padding="lg"
                 tagName="div"
               >
                 <div
@@ -110,16 +108,15 @@ exports[`<Card /> should render Card components 1`] = `
             </Styled(cardBody)>
           </CardBody>
           <CardFooter
-            key=".2"
-            padding="sm"
+            padding="xl"
           >
             <Styled(cardFooter)
-              padding="sm"
+              padding="xl"
               tagName="div"
             >
               <Tag
                 className="emotion-12 emotion-1"
-                padding="sm"
+                padding="xl"
                 tagName="div"
               >
                 <div

diff --git a/src/components/Dialog/Dialog.js b/src/components/Dialog/Dialog.js
@@ -91,7 +91,7 @@ const Dialog = ({
       {
         ({ args, onClose }) => (
           <DialogTag tagName={ tagName } size={ size }>
-            <Card padding={ padding }args={ args } onClose={ onClose }>
+            <Card padding={ padding } args={ args } onClose={ onClose }>
               { children }
             </Card>
           </DialogTag>