Merge pull request #999 from primer/cb/ts-form-group

Migrate FormGroup to TypeScript

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__/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)