Added site wrap component (#36)

* Added site wrap component

* Apply baseline text styles

Author: emortlock

src/components/siteWrap/SiteWrap.jsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { BaseComponent } from '../tailwind'
+import { Footer } from '../footer'
+import { withTheme } from '../theme'
+
+const Layout = ({ is, theme, children, ...rest }) => {
+  let footer
+
+  React.Children.forEach(children, child => {
+    const { type } = child
+    if (type && (type === Footer || type.displayName === Footer.displayName)) {
+      footer = child
+    }
+  })
+
+  return (
+    <BaseComponent
+      is={is}
+      flex={[true, 'col']}
+      minH="screen"
+      leading="normal"
+      font={theme.text.family.body}
+      text={[theme.text.size.body[1], theme.textColors.body]}
+      {...rest}
+    >
+      <div className="flex-auto	flex-no-shrink">
+        {React.Children.map(children, child => {
+          if (child === footer) return false
+          return child
+        })}
+      </div>
+      <div className="flex-auto	flex-no-shrink flex-no-grow">{footer}</div>
+    </BaseComponent>
+  )
+}
+
+Layout.propTypes = {
+  is: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  theme: PropTypes.shape({}).isRequired,
+  children: PropTypes.node,
+}
+
+Layout.defaultProps = {
+  is: 'div',
+  children: undefined,
+}
+
+export { Layout as component }
+export default withTheme(Layout)

src/components/siteWrap/__tests__/SiteWrap.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+
+import { defaultTheme } from '../../theme'
+import { component as SiteWrap } from '../SiteWrap'
+import { Header } from '../../header'
+import { Footer } from '../../footer'
+
+const setup = (testProps = {}) => {
+  const props = Object.assign({ theme: defaultTheme }, testProps)
+
+  const wrapper = shallow(
+    <SiteWrap {...props}>
+      <Header>Header</Header>
+      <p>Body</p>
+      <Footer>Footer</Footer>
+    </SiteWrap>,
+  )
+
+  return {
+    props,
+    wrapper,
+  }
+}
+
+describe('SiteWrap', () => {
+  it('renders matching snapshot', () => {
+    const { wrapper } = setup()
+
+    expect(wrapper).toMatchSnapshot()
+  })
+})

src/components/siteWrap/__tests__/__snapshots__/SiteWrap.jsx.snap

@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SiteWrap renders matching snapshot 1`] = `
+<BaseComponent
+  flex={
+    Array [
+      true,
+      "col",
+    ]
+  }
+  font="sans"
+  is="div"
+  leading="normal"
+  minH="screen"
+  text={
+    Array [
+      "base",
+      "grey-darkest",
+    ]
+  }
+>
+  <div
+    className="flex-auto	flex-no-shrink"
+  >
+    <WithTheme(Header)
+      key=".0"
+    >
+      Header
+    </WithTheme(Header)>
+    <p
+      key=".1"
+    >
+      Body
+    </p>
+  </div>
+  <div
+    className="flex-auto	flex-no-shrink flex-no-grow"
+  >
+    <WithTheme(Footer)>
+      Footer
+    </WithTheme(Footer)>
+  </div>
+</BaseComponent>
+`;

src/components/siteWrap/index.js

@@ -0,0 +1 @@
+export { default as SiteWrap } from './SiteWrap'

src/components/siteWrap/readme.md

@@ -0,0 +1,8 @@
+By default will fill the full screen size regardless of child content lenght to create a sticky footer. Also applies baseline body text styling.
+
+```jsx
+<SiteWrap minH={0} h={64}>
+  <p>Some short page content</p>
+  <Footer>Footer pinned to the bottom of the screen</Footer>
+</SiteWrap>
+```

src/components/typography/Text.jsx

@@ -26,7 +26,7 @@ const Text = ({
       font={[theme.text.family.body, bold && 'bold']}
       text={[
         theme.text.size.body[(lead ? theme.text.size.body.length : size) - 1],
-        !brand && `text-${theme.textColors.body}`,
+        !brand && theme.textColors.body,
         ...getAsArray(text),
       ]}
       m={isParagraph ? { b: theme.spacing.md } : undefined}

src/components/typography/__tests__/__snapshots__/Text.jsx.snap

@@ -18,7 +18,7 @@ exports[`Text renders matching snapshot 1`] = `
   text={
     Array [
       "base",
-      "text-grey-darkest",
+      "grey-darkest",
     ]
   }
 >

src/index.js

@@ -8,6 +8,7 @@ export * from './components/grid'
 export * from './components/header'
 export * from './components/list'
 export * from './components/main'
+export * from './components/siteWrap'
 export * from './components/typography'
 
 export * from './components/tailwind'