feat(ui): add Page/MainContent/Sidebar components

app/components/UI/MainContent.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import BackgroundDark from 'components/UI/BackgroundDark'
+
+/**
+ * @render react
+ * @name MainContent
+ * @example
+ * <MainContent>Some content</MainContent>
+ */
+const MainContent = props => (
+  <BackgroundDark as="article" width={1} p={3} css={{ height: '100%' }} {...props} />
+)
+
+export default MainContent

app/components/UI/Page.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Flex } from 'rebass'
+
+/**
+ * @render react
+ * @name Page
+ * @example
+ * <Page>Some content</Page>
+ */
+const Page = props => (
+  <Flex
+    {...props}
+    as="article"
+    alignItems="stretch"
+    width="950"
+    bg="white"
+    css={{ height: '600px', 'min-height': '700px', 'min-width': '950px' }}
+  />
+)
+
+export default Page

app/components/UI/Sidebar.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import BackgroundLightest from 'components/UI/BackgroundLightest'
+
+/**
+ * @render react
+ * @name Sidebar
+ * @example
+ * <Sidebar>Some content</Sidebar>
+ */
+const Sidebar = props => (
+  <BackgroundLightest as="aside" p={3} css={{ height: '100%' }} width={4 / 12} {...props} />
+)
+
+Sidebar.small = props => <Sidebar {...props} width={3 / 12} />
+Sidebar.medium = props => <Sidebar {...props} width={4 / 12} />
+Sidebar.large = props => <Sidebar {...props} width={5 / 12} />
+
+Sidebar.small.displayName = 'Sidebar Small'
+Sidebar.medium.displayName = 'Sidebar Medium'
+Sidebar.large.displayName = 'Sidebar Large'
+
+export default Sidebar

stories/components/page-elements.stories.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import Page from 'components/UI/Page'
+import MainContent from 'components/UI/MainContent'
+import Sidebar from 'components/UI/Sidebar'
+
+storiesOf('Components.Layouts', module)
+  .add('MainContent', () => <MainContent>Main content</MainContent>)
+  .add('Sidebar', () => <Sidebar>Sidebar</Sidebar>)
+  .add('Page', () => <Page>Page</Page>)
+  .add('Page - sidebar left', () => (
+    <Page>
+      <Sidebar.small>Sidebar left</Sidebar.small>
+      <MainContent>Main content</MainContent>
+    </Page>
+  ))
+  .add('Page - sidebar right', () => (
+    <Page>
+      <MainContent>Main content</MainContent>
+      <Sidebar.large>Sidebar right</Sidebar.large>
+    </Page>
+  ))

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

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

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

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

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

@@ -0,0 +1,25 @@
+import React from 'react'
+import Sidebar from 'components/UI/Sidebar'
+import renderer from 'react-test-renderer'
+import { configure, mount } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
+configure({ adapter: new Adapter() })
+
+describe('component.UI.Sidebar', () => {
+  it('should render correctly', () => {
+    const tree = renderer.create(<Sidebar />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  describe('Sidenbar.{small|medium|large}', () => {
+    it(`should render a sidebar of the correct size`, () => {
+      const sizes = ['small', 'medium', 'large']
+      sizes.forEach(size => {
+        const Element = Sidebar[size]
+        const wrapper = mount(<Element />)
+        expect(wrapper.find(Sidebar[size])).toHaveLength(1)
+      })
+    })
+  })
+})

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

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component.UI.MainContent should render correctly 1`] = `
+.c0 {
+  padding: 16px;
+  width: 100%;
+  color: white;
+  background-color: darkestBackground;
+  height: 100%;
+}
+
+<article
+  className="c0"
+  color="white"
+  width={1}
+/>
+`;

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

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component.UI.Page should render correctly 1`] = `
+.c0 {
+  width: 950;
+  background-color: white;
+  height: 600px;
+  min-height: 700px;
+  min-width: 950px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+<article
+  className="c0"
+  width="950"
+/>
+`;

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

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component.UI.Sidebar should render correctly 1`] = `
+.c0 {
+  padding: 16px;
+  width: 33.33333333333333%;
+  color: white;
+  background-color: lightestBackground;
+  height: 100%;
+}
+
+<aside
+  className="c0"
+  color="white"
+  width={0.3333333333333333}
+/>
+`;