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 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..db07b254373 100644 --- a/src/Truncate.js +++ b/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` ${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 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