Merge pull request #984 from primer/bs-ts-avatar

Migrate Avatar to TypeScript

.changeset/spotty-wombats-cry.md

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

src/Avatar.js → src/Avatar.tsx

@@ -1,22 +1,28 @@
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import {get, COMMON} from './constants'
+import {COMMON, get, SystemCommonProps} from './constants'
+import sx, {SxProp} from './sx'
 import theme from './theme'
-import sx from './sx'
+import {ComponentProps} from './utils/types'
 
-function getBorderRadius(props) {
-  if (props.square) {
-    return props.size <= 24 ? '4px' : '6px'
+type StyledAvatarProps = {
+  size?: number
+  square?: boolean
+} & SystemCommonProps &
+  SxProp
+
+function getBorderRadius({size, square}: StyledAvatarProps) {
+  if (square) {
+    return size && size <= 24 ? '4px' : '6px'
   } else {
     return '50%'
   }
 }
 
-const Avatar = styled.img.attrs(props => ({
+const Avatar = styled.img.attrs<StyledAvatarProps>(props => ({
   height: props.size,
-  width: props.size,
-  alt: props.alt
-}))`
+  width: props.size
+}))<StyledAvatarProps>`
   display: inline-block;
   overflow: hidden; // Ensure page layout in Firefox should images fail to load
   line-height: ${get('lineHeights.condensedUltra')};
@@ -41,4 +47,5 @@ Avatar.propTypes = {
   theme: PropTypes.object
 }
 
+export type AvatarProps = ComponentProps<typeof Avatar>
 export default Avatar

src/__tests__/Avatar.js → src/__tests__/Avatar.tsx

@@ -5,11 +5,11 @@ import {px, render, percent, behavesAsComponent, checkExports} from '../utils/te
 import {render as HTMLRender, cleanup} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
 import 'babel-polyfill'
-import systemPropTypes from '@styled-system/prop-types'
+import {COMMON} from '../constants'
 expect.extend(toHaveNoViolations)
 
 describe('Avatar', () => {
-  behavesAsComponent(Avatar, [{propTypes: systemPropTypes.space}])
+  behavesAsComponent(Avatar, [COMMON])
 
   checkExports('Avatar', {
     default: Avatar
@@ -42,8 +42,4 @@ describe('Avatar', () => {
   it('respects margin props', () => {
     expect(render(<Avatar m={2} alt="" />)).toHaveStyleRule('margin', px(theme.space[2]))
   })
-
-  it('respects shape prop', () => {
-    expect(render(<Avatar shape="round" alt="" />)).toHaveStyleRule('border-radius', percent(50))
-  })
 })