feat(card): add card and cardbody

add new components, styles and tests

__tests__/Card.test.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import Card from '../src/Card'
+
+describe('Card', () => {
+  it('should render without crashing', () => {
+    mount(<Card />)
+  })
+
+  it('should render with default styles', () => {
+    const expected = 'bg-white dark:bg-gray-800'
+    const wrapper = mount(<Card />)
+
+    expect(wrapper.find(Card).getDOMNode().getAttribute('class')).toContain(expected)
+  })
+
+  it('should render without default styles', () => {
+    const expected = 'bg-white dark:bg-gray-800'
+    const wrapper = mount(<Card colored />)
+
+    expect(wrapper.find(Card).getDOMNode().getAttribute('class')).not.toContain(expected)
+  })
+
+  it('should add classes to base styles', () => {
+    const expected = 'min-w-0 rounded-lg shadow-xs bg-red-400'
+    const wrapper = mount(<Card className="bg-red-400" colored />)
+
+    expect(wrapper.find(Card).getDOMNode().getAttribute('class')).toBe(expected)
+  })
+})

__tests__/CardBody.test.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import CardBody from '../src/CardBody'
+
+describe('CardBody', () => {
+  it('should render without crashing', () => {
+    mount(<CardBody />)
+  })
+
+  it('should render with default styles', () => {
+    const expected = 'p-4'
+    const wrapper = mount(<CardBody />)
+
+    expect(wrapper.find(CardBody).getDOMNode().getAttribute('class')).toContain(expected)
+  })
+})

src/Card.js

@@ -0,0 +1,28 @@
+import React, { useContext } from 'react'
+import classNames from 'classnames'
+import PropTypes from 'prop-types'
+import { ThemeContext } from './context/ThemeContext'
+import defaultTheme from './themes/default'
+
+function Card({ className, children, colored }) {
+  const { card } = useContext(ThemeContext) || defaultTheme
+
+  const baseStyle = card.base
+  const uncoloredStyle = card.default
+
+  const cls = classNames(baseStyle, !colored && uncoloredStyle, className)
+
+  return <div className={cls}>{children}</div>
+}
+
+Card.propTypes = {
+  children: PropTypes.element,
+  colored: PropTypes.bool,
+  className: PropTypes.string,
+}
+
+Card.defaultProps = {
+  colored: false,
+}
+
+export default Card

src/CardBody.js

@@ -0,0 +1,22 @@
+import React, { useContext } from 'react'
+import classNames from 'classnames'
+import PropTypes from 'prop-types'
+import { ThemeContext } from './context/ThemeContext'
+import defaultTheme from './themes/default'
+
+function CardBody({ className, children }) {
+  const { cardBody } = useContext(ThemeContext) || defaultTheme
+
+  const baseStyle = cardBody.base
+
+  const cls = classNames(baseStyle, className)
+
+  return <div className={cls}>{children}</div>
+}
+
+CardBody.propTypes = {
+  children: PropTypes.element,
+  className: PropTypes.string,
+}
+
+export default CardBody

src/themes/default.js

@@ -1,4 +1,12 @@
 export default {
+  // Card
+  card: {
+    base: 'min-w-0 rounded-lg shadow-xs',
+    default: 'bg-white dark:bg-gray-800',
+  },
+  cardBody: {
+    base: 'p-4',
+  },
   // Button
   button: {
     base: