Add CardBody Component

Author: rbrtsmith

src/components/Card/Body.js

@@ -0,0 +1,23 @@
+import { createElement as E } from 'react'
+import T from 'prop-types'
+
+import { classNames } from '../../utils/'
+import { NAMESPACE, BLOCK_TAGS } from '../../constants'
+
+const CardBody = ({ tag, className, children, ...rest }) =>
+  E(
+    tag || 'div',
+    {
+      className: classNames(`${NAMESPACE}c-card__body`, className),
+      ...rest
+    },
+    children
+  )
+
+CardBody.propTypes = {
+  tag: T.oneOf(BLOCK_TAGS),
+  className: T.string,
+  children: T.node
+}
+
+export default CardBody

src/components/Card/Wrapper.js

@@ -0,0 +1,23 @@
+import { createElement as E } from 'react'
+import T from 'prop-types'
+
+import { classNames } from '../../utils/'
+import { NAMESPACE, BLOCK_TAGS } from '../../constants'
+
+const CardWrapper = ({ tag, className, children, ...rest }) =>
+  E(
+    tag || 'div',
+    {
+      className: classNames(`${NAMESPACE}c-card`, className),
+      ...rest
+    },
+    children
+  )
+
+CardWrapper.propTypes = {
+  tag: T.oneOf(BLOCK_TAGS),
+  className: T.string,
+  children: T.node
+}
+
+export default CardWrapper

src/components/Card/__tests__/Body.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+
+import { NAMESPACE } from '../../../constants'
+import { Card } from '../'
+
+describe('<Card.Body />', () => {
+  it('passes in an optional className override', () => {
+    const $ = shallow(<Card.Body className="something else" />)
+    expect($.hasClass(`${NAMESPACE}c-card__body`)).toBe(true)
+    expect($.hasClass('something else')).toBe(true)
+  })
+
+  it('renders a defined tag type', () => {
+    const $ = shallow(<Card.Body tag="article" />)
+    expect($.type()).toBe('article')
+  })
+
+  it('renders a div by default', () => {
+    const $ = shallow(<Card.Body />)
+    expect($.type()).toBe('div')
+  })
+
+  it('renders with attributes', () => {
+    const $ = shallow(
+      <Card.Body style={{ position: 'relative' }} ariaHidden />
+    )
+    expect($.prop('style')).toEqual({
+      position: 'relative'
+    })
+    expect($.prop('ariaHidden')).toBe(true)
+  })
+
+  it('renders children', () => {
+    const $ = shallow(<Card.Body>test child</Card.Body>)
+    expect($.contains('test child')).toBe(true)
+  })
+})

src/components/Card/__tests__/index.jsx src/components/Card/__tests__/Wrapper.jsxsrc/components/Card/__tests__/index.jsx renamed to src/components/Card/__tests__/Wrapper.jsx

@@ -4,28 +4,26 @@ import { shallow } from 'enzyme'
 import { NAMESPACE } from '../../../constants'
 import { Card } from '../'
 
-describe('<Card />', () => {
+describe('<Card.Wrapper />', () => {
   it('passes in an optional className override', () => {
-    const $ = shallow(<Card className="something else" />)
+    const $ = shallow(<Card.Wrapper className="something else" />)
     expect($.hasClass(`${NAMESPACE}c-card`)).toBe(true)
     expect($.hasClass('something else')).toBe(true)
   })
 
   it('renders a defined tag type', () => {
-    const $ = shallow(<Card tag="article">_</Card>)
+    const $ = shallow(<Card.Wrapper tag="article" />)
     expect($.type()).toBe('article')
   })
 
   it('renders a div by default', () => {
-    const $ = shallow(<Card>-</Card>)
+    const $ = shallow(<Card.Wrapper />)
     expect($.type()).toBe('div')
   })
 
   it('renders with attributes', () => {
     const $ = shallow(
-      <Card style={{ position: 'relative' }} ariaHidden>
-        _
-      </Card>
+      <Card.Wrapper style={{ position: 'relative' }} ariaHidden />
     )
     expect($.prop('style')).toEqual({
       position: 'relative'
@@ -34,7 +32,7 @@ describe('<Card />', () => {
   })
 
   it('renders children', () => {
-    const $ = shallow(<Card>test child</Card>)
+    const $ = shallow(<Card.Wrapper>test child</Card.Wrapper>)
     expect($.contains('test child')).toBe(true)
   })
 })

src/components/Card/index.js

@@ -1,23 +1,9 @@
-import { createElement as E } from 'react'
-import T from 'prop-types'
+import Wrapper from './Wrapper'
+import Body from './Body'
 
-import { classNames } from '../../utils/'
-import { NAMESPACE, BLOCK_TAGS } from '../../constants'
-
-const Card = ({ tag, className, children, ...rest }) =>
-  E(
-    tag || 'div',
-    {
-      className: classNames(`${NAMESPACE}c-card`, className),
-      ...rest
-    },
-    children
-  )
-
-Card.propTypes = {
-  tag: T.oneOf(BLOCK_TAGS),
-  className: T.string,
-  children: T.node
+const Card = {
+  Wrapper,
+  Body
 }
 
 export { Card }

src/components/Toast/Wrapper.js

@@ -45,6 +45,7 @@ class ToastWrapper extends Component {
     const { toastItems } = this.state
     const enhancedChildren = children && React.Children.map(children, (child) => {
       if (child.type !== Item) {
+        // eslint-disable-next-line no-console
         return console.warn(`${child} is not a valid child of <Toast.Wrapper />`)
       }