diff --git a/.changeset/yellow-mice-whisper.md b/.changeset/yellow-mice-whisper.md new file mode 100644 index 00000000000..2076175ebe0 --- /dev/null +++ b/.changeset/yellow-mice-whisper.md @@ -0,0 +1,5 @@ +--- +"@primer/components": patch +--- + +Migrate `Link` to TypeScript diff --git a/src/Link.js b/src/Link.js deleted file mode 100644 index 3914cb77147..00000000000 --- a/src/Link.js +++ /dev/null @@ -1,56 +0,0 @@ -import PropTypes from 'prop-types' -import styled from 'styled-components' -import {system} from 'styled-system' -import {COMMON, TYPOGRAPHY, get} from './constants' -import theme from './theme' -import sx from './sx' - -const buttonStyles = { - display: 'inline-block', - padding: '0', - fontSize: 'inherit', - whiteSpace: 'nowrap', - cursor: 'pointer', - userSelect: 'none', - backgroundColor: 'transparent', - border: '0', - appearance: 'none' -} - -const hoverColor = system({ - hoverColor: { - property: 'color', - scale: 'colors' - } -}) - -const Link = styled.a.attrs(props => ({ - color: props.color ? props.color : props.muted ? 'gray.6' : 'blue.5' -}))` - text-decoration: ${props => (props.underline ? 'underline' : 'none')}; - &:hover { - text-decoration: ${props => (props.muted ? 'none' : 'underline')}; - ${props => (props.hoverColor ? hoverColor : props.muted ? `color: ${get('colors.blue.5')(theme)}` : '')}; - } - ${props => (props.as === 'button' ? buttonStyles : '')}; - ${TYPOGRAPHY} ${COMMON}; - ${sx}; -` - -Link.defaultProps = { - theme -} - -Link.propTypes = { - as: PropTypes.elementType, - hoverColor: PropTypes.string, - href: PropTypes.string, - muted: PropTypes.bool, - theme: PropTypes.object, - underline: PropTypes.bool, - ...TYPOGRAPHY.propTypes, - ...COMMON.propTypes, - ...sx.propTypes -} - -export default Link diff --git a/src/Link.tsx b/src/Link.tsx new file mode 100644 index 00000000000..530d133d143 --- /dev/null +++ b/src/Link.tsx @@ -0,0 +1,76 @@ +import React from 'react' +import PropTypes from 'prop-types' +import styled from 'styled-components' +import {system} from 'styled-system' +import {COMMON, TYPOGRAPHY, get, SystemCommonProps, SystemTypographyProps} from './constants' +import sx, {SxProp} from './sx' +import theme from './theme' +import {ComponentProps} from './utils/types' + +type StyledLinkProps = { + hoverColor?: string + muted?: boolean + underline?: boolean +} & SystemCommonProps & + SxProp & + SystemTypographyProps + +const buttonStyles = ` + display: inline-block; + padding: 0; + font-size: inherit; + white-space: nowrap; + cursor: pointer; + user-select: none; + background-color: transparent; + border: 0; + appearance: none; +` + +const hoverColor = system({ + hoverColor: { + property: 'color', + scale: 'colors' + } +}) + +const Link = styled.a` + color: ${props => (props.muted ? get('colors.gray.6')(props) : get('colors.blue.5')(props))}; + text-decoration: ${props => (props.underline ? 'underline' : 'none')}; + &:hover { + text-decoration: ${props => (props.muted ? 'none' : 'underline')}; + ${props => (props.hoverColor ? hoverColor : props.muted ? `color: ${get('colors.blue.5')(props)}` : '')}; + } + &:is(button) { + display: inline-block; + padding: 0; + font-size: inherit; + white-space: nowrap; + cursor: pointer; + user-select: none; + background-color: transparent; + border: 0; + appearance: none; + } + ${TYPOGRAPHY}; + ${COMMON}; + ${sx}; +` + +Link.defaultProps = { + theme +} + +Link.propTypes = { + hoverColor: PropTypes.string, + href: PropTypes.string, + muted: PropTypes.bool, + theme: PropTypes.object, + underline: PropTypes.bool, + ...TYPOGRAPHY.propTypes, + ...COMMON.propTypes, + ...sx.propTypes +} + +export type LinkProps = ComponentProps +export default Link diff --git a/src/__tests__/Link.js b/src/__tests__/Link.tsx similarity index 100% rename from src/__tests__/Link.js rename to src/__tests__/Link.tsx diff --git a/src/__tests__/__snapshots__/Link.js.snap b/src/__tests__/__snapshots__/Link.tsx.snap similarity index 53% rename from src/__tests__/__snapshots__/Link.js.snap rename to src/__tests__/__snapshots__/Link.tsx.snap index 063e32b42a8..bc7ae14f85f 100644 --- a/src/__tests__/__snapshots__/Link.js.snap +++ b/src/__tests__/__snapshots__/Link.tsx.snap @@ -2,8 +2,17 @@ exports[`Link applies button styles when rendering a button element 1`] = ` .c0 { + color: #0366d6; -webkit-text-decoration: none; text-decoration: none; +} + +.c0:hover { + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c0:is(button) { display: inline-block; padding: 0; font-size: inherit; @@ -18,25 +27,18 @@ exports[`Link applies button styles when rendering a button element 1`] = ` -webkit-appearance: none; -moz-appearance: none; appearance: none; - color: #0366d6; -} - -.c0:hover { - -webkit-text-decoration: underline; - text-decoration: underline; }