Merge pull request #299 from primer/release-3.0.1

Release PR for 3.0.1.-beta

Author: Emily

package.json

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

src/Link.js

@@ -1,11 +1,26 @@
 import PropTypes from 'prop-types'
 import styled from 'react-emotion'
 import {withSystemProps, TYPOGRAPHY} from './system-props'
+import theme from './theme'
+import {themeGet, get} from 'styled-system'
+
+const getHoverColor = (hoverColor = 'blue.4') => {
+  const path = `colors.${hoverColor}`
+  const fallback = get(theme, path)
+  return themeGet(path, fallback)
+}
+
+const hoverStyles = ({...rest}) => {
+  return {
+    color: getHoverColor(rest.hoverColor)(rest)
+  }
+}
 
 const styledLink = styled('a')`
   text-decoration: ${props => (props.underline ? 'underline' : 'none')};
   &:hover {
     text-decoration: underline;
+    ${hoverStyles};
   }
 `
 

src/__tests__/Link.js

@@ -24,4 +24,8 @@ describe('Link', () => {
   it('renders without any props', () => {
     expect(render(<Link />)).toMatchSnapshot()
   })
+
+  it('respects hoverColor prop', () => {
+    expect(render(<Link hoverColor="blue.4" />)).toMatchSnapshot()
+  })
 })

src/__tests__/__snapshots__/Link.js.snap

@@ -10,6 +10,7 @@ exports[`Link passes href down to link element 1`] = `
 .emotion-0:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
+  color: #2188ff;
 }
 
 <a
@@ -29,6 +30,26 @@ exports[`Link renders without any props 1`] = `
 .emotion-0:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
+  color: #2188ff;
+}
+
+<a
+  className="emotion-0"
+  color="blue.5"
+/>
+`;
+
+exports[`Link respects hoverColor prop 1`] = `
+.emotion-0 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #0366d6;
+}
+
+.emotion-0:hover {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  color: #2188ff;
 }
 
 <a

src/theme.js

@@ -58,7 +58,7 @@ const theme = {
     large: '0 1px 15px rgba(27, 31, 35, 0.15)',
     'extra-large': '0 10px 50px rgba(27, 31, 35, 0.07)'
   },
-  space: [0, 4, 8, 16, 24, 32, 40, 48]
+  space: [0, 4, 8, 16, 24, 32, 40, 48, 64, 80, 96, 112, 128]
 }
 
 export default theme