feat(Card): add ability to use multiple sections

src/atoms/Card/Card.stories.js

@@ -9,10 +9,6 @@ const ShortDiv = styled('div')({
   },
 });
 
-const LongDiv = styled('div')({
-  height: '600px',
-});
-
 export default (asStory) => {
   asStory('ATOMS/Card', module, (story, { Card }) => {
     story
@@ -36,6 +32,17 @@ export default (asStory) => {
           <Card.Body>Body<br /><br /><br /><br /></Card.Body>
         </Card.Plate>
       ))
+      .add('without multiple sections', () => (
+        <Card.Plate>
+          <Card.Header>Header</Card.Header>
+          <Card.Body padding="none">
+            <Card.Section>Section<br /><br /><br /><br /></Card.Section>
+            <Card.Section>Section<br /><br /><br /><br /></Card.Section>
+            <Card.Section>Section<br /><br /><br /><br /></Card.Section>
+          </Card.Body>
+          <Card.Footer>Footer </Card.Footer>
+        </Card.Plate>
+      ))
       .add('without header', () => (
         <Card.Plate>
           <Card.Body>Body<br /><br /><br /><br /></Card.Body>
@@ -46,10 +53,10 @@ export default (asStory) => {
         <ShortDiv>
           <Card.Plate>
             <Card.Header>Header</Card.Header>
-            <Card.Body scrollable>
-              <LongDiv>
-                Body
-              </LongDiv>
+            <Card.Body padding="none" scrollable>
+              <Card.Section>Section<br /><br /><br /><br /><br /><br /><br /><br /></Card.Section>
+              <Card.Section>Section<br /><br /><br /><br /><br /><br /><br /><br /></Card.Section>
+              <Card.Section>Section<br /><br /><br /><br /><br /><br /><br /><br /></Card.Section>
             </Card.Body>
             <Card.Footer>Footer </Card.Footer>
           </Card.Plate>

src/atoms/Card/CardBody.js

@@ -1,5 +1,6 @@
 // @flow
 import React from 'react';
+
 import { createStyledTag, createTheme } from '../../utils';
 import { offsetModifier } from './common';
 import type { PropSizes } from '../../types';

src/atoms/Card/CardSection.js

@@ -0,0 +1,44 @@
+// @flow
+import React from 'react';
+
+import { COLORS } from '../../theme';
+import { createStyledTag, createTheme } from '../../utils';
+import { offsetModifier } from './common';
+import type { PropSizes } from '../../types';
+
+type CardSectionProps = {|
+  children: React$Node,
+  padding?: PropSizes,
+  stretch?: boolean,
+|};
+
+const name = 'cardSection';
+
+const cardSectionTheme = createTheme(name, {
+  modifiers: {
+    stretch: {
+      display: 'flex',
+      flex: 1,
+      width: '100%',
+    },
+    ...offsetModifier,
+  },
+});
+
+const CardSectionTag = createStyledTag(name, {
+  '&:not(:last-child)': {
+    borderBottom: `1px solid ${COLORS.PRIMARY_BORDER_COLOR}`,
+  },
+});
+
+const CardSection = ({ children, ...rest }: CardSectionProps) => (
+  <CardSectionTag { ...rest } tagName="div">
+    { children }
+  </CardSectionTag>
+);
+
+CardSection.defaultProps = {
+  padding: 'md',
+};
+
+export { cardSectionTheme, CardSection };

src/atoms/Card/index.js

@@ -3,18 +3,21 @@
 import { CardPlate } from './CardPlate';
 import { CardHeader, cardHeaderTheme } from './CardHeader';
 import { CardBody, cardBodyTheme } from './CardBody';
+import { CardSection, cardSectionTheme } from './CardSection';
 import { CardFooter, cardFooterTheme } from './CardFooter';
 
 const Card = {
   Plate: CardPlate,
   Header: CardHeader,
   Body: CardBody,
+  Section: CardSection,
   Footer: CardFooter,
 };
 
 const theme = {
   ...cardHeaderTheme,
   ...cardBodyTheme,
+  ...cardSectionTheme,
   ...cardFooterTheme,
 };
 

storybook/__tests__/__snapshots__/storyshots.test.js.snap

@@ -1885,11 +1885,11 @@ exports[`Storyshots ATOMS/Card with custom offsets 1`] = `
 `;
 
 exports[`Storyshots ATOMS/Card with scrollable body 1`] = `
-.emotion-6 {
+.emotion-8 {
   margin: 2rem;
 }
 
-.emotion-4 {
+.emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1922,57 +1922,95 @@ exports[`Storyshots ATOMS/Card with scrollable body 1`] = `
   padding: 2rem;
 }
 
-.emotion-3 {
+.emotion-5 {
   border-top: 1px solid #d0d7dd;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
   padding: 2rem;
 }
 
-.emotion-5 {
+.emotion-1 {
+  padding: 2rem;
+}
+
+.emotion-1:not(:last-child) {
+  border-bottom: 1px solid #d0d7dd;
+}
+
+.emotion-7 {
   height: 300px;
   max-height: 300px;
 }
 
-.emotion-5 > * {
+.emotion-7 > * {
   max-height: 100%;
 }
 
-.emotion-2 {
+.emotion-4 {
   overflow: auto;
-  padding: 2rem;
-}
-
-.emotion-1 {
-  height: 600px;
+  padding: 0px;
 }
 
 <div
-  className="emotion-6"
+  className="emotion-8"
 >
   <div
-    className="emotion-5"
+    className="emotion-7"
   >
     <div
-      className="emotion-4"
+      className="emotion-6"
     >
       <div
         className="emotion-0"
       >
         Header
       </div>
       <div
-        className="emotion-2"
+        className="emotion-4"
       >
         <div
           className="emotion-1"
         >
-          Body
+          Section
+          <br />
+          <br />
+          <br />
+          <br />
+          <br />
+          <br />
+          <br />
+          <br />
+        </div>
+        <div
+          className="emotion-1"
+        >
+          Section
+          <br />
+          <br />
+          <br />
+          <br />
+          <br />
+          <br />
+          <br />
+          <br />
+        </div>
+        <div
+          className="emotion-1"
+        >
+          Section
+          <br />
+          <br />
+          <br />
+          <br />
+          <br />
+          <br />
+          <br />
+          <br />
         </div>
       </div>
       <div
-        className="emotion-3"
+        className="emotion-5"
       >
         Footer 
       </div>
@@ -2104,6 +2142,115 @@ exports[`Storyshots ATOMS/Card without header 1`] = `
 </div>
 `;
 
+exports[`Storyshots ATOMS/Card without multiple sections 1`] = `
+.emotion-7 {
+  margin: 2rem;
+}
+
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  background: #FFFFFF;
+  color: #000000;
+  box-shadow: 0 1px 3px 0 rgba(50,50,93,.14),0 4px 6px 0 rgba(112,157,199,.08);
+  position: relative;
+  padding: 0px;
+  border-radius: .5rem;
+}
+
+.emotion-0 {
+  border-bottom: 1px solid #d0d7dd;
+  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;
+  padding: 2rem;
+}
+
+.emotion-5 {
+  border-top: 1px solid #d0d7dd;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  padding: 2rem;
+}
+
+.emotion-4 {
+  padding: 0px;
+}
+
+.emotion-1 {
+  padding: 2rem;
+}
+
+.emotion-1:not(:last-child) {
+  border-bottom: 1px solid #d0d7dd;
+}
+
+<div
+  className="emotion-7"
+>
+  <div
+    className="emotion-6"
+  >
+    <div
+      className="emotion-0"
+    >
+      Header
+    </div>
+    <div
+      className="emotion-4"
+    >
+      <div
+        className="emotion-1"
+      >
+        Section
+        <br />
+        <br />
+        <br />
+        <br />
+      </div>
+      <div
+        className="emotion-1"
+      >
+        Section
+        <br />
+        <br />
+        <br />
+        <br />
+      </div>
+      <div
+        className="emotion-1"
+      >
+        Section
+        <br />
+        <br />
+        <br />
+        <br />
+      </div>
+    </div>
+    <div
+      className="emotion-5"
+    >
+      Footer 
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots ATOMS/DATA ENTRY/Checkbox with check 1`] = `
 .emotion-6 {
   margin: 2rem;