Merge pull request #1035 from primer/cb/ts-circle-badge

Migrate CircleBadge to TypeScript

.changeset/kind-spies-call.md

@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Migrate `CircleBadge` to TypeScript

src/CircleBadge.js → src/CircleBadge.tsx

@@ -1,45 +1,54 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import {COMMON, get} from './constants'
-import isNumeric from './utils/isNumeric'
-import theme from './theme'
-import sx from './sx'
+import {COMMON, get, SystemCommonProps} from './constants'
 import StyledOcticon from './StyledOcticon'
+import sx, {SxProp} from './sx'
+import theme from './theme'
+import isNumeric from './utils/isNumeric'
+import {ComponentProps} from './utils/types'
 
 const variantSizes = {
   small: 56,
   medium: 96,
   large: 128
 }
 
-const sizeStyles = ({size, variant}) => {
+type StyledCircleBadgeProps = {
+  inline?: boolean
+  variant?: keyof typeof variantSizes
+  size?: number
+} & SystemCommonProps &
+  SxProp
+
+const sizeStyles = ({size, variant = 'medium'}: StyledCircleBadgeProps) => {
   const calc = isNumeric(size) ? size : variantSizes[variant]
   return {
     width: calc,
     height: calc
   }
 }
 
-const CircleBadge = styled.div`
+const CircleBadge = styled.div<StyledCircleBadgeProps>`
   display: ${props => (props.inline ? 'inline-flex' : 'flex')};
   align-items: center;
   justify-content: center;
   background-color: ${get('colors.white')};
   border-radius: 50%;
   box-shadow: ${get('shadows.medium')};
-  ${COMMON} ${sizeStyles};
+  ${COMMON};
+  ${sizeStyles};
   ${sx};
 `
 
-CircleBadge.Icon = props => (
-  <StyledOcticon {...props} sx={Object.assign(props.sx, {height: 'auto', maxWidth: '60%', maxHeight: '55%'})} />
-)
+const CircleBadgeIcon = styled(StyledOcticon)`
+  height: auto;
+  max-width: 60%;
+  max-height: 55%;
+`
 
 CircleBadge.defaultProps = {
   inline: false,
-  theme,
-  variant: 'medium'
+  theme
 }
 
 CircleBadge.propTypes = {
@@ -51,15 +60,16 @@ CircleBadge.propTypes = {
   ...sx.propTypes
 }
 
-CircleBadge.Icon.defaultProps = {
-  theme,
-  sx: {}
+CircleBadgeIcon.defaultProps = {
+  theme
 }
 
-CircleBadge.Icon.propTypes = {
+CircleBadgeIcon.propTypes = {
   ...StyledOcticon.propTypes
 }
 
-CircleBadge.Icon.displayName = 'CircleBadge.Icon'
+CircleBadgeIcon.displayName = 'CircleBadge.Icon'
 
-export default CircleBadge
+export type CircleBadgeProps = ComponentProps<typeof CircleBadge>
+export type CircleBadgeIconProps = ComponentProps<typeof CircleBadgeIcon>
+export default Object.assign(CircleBadge, {Icon: CircleBadgeIcon})

src/__tests__/CircleBadge.js → src/__tests__/CircleBadge.tsx

@@ -18,11 +18,7 @@ describe('CircleBadge', () => {
   })
 
   describe('CircleBadge.Icon', () => {
-    behavesAsComponent(CircleBadge.Icon, [COMMON], () => (
-      <CircleBadge.Icon icon={CheckIcon}>
-        <div />
-      </CircleBadge.Icon>
-    ))
+    behavesAsComponent(CircleBadge.Icon, [COMMON], () => <CircleBadge.Icon icon={CheckIcon} />)
   })
 
   it('should have no axe violations', async () => {