Merge branch 'main' into cb/ts-filter-list

.changeset/popular-cobras-lick.md

@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Migrate `CounterLabel` 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/CounterLabel.js → src/CounterLabel.tsx

@@ -1,10 +1,16 @@
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import {COMMON, get} 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'
 
-const colorStyles = ({scheme, ...props}) => {
+type StyledCounterLabelProps = {
+  scheme?: 'gray' | 'gray-light'
+} & SystemCommonProps &
+  SxProp
+
+const colorStyles = ({scheme, ...props}: StyledCounterLabelProps) => {
   return {
     color:
       scheme === 'gray-light'
@@ -15,7 +21,7 @@ const colorStyles = ({scheme, ...props}) => {
   }
 }
 
-const bgStyles = ({scheme, ...props}) => {
+const bgStyles = ({scheme, ...props}: StyledCounterLabelProps) => {
   return {
     backgroundColor:
       scheme === 'gray-light'
@@ -26,7 +32,7 @@ const bgStyles = ({scheme, ...props}) => {
   }
 }
 
-const CounterLabel = styled.span`
+const CounterLabel = styled.span<StyledCounterLabelProps>`
   display: inline-block;
   padding: 2px 5px;
   font-size: ${get('fontSizes.0')};
@@ -56,4 +62,5 @@ CounterLabel.propTypes = {
   ...sx.propTypes
 }
 
+export type CounterLabelProps = ComponentProps<typeof CounterLabel>
 export default CounterLabel

src/FormGroup.tsx

@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import {COMMON, get, TYPOGRAPHY, SystemCommonProps, SystemTypographyProps} from './constants'
+import theme from './theme'
+import sx, {SxProp} from './sx'
+import {ComponentProps} from './utils/types'
+
+const FormGroup = styled.div<SystemCommonProps & SxProp>`
+  margin: ${get('space.3')} 0;
+  font-weight: ${get('fontWeights.normal')};
+  ${COMMON};
+  ${sx};
+`
+
+FormGroup.defaultProps = {theme}
+
+FormGroup.propTypes = {
+  children: PropTypes.node,
+  ...COMMON.propTypes,
+  ...sx.propTypes
+}
+
+const FormGroupLabel = styled.label<SystemTypographyProps & SystemCommonProps & SxProp>`
+  display: block;
+  margin: 0 0 ${get('space.2')};
+  font-size: ${get('fontSizes.1')};
+  font-weight: ${get('fontWeights.bold')};
+  ${TYPOGRAPHY};
+  ${COMMON};
+  ${sx};
+`
+
+FormGroupLabel.displayName = 'FormGroup.Label'
+
+FormGroupLabel.defaultProps = {
+  theme
+}
+
+FormGroupLabel.propTypes = {
+  ...TYPOGRAPHY.propTypes,
+  ...COMMON.propTypes,
+  ...sx.propTypes
+}
+
+export type FormGroupProps = ComponentProps<typeof FormGroup>
+export type FormGroupLabelProps = ComponentProps<typeof FormGroupLabel>
+export default Object.assign(FormGroup, {Label: FormGroupLabel})

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))
-  })
 })

src/__tests__/FormGroup.js → src/__tests__/FormGroup.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {FormGroup, TextInput} from '..'
+import {FormGroup} from '..'
 import {COMMON, TYPOGRAPHY} from '../constants'
 import {behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender, cleanup} from '@testing-library/react'
@@ -18,7 +18,7 @@ describe('FormGroup', () => {
     const {container} = HTMLRender(
       <FormGroup>
         <FormGroup.Label htmlFor="example-text">Example text</FormGroup.Label>
-        <TextInput id="example-text" value="Example Value" />
+        <input id="example-text" value="Example Value" />
       </FormGroup>
     )
     const results = await axe(container)