Move styled-components to deps instead of dev-deps

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "8.0.0-beta",
+  "version": "8.2.0-beta",
   "description": "Primer react components",
   "main": "dist/index.umd.js",
   "module": "dist/index.esm.js",
@@ -46,6 +46,7 @@
     "primer-typography": "1.0.1",
     "react": "16.4.2",
     "react-dom": "16.4.2",
+    "styled-components": "4.1.2",
     "styled-system": "3.1.3",
     "system-components": "3.0.1"
   },
@@ -86,7 +87,6 @@
     "rollup": "0.62.0",
     "rollup-plugin-babel": "4.0.0-beta.8",
     "rollup-plugin-commonjs": "9.1.3",
-    "sass.macro": "0.1.0",
-    "styled-components": "4.1.2"
+    "sass.macro": "0.1.0"
   }
 }

src/Box.js

@@ -1,9 +1,9 @@
 import styled from 'styled-components'
 import PropTypes from 'prop-types'
-import {LAYOUT, COMMON} from './constants'
+import {LAYOUT, COMMON, Base} from './constants'
 import theme from './theme'
 
-const Box = styled.div`
+const Box = styled(Base)`
   ${LAYOUT} ${COMMON};
 `
 

src/CircleOcticon.js

@@ -6,10 +6,10 @@ import theme from './theme'
 import BorderBox from './BorderBox'
 
 function CircleOcticon(props) {
-  const {size} = props
+  const {size, is} = props
   const {icon, bg, ...rest} = props
   return (
-    <BorderBox bg={bg} overflow="hidden" border="none" size={size} borderRadius="50%">
+    <BorderBox is={is} bg={bg} overflow="hidden" border="none" size={size} borderRadius="50%">
       <Flex {...rest} alignItems="center" justifyContent="center">
         <Octicon icon={icon} size={size} />
       </Flex>

src/Flash.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import {COMMON, get} from './constants'
+import {COMMON, get, Base} from './constants'
 import theme from './theme'
 
 const schemeMap = {
@@ -10,7 +10,7 @@ const schemeMap = {
   base: {color: 'colors.blue.8', bg: 'colors.blue.1'}
 }
 
-const Flash = styled.div`
+const Flash = styled(Base)`
   position: relative;
   padding: ${get('space.3')}px;
   color: ${props => get(schemeMap[props.scheme] ? schemeMap[props.scheme].color : '')};

src/PointerBox.js

@@ -7,11 +7,11 @@ import {Relative} from './Position'
 
 function PointerBox(props) {
   // don't destructure these, just grab them
-  const {bg, border, borderColor} = props
+  const {bg, border, borderColor, is} = props
   const {caret, children, ...boxProps} = props
   const caretProps = {bg, borderColor, borderWidth: border, location: caret}
   return (
-    <Relative>
+    <Relative is={is}>
       <BorderBox {...boxProps}>
         {children}
         <Caret {...caretProps} />

src/__tests__/BorderBox.js

@@ -14,6 +14,10 @@ describe('BorderBox', () => {
     expect(BorderBox).toSetDefaultTheme()
   })
 
+  it('respects the "is" prop', () => {
+    expect(render(<BorderBox is="span" />).type).toEqual('span')
+  })
+
   it('renders borders', () => {
     expect(render(<BorderBox borderColor="green.5" />)).toHaveStyleRule('border-color', colors.green[5])
     expect(render(<BorderBox borderBottom={0} />)).toHaveStyleRule('border-bottom', '0')

src/__tests__/Box.js

@@ -10,6 +10,10 @@ describe('Box', () => {
     expect(Box).toImplementSystemProps(COMMON)
   })
 
+  it('respects the "is" prop', () => {
+    expect(render(<Box is="span" />).type).toEqual('span')
+  })
+
   it('renders without any props', () => {
     expect(render(<Box />)).toMatchSnapshot()
   })

src/__tests__/CircleOcticon.js

@@ -28,4 +28,8 @@ describe('CircleOcticon', () => {
     expect(result).toHaveStyleRule('width', '32px')
     expect(result).toHaveStyleRule('height', '32px')
   })
+
+  it('respects the "is" prop', () => {
+    expect(render(<CircleOcticon icon={Check} is="span" />).type).toEqual('span')
+  })
 })

src/__tests__/CounterLabel.js

@@ -29,4 +29,8 @@ describe('CounterLabel', () => {
   it('implements system props', () => {
     expect(CounterLabel).toImplementSystemProps(COMMON)
   })
+
+  it('respects the "is" prop', () => {
+    expect(render(<CounterLabel is="span" />).type).toEqual('span')
+  })
 })

src/__tests__/Flash.js

@@ -19,6 +19,10 @@ describe('Flash', () => {
     expect(render(<Flash full />)).toHaveStyleRule('border-width', '1px 0px')
   })
 
+  it('respects the "is" prop', () => {
+    expect(render(<Flash is="span" />).type).toEqual('span')
+  })
+
   it('respects the "scheme" prop', () => {
     expect(render(<Flash scheme="yellow" theme={theme} />)).toHaveStyleRule('color', colors.yellow[9])
     expect(render(<Flash scheme="red" theme={theme} />)).toHaveStyleRule('color', colors.red[9])

src/__tests__/Label.js

@@ -13,6 +13,10 @@ describe('Label', () => {
     expect(render(<Label outline />)).toMatchSnapshot()
   })
 
+  it('respects the "is" prop', () => {
+    expect(render(<Label is="span" />).type).toEqual('span')
+  })
+
   it('has default theme', () => {
     expect(Label).toSetDefaultTheme()
   })

src/__tests__/Link.js

@@ -22,6 +22,10 @@ describe('Link', () => {
     expect(render(<Link />)).toMatchSnapshot()
   })
 
+  it('respects the "is" prop', () => {
+    expect(render(<Link is="button" />).type).toEqual('button')
+  })
+
   it('respects hoverColor prop', () => {
     expect(render(<Link hoverColor="blue.4" />)).toMatchSnapshot()
   })

src/__tests__/PointerBox.js

@@ -18,4 +18,8 @@ describe('PointerBox', () => {
   it('has default theme', () => {
     expect(PointerBox).toSetDefaultTheme()
   })
+
+  it('respects the "is" prop', () => {
+    expect(render(<PointerBox is="span" />).type).toEqual('span')
+  })
 })

src/__tests__/Position.js

@@ -26,13 +26,20 @@ describe('position components', () => {
       expect(result).toHaveStyleRule('position', 'absolute')
       expect(result).toHaveStyleRule('border', '1px solid')
     })
+
+    it('respects the "is" prop', () => {
+      expect(render(<Absolute is="span" />).type).toEqual('span')
+    })
   })
 
   describe('Fixed', () => {
     it('implements system props', () => {
       expect(Fixed).toImplementSystemProps(LAYOUT)
       expect(Fixed).toImplementSystemProps(POSITION)
     })
+    it('respects the "is" prop', () => {
+      expect(render(<Fixed is="span" />).type).toEqual('span')
+    })
     it('has default theme', () => {
       expect(Fixed).toSetDefaultTheme()
     })
@@ -54,6 +61,10 @@ describe('position components', () => {
       expect(Relative).toImplementSystemProps(LAYOUT)
       expect(Relative).toImplementSystemProps(POSITION)
     })
+    it('respects the "is" prop', () => {
+      expect(render(<Relative is="span" />).type).toEqual('span')
+    })
+
     it('has default theme', () => {
       expect(Relative).toSetDefaultTheme()
     })
@@ -75,6 +86,9 @@ describe('position components', () => {
       expect(Sticky).toImplementSystemProps(LAYOUT)
       expect(Sticky).toImplementSystemProps(POSITION)
     })
+    it('respects the "is" prop', () => {
+      expect(render(<Sticky is="span" />).type).toEqual('span')
+    })
     it('sets position: sticky', () => {
       expect(render(<Sticky />)).toHaveStyleRule('position', 'sticky')
     })

src/__tests__/StateLabel.js

@@ -27,6 +27,10 @@ describe('StateLabel', () => {
     expect(render(<StateLabel>hi</StateLabel>)).toMatchSnapshot()
   })
 
+  it('respects the "is" prop', () => {
+    expect(render(<StateLabel is="span" />).type).toEqual('span')
+  })
+
   it('does not pass on arbitrary attributes', () => {
     const defaultOutput = render(<StateLabel />)
     expect(render(<StateLabel data-foo="bar" />)).toEqual(defaultOutput)

src/__tests__/Tooltip.js

@@ -12,6 +12,10 @@ describe('Tooltip', () => {
     expect(Tooltip).toSetDefaultTheme()
   })
 
+  it('respects the "is" prop', () => {
+    expect(render(<Tooltip is="span" />).type).toEqual('span')
+  })
+
   it('renders a <span> with the "tooltipped" class', () => {
     expect(render(<Tooltip />).type).toEqual('span')
     expect(renderClasses(<Tooltip />)).toContain('tooltipped-n')

src/__tests__/__snapshots__/Box.js.snap

@@ -7,6 +7,7 @@ exports[`Box renders margin 1`] = `
 
 <div
   className="c0"
