fix(Card): fix card padding props

8base · Jan 9, 2019 · dff5b54 · dff5b54
1 parent f24d3f7
commit dff5b54
Show file tree

Hide file tree

Showing 7 changed files with 179 additions and 24 deletions.
diff --git a/src/components/Card/Card.js b/src/components/Card/Card.js
@@ -33,12 +33,17 @@ const Card = ({ children, paddingOuter, padding, ...rest }: CardPlateProps) => (
         children(rest)
         :
         React.Children.map(children, child =>
-          React.cloneElement(child, { padding: padding || child.props.padding }),
+          React.cloneElement(child, { padding: child.props.padding || padding }),
         )
     }
   </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
@@ -22,7 +22,7 @@ export default (asStory) => {
       .add('with custom paddings', () => (
         <Card padding="xl">
           <Card.Header>Header</Card.Header>
-          <Card.Body >Body<br /><br /><br /><br /></Card.Body>
+          <Card.Body>Body<br /><br /><br /><br /></Card.Body>
           <Card.Footer>Footer</Card.Footer>
         </Card>
       ))

diff --git a/src/components/Card/Card.test.js b/src/components/Card/Card.test.js
@@ -5,24 +5,48 @@ import { Card } from './';
 describe('<Card />', () => {
   it('should render Card components', () => {
     const wrapper = mount(
-      <EightBaseBoostProvider>
-        <Card>
-          <Card.Header>Header</Card.Header>
-          <Card.Body>
-            <Card.Section>
+      <Card padding="sm">
+        <Card.Header>Header</Card.Header>
+        <Card.Body>
+          <Card.Section>
               Body
-            </Card.Section>
-          </Card.Body>
-          <Card.Footer>Footer</Card.Footer>
-        </Card>
-      </EightBaseBoostProvider>,
+          </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>
+            Body
+          </Card.Section>
+        </Card.Body>
+        <Card.Footer padding="xl">Footer</Card.Footer>
+      </Card>,
+    );
+
+    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');
   });
 
+
   it('should render Card components with render prop', () => {
     const wrapper = mount(
       <EightBaseBoostProvider>

diff --git a/src/components/Card/CardBody.js b/src/components/Card/CardBody.js
@@ -41,8 +41,4 @@ 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,8 +30,4 @@ 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,8 +45,4 @@ 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
@@ -0,0 +1,138 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Card /> should render Card components 1`] = `
+.emotion-16 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  max-height: 100%;
+}
+
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  height: 64px;
+}
+
+.emotion-12 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+<Card
+  padding="sm"
+>
+  <Paper>
+    <Styled(paper)
+      tagName="div"
+    >
+      <Tag
+        className="emotion-16 emotion-1"
+        tagName="div"
+      >
+        <div
+          className="emotion-16 emotion-1"
+        >
+          <CardHeader
+            key=".0"
+            padding="sm"
+          >
+            <Styled(cardHeader)
+              padding="sm"
+              tagName="div"
+            >
+              <Tag
+                className="emotion-0 emotion-1"
+                padding="sm"
+                tagName="div"
+              >
+                <div
+                  className="emotion-0 emotion-1"
+                >
+                  Header
+                </div>
+              </Tag>
+            </Styled(cardHeader)>
+          </CardHeader>
+          <CardBody
+            key=".1"
+            padding="sm"
+          >
+            <Styled(cardBody)
+              padding="sm"
+              tagName="div"
+            >
+              <Tag
+                className="emotion-8 emotion-1"
+                padding="sm"
+                tagName="div"
+              >
+                <div
+                  className="emotion-8 emotion-1"
+                >
+                  <CardSection
+                    padding="md"
+                  >
+                    <Styled(cardSection)
+                      padding="md"
+                      tagName="div"
+                    >
+                      <Tag
+                        className="emotion-4 emotion-1"
+                        padding="md"
+                        tagName="div"
+                      >
+                        <div
+                          className="emotion-4 emotion-1"
+                        >
+                          Body
+                        </div>
+                      </Tag>
+                    </Styled(cardSection)>
+                  </CardSection>
+                </div>
+              </Tag>
+            </Styled(cardBody)>
+          </CardBody>
+          <CardFooter
+            key=".2"
+            padding="sm"
+          >
+            <Styled(cardFooter)
+              padding="sm"
+              tagName="div"
+            >
+              <Tag
+                className="emotion-12 emotion-1"
+                padding="sm"
+                tagName="div"
+              >
+                <div
+                  className="emotion-12 emotion-1"
+                >
+                  Footer
+                </div>
+              </Tag>
+            </Styled(cardFooter)>
+          </CardFooter>
+        </div>
+      </Tag>
+    </Styled(paper)>
+  </Paper>
+</Card>
+`;