From 8a22e6eaa090989471e3b326e22fe3d1ce45d557 Mon Sep 17 00:00:00 2001
From: Van Anderson <van.m.anderson@gmail.com>
Date: Mon, 8 Feb 2021 17:00:47 -0600
Subject: [PATCH] Migrate TabNav component to TSX

---
 src/{TabNav.js => TabNav.tsx}                 | 43 +++++++++++++------
 src/__tests__/{TabNav.js => TabNav.tsx}       |  0
 .../{TabNav.js.snap => TabNav.tsx.snap}       |  0
 3 files changed, 31 insertions(+), 12 deletions(-)
 rename src/{TabNav.js => TabNav.tsx} (61%)
 rename src/__tests__/{TabNav.js => TabNav.tsx} (100%)
 rename src/__tests__/__snapshots__/{TabNav.js.snap => TabNav.tsx.snap} (100%)

diff --git a/src/TabNav.js b/src/TabNav.tsx
similarity index 61%
rename from src/TabNav.js
rename to src/TabNav.tsx
index 58917ffac9d..08f1e9dc86a 100644
--- a/src/TabNav.js
+++ b/src/TabNav.tsx
@@ -2,19 +2,34 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import styled from 'styled-components'
-import {COMMON, get} from './constants'
+import {COMMON, SystemCommonProps, SystemTypographyProps, get} from './constants'
+import {ComponentProps} from './utils/types'
 import theme from './theme'
-import sx from './sx'
+import sx, {SxProp} from './sx'
+import * as History from 'history'
 
 const ITEM_CLASS = 'TabNav-item'
 const SELECTED_CLASS = 'selected'
 
-function TabNavBase({actions, className, align, children, full, theme, ...rest}) {
+const TabNavParent = styled.nav`
+  ${COMMON}
+  ${sx}
+`
+
+type TabNavBaseProps = {
+  actions?: Array<any>
+  full?: boolean
+  align?: string
+} & ComponentProps<typeof TabNavParent> &
+  SystemCommonProps &
+  SxProp
+
+function TabNavBase({actions, className, align, children, full, theme, ...rest}: TabNavBaseProps) {
   const classes = classnames(className, 'TabNav')
   return (
-    <nav className={classes} {...rest}>
+    <TabNavParent className={classes} {...rest}>
       <div className="TabNav-body">{children}</div>
-    </nav>
+    </TabNavParent>
   )
 }
 
@@ -30,11 +45,14 @@ const TabNav = styled(TabNavBase)`
   ${COMMON};
   ${sx};
 `
+type StyledTabNavLinkProps = {to?: History.LocationDescriptor; selected?: boolean} & SystemCommonProps &
+  SxProp &
+  SystemTypographyProps
 
-TabNav.Link = styled.a.attrs(props => ({
+const TabNavLink = styled.a.attrs<StyledTabNavLinkProps>(props => ({
   activeClassName: typeof props.to === 'string' ? 'selected' : '',
   className: classnames(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className)
-}))`
+}))<StyledTabNavLinkProps>`
   padding: 8px 12px;
   font-size: ${get('fontSizes.1')};
   line-height: 20px;
@@ -73,18 +91,19 @@ TabNav.propTypes = {
   ...sx.propTypes
 }
 
-TabNav.Link.defaultProps = {
+TabNavLink.defaultProps = {
   theme
 }
 
-TabNav.Link.propTypes = {
-  as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+TabNavLink.propTypes = {
   href: PropTypes.string,
   selected: PropTypes.bool,
   ...COMMON.propTypes,
   ...sx.propTypes
 }
 
-TabNav.Link.displayName = 'TabNav.Link'
+TabNavLink.displayName = 'TabNav.Link'
 
-export default TabNav
+export type TabNavProps = ComponentProps<typeof TabNav>
+export type TabNavLinkProps = ComponentProps<typeof TabNavLink>
+export default Object.assign(TabNav, {Link: TabNavLink})
diff --git a/src/__tests__/TabNav.js b/src/__tests__/TabNav.tsx
similarity index 100%
rename from src/__tests__/TabNav.js
rename to src/__tests__/TabNav.tsx
diff --git a/src/__tests__/__snapshots__/TabNav.js.snap b/src/__tests__/__snapshots__/TabNav.tsx.snap
similarity index 100%
rename from src/__tests__/__snapshots__/TabNav.js.snap
rename to src/__tests__/__snapshots__/TabNav.tsx.snap