feat(link): hide icon of link component by default

components/image/image-browser.tsx

@@ -47,7 +47,7 @@ const getAddressInput = (url: string, showFullLink: boolean, colors: BrowserColo
     <span className="https">
       <ImageBrowserHttpsIcon />
     </span>
-    <Link pure href={url} title={url} target="_blank">
+    <Link href={url} title={url} target="_blank">
       {showFullLink ? url : getHostFromUrl(url)}
     </Link>
     <style jsx>{`

components/link/__tests__/index.test.tsx

@@ -10,7 +10,7 @@ describe('Link', () => {
         <Link href="https://react.zeit-ui.co" color>
           link
         </Link>
-        <Link href="https://react.zeit-ui.co" pure>
+        <Link href="https://react.zeit-ui.co" icon>
           link
         </Link>
         <Link href="https://react.zeit-ui.co" underline>

components/link/icon.tsx

@@ -1,10 +1,6 @@
 import React from 'react'
 
-interface Props {
-  color?: string
-}
-
-export const LinkIcon: React.FC<Props> = ({ color }) => {
+export const LinkIcon: React.FC<{}> = () => {
   return (
     <svg
       viewBox="0 0 24 24"
@@ -16,7 +12,6 @@ export const LinkIcon: React.FC<Props> = ({ color }) => {
       strokeLinejoin="round"
       fill="none"
       shapeRendering="geometricPrecision"
-      style={{ color }}
       className="icon">
       <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" />
       <path d="M15 3h6v6" />
@@ -27,6 +22,7 @@ export const LinkIcon: React.FC<Props> = ({ color }) => {
           margin: 0 5px;
           display: inline-flex;
           align-self: center;
+          color: currentColor;
         }
       `}</style>
     </svg>

components/link/link.tsx

@@ -1,12 +1,14 @@
 import React from 'react'
 import withDefaults from '../utils/with-defaults'
 import useTheme from '../styles/use-theme'
+import useWarning from '../utils/use-warning'
 import LinkIcon from './icon'
 
 interface Props {
   href?: string
   color?: boolean
   pure?: boolean
+  icon?: boolean
   underline?: boolean
   block?: boolean
   className?: string
@@ -16,6 +18,7 @@ const defaultProps = {
   href: '',
   color: false,
   pure: false,
+  icon: false,
   underline: false,
   block: false,
   className: '',
@@ -26,18 +29,22 @@ export type LinkProps = Props & typeof defaultProps & NativeAttrs
 
 const Link = React.forwardRef<HTMLAnchorElement, React.PropsWithChildren<LinkProps>>(
   (
-    { href, color, underline, pure, children, className, block, ...props },
+    { href, color, underline, pure, children, className, block, icon, ...props },
     ref: React.Ref<HTMLAnchorElement>,
   ) => {
     const theme = useTheme()
     const linkColor = color || block ? theme.palette.link : 'inherit'
+    const hoverColor = color || block ? theme.palette.successLight : 'inherit'
     const padding = block ? theme.layout.gapQuarter : '0'
     const decoration = underline ? 'underline' : 'none'
+    if (pure) {
+      useWarning('Props "pure" is deprecated, now the default Link is pure.')
+    }
 
     return (
       <a className={`link ${className}`} href={href} {...props} ref={ref}>
         {children}
-        {!pure && <LinkIcon color={linkColor} />}
+        {icon && <LinkIcon />}
         <style jsx>{`
           .link {
             display: inline-flex;
@@ -48,6 +55,7 @@ const Link = React.forwardRef<HTMLAnchorElement, React.PropsWithChildren<LinkPro
             padding: calc(${padding} * 0.8) calc(${padding} * 1.7);
             border-radius: ${block ? theme.layout.radius : 0};
             width: fit-content;
+            transition: color 200ms ease 0ms;
           }
 
           .link:hover,
@@ -58,6 +66,7 @@ const Link = React.forwardRef<HTMLAnchorElement, React.PropsWithChildren<LinkPro
 
           .link:hover {
             background-color: ${block ? '#0076ff1a' : 'unset'};
+            color: ${hoverColor};
           }
         `}</style>
       </a>

components/user/user-link.tsx

@@ -18,7 +18,7 @@ const UserLink = React.forwardRef<HTMLAnchorElement, React.PropsWithChildren<Use
   ({ href, className, children, ...props }, ref: React.Ref<HTMLAnchorElement>) => {
     return (
       <div className={className} {...props}>
-        <Link ref={ref} href={href} pure color target="_blank" rel="noopener">
+        <Link ref={ref} href={href} color target="_blank" rel="noopener">
           {children}
         </Link>
         <style jsx>{`