Add shape prop to Avatar component

docs/content/Avatar.mdx

@@ -31,3 +31,4 @@ Avatar components get `COMMON` system props. Read our [System Props](/system-pro
 | isChild | Boolean | | adds the `avatar-child` class if present |
 | size | Number | 20 | adds the `avatar-small` class if less than 24 |
 | src | String | | The source url of the avatar image |
+| shape | String | `square` | The shape of the avatar image. Can be `square` or `round` |

index.d.ts

@@ -114,6 +114,7 @@ declare module '@primer/components' {
   export interface AvatarProps extends CommonProps, Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'color'> {
     isChild?: boolean
     size?: number
+    shape?: 'square' | 'round'
   }
 
   export const Avatar: React.FunctionComponent<AvatarProps>

src/Avatar.js

@@ -5,9 +5,18 @@ import {space} from 'styled-system'
 import systemPropTypes from '@styled-system/prop-types'
 import theme from './theme'
 
-function borderRadius({size}) {
+function borderRadiusValue({size, shape}) {
+  switch (shape) {
+    case 'round':
+      return '50%'
+    default:
+      return size <= 24 ? '2px' : '3px'
+  }
+}
+
+function borderRadius({size, shape}) {
   return {
-    borderRadius: size <= 24 ? '2px' : '3px'
+    borderRadius: borderRadiusValue({size, shape})
   }
 }
 
@@ -27,14 +36,16 @@ const Avatar = styled.img.attrs(props => ({
 Avatar.defaultProps = {
   theme,
   size: 20,
-  alt: ''
+  alt: '',
+  shape: 'square'
 }
 
 Avatar.propTypes = {
   alt: PropTypes.string.isRequired,
   size: PropTypes.number,
   src: PropTypes.string,
   ...systemPropTypes.space,
+  shape: PropTypes.PropTypes.oneOf(['square', 'round']),
   theme: PropTypes.object
 }
 

src/__tests__/Avatar.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import Avatar from '../Avatar'
 import theme from '../theme'
-import {px, render} from '../utils/testing'
+import {px, render, percent} from '../utils/testing'
 import {render as HTMLRender, cleanup} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
 import 'babel-polyfill'
@@ -43,4 +43,8 @@ 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))
+  })
 })

src/__tests__/__snapshots__/Avatar.js.snap

@@ -13,6 +13,7 @@ exports[`Avatar renders default props 1`] = `
   alt=""
   className="c0"
   height={20}
+  shape="square"
   size={20}
   width={20}
 />

src/utils/testing.js

@@ -70,6 +70,10 @@ export function px(value) {
   return typeof value === 'number' ? `${value}px` : value
 }
 
+export function percent(value) {
+  return typeof value === 'number' ? `${value}%` : value
+}
+
 export function renderStyles(node) {
   const {
     props: {className}