Merge pull request #1003 from primer/cb/ts-truncate

Migrate Truncate to TypeScript
primer · Feb 2, 2021 · 885e810 · 885e810 · vercel · Feb 2, 2021
2 parents cc3266c + b0cea82
commit 885e810
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 6 deletions.
diff --git a/.changeset/eleven-days-hope.md b/.changeset/eleven-days-hope.md
@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Migrate `Truncate` to TypeScript
diff --git a/src/Truncate.js → src/Truncate.tsx b/src/Truncate.js → src/Truncate.tsx
@@ -1,11 +1,21 @@
-import styled from 'styled-components'
-import {maxWidth} from 'styled-system'
 import PropTypes from 'prop-types'
-import {TYPOGRAPHY, COMMON} from './constants'
+import styled from 'styled-components'
+import {maxWidth, MaxWidthProps} from 'styled-system'
+import {COMMON, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
+import sx, {SxProp} from './sx'
 import theme from './theme'
-import sx from './sx'
+import {ComponentProps} from './utils/types'
+
+type StyledTruncateProps = {
+  title: string
+  inline?: boolean
+  expandable?: boolean
+} & MaxWidthProps &
+  SystemTypographyProps &
+  SystemCommonProps &
+  SxProp
 
-const Truncate = styled('div')`
+const Truncate = styled.div<StyledTruncateProps>`
   ${TYPOGRAPHY}
   ${COMMON}
   display: ${props => (props.inline ? 'inline-block' : 'inherit')};
@@ -19,7 +29,6 @@ const Truncate = styled('div')`
 `
 
 Truncate.defaultProps = {
-  as: 'div',
   expandable: false,
   inline: false,
   maxWidth: 125,
@@ -37,4 +46,5 @@ Truncate.propTypes = {
   title: PropTypes.string.isRequired
 }
 
+export type TruncateProps = ComponentProps<typeof Truncate>
 export default Truncate
diff --git a/src/__tests__/Truncate.js → src/__tests__/Truncate.tsx b/src/__tests__/Truncate.js → src/__tests__/Truncate.tsx
diff --git a/src/__tests__/__snapshots__/Truncate.js.snap → ...__tests__/__snapshots__/Truncate.tsx.snap b/src/__tests__/__snapshots__/Truncate.js.snap → ...__tests__/__snapshots__/Truncate.tsx.snap