Merge pull request #1011 from primer/VanAnderson/convert-link-component

convert link component to typescript
primer · Feb 3, 2021 · 2047322 · 2047322 · vercel · Feb 3, 2021
2 parents db7925d + 2215a70
commit 2047322
Show file tree

Hide file tree

Showing 6 changed files with 198 additions and 73 deletions.
diff --git a/.changeset/yellow-mice-whisper.md 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
diff --git a/src/Link.tsx 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<StyledLinkProps>`
+  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<typeof Link>
+export default Link
diff --git a/src/__tests__/Link.js → src/__tests__/Link.tsx b/src/__tests__/Link.js → src/__tests__/Link.tsx
diff --git a/src/__tests__/__snapshots__/Link.js.snap → src/__tests__/__snapshots__/Link.tsx.snap b/src/__tests__/__snapshots__/Link.js.snap → 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,59 +27,85 @@ 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;
 }
 
 <button
   className="c0"
-  color="blue.5"
 />
 `;
 
 exports[`Link passes href down to link element 1`] = `
 .c0 {
+  color: #0366d6;
   -webkit-text-decoration: none;
   text-decoration: none;
-  color: #0366d6;
 }
 
 .c0:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
+.c0:is(button) {
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
 <a
   className="c0"
-  color="blue.5"
   href="https://github.com"
 />
 `;
 
 exports[`Link renders consistently 1`] = `
 .c0 {
+  color: #0366d6;
   -webkit-text-decoration: none;
   text-decoration: none;
-  color: #0366d6;
 }
 
 .c0:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
+.c0:is(button) {
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
 <a
   className="c0"
-  color="blue.5"
 />
 `;
 
 exports[`Link respectes the "color" prop when "muted" prop is also passed 1`] = `
 .c0 {
+  color: #586069;
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #1b1f23;
@@ -82,6 +117,23 @@ exports[`Link respectes the "color" prop when "muted" prop is also passed 1`] =
   color: #0366d6;
 }
 
+.c0:is(button) {
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
 <a
   className="c0"
   color="black"
@@ -91,9 +143,9 @@ exports[`Link respectes the "color" prop when "muted" prop is also passed 1`] =
 
 exports[`Link respectes the "muted" prop 1`] = `
 .c0 {
+  color: #586069;
   -webkit-text-decoration: none;
   text-decoration: none;
-  color: #586069;
 }
 
 .c0:hover {
@@ -102,18 +154,34 @@ exports[`Link respectes the "muted" prop 1`] = `
   color: #0366d6;
 }
 
+.c0:is(button) {
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
 <a
   className="c0"
-  color="gray.6"
   muted={true}
 />
 `;
 
 exports[`Link respects hoverColor prop 1`] = `
 .c0 {
+  color: #0366d6;
   -webkit-text-decoration: none;
   text-decoration: none;
-  color: #0366d6;
 }
 
 .c0:hover {
@@ -122,8 +190,24 @@ exports[`Link respects hoverColor prop 1`] = `
   color: #2188ff;
 }
 
+.c0:is(button) {
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
 <a
   className="c0"
-  color="blue.5"
 />
 `;
diff --git a/src/__tests__/__snapshots__/SideNav.js.snap b/src/__tests__/__snapshots__/SideNav.js.snap
@@ -2,9 +2,9 @@
 
 exports[`SideNav SideNav.Link renders consistently 1`] = `
 .c0 {
+  color: #0366d6;
   -webkit-text-decoration: none;
   text-decoration: none;
-  color: #0366d6;
   position: relative;
   display: block;
   width: 100%;
@@ -17,6 +17,23 @@ exports[`SideNav SideNav.Link renders consistently 1`] = `
   text-decoration: underline;
 }
 
+.c0:is(button) {
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
 .c0 > .c1 {
   border-bottom: none;
 }
@@ -94,7 +111,6 @@ exports[`SideNav SideNav.Link renders consistently 1`] = `
 
 <a
   className="c0"
-  color="blue.5"
 />
 `;