Merge branch 'redux' into universal-redux

Author: diegohaz

package.json

@@ -87,7 +87,7 @@
     "redux-saga": "^0.14.0",
     "redux-thunk": "^2.1.0",
     "serialize-javascript": "^1.3.0",
-    "styled-components": "^1.0.7",
+    "styled-components": "1.1.1",
     "url-loader": "^0.5.7",
     "validator": "^6.1.0",
     "webpack": "^1.13.2",

src/components/App.js

@@ -1,7 +1,9 @@
-import React, { Component, PropTypes } from 'react'
-import { injectGlobal } from 'styled-components'
+import React, { PropTypes, Component } from 'react'
+import { injectGlobal, ThemeProvider } from 'styled-components'
 import Helmet from 'react-helmet'
 
+import theme from './theme'
+
 injectGlobal`
   body {
     margin: 0;
@@ -31,7 +33,7 @@ class App extends Component {
           link={[
             { rel: 'icon', href: 'https://diegohaz.github.io/arc/icon.png' }
           ]} />
-        {children}
+        <ThemeProvider theme={theme}>{children}</ThemeProvider>
       </div>
     )
   }

src/components/atoms/Atom/index.js

@@ -0,0 +1,34 @@
+import { PropTypes } from 'react'
+import styled from 'styled-components'
+
+export const fontFamily = ({ theme }) => theme.fonts.primary
+
+export const color = ({ theme, reverse, color }) =>
+  theme[reverse ? 'reverseColors' : 'colors'][color][color === 'grayscale' ? 0 : 1]
+
+const Atom = styled.span`
+  font-family: ${fontFamily};
+  color: ${color};
+`
+
+Atom.propTypes = {
+  color: PropTypes.string,
+  reverse: PropTypes.bool
+}
+
+Atom.defaultProps = {
+  color: 'grayscale',
+  theme: {
+    fonts: {
+      primary: 'sans-serif'
+    },
+    colors: {
+      grayscale: { 0: '#222' }
+    },
+    reverseColors: {
+      grayscale: { 0: '#fff' }
+    }
+  }
+}
+
+export default Atom

src/components/atoms/Atom/index.test.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import Atom, * as styles from '.'
+
+const wrap = (props = {}) => shallow(<Atom {...props} />)
+
+it('renders children when passed in', () => {
+  const wrapper = wrap({ children: 'test' })
+  expect(wrapper.contains('test')).toBe(true)
+})
+
+it('renders props when passed in', () => {
+  const wrapper = wrap({ id: 'foo' })
+  expect(wrapper.find({ id: 'foo' })).toHaveLength(1)
+})
+
+describe('styles', () => {
+  const theme = {
+    fonts: {
+      primary: 'sans-serif'
+    },
+    colors: {
+      grayscale: { 0: '#222' },
+      primary: { 1: 'red' }
+    },
+    reverseColors: {
+      grayscale: { 0: '#fff' },
+      primary: { 1: 'blue' }
+    }
+  }
+
+  test('fontFamily', () => {
+    expect(styles.fontFamily({ theme })).toBe(theme.fonts.primary)
+  })
+
+  test('color', () => {
+    const props = {
+      color: 'grayscale',
+      reverse: false,
+      theme
+    }
+    expect(styles.color(props)).toBe(theme.colors.grayscale[0])
+    expect(styles.color({ ...props, reverse: true })).toBe(theme.reverseColors.grayscale[0])
+    expect(styles.color({ ...props, color: 'primary' })).toBe(theme.colors.primary[1])
+  })
+})

src/components/atoms/Badge/index.js

@@ -1,24 +1,44 @@
 import { PropTypes } from 'react'
 import styled from 'styled-components'
 
-import { colors, fonts } from 'components/globals'
+export const fontFamily = ({ theme }) => theme.fonts.primary
+
+export const color = ({ reverse, theme }) =>
+  reverse ? theme.colors.grayscale[0] : theme.reverseColors.grayscale[0]
+
+export const backgroundColor = ({ reverse, theme, color }) =>
+  theme[reverse ? 'reverseColors' : 'colors'][color][1]
 
 const Badge = styled.span`
-  font-family: ${fonts.primary};
+  font-family: ${fontFamily};
   font-size: 0.75rem;
   line-height: 1.5em;
   padding: 0 0.3em;
