fix(Card): Allow Card.Body to standalone

heydoctor · Sep 18, 2019 · 44ed904 · 44ed904
1 parent e87b1c6
commit 44ed904
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 18 deletions.
diff --git a/src/Card/Card.js b/src/Card/Card.js
@@ -27,28 +27,36 @@ Card.defaultProps = {
   shadow: false,
 };
 
-Card.Header = createComponent({
-  name: 'CardHeader',
+Card.Footer = createComponent({
+  name: 'CardFooter',
   as: Box,
   style: css`
-    padding: 1rem 1rem 8px;
-    font-weight: 700;
+    padding: 16px;
   `,
 });
 
 Card.Body = createComponent({
   name: 'CardBody',
   as: Box,
   style: () => css`
-    padding: 8px 1rem;
+    padding: 16px;
+
+    & + ${Card.Footer} {
+      padding-top: 0px;
+    }
   `,
 });
 
-Card.Footer = createComponent({
-  name: 'CardFooter',
+Card.Header = createComponent({
+  name: 'CardHeader',
   as: Box,
   style: css`
-    padding: 8px 1rem 1rem;
+    padding: 16px;
+    font-weight: 700;
+
+    & + ${Card.Body} {
+      padding-top: 0px;
+    }
   `,
 });
 

diff --git a/src/Card/Card.stories.js b/src/Card/Card.stories.js
@@ -7,14 +7,21 @@ export default {
 };
 
 export const Basic = () => (
-  <>
-    <Card>
-      <Card.Header>Header</Card.Header>
-      <Card.Body>
-        A card is a flexible and extensible content container. It includes options for headers and footers, a wide
-        variety of content, contextual background colors, and powerful display options.
-      </Card.Body>
-      <Card.Footer>Footer</Card.Footer>
-    </Card>
-  </>
+  <Card>
+    <Card.Header>Header</Card.Header>
+    <Card.Body>
+      A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety
+      of content, contextual background colors, and powerful display options.
+    </Card.Body>
+    <Card.Footer>Footer</Card.Footer>
+  </Card>
+);
+
+export const BodyOnly = () => (
+  <Card>
+    <Card.Body>
+      A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety
+      of content, contextual background colors, and powerful display options.
+    </Card.Body>
+  </Card>
 );