From 4eefd10e7866ff82974c08243ff09e42cc4681b4 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Fri, 29 Jan 2021 16:00:32 -0800
Subject: [PATCH 1/3] =?UTF-8?q?Truncate.js=20=E2=86=92=20Truncate.tsx?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/{Truncate.js => Truncate.tsx}             | 20 ++++++++++++++-----
 src/__tests__/{Truncate.js => Truncate.tsx}   |  0
 .../{Truncate.js.snap => Truncate.tsx.snap}   |  0
 3 files changed, 15 insertions(+), 5 deletions(-)
 rename src/{Truncate.js => Truncate.tsx} (61%)
 rename src/__tests__/{Truncate.js => Truncate.tsx} (100%)
 rename src/__tests__/__snapshots__/{Truncate.js.snap => Truncate.tsx.snap} (100%)

diff --git a/src/Truncate.js b/src/Truncate.tsx
similarity index 61%
rename from src/Truncate.js
rename to src/Truncate.tsx
index f817301a106..b773a1d1d95 100644
--- a/src/Truncate.js
+++ b/src/Truncate.tsx
@@ -1,11 +1,21 @@
 import styled from 'styled-components'
-import {maxWidth} from 'styled-system'
+import {maxWidth, MaxWidthProps} from 'styled-system'
 import PropTypes from 'prop-types'
-import {TYPOGRAPHY, COMMON} from './constants'
+import {TYPOGRAPHY, COMMON, SystemTypographyProps, SystemCommonProps} from './constants'
 import theme from './theme'
-import sx from './sx'
+import sx, {SxProp} from './sx'
+import {ComponentProps} from './utils/types'
 
-const Truncate = styled('div')`
+type StyledTruncateProps = {
+  title: string
+  inline?: boolean
+  expandable?: boolean
+} & MaxWidthProps &
+  SystemTypographyProps &
+  SystemCommonProps &
+  SxProp
+
+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 b/src/__tests__/Truncate.tsx
similarity index 100%
rename from src/__tests__/Truncate.js
rename to src/__tests__/Truncate.tsx
diff --git a/src/__tests__/__snapshots__/Truncate.js.snap b/src/__tests__/__snapshots__/Truncate.tsx.snap
similarity index 100%
rename from src/__tests__/__snapshots__/Truncate.js.snap
rename to src/__tests__/__snapshots__/Truncate.tsx.snap

From 8e10abebcc6c327dfc2b552cf23da9cd12a73103 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Fri, 29 Jan 2021 16:01:45 -0800
Subject: [PATCH 2/3] Order imports

---
 src/Truncate.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Truncate.tsx b/src/Truncate.tsx
index b773a1d1d95..db07b254373 100644
--- a/src/Truncate.tsx
+++ b/src/Truncate.tsx
@@ -1,9 +1,9 @@
+import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import {maxWidth, MaxWidthProps} from 'styled-system'
-import PropTypes from 'prop-types'
-import {TYPOGRAPHY, COMMON, SystemTypographyProps, SystemCommonProps} from './constants'
-import theme from './theme'
+import {COMMON, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
 import sx, {SxProp} from './sx'
+import theme from './theme'
 import {ComponentProps} from './utils/types'
 
 type StyledTruncateProps = {

From b0cea82e27e72f2bd351c14721e0d70343c98ebd Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Fri, 29 Jan 2021 16:21:57 -0800
Subject: [PATCH 3/3] Add changeset

---
 .changeset/eleven-days-hope.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/eleven-days-hope.md

diff --git a/.changeset/eleven-days-hope.md b/.changeset/eleven-days-hope.md
new file mode 100644
index 00000000000..56c3ed395d0
--- /dev/null
+++ b/.changeset/eleven-days-hope.md
@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Migrate `Truncate` to TypeScript