feat(ui): add Background component

app/components/UI/BackgroundDark.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Box } from 'rebass'
+
+/**
+ * @render react
+ * @name BackgroundDark
+ * @example
+ * <BackgroundDark />
+ */
+class BackgroundDark extends React.Component {
+  render() {
+    return <Box bg="darkestBackground" color="white" {...this.props} />
+  }
+}
+
+export default BackgroundDark

app/components/UI/BackgroundLight.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Box } from 'rebass'
+
+/**
+ * @render react
+ * @name BackgroundLight
+ * @example
+ * <BackgroundLight />
+ */
+class BackgroundLight extends React.Component {
+  render() {
+    return <Box bg="lightBackground" color="white" {...this.props} />
+  }
+}
+
+export default BackgroundLight

app/components/UI/BackgroundLightest.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Box } from 'rebass'
+
+/**
+ * @render react
+ * @name BackgroundLightest
+ * @example
+ * <BackgroundLightest />
+ */
+class BackgroundLightest extends React.Component {
+  render() {
+    return <Box bg="lightestBackground" color="white" {...this.props} />
+  }
+}
+
+export default BackgroundLightest

stories/components/background.stories.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import BackgroundDark from 'components/UI/BackgroundDark'
+import BackgroundLight from 'components/UI/BackgroundLight'
+import BackgroundLightest from 'components/UI/BackgroundLightest'
+
+storiesOf('Components.Background', module)
+  .add('dark', () => (
+    <BackgroundDark
+      css={{
+        height: '50vh'
+      }}
+    />
+  ))
+  .add('light', () => (
+    <BackgroundLight
+      css={{
+        height: '50vh'
+      }}
+    />
+  ))
+  .add('lightest', () => (
+    <BackgroundLightest
+      css={{
+        height: '50vh'
+      }}
+    />
+  ))

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

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

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

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

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

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

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

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component.UI.BackgroundDark should render correctly 1`] = `
+.c0 {
+  color: white;
+  background-color: darkestBackground;
+}
+
+<div
+  className="c0"
+  color="white"
+/>
+`;

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

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component.UI.BackgroundLight should render correctly 1`] = `
+.c0 {
+  color: white;
+  background-color: lightBackground;
+}
+
+<div
+  className="c0"
+  color="white"
+/>
+`;

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

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component.UI.BackgroundLightest should render correctly 1`] = `
+.c0 {
+  color: white;
+  background-color: lightestBackground;
+}
+
+<div
+  className="c0"
+  color="white"
+/>
+`;