+  m={1}
 />
 `;
 
@@ -35,6 +36,14 @@ exports[`Box renders margin 2`] = `
 
 <div
   className="c0"
+  m={
+    Array [
+      0,
+      1,
+      2,
+      3,
+    ]
+  }
 />
 `;
 
@@ -63,6 +72,14 @@ exports[`Box renders margin 3`] = `
 
 <div
   className="c0"
+  m={
+    Array [
+      1,
+      1,
+      1,
+      3,
+    ]
+  }
 />
 `;
 
@@ -73,6 +90,7 @@ exports[`Box renders padding 1`] = `
 
 <div
   className="c0"
+  p={1}
 />
 `;
 
@@ -101,6 +119,14 @@ exports[`Box renders padding 2`] = `
 
 <div
   className="c0"
+  p={
+    Array [
+      0,
+      1,
+      2,
+      3,
+    ]
+  }
 />
 `;
 
@@ -129,6 +155,14 @@ exports[`Box renders padding 3`] = `
 
 <div
   className="c0"
+  p={
+    Array [
+      1,
+      1,
+      1,
+      3,
+    ]
+  }
 />
 `;
 

src/__tests__/__snapshots__/Dropdown.js.snap

@@ -137,7 +137,21 @@ exports[`Dropdown matches the snapshots 1`] = `
       </svg>
     </summary>
     <div
