Improve component exports

* Refactor and change `CardBlock` to `Card.Block`
* Update documentation + tests for `Card.Block`
* Export `Scrollable`, `Portal`, `PortalWrapper`, and `RouteWrapper`

src/components/CardBlock/index.js → src/components/Card/Block.js

@@ -8,22 +8,22 @@ export const propTypes = {
   size: standardSizeTypes
 }
 
-const CardBlock = props => {
-  const { size, ...rest } = props
+const Block = props => {
+  const { className, children, size, ...rest } = props
 
-  const className = classNames(
+  const componentClassName = classNames(
     'c-card__block',
     size && `c-card__block--${size}`,
-    props.className
+    className
   )
 
   return (
-    <div className={className} {...rest}>
-      {props.children}
+    <div className={componentClassName} {...rest}>
+      {children}
     </div>
   )
 }
 
-CardBlock.propTypes = propTypes
+Block.propTypes = propTypes
 
-export default CardBlock
+export default Block

src/components/Card/README.md

@@ -3,16 +3,15 @@
 A Card component is used to encapsulate pieces of UI that share a common concept or action.
 
 
-## Example
+### Example
 
 ```html
 <Card>
-  Not new, Arctic Puffin!
+  You're my boy, Blue!
 </Card>
 ```
 
-
-## Props
+### Props
 
 | Prop | Type | Description |
 | --- | --- | --- |
@@ -24,3 +23,33 @@ A Card component is used to encapsulate pieces of UI that share a common concept
 | href | string | Adds an `href` to the component. Transforms it into an `<a>` tag. |
 | seamless | boolean | Removes the padding within the component. |
 | selector | string | Determines the HTML tag for the component. Default is `div`. |
+
+
+
+## Card.Block
+
+A Card.Block component is used to section content within a [`<Card>`](../Card).
+
+Note: It is highly recommended the `seamless` prop is used for the container `<Card>`. This allows for the `<Card.Block>` components to flow all the way to the inner-edges of `<Card>`.
+
+
+### Example
+
+```html
+<Card seamless>
+  <Card.Block>
+    Frank "The Tank"
+  </Card.Block>
+  <Card.Block>
+    You're my boy, Blue!
+  </Card.Block>
+</Card>
+```
+
+
+### Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| className | string | Custom class names to be added to the component. |
+| size | string | Adjusts the size of the component. Default is `md`. |

src/components/Card/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from '../../utilities/classNames'
 import { noop } from '../../utilities/other'
 import { blockSelectorTagTypes } from '../../constants/propTypes'
+import Block from './Block'
 
 export const propTypes = {
   className: PropTypes.string,
@@ -62,5 +63,6 @@ const Card = props => {
 
 Card.propTypes = propTypes
 Card.defaultProps = defaultProps
+Card.Block = Block
 
 export default Card

src/components/CardBlock/tests/CardBlock.test.js → src/components/Card/tests/Card.Block.test.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { mount, shallow } from 'enzyme'
-import CardBlock from '..'
+import CardBlock from '../Block'
 
 describe('ClassName', () => {
   test('Has default className', () => {

src/components/Modal/index.js

@@ -2,7 +2,6 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Animate from '../Animate'
 import Card from '../Card'
-import CardBlock from '../CardBlock'
 import CloseButton from '../CloseButton'
 import Overlay from '../Overlay'
 import PortalWrapper from '../PortalWrapper'
@@ -69,9 +68,9 @@ const Modal = props => {
           <Card seamless>
             {closeMarkup}
             <Scrollable fade rounded>
-              <CardBlock>
+              <Card.Block>
                 {children}
-              </CardBlock>
+              </Card.Block>
             </Scrollable>
           </Card>
         </Animate>

src/components/index.js

@@ -4,7 +4,6 @@ export { default as AvatarStack } from './AvatarStack'
 export { default as Badge } from './Badge'
 export { default as Button } from './Button'
 export { default as Card } from './Card'
-export { default as CardBlock } from './CardBlock'
 export { default as Checkbox } from './Checkbox'
 export { default as Choice } from './Choice'
 export { default as ChoiceGroup } from './ChoiceGroup'
@@ -22,8 +21,11 @@ export { default as Link } from './Link'
 export { default as LoadingDots } from './LoadingDots'
 export { default as Overlay } from './Overlay'
 export { default as Portal } from './Portal'
+export { default as PortalWrapper } from './PortalWrapper'
 export { default as ProgressBar } from './ProgressBar'
+export { default as RouteWrapper } from './RouteWrapper'
 export { default as Radio } from './Radio'
+export { default as Scrollable } from './Scrollable'
 export { default as Select } from './Select'
 export { default as Text } from './Text'
 export { default as VisuallyHidden } from './VisuallyHidden'

src/tests/index.test.js

@@ -5,7 +5,6 @@ import {
   Badge,
   Button,
   Card,
-  CardBlock,
   Checkbox,
   Choice,
   ChoiceGroup,
@@ -20,9 +19,13 @@ import {
   Link,
   LoadingDots,
   Overlay,
+  Portal,
+  PortalWrapper,
   ProgressBar,
   Radio,
+  RouteWrapper,
   Select,
+  Scrollable,
   Text,
   VisuallyHidden
 } from '..'
@@ -34,7 +37,6 @@ const components = [
   Badge,
   Button,
   Card,
-  CardBlock,
   Checkbox,
   Choice,
   ChoiceGroup,
@@ -49,8 +51,12 @@ const components = [
   Link,
   LoadingDots,
   Overlay,
+  Portal,
+  PortalWrapper,
   ProgressBar,
+  RouteWrapper,
   Radio,
+  Scrollable,
   Select,
   Text,
   VisuallyHidden

stories/Card.js

@@ -1,14 +1,14 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
-import { Card, CardBlock } from '../src/index.js'
+import { Card } from '../src/index.js'
 
 storiesOf('Card', module)
   .add('default', () => <Card>Hello</Card>)
   .add('link', () => <Card href='https://www.helpscout.net/'>Link to: https://www.helpscout.net/</Card>)
   .add('block', () => (
     <Card seamless>
-      <CardBlock>Block One</CardBlock>
-      <CardBlock>Block Two</CardBlock>
-      <CardBlock>Block Three</CardBlock>
+      <Card.Block>Block One</Card.Block>
+      <Card.Block>Block Two</Card.Block>
+      <Card.Block>Block Three</Card.Block>
     </Card>
   ))