feat(link): replace invert prop in Button Link with secondaryInverted…

… and outlinedInverted variants

src/components/Link/ButtonLink/ButtonLink.jsx

@@ -1,56 +1,60 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Link as ReactRouterLink } from 'react-router-dom'
 
 import { warn } from '../../../warn'
 import safeRest from '../../../safeRest'
 
 import styles from './ButtonLink.modules.scss'
 
-const getClassName = (variant, invert) => {
-  if (variant === 'primary' && invert) {
-    warn('Link Button', 'Primary buttons cannot be inverted.')
-
-    return styles.primary
-  }
-
-  if (invert) {
-    return styles[`${variant}Inverted`]
-  }
-
+const getClassName = (variant) => {
   return styles[variant]
 }
 
 /**
  * <span class="docs--badge green">new!</span> <span class="docs--badge purple">v0.21.0</span>
  */
-const ButtonLink = ({ variant, invert, children, ...rest }) => (
-  React.createElement(
-    rest.to ? ReactRouterLink : 'a',
+const ButtonLink = ({ reactRouterLinkComponent, variant, invert, children, ...rest }) => {
+  if (!(reactRouterLinkComponent && rest.to) && (reactRouterLinkComponent || rest.to)) {
+    warn('Link Button', 'The props `reactRouterLinkComponent` and `to` must be used together.')
+  }
+
+  return React.createElement(
+
+    reactRouterLinkComponent || 'a',
     {
       ...safeRest(rest),
-      className: getClassName(variant, invert)
+      className: getClassName(variant)
     },
     children
   )
-)
+}
+
 ButtonLink.propTypes = {
   /**
    * The style.
    */
-  variant: PropTypes.oneOf(['primary', 'secondary', 'outlined']),
+  variant: PropTypes.oneOf(['primary', 'secondary', 'outlined', 'secondaryInverted', 'outlinedInverted']),
   /**
    * Whether or not to invert the variant's color scheme.
    */
   invert: PropTypes.bool,
   /**
    * The label.
    */
-  children: PropTypes.string.isRequired
+  children: PropTypes.string.isRequired,
+  /**
+   * Target URL (if using 'reactRouterLinkComponent')
+   */
+  to: PropTypes.string,
+  /**
+   * React Router Link component.
+   */
+  reactRouterLinkComponent: PropTypes.func
 }
 ButtonLink.defaultProps = {
   variant: 'primary',
-  invert: false
+  to: null,
+  reactRouterLinkComponent: null
 }
 ButtonLink.displayName = 'Link.Button'
 

src/components/Link/ButtonLink/ButtonLink.md

@@ -27,6 +27,6 @@ is too low, including the hover state.
 const Hero = require('../../__docs__/Hero').default;
 
 <Hero>
-  <Link.Button variant="outlined" invert>Advanced solutions</Link.Button>
+  <Link.Button variant="outlinedInverted" href="#">Advanced solutions</Link.Button>
 </Hero>
 ```

src/components/Link/ButtonLink/__tests__/ButtonLink.spec.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import { MemoryRouter } from 'react-router-dom'
 
 import { warn } from '../../../../warn'
 
@@ -14,11 +13,6 @@ describe('Link.Button', () => {
   const doShallow = (overrides = {}) => shallow(
     <Link.Button {...overrides}>Go home</Link.Button>
   )
-  const doShallowWithRouter = (overrides = {}) => shallow(
-    <MemoryRouter>
-      <Link.Button {...overrides}>Go home</Link.Button>
-    </MemoryRouter>
-  )
 
   it('is an anchor HTML element when using the href attribute', () => {
     const link = doShallow({ href: 'http://telus.com' })
@@ -27,12 +21,23 @@ describe('Link.Button', () => {
     expect(link).toHaveProp('href', 'http://telus.com')
   })
 
-  it('is a React Router Link when using the to attribute', () => {
-    const link = doShallowWithRouter({ to: '/about' })
+  it('renders a react router link element when passed as a prop', () => {
+    const MyLink = () => <span />
+    const link = doShallow({ reactRouterLinkComponent: MyLink })
 
-    const reactRouterLink = link.find('Router').dive().dive()
-    expect(reactRouterLink).toMatchSelector('Link')
-    expect(reactRouterLink).toHaveProp('to', '/about')
+    expect(link).toMatchSelector('MyLink')
+  })
+
+  it('must use `reactRouterLinkComponent` and `to` props together', () => {
+    const MyLink = () => <span />
+    let link = doShallow({ reactRouterLinkComponent: MyLink })
+
+    expect(warn).toHaveBeenCalled()
+
+    link = doShallow({ to: '/about' })
+
+    expect(link).toHaveProp('to')
+    expect(warn).toHaveBeenCalled()
   })
 
   it('can be presented as one of the allowed variants', () => {
@@ -47,21 +52,12 @@ describe('Link.Button', () => {
 
     button = doShallow({ variant: 'outlined' })
     expect(button).toHaveClassName('outlined')
-  })
-
-  it('can be inverted for secondary and outlined variants', () => {
-    const secondaryButton = doShallow({ variant: 'secondary', invert: true })
-    expect(secondaryButton).toHaveClassName('secondaryInverted')
 
-    const outlinedButton = doShallow({ variant: 'outlined', invert: true })
-    expect(outlinedButton).toHaveClassName('outlinedInverted')
-  })
-
-  it('can not be inverted for primary variant', () => {
-    const primaryButton = doShallow({ variant: 'primary', invert: true })
+    button = doShallow({ variant: 'secondaryInverted' })
+    expect(button).toHaveClassName('secondaryInverted')
 
-    expect(primaryButton).toHaveClassName('primary')
-    expect(warn).toHaveBeenCalled()
+    button = doShallow({ variant: 'outlinedInverted' })
+    expect(button).toHaveClassName('outlinedInverted')
   })
 
   it('passes additional attributes to button element', () => {