Merge pull request #993 from primer/cb/ts-styled-octicon

Migrate StyledOcticon to TypeScript

Author: colebemis

.changeset/funny-pots-explain.md

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

src/StyledOcticon.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import {COMMON, SystemCommonProps} from './constants'
+import theme from './theme'
+import sx, {SxProp} from './sx'
+import {IconProps} from '@primer/octicons-react'
+import {ComponentProps} from './utils/types'
+
+type OcticonProps = {icon: React.ElementType} & IconProps
+
+function Octicon({icon: IconComponent, ...rest}: OcticonProps) {
+  return <IconComponent {...rest} />
+}
+
+const StyledOcticon = styled(Octicon)<SystemCommonProps & SxProp>`
+  ${COMMON}
+  ${sx}
+`
+
+StyledOcticon.defaultProps = {
+  theme,
+  size: 16
+}
+
+StyledOcticon.propTypes = {
+  ...COMMON.propTypes,
+  ...sx.propTypes,
+  icon: PropTypes.any.isRequired,
+  size: PropTypes.any,
+  theme: PropTypes.object,
+  verticalAlign: PropTypes.oneOf(['middle', 'text-bottom', 'text-top', 'top'])
+}
+
+export type StyledOcticonProps = ComponentProps<typeof StyledOcticon>
+export default StyledOcticon

src/StyledOcticon.tsx

@@ -15,10 +15,6 @@ describe('StyledOcticon', () => {
     default: StyledOcticon
   })
 
-  it('implements system props', () => {
-    expect(StyledOcticon).toImplementSystemProps(COMMON)
-  })
-
   it('should have no axe violations', async () => {
     const {container} = HTMLRender(<StyledOcticon icon={XIcon} />)
     const results = await axe(container)