feat(ui): add Panel component

app/components/UI/Panel.js

@@ -0,0 +1,43 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Box, Flex } from 'rebass'
+import { Text } from 'components/UI'
+
+const PanelHeader = ({ children, ...rest }) => (
+  <Text pb={3} textAlign="center" {...rest} as="header">
+    {children}
+  </Text>
+)
+PanelHeader.propTypes = { children: PropTypes.node }
+
+const PanelBody = ({ children, ...rest }) => (
+  <Box py={3} {...rest} as="section" css={{ flex: 1 }}>
+    {children}
+  </Box>
+)
+PanelBody.propTypes = { children: PropTypes.node }
+
+const PanelFooter = ({ children, ...rest }) => (
+  <Text textAlign="center" {...rest} as="footer" pt="auto">
+    {children}
+  </Text>
+)
+PanelFooter.propTypes = { children: PropTypes.node }
+
+class Panel extends React.Component {
+  static Header = PanelHeader
+  static Body = PanelBody
+  static Footer = PanelFooter
+
+  render() {
+    const { children, ...rest } = this.props
+    return (
+      <Flex {...rest} as="article" flexDirection="column" css={{ height: '100%' }} {...rest}>
+        {children}
+      </Flex>
+    )
+  }
+}
+
+export default Panel
+export { PanelHeader, PanelBody, PanelFooter }

app/components/UI/index.js

@@ -19,6 +19,7 @@ export MenuItem from './MenuItem'
 export MenuItemGroup from './MenuItemGroup'
 export Modal from './Modal'
 export Notification from './Notification'
+export Panel, { PanelHeader, PanelBody, PanelFooter } from './Panel'
 export Page from './Page'
 export QRCode from './QRCode'
 export Range from './Range'

stories/components/panel.stories.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { Panel } from 'components/UI'
+
+storiesOf('Components.Panel', module).add('Panel', () => (
+  <Panel css={{ height: '500px' }}>
+    <Panel.Header bg="lightBackground">Header here</Panel.Header>
+    <Panel.Body bg="lightestBackground">Body here</Panel.Body>
+    <Panel.Footer bg="lightBackground">Footer here</Panel.Footer>
+  </Panel>
+))

test/unit/components/UI/Panel.spec.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import { Panel } from 'components/UI'
+
+describe('component.UI.Panel', () => {
+  it('should render correctly', () => {
+    const tree = renderer
+      .create(
+        <Panel>
+          <Panel.Header>Header here</Panel.Header>
+          <Panel.Body>Body here</Panel.Body>
+          <Panel.Footer>Footer here</Panel.Footer>
+        </Panel>
+      )
+      .toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

test/unit/components/UI/__snapshots__/Panel.spec.js.snap

@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component.UI.Panel should render correctly 1`] = `
+.c2 {
+  padding-top: 16px;
+  padding-bottom: 16px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.c0 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c1 {
+  padding-bottom: 16px;
+  font-size: m;
+  color: primaryText;
+  text-align: center;
+  line-height: 1.4;
+}
+
+.c3 {
+  padding-top: auto;
+  font-size: m;
+  color: primaryText;
+  text-align: center;
+  line-height: 1.4;
+}
+
+<article
+  className="c0"
+>
+  <header
+    className="c1"
+    color="primaryText"
+    fontSize="m"
+  >
+    Header here
+  </header>
+  <section
+    className="c2"
+  >
+    Body here
+  </section>
+  <footer
+    className="c3"
+    color="primaryText"
+    fontSize="m"
+  >
+    Footer here
+  </footer>
+</article>
+`;