Merge pull request #567 from primer/muted-link

Add muted prop to Link.

Author: dmarcey

docs/content/Link.md

@@ -11,7 +11,9 @@ In special cases where you'd like a `<button>` styled like a `Link`, use `<Link
 ## Default example
 
 ```jsx live
-<Link mb={1} href="https://github.com">Link</Link>
+<Link mb={1} href="https://github.com">
+  Link
+</Link>
 ```
 
 ## System props
@@ -20,8 +22,9 @@ Link components get `COMMON` and `TYPOGRAPHY` system props. Read our [System Pro
 
 ## Component props
 
-| Name      | Type    | Default | Description                                 |
-| :-------- | :------ | :-----: | :------------------------------------------ |
-| href      | String  |         | URL to be used for the Link                 |
-| underline | Boolean |  false  | Adds underline to the Link                  |
-| as        | String  |   'a'   | Can be 'a', 'button', 'input', or 'summary' |
+| Name      | Type    | Default | Description                                       |
+| :-------- | :------ | :-----: | :------------------------------------------------ |
+| href      | String  |         | URL to be used for the Link                       |
+| muted     | Boolean |  false  | Uses light gray for Link color, and blue on hover |
+| underline | Boolean |  false  | Adds underline to the Link                        |
+| as        | String  |   'a'   | Can be 'a', 'button', 'input', or 'summary'       |

docs/src/@primer/gatsby-theme-doctocat/components/hero.js

@@ -1,4 +1,3 @@
-import loadable from '@loadable/component'
 import {Box, Heading, Text} from '@primer/components'
 import React from 'react'
 import {Container} from '@primer/gatsby-theme-doctocat'

index.d.ts

@@ -224,6 +224,7 @@ declare module '@primer/components' {
     extends CommonProps,
       TypographyProps,
       Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
+    muted?: boolean
     underline?: boolean
   }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "14.2.1",
+  "version": "14.3.0",
   "description": "Primer react components",
   "main": "dist/index.umd.js",
   "module": "dist/index.esm.js",

src/Link.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import {system} from 'styled-system'
-import {COMMON, TYPOGRAPHY} from './constants'
+import {COMMON, TYPOGRAPHY, get} from './constants'
 import theme from './theme'
 import elementType from './utils/elementType'
 
@@ -24,24 +24,26 @@ const hoverColor = system({
   }
 })
 
-const Link = styled.a`
+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: underline;
-    ${hoverColor};
+    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};
 `
 
 Link.defaultProps = {
-  theme,
-  color: 'blue.5'
+  theme
 }
 
 Link.propTypes = {
   as: elementType,
   href: PropTypes.string,
+  muted: PropTypes.bool,
   theme: PropTypes.object,
   underline: PropTypes.bool,
   ...TYPOGRAPHY.propTypes,

src/__tests__/Link.js

@@ -46,4 +46,12 @@ describe('Link', () => {
   it('applies button styles when rendering a button element', () => {
     expect(render(<Link as="button" />)).toMatchSnapshot()
   })
+
+  it('respectes the "muted" prop', () => {
+    expect(render(<Link muted />)).toMatchSnapshot()
+  })
+
+  it('respectes the "color" prop when "muted" prop is also passed', () => {
+    expect(render(<Link muted color="black" />)).toMatchSnapshot()
+  })
 })

src/__tests__/__snapshots__/Link.js.snap

@@ -69,6 +69,46 @@ exports[`Link renders without any props 1`] = `
 />
 `;
 
+exports[`Link respectes the "color" prop when "muted" prop is also passed 1`] = `
+.c0 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #1b1f23;
+}
+
+.c0:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #0366d6;
+}
+
+<a
+  className="c0"
+  color="black"
+  muted={true}
+/>
+`;
+
+exports[`Link respectes the "muted" prop 1`] = `
+.c0 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #586069;
+}
+
+.c0:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #0366d6;
+}
+
+<a
+  className="c0"
+  color="gray.6"
+  muted={true}
+/>
+`;
+
 exports[`Link respects hoverColor prop 1`] = `
 .c0 {
   -webkit-text-decoration: none;