Merge pull request #213 from primer/update-circle-badge

Allow CircleBadge size to be customized
primer · Aug 17, 2018 · dd98e34 · dd98e34
2 parents 9847874 + 9170fc3
commit dd98e34
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 732 deletions.
diff --git a/docs/bundle.js b/docs/bundle.js
diff --git a/docs/components/index.html b/docs/components/index.html
diff --git a/docs/index.html b/docs/index.html
diff --git a/docs/props/index.html b/docs/props/index.html
diff --git a/examples/component-examples/CircleBadge.js b/examples/component-examples/CircleBadge.js
@@ -8,7 +8,7 @@ const octicon = `<CircleBadge size="medium">
 </CircleBadge>`
 
 const image = `<CircleBadge bg="blue.5" size="small"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>`
-
+const customSize = `<CircleBadge bg="blue.5" size={40}><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>`
 const sizes = `<CircleBadge bg="blue.5" size="small"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
 <CircleBadge bg="blue.5" size="medium"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
 <CircleBadge bg="blue.5" size="large"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>`
@@ -21,6 +21,10 @@ const CircleBadgeExample = {
         <Heading fontSize={3}>Small, medium & large</Heading>
         <LiveEditor code={sizes} scope={{CircleBadge, Octicon, Zap}} />
       </Box>
+      <Box mb={2} pt={2}>
+        <Heading fontSize={3}>With custom width & height</Heading>
+        <LiveEditor code={customSize} scope={{CircleBadge, Octicon, Zap}} />
+      </Box>
       <Box mb={2}>
         <Heading fontSize={3}>With Octicon as child</Heading>
         <LiveEditor code={octicon} scope={{CircleBadge, Octicon, Zap}} />

diff --git a/src/CircleBadge.js b/src/CircleBadge.js
@@ -5,15 +5,33 @@ import {withSystemProps, COMMON} from './system-props'
 
 const ICON_CLASS = 'CircleBadge-icon'
 
-const CircleBadge = ({is: Tag = 'div', size = 'medium', bg, children, className, ...rest}) => {
+const sizeMapper = size => {
+  if (typeof size === 'number') return size
+  const map = {
+    small: 56,
+    medium: 96,
+    large: 128
+  }
+  return map[size]
+}
+
+const sizeStyles = ({size}) => {
+  return {
+    width: sizeMapper(size),
+    height: sizeMapper(size)
+  }
+}
+
+const CircleBadge = ({is: Tag = 'div', children, className, ...rest}) => {
   const mappedChildren = React.Children.map(children, child => {
     let {className = ''} = child.props
     if (!className.includes(ICON_CLASS)) {
       className = classnames(ICON_CLASS, className)
     }
     return React.cloneElement(child, {className})
   })
-  const classes = classnames(className, 'CircleBadge', `CircleBadge--${size}`, bg && `bg-${bg}`)
+
+  const classes = classnames(className, 'CircleBadge')
   return (
     <Tag className={classes} {...rest}>
       {mappedChildren}
@@ -25,8 +43,8 @@ CircleBadge.propTypes = {
   alt: PropTypes.string,
   bg: PropTypes.string,
   is: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  size: PropTypes.oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.number]),
   src: PropTypes.string
 }
 
-export default withSystemProps(CircleBadge, COMMON)
+export default withSystemProps(CircleBadge, [...COMMON, sizeStyles])
diff --git a/src/__tests__/CircleBadge.js b/src/__tests__/CircleBadge.js
@@ -10,10 +10,6 @@ describe('CircleBadge', () => {
     expect(CircleBadge.systemComponent).toEqual(true)
   })
 
-  it('renders medium by default', () => {
-    expect(render(<CircleBadge />).props.className).toContain('CircleBadge--medium')
-  })
-
   it('respects "is" prop', () => {
     const item = render(<CircleBadge is="a" />)
     expect(item.type).toEqual('a')

diff --git a/src/__tests__/__snapshots__/CircleBadge.js.snap b/src/__tests__/__snapshots__/CircleBadge.js.snap
@@ -23,6 +23,6 @@ exports[`CircleBadge respects "is" prop 1`] = `
       "py",
     ]
   }
-  className="emotion-0 CircleBadge CircleBadge--medium"
+  className="emotion-0 CircleBadge"
 />
 `;