Fix Caret theme getters

examples/component-examples/CircleOcticon.js

@@ -8,7 +8,7 @@ const CircleOcticonExample = {
   element: (
     <div className="d-flex">
       <LiveEditor
-        code={`<CircleOcticon icon={Check} size={32} bg="green" color="white" />`}
+        code={`<CircleOcticon icon={Check} size={32} bg="green.5" color="white" />`}
         scope={{CircleOcticon, Check}}
       />
     </div>

src/Caret.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import {themeGet} from 'styled-system'
+import {style} from 'styled-system'
+import {withDefaultTheme} from './system-props'
 
 const oppositeEdge = {
   top: 'Bottom',
@@ -16,14 +17,18 @@ const perpendicularEdge = {
   left: 'Top'
 }
 
-export default function Caret(props) {
-  const {bg: bgKey, borderColor: borderColorKey, borderWidth: borderWidthKey, location, size: sizeKey} = props
+const getBg = style({prop: 'bg', key: 'colors'})
+const getBorderColor = style({prop: 'borderColor', key: 'colors'})
+const getBorderWidth = style({prop: 'borderWidth', key: 'borderWidths', scale: [0, 1]})
+const getSize = style({prop: 'size', key: 'space'})
 
-  const bg = themeGet(`colors.${bgKey}`, '#fff')(props)
-  const borderColor = themeGet(`colors.${borderColorKey}`, '#000')(props)
-  const borderWidth = themeGet(`borderWidths.${borderWidthKey}`, 1)(props)
-  const size = themeGet(`space.${sizeKey}`, 8)(props)
+function Caret(props) {
+  const {bg} = getBg(props)
+  const {borderColor} = getBorderColor(props)
+  const {borderWidth} = getBorderWidth(props)
+  const {size} = getSize(props)
 
+  const {location} = props
   const [edge, align] = getEdgeAlign(location)
   const perp = perpendicularEdge[edge]
 
@@ -84,7 +89,7 @@ Caret.defaultProps = {
   borderWidth: 1,
   borderColor: 'gray.2',
   location: 'bottom',
-  size: 8
+  size: 2
 }
 
 Caret.propTypes = {
@@ -95,6 +100,8 @@ Caret.propTypes = {
   size: PropTypes.number
 }
 
+export default withDefaultTheme(Caret)
+
 function getEdgeAlign(location) {
   const [edge, align] = location.split('-')
   return [edge, align]

src/CaretBox.js

@@ -1,18 +1,12 @@
 import React from 'react'
 import Box from './Box'
 import Caret from './Caret'
-import {withSystemProps} from './system-props'
 
 function CaretBox(props) {
   // don't destructure these, just grab them
   const {bg, borderColor} = props
   const {caret, children, ...rest} = props
-  const caretProps = {
-    location: caret,
-    borderColor,
-    bg
-  }
-
+  const caretProps = {bg, borderColor, location: caret}
   return (
     <Box {...rest}>
       {children}
@@ -31,4 +25,7 @@ CaretBox.defaultProps = {
   position: 'relative'
 }
 
-export default withSystemProps(CaretBox, ['color'])
+// we can set this because it "inherits" all of Box's system props
+CaretBox.systemComponent = true
+
+export default CaretBox

src/CircleOcticon.js

@@ -1,24 +1,28 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import Octicon from '@githubprimer/octicons-react'
 import FlexContainer from './FlexContainer'
-import {withSystemProps} from './system-props'
 
 function CircleOcticon(props) {
   const {size} = props
   const {icon, ...rest} = props
   return (
     <FlexContainer {...rest} size={size} alignItems="center" justifyContent="center">
-      <Octicon icon={icon} />
+      <Octicon icon={icon} size={size} />
     </FlexContainer>
   )
 }
 
 CircleOcticon.defaultProps = {
-  size: 32
+  ...FlexContainer.defaultProps,
+  size: 32,
+  borderRadius: '50%'
 }
 
 CircleOcticon.propTypes = {
-  icon: Octicon.propTypes.icon
+  ...FlexContainer.propTypes,
+  icon: Octicon.propTypes.icon,
+  size: PropTypes.number
 }
 
-export default withSystemProps(CircleOcticon, ['space'])
+export default CircleOcticon

src/FlexContainer.js

@@ -1,9 +1,5 @@
-import {tag, withSystemProps, FLEX_CONTAINER} from './system-props'
+import system, {FLEX_CONTAINER, withDefaultTheme} from './system-props'
 
-const FlexContainer = withSystemProps(tag.div, FLEX_CONTAINER)
+const FlexContainer = system({is: 'div', display: 'flex'}, ...FLEX_CONTAINER)
 
-FlexContainer.defaultProps = {
-  display: 'flex'
-}
-
-export default FlexContainer
+export default withDefaultTheme(FlexContainer)

src/FlexItem.js

@@ -1,5 +1,5 @@
-import {tag, withSystemProps, FLEX_ITEM} from './system-props'
+import {withSystemProps, FLEX_ITEM} from './system-props'
 
-const FlexItem = withSystemProps(tag.div, FLEX_ITEM)
+const FlexItem = withSystemProps('div', FLEX_ITEM)
 
 export default FlexItem

src/__tests__/Avatar.js

@@ -4,6 +4,10 @@ import Avatar from '../Avatar'
 import {render, renderClasses} from '../utils/testing'
 
 describe('Avatar', () => {
+  it('is a system component', () => {
+    expect(Avatar.systemComponent).toEqual(true)
+  })
+
   it('renders small by default', () => {
     expect(renderClasses(<Avatar />)).toContain('avatar-small')
   })

src/__tests__/Block.js

@@ -5,6 +5,10 @@ import {render} from '../utils/testing'
 import {COMMON} from '../system-props'
 
 describe('Block', () => {
+  it('is a system component', () => {
+    expect(Block.systemComponent).toEqual(true)
+  })
+
   it('implements layout system props', () => {
     expect(Block).toImplementSystemProps(COMMON)
     // FIXME

src/__tests__/Box.js

@@ -3,6 +3,10 @@ import Box from '../Box'
 import {renderClasses} from '../utils/testing'
 
 xdescribe('Box', () => {
+  it('is a system component', () => {
+    expect(Box.systemComponent).toEqual(true)
+  })
+
   const defaultClasses = ['border', 'bg-white', 'rounded-1']
   it('renders default classes', () => {
     expect(renderClasses(<Box />)).toEqual(defaultClasses)

src/__tests__/BranchName.js

@@ -3,6 +3,10 @@ import BranchName from '../BranchName'
 import {render, rendersClass} from '../utils/testing'
 
 describe('BranchName', () => {
+  xit('is a system component', () => {
+    expect(BranchName.systemComponent).toEqual(true)
+  })
+
   it('renders an <a> by default', () => {
     expect(render(<BranchName />).type).toEqual('a')
   })

src/__tests__/Button.js

@@ -5,6 +5,10 @@ import {render, rendersClass} from '../utils/testing'
 function noop() {}
 
 describe('Button', () => {
+  xit('is a system component', () => {
+    expect(Button.systemComponent).toEqual(true)
+  })
+
   it('renders a <button>', () => {
     expect(render(<Button />)).toEqual(render(<button className="btn" type="button" />))
   })

src/__tests__/CaretBox.js

@@ -1,17 +1,21 @@
 import React from 'react'
-import {theme, CaretBox} from '..'
+import {CaretBox} from '..'
 import {render} from '../utils/testing'
 
 describe('CaretBox', () => {
+  it('is a system component', () => {
+    expect(CaretBox.systemComponent).toEqual(true)
+  })
+
   it('renders a <Caret> in <Box> with relative positioning', () => {
     expect(render(<CaretBox />)).toMatchSnapshot()
   })
 
   it('passes the "borderColor" prop to both <Box> and <Caret>', () => {
-    expect(render(<CaretBox borderColor="red.5" theme={theme} />)).toMatchSnapshot()
+    expect(render(<CaretBox borderColor="red.5" />)).toMatchSnapshot()
   })
 
   it('passes the "bg" prop to both <Box> and <Caret>', () => {
-    expect(render(<CaretBox bg="red.5" theme={theme} />)).toMatchSnapshot()
+    expect(render(<CaretBox bg="red.5" />)).toMatchSnapshot()
   })
 })

src/__tests__/CircleBadge.js

@@ -7,6 +7,10 @@ const imgOutput = <img className="CircleBadge-icon" alt="" src="primer.jpg" />
 const imgInput = <img alt="" src="primer.jpg" />
 
 describe('CircleBadge', () => {
+  xit('is a system component', () => {
+    expect(CircleBadge.systemComponent).toEqual(true)
+  })
+
   it('renders medium by default', () => {
     expect(rendersClass(<CircleBadge />, 'CircleBadge--medium')).toEqual(true)
   })

src/__tests__/CircleOcticon.js

@@ -1,33 +1,26 @@
 import React from 'react'
-import CircleOcticon from '../CircleOcticon'
-import {render, rendersClass} from '../utils/testing'
 import {Check} from '@githubprimer/octicons-react'
+import theme, {colors} from '../theme'
+import CircleOcticon from '../CircleOcticon'
+import {render} from '../utils/testing'
 
 describe('CircleOcticon', () => {
+  xit('is a system component', () => {
+    expect(CircleOcticon.systemComponent).toEqual(true)
+  })
+
   it('renders a <div> with width and height', () => {
     const result = render(<CircleOcticon icon={Check} size={10} />)
     expect(result).toHaveStyleRule('width', '10px')
     expect(result).toHaveStyleRule('height', '10px')
   })
 
-  xit('adds the "circle" class', () => {
-    expect(rendersClass(<CircleOcticon icon={Check} />, 'circle')).toBe(true)
-  })
-
-  xit('does not add a bg class by default', () => {
-    expect(render(<CircleOcticon icon={Check} />).props.className).not.toMatch(/\bbg-/)
-  })
-
-  xit('adds the appropriate bg class for the "bg" prop', () => {
-    expect(rendersClass(<CircleOcticon icon={Check} bg="red" />, 'bg-red')).toBe(true)
-  })
-
-  xit('does not add a text class by default', () => {
-    expect(render(<CircleOcticon icon={Check} />).props.className).not.toMatch(/\btext-/)
+  it('renders {borderRadius: 50%}', () => {
+    expect(render(<CircleOcticon icon={Check} />)).toHaveStyleRule('border-radius', '50%')
   })
 
-  xit('adds the appropriate text class for the "color" prop', () => {
-    expect(rendersClass(<CircleOcticon icon={Check} color="red" />, 'text-red')).toBe(true)
+  it('respects the bg prop', () => {
+    expect(render(<CircleOcticon icon={Check} bg="red.5" />)).toHaveStyleRule('background-color', colors.red[5])
   })
 
   it('has a default size', () => {
@@ -37,10 +30,10 @@ describe('CircleOcticon', () => {
   })
 
   it('respects margin utility prop', () => {
-    expect(render(<CircleOcticon icon={Check} m={4} />)).toHaveStyleRule('margin', '32px')
+    expect(render(<CircleOcticon icon={Check} m={4} />)).toHaveStyleRule('margin', `${theme.space[4]}px`)
   })
 
   it('respects padding utility prop', () => {
-    expect(render(<CircleOcticon icon={Check} p={4} />)).toHaveStyleRule('padding', '32px')
+    expect(render(<CircleOcticon icon={Check} p={4} />)).toHaveStyleRule('padding', `${theme.space[4]}px`)
   })
 })

src/__tests__/CounterLabel.js

@@ -3,6 +3,10 @@ import CounterLabel from '../CounterLabel'
 import {render, renderClasses, rendersClass} from '../utils/testing'
 
 describe('CounterLabel', () => {
+  xit('is a system component', () => {
+    expect(CounterLabel.systemComponent).toEqual(true)
+  })
+
   it('renders a <span> with the "Counter" class', () => {
     expect(render(<CounterLabel />)).toEqual(render(<span className="Counter" />))
   })

src/__tests__/Details.js

@@ -4,6 +4,10 @@ import Details from '../Details'
 import {mount, render, rendersClass} from '../utils/testing'
 
 describe('Details', () => {
+  xit('is a system component', () => {
+    expect(Details.systemComponent).toEqual(true)
+  })
+
   it('Renders a <details> element with reset class', () => {
     expect(render(<Details />)).toEqual(render(<details open={false} className="details-reset" />))
   })

src/__tests__/DonutChart.js

@@ -5,6 +5,10 @@ import {colors} from '../theme'
 import {render, rendersClass} from '../utils/testing'
 
 describe('DonutChart', () => {
+  xit('is a system component', () => {
+    expect(DonutChart.systemComponent).toEqual(true)
+  })
+
   it('renders the data prop', () => {
     const donut = render(<DonutChart data={{error: 1}} />)
 

src/__tests__/Dropdown.js

@@ -3,11 +3,16 @@ import Dropdown from '../Dropdown'
 import {render, rendersClass} from '../utils/testing'
 
 describe('Dropdown', () => {
+  xit('is a system component', () => {
+    expect(Dropdown.systemComponent).toEqual(true)
+  })
+
   it('renders a <div> with "BtnGroup" class', () => {
     const rendered = render(<Dropdown />)
     expect(rendered.type).toEqual('div')
     expect(rendered.props.className).toEqual('BtnGroup')
   })
+
   it('respects margin utility prop', () => {
     expect(rendersClass(<Dropdown m={1} />, 'm-1')).toEqual(true)
   })

src/__tests__/FilterList.js

@@ -4,6 +4,10 @@ import {render, rendersClass} from '../utils/testing'
 import {COMMON} from '../system-props'
 
 describe('FilterList', () => {
+  it('is a system component', () => {
+    expect(FilterList.systemComponent).toEqual(true)
+  })
+
   it('implements common system props', () => {
     expect(FilterList).toImplementSystemProps(COMMON)
   })

src/__tests__/FilterListItem.js

@@ -5,6 +5,10 @@ import {render} from '../utils/testing'
 import {COMMON} from '../system-props'
 
 describe('FilterListItem', () => {
+  it('is a system component', () => {
+    expect(FilterListItem.systemComponent).toEqual(true)
+  })
+
   it('implements common system props', () => {
     expect(FilterListItem).toImplementSystemProps(COMMON)
   })

src/__tests__/Flash.js

@@ -5,6 +5,10 @@ import {COMMON} from '../system-props'
 import {render} from '../utils/testing'
 
 describe('Flash', () => {
+  it('is a system component', () => {
+    expect(Flash.systemComponent).toEqual(true)
+  })
+
   it('implements common props', () => {
     expect(Flash).toImplementSystemProps(COMMON)
   })

src/__tests__/FlexContainer.js

@@ -4,6 +4,10 @@ import {FLEX_CONTAINER} from '../system-props'
 import {render} from '../utils/testing'
 
 describe('FlexContainer', () => {
+  it('is a system component', () => {
+    expect(FlexContainer.systemComponent).toEqual(true)
+  })
+
   it('implements flex system props', () => {
     expect(FlexContainer).toImplementSystemProps(FLEX_CONTAINER)
   })