From 09d7e2f474678805682979d1f0069d62a324ba31 Mon Sep 17 00:00:00 2001
From: Adam Kudrna <adam@adamkudrna.cz>
Date: Fri, 30 Oct 2020 23:52:05 +0100
Subject: [PATCH] Introduce `Card` use case with `ScrollView` (#178)

---
 src/lib/components/ui/Card/Card.jsx           |  3 +-
 src/lib/components/ui/Card/CardBody.jsx       |  2 +-
 src/lib/components/ui/Card/CardFooter.jsx     |  2 +-
 src/lib/components/ui/Card/README.mdx         | 67 +++++++++++++++----
 .../ui/Card/__tests__/CardBody.test.jsx       |  2 +-
 .../ui/Card/__tests__/CardFooter.test.jsx     |  2 +-
 6 files changed, 59 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/ui/Card/Card.jsx b/src/lib/components/ui/Card/Card.jsx
index e853a7122..ea602769b 100644
--- a/src/lib/components/ui/Card/Card.jsx
+++ b/src/lib/components/ui/Card/Card.jsx
@@ -80,7 +80,8 @@ Card.defaultProps = {
 
 Card.propTypes = {
   /**
-   * Slot for individual Card elements that build up the inner layout: CardBody and CardFooter.
+   * Slot for individual Card elements that build up the inner layout: CardBody, CardFooter, or
+   * ScrollView.
    */
   children: PropTypes.node.isRequired,
   /**
diff --git a/src/lib/components/ui/Card/CardBody.jsx b/src/lib/components/ui/Card/CardBody.jsx
index 27e3480bf..80a43d3b6 100644
--- a/src/lib/components/ui/Card/CardBody.jsx
+++ b/src/lib/components/ui/Card/CardBody.jsx
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import styles from './Card.scss';
 
-const CardBody = (props) => {
+export const CardBody = (props) => {
   const {
     children,
   } = props;
diff --git a/src/lib/components/ui/Card/CardFooter.jsx b/src/lib/components/ui/Card/CardFooter.jsx
index 2b229a39b..e18f8f5b5 100644
--- a/src/lib/components/ui/Card/CardFooter.jsx
+++ b/src/lib/components/ui/Card/CardFooter.jsx
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import styles from './Card.scss';
 
-const CardFooter = (props) => {
+export const CardFooter = (props) => {
   const {
     children,
   } = props;
diff --git a/src/lib/components/ui/Card/README.mdx b/src/lib/components/ui/Card/README.mdx
index 791d61e18..3c71090ca 100644
--- a/src/lib/components/ui/Card/README.mdx
+++ b/src/lib/components/ui/Card/README.mdx
@@ -11,9 +11,10 @@ import {
   Props,
 } from 'docz'
 import { Button } from '../Button/Button'
+import { ScrollView } from '../ScrollView/ScrollView'
 import { Card } from './Card'
-import CardBody from './CardBody'
-import CardFooter from './CardFooter'
+import { CardBody } from './CardBody'
+import { CardFooter } from './CardFooter'
 
 Cards contain content and actions about a single subject.
 
@@ -45,15 +46,15 @@ See [API](#api) for all available options.
   [customize](/customize/theming) the default appearance to make it stand
   out on white surfaces.
 
-- The [CardBody](#cardbody) component is the only required element in a card.
-  [CardFooter](#cardfooter) is optional.
+- Use options [CardBody](#cardbody) and [CardFooter](#cardfooter) components to
+  provide your content with expected spacing.
 
 - Use **medium or low-emphasis buttons** when there are more cards, eg. in a
   grid. It will help you keep the UI clean and easy to scan.
 
 ## Card Composition
 
-Aside from the mandatory [CardBody](#cardbody) element, you can add a
+Aside from the [CardBody](#cardbody) element, you can add a
 [CardFooter](#cardfooter) to better separate your card's actions from the rest
 of the content.
 
@@ -68,7 +69,7 @@ And use them:
 <Playground>
   <Card>
     <CardBody>
-      Hello! I&apos;m card with a footer.
+      Hello! I&apos;m card with footer.
     </CardBody>
     <CardFooter>
       <Button label="Read more" priority="outline" />
@@ -86,7 +87,7 @@ Add optional shadow to lift the card above surface.
 <Playground>
   <Card raised>
     <CardBody>
-      Hello! I&apos;m a raised card with a footer.
+      Hello! I&apos;m raised card with footer.
     </CardBody>
     <CardFooter>
       <Button label="Read more" priority="outline" />
@@ -101,7 +102,7 @@ Use a border when you need to visually separate the card from its background.
 <Playground>
   <Card variant="bordered">
     <CardBody>
-      Hello! I&apos;m card with a border and a footer.
+      Hello! I&apos;m card with border and footer.
     </CardBody>
     <CardFooter>
       <Button label="Read more" priority="outline" />
@@ -109,7 +110,7 @@ Use a border when you need to visually separate the card from its background.
   </Card>
   <Card variant="bordered" raised>
     <CardBody>
-      Hello! I&apos;m a raised card with a border and a footer.
+      Hello! I&apos;m raised card with border and footer.
     </CardBody>
     <CardFooter>
       <Button label="Read more" priority="outline" />
@@ -125,7 +126,7 @@ card should be also smaller to keep the card contained and easy to scan.
 <Playground>
   <Card dense raised>
     <CardBody>
-      <small>Hello! I&apos;m a dense card. Everything is smaller here.</small>
+      <small>Hello! I&apos;m dense card. Everything is smaller here.</small>
     </CardBody>
     <CardFooter>
       <Button label="Read more" priority="outline" size="small" />
@@ -133,6 +134,44 @@ card should be also smaller to keep the card contained and easy to scan.
   </Card>
 </Playground>
 
+## Scrollable Card
+
+Combine Card with [ScrollView](/components/ui/scroll-view) to enable scrolling
+for card content.
+
+<Playground>
+  <div
+    style={{
+      display: 'flex',
+      height: '200px',
+    }}
+  >
+    <Card raised>
+      <ScrollView>
+        <CardBody>
+          Hello! I&apos;m scrollable card.
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
+          ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
+          dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+          ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
+          quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
+          arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
+          Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras
+          dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
+          tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
+          enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
+          Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean
+          imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper
+          ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus
+          eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing
+          sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar,
+          hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
+        </CardBody>
+      </ScrollView>
+    </Card>
+  </div>
+</Playground>
+
 ## Card Types
 
 All [UI colors](/foundation/colors#ui-colors) (success, warning, error, help,
@@ -194,8 +233,8 @@ bordered card type is forced automatically to make sure the border is visible.
 
 ### Disabled State
 
-An entire card can appear disabled. However, you'll still need to manually
-disable its interactive elements to disallow user's interaction.
+Entire card can appear disabled. However, you'll still need to manually disable
+its interactive elements to disallow user's interaction.
 
 <Playground>
   <Card disabled>
@@ -238,8 +277,8 @@ disable its interactive elements to disallow user's interaction.
 
 ## CardBody
 
-CardBody is the only required element in a card. See
-[Card Composition](#card-composition) for all details.
+Space your content with CardBody. See [Card Composition](#card-composition) for
+all details.
 
 <Props of={CardBody} />
 
diff --git a/src/lib/components/ui/Card/__tests__/CardBody.test.jsx b/src/lib/components/ui/Card/__tests__/CardBody.test.jsx
index 19ff3a8ea..12932be2d 100644
--- a/src/lib/components/ui/Card/__tests__/CardBody.test.jsx
+++ b/src/lib/components/ui/Card/__tests__/CardBody.test.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import CardBody from '../CardBody';
+import { CardBody } from '../CardBody';
 
 describe('rendering', () => {
   it('renders correctly', () => {
diff --git a/src/lib/components/ui/Card/__tests__/CardFooter.test.jsx b/src/lib/components/ui/Card/__tests__/CardFooter.test.jsx
index 73c1ff951..6823e2039 100644
--- a/src/lib/components/ui/Card/__tests__/CardFooter.test.jsx
+++ b/src/lib/components/ui/Card/__tests__/CardFooter.test.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import CardFooter from '../CardFooter';
+import { CardFooter } from '../CardFooter';
 
 describe('rendering', () => {
   it('renders correctly', () => {