Merge pull request #195 from primer/circle-badge

Update CircleBadge to use Emotion + Styled System
primer · Aug 7, 2018 · c675ceb · c675ceb
2 parents f07de5e + 3f2d414
commit c675ceb
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 28 deletions.
diff --git a/src/CircleBadge.js b/src/CircleBadge.js
@@ -1,12 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import {mapWhitespaceProps} from './props'
+import {withSystemProps, COMMON} from './system-props'
 
 const ICON_CLASS = 'CircleBadge-icon'
 
-const CircleBadge = ({tag: Tag = 'div', size = 'medium', bg, children, ...rest}) => {
-  const {className} = mapWhitespaceProps(rest)
+const CircleBadge = ({is: Tag = 'div', size = 'medium', bg, children, className, ...rest}) => {
   const mappedChildren = React.Children.map(children, child => {
     let {className = ''} = child.props
     if (!className.includes(ICON_CLASS)) {
@@ -29,4 +28,4 @@ CircleBadge.propTypes = {
   src: PropTypes.string
 }
 
-export default CircleBadge
+export default withSystemProps(CircleBadge, COMMON)
diff --git a/src/__tests__/CircleBadge.js b/src/__tests__/CircleBadge.js
@@ -3,7 +3,6 @@ import React from 'react'
 import CircleBadge from '../CircleBadge'
 import {render, rendersClass, mount} from '../utils/testing'
 
-const imgOutput = <img className="CircleBadge-icon" alt="" src="primer.jpg" />
 const imgInput = <img alt="" src="primer.jpg" />
 
 describe('CircleBadge', () => {
@@ -12,29 +11,19 @@ describe('CircleBadge', () => {
   })
 
   it('renders medium by default', () => {
-    expect(rendersClass(<CircleBadge />, 'CircleBadge--medium')).toEqual(true)
+    expect(render(<CircleBadge />).props.className).toContain('CircleBadge--medium')
   })
 
-  it('respects tag prop', () => {
-    expect(
-      render(
-        <CircleBadge tag="a" href="https://github.com">
-          {imgInput}
-        </CircleBadge>
-      )
-    ).toEqual(
-      render(
-        <a className="CircleBadge CircleBadge--medium" href="https://github.com">
-          {imgOutput}
-        </a>
-      )
-    )
+  it('respects "is" prop', () => {
+    const item = render(<CircleBadge is="a" />)
+    expect(item.type).toEqual('a')
+    expect(item).toMatchSnapshot()
   })
 
   it('applies title', () => {
     expect(
       render(
-        <CircleBadge tag="a" title="primer logo">
+        <CircleBadge is="a" title="primer logo">
           {imgInput}
         </CircleBadge>
       ).props['title']
@@ -67,11 +56,4 @@ describe('CircleBadge', () => {
     )
     expect(comp.find('img').hasClass('primer')).toEqual(true)
   })
-  it('respects margin utility prop', () => {
-    expect(rendersClass(<CircleBadge m={4} />, 'm-4')).toEqual(true)
-  })
-
-  it('respects padding utility prop', () => {
-    expect(rendersClass(<CircleBadge p={4} />, 'p-4')).toEqual(true)
-  })
 })
diff --git a/src/__tests__/__snapshots__/CircleBadge.js.snap b/src/__tests__/__snapshots__/CircleBadge.js.snap
@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CircleBadge respects "is" prop 1`] = `
+<a
+  blacklist={
+    Array [
+      "css",
+      "color",
+      "bg",
+      "m",
+      "mt",
+      "mr",
+      "mb",
+      "ml",
+      "mx",
+      "my",
+      "p",
+      "pt",
+      "pr",
+      "pb",
+      "pl",
+      "px",
+      "py",
+    ]
+  }
+  className="emotion-0 CircleBadge CircleBadge--medium"
+/>
+`;