-  color: #fff;
-  background-color: ${(props) => colors[props.kind][1]};
+  color: ${color};
+  background-color: ${backgroundColor};
   border-radius: 0.16667em;
 `
 
 Badge.propTypes = {
-  kind: PropTypes.oneOf(Object.keys(colors))
+  color: PropTypes.string,
+  reverse: PropTypes.bool
 }
 
 Badge.defaultProps = {
-  kind: 'primary'
+  color: 'primary',
+  theme: {
+    fonts: {
+      primary: 'sans-serif'
+    },
+    colors: {
+      grayscale: { 0: '#222', 1: '#555' },
+      primary: { 1: '#2196f3' }
+    },
+    reverseColors: {
+      grayscale: { 0: '#fff', 1: '#bbb' },
+      primary: { 1: '#71bcf7' }
+    }
+  }
 }
 
 export default Badge

src/components/atoms/Badge/index.test.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import Badge from '.'
+import Badge, * as styles from '.'
 
 const wrap = (props = {}) => shallow(<Badge {...props} />)
 
@@ -13,3 +13,38 @@ it('renders props when passed in', () => {
   const wrapper = wrap({ id: 'foo' })
   expect(wrapper.find({ id: 'foo' })).toHaveLength(1)
 })
+
+describe('styles', () => {
+  const theme = {
+    fonts: {
+      primary: 'sans-serif'
+    },
+    colors: {
+      grayscale: { 0: '#222', 1: '#555' },
+      primary: { 1: '#2196f3' }
+    },
+    reverseColors: {
+      grayscale: { 0: '#fff', 1: '#bbb' },
+      primary: { 1: '#71bcf7' }
+    }
+  }
+
+  test('fontFamily', () => {
+    expect(styles.fontFamily({ theme })).toBe(theme.fonts.primary)
+  })
+
+  test('color', () => {
+    expect(styles.color({ theme, reverse: false })).toBe(theme.reverseColors.grayscale[0])
+    expect(styles.color({ theme, reverse: true })).toBe(theme.colors.grayscale[0])
+  })
+
+  test('backgroundColor', () => {
+    const props = {
+      color: 'primary',
+      reverse: false,
+      theme
+    }
+    expect(styles.backgroundColor(props)).toBe(theme.colors.primary[1])
+    expect(styles.backgroundColor({ ...props, reverse: true })).toBe(theme.reverseColors.primary[1])
+  })
+})

src/components/atoms/Block/index.js

@@ -0,0 +1,38 @@
+import { PropTypes } from 'react'
+import styled from 'styled-components'
+
+export const fontFamily = ({ theme }) => theme.fonts.primary
+
+export const backgroundColor = ({ theme, reverse, color, transparent }) =>
+  transparent ? 'transparent' : theme[reverse ? 'colors' : 'reverseColors'][color][0]
+
+export const color = ({ theme, reverse, color }) =>
+  theme[reverse ? 'reverseColors' : 'colors'][color][color === 'grayscale' ? 0 : 1]
+
+const Block = styled.div`
+  font-family: ${fontFamily};
+  background-color: ${backgroundColor};
+  color: ${color};
+`
+
+Block.propTypes = {
+  color: PropTypes.string,
+  reverse: PropTypes.bool
+}
+
+Block.defaultProps = {
+  color: 'grayscale',
+  theme: {
+    fonts: {
+      primary: 'sans-serif'
+    },
+    colors: {
+      grayscale: { 0: '#222' }
+    },
+    reverseColors: {
+      grayscale: { 0: '#fff' }
+    }
+  }
+}
+
+export default Block

src/components/atoms/Block/index.test.js

@@ -0,0 +1,59 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import Block, * as styles from '.'
+
+const wrap = (props = {}) => shallow(<Block {...props} />)
+
+it('renders children when passed in', () => {
+  const wrapper = wrap({ children: 'test' })
+  expect(wrapper.contains('test')).toBe(true)
+})
+
+it('renders props when passed in', () => {
+  const wrapper = wrap({ id: 'foo' })
+  expect(wrapper.find({ id: 'foo' })).toHaveLength(1)
+})
+
+describe('styles', () => {
+  const theme = {
+    fonts: {
+      primary: 'sans-serif'
+    },
+    colors: {
+      grayscale: { 0: '#222' },
+      primary: { 0: 'darkred', 1: 'red' }
+    },
+    reverseColors: {
+      grayscale: { 0: '#fff' },
+      primary: { 0: 'lightblue', 1: 'blue' }
+    }
+  }
+
+  test('fontFamily', () => {
+    expect(styles.fontFamily({ theme })).toBe(theme.fonts.primary)
+  })
+
+  test('backgroundColor', () => {
+    const props = {
+      color: 'grayscale',
+      reverse: false,
+      theme
+    }
+    expect(styles.backgroundColor(props)).toBe(theme.reverseColors.grayscale[0])
+    expect(styles.backgroundColor({ ...props, transparent: true })).toBe('transparent')
+    expect(styles.backgroundColor({ ...props, reverse: true })).toBe(theme.colors.grayscale[0])
+    expect(styles.backgroundColor({ ...props, color: 'primary' }))
+      .toBe(theme.reverseColors.primary[0])
+  })
+
+  test('color', () => {
+    const props = {
+      color: 'grayscale',
+      reverse: false,
+      theme
+    }
+    expect(styles.color(props)).toBe(theme.colors.grayscale[0])
+    expect(styles.color({ ...props, reverse: true })).toBe(theme.reverseColors.grayscale[0])
+    expect(styles.color({ ...props, color: 'primary' })).toBe(theme.colors.primary[1])
+  })
+})