From e818a8eecd3ee5c9385b0f0c92e112263cd388ca Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Wed, 3 Feb 2021 10:18:51 -0600 Subject: [PATCH 1/4] convert link component to typescript --- src/Link.js | 56 ---------------------------------------- src/Link.tsx | 73 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 73 insertions(+), 56 deletions(-) delete mode 100644 src/Link.js create mode 100644 src/Link.tsx 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..62e6420fb96 --- /dev/null +++ b/src/Link.tsx @@ -0,0 +1,73 @@ +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 LinkBaseProps = { + as?: React.ReactNode; + href?: string; + hoverColor?: string; + muted?: boolean; + underline?: boolean; +} & SystemCommonProps & SxProp & SystemTypographyProps + +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 linkColor = ({color, muted, ...props}: LinkBaseProps) => ({ + color: color ? color : muted ? 'gray.6' : 'blue.5' +}) + +const textDecoration = ({underline, ...props}: LinkBaseProps) => underline ? 'underline' : 'none' +const hoverCss = ({hoverColor, muted, ...props}: LinkBaseProps) => hoverColor ? hoverColor : muted ? `color: ${get('colors.blue.5')(theme)}` : '' +const buttonCss = ({as, ...props}: LinkBaseProps) => as === 'button' ? buttonStyles : '' + +const Link = styled.a.attrs(linkColor)` + text-decoration: ${textDecoration}; + &:hover { + text-decoration: ${textDecoration}; + ${hoverCss}; + } + ${buttonCss}; + ${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 type LinkProps = ComponentProps +export default Link \ No newline at end of file From 2e71f70f2113de273b9c41a667f2fc9b539a01de Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Wed, 3 Feb 2021 13:29:59 -0600 Subject: [PATCH 2/4] Add change set for migrating Link component to TSX --- .changeset/yellow-mice-whisper.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/yellow-mice-whisper.md 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 From 580425e527e13e9249504ba433f87e3ebf0a949e Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Wed, 3 Feb 2021 13:48:37 -0600 Subject: [PATCH 3/4] further revisions to migrate Link to TS --- src/Link.tsx | 66 ++++++++++++++++++++++++---------------------------- 1 file changed, 30 insertions(+), 36 deletions(-) diff --git a/src/Link.tsx b/src/Link.tsx index 62e6420fb96..e83da0c9472 100644 --- a/src/Link.tsx +++ b/src/Link.tsx @@ -3,29 +3,30 @@ 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 sx, {SxProp} from './sx' import theme from './theme' -import { ComponentProps } from './utils/types'; +import {ComponentProps} from './utils/types' -type LinkBaseProps = { - as?: React.ReactNode; - href?: string; - hoverColor?: string; - muted?: boolean; - underline?: boolean; -} & SystemCommonProps & SxProp & SystemTypographyProps +type StyledLinkProps = { + as?: any + hoverColor?: string + muted?: boolean + underline?: boolean +} & SystemCommonProps & + SxProp & + SystemTypographyProps -const buttonStyles = { - display: 'inline-block', - padding: '0', - fontSize: 'inherit', - whiteSpace: 'nowrap', - cursor: 'pointer', - userSelect: 'none', - backgroundColor: 'transparent', - border: '0', - appearance: 'none' -} +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: { @@ -34,31 +35,24 @@ const hoverColor = system({ } }) -const linkColor = ({color, muted, ...props}: LinkBaseProps) => ({ +const Link = styled.a.attrs(({color, muted}) => ({ color: color ? color : muted ? 'gray.6' : 'blue.5' -}) - -const textDecoration = ({underline, ...props}: LinkBaseProps) => underline ? 'underline' : 'none' -const hoverCss = ({hoverColor, muted, ...props}: LinkBaseProps) => hoverColor ? hoverColor : muted ? `color: ${get('colors.blue.5')(theme)}` : '' -const buttonCss = ({as, ...props}: LinkBaseProps) => as === 'button' ? buttonStyles : '' - -const Link = styled.a.attrs(linkColor)` - text-decoration: ${textDecoration}; +}))` + text-decoration: ${({underline}) => (underline ? 'underline' : 'none')}; &:hover { - text-decoration: ${textDecoration}; - ${hoverCss}; + text-decoration: ${({underline}) => (underline ? 'underline' : 'none')}; + ${({hoverColor, muted}) => (hoverColor ? hoverColor : muted ? `color: ${get('colors.blue.5')(theme)}` : '')}; } - ${buttonCss}; - ${TYPOGRAPHY} ${COMMON}; + ${({as}) => (as === 'button' ? buttonStyles : '')}; + ${TYPOGRAPHY}; + ${COMMON}; ${sx}; ` - Link.defaultProps = { theme } Link.propTypes = { - as: PropTypes.elementType, hoverColor: PropTypes.string, href: PropTypes.string, muted: PropTypes.bool, @@ -70,4 +64,4 @@ Link.propTypes = { } export type LinkProps = ComponentProps -export default Link \ No newline at end of file +export default Link From 506a36d4b96511c6d8ddb4fd738a341dcca3771d Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Wed, 3 Feb 2021 14:17:13 -0600 Subject: [PATCH 4/4] update link test snapshots --- src/Link.tsx | 25 ++-- src/__tests__/{Link.js => Link.tsx} | 0 .../{Link.js.snap => Link.tsx.snap} | 114 +++++++++++++++--- src/__tests__/__snapshots__/SideNav.js.snap | 20 ++- 4 files changed, 134 insertions(+), 25 deletions(-) rename src/__tests__/{Link.js => Link.tsx} (100%) rename src/__tests__/__snapshots__/{Link.js.snap => Link.tsx.snap} (53%) diff --git a/src/Link.tsx b/src/Link.tsx index e83da0c9472..530d133d143 100644 --- a/src/Link.tsx +++ b/src/Link.tsx @@ -8,7 +8,6 @@ import theme from './theme' import {ComponentProps} from './utils/types' type StyledLinkProps = { - as?: any hoverColor?: string muted?: boolean underline?: boolean @@ -35,19 +34,29 @@ const hoverColor = system({ } }) -const Link = styled.a.attrs(({color, muted}) => ({ - color: color ? color : muted ? 'gray.6' : 'blue.5' -}))` - text-decoration: ${({underline}) => (underline ? 'underline' : 'none')}; +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: ${({underline}) => (underline ? 'underline' : 'none')}; - ${({hoverColor, muted}) => (hoverColor ? hoverColor : muted ? `color: ${get('colors.blue.5')(theme)}` : '')}; + 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; } - ${({as}) => (as === 'button' ? buttonStyles : '')}; ${TYPOGRAPHY}; ${COMMON}; ${sx}; ` + Link.defaultProps = { theme } 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; }