+      bg="white"
+      border={1}
+      borderColor="gray.2"
+      borderRadius={1}
+      boxShadow="small"
       className="c4"
+      css={
+        Object {
+          "position": "absolute",
+          "zIndex": 99999,
+        }
+      }
+      mt={1}
+      px={3}
+      py={2}
     >
       hi
       <svg
@@ -312,7 +326,21 @@ exports[`Dropdown matches the snapshots 2`] = `
       </svg>
     </summary>
     <div
+      bg="white"
+      border={1}
+      borderColor="gray.2"
+      borderRadius={1}
+      boxShadow="small"
       className="c4"
+      css={
+        Object {
+          "position": "absolute",
+          "zIndex": 99999,
+        }
+      }
+      mt={1}
+      px={3}
+      py={2}
     >
       hello!
       <svg

src/__tests__/__snapshots__/PointerBox.js.snap

@@ -17,6 +17,10 @@ exports[`PointerBox passes the "bg" prop to both <BorderBox> and <Caret> 1`] = `
   position="relative"
 >
   <div
+    bg="red.5"
+    border="1px solid"
+    borderColor="gray.2"
+    borderRadius={1}
     className="c1"
   >
     <svg
@@ -68,6 +72,9 @@ exports[`PointerBox passes the "borderColor" prop to both <BorderBox> and <Caret
   position="relative"
 >
   <div
+    border="1px solid"
+    borderColor="red.5"
+    borderRadius={1}
     className="c1"
   >
     <svg
@@ -119,6 +126,9 @@ exports[`PointerBox renders a <Caret> in <BorderBox> with relative positioning 1
   position="relative"
 >
   <div
+    border="1px solid"
+    borderColor="gray.2"
+    borderRadius={1}
     className="c1"
   >
     <svg