Migrate Header component to TSX

.changeset/yellow-suits-smell.md

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

src/Header.js → src/Header.tsx

@@ -1,10 +1,19 @@
 import styled, {css} from 'styled-components'
 import PropTypes from 'prop-types'
 import theme from './theme'
-import {get, COMMON, TYPOGRAPHY, BORDER} from './constants'
-import sx from './sx'
+import {BORDER, COMMON, get, SystemCommonProps, SystemTypographyProps, SystemBorderProps, TYPOGRAPHY} from './constants'
+import {ComponentProps} from './utils/types'
+import sx, {SxProp} from './sx'
+import * as History from 'history'
 
-const Header = styled.div`
+type StyledHeaderItemProps = {full?: boolean} & SystemCommonProps & SxProp
+type StyledHeaderProps = SystemBorderProps & SystemCommonProps & SxProp
+type StyledHeaderLinkProps = {to?: History.LocationDescriptor} & SystemCommonProps &
+  SxProp &
+  SystemTypographyProps &
+  SystemBorderProps
+
+const Header = styled.div<StyledHeaderProps>`
   z-index: 32;
   display: flex;
   padding: ${get('space.3')};
@@ -19,16 +28,15 @@ const Header = styled.div`
   ${BORDER}
   ${sx};
 `
-
-Header.Item = styled.div`
+const HeaderItem = styled.div<StyledHeaderItemProps>`
   display: flex;
   margin-right: ${get('space.3')};
   align-self: stretch;
   align-items: center;
   flex-wrap: nowrap;
 
-  ${props =>
-    props.full &&
+  ${({full}) =>
+    full &&
     css`
       flex: auto;
     `};
@@ -37,18 +45,19 @@ Header.Item = styled.div`
   ${BORDER};
   ${sx};
 `
-Header.Item.displayName = 'Header.Item'
 
-Header.Link = styled.a.attrs(props => {
-  const isReactRouter = typeof props.to === 'string'
+HeaderItem.displayName = 'Header.Item'
+
+const HeaderLink = styled.a.attrs<StyledHeaderLinkProps>(({to}) => {
+  const isReactRouter = typeof to === 'string'
   if (isReactRouter) {
     // according to their docs, NavLink supports aria-current:
     // https://reacttraining.com/react-router/web/api/NavLink/aria-current-string
     return {'aria-current': 'page'}
   } else {
     return {}
   }
-})`
+})<StyledHeaderLinkProps>`
   font-weight: ${get('fontWeights.bold')};
   color: ${get('colors.text.white')};
   white-space: nowrap;
@@ -67,7 +76,8 @@ Header.Link = styled.a.attrs(props => {
   ${TYPOGRAPHY};
   ${sx};
 `
-Header.Link.displayName = 'Header.Link'
+
+HeaderLink.displayName = 'Header.Link'
 
 Header.propTypes = {
   ...sx.propTypes,
@@ -79,23 +89,18 @@ Header.defaultProps = {
   theme
 }
 
-Header.Item.defaultProps = {
-  theme
-}
-
-Header.Item.propTypes = {
+HeaderItem.propTypes = {
   full: PropTypes.bool,
   ...COMMON.propTypes,
   ...BORDER.propTypes,
   ...sx.propTypes
 }
 
-Header.Link.defaultProps = {
+HeaderItem.defaultProps = {
   theme
 }
 
-Header.Link.propTypes = {
-  as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+HeaderLink.propTypes = {
   href: PropTypes.string,
   theme: PropTypes.object,
   ...COMMON.propTypes,
@@ -104,4 +109,11 @@ Header.Link.propTypes = {
   ...sx.propTypes
 }
 
-export default Header
+HeaderLink.defaultProps = {
+  theme
+}
+
+export type HeaderProps = ComponentProps<typeof Header>
+export type HeaderLinkProps = ComponentProps<typeof HeaderLink>
+export type HeaderItemProps = ComponentProps<typeof HeaderItem>
+export default Object.assign(Header, {Link: HeaderLink, Item: HeaderItem})