fix(link): remove disable function for anchors

- add custom styles wip

src/components/Button/Button.jsx

@@ -6,7 +6,7 @@ import safeRest from '../../safeRest'
 
 import styles from './Button.modules.scss'
 
-export const getClassName = (variant, invert) => {
+const getClassName = (variant, invert) => {
   if (variant === 'primary' && invert) {
     warn('Button', 'Primary buttons cannot be inverted.')
 
@@ -20,7 +20,7 @@ export const getClassName = (variant, invert) => {
   return styles[variant]
 }
 
-export const preventDisabling = ({ disabled, ...props }) => {
+const preventDisabling = ({ disabled, ...props }) => {
   if (disabled) {
     warn('Button', 'Buttons are not able to be disabled.')
   }

src/components/Link/ButtonLink/ButtonLink.jsx

@@ -1,26 +1,39 @@
 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 { getClassName, preventDisabling } from '../../Button/Button'
+
+import styles from './ButtonLink.modules.scss'
+
+const getClassName = (variant, invert) => {
+  if (variant === 'primary' && invert) {
+    warn('Button', 'Primary buttons cannot be inverted.')
+
+    return styles.primary
+  }
+
+  if (invert) {
+    return styles[`${variant}Inverted`]
+  }
+
+  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 }) => {
-  const restNoDisabled = preventDisabling(rest)
-
-  return React.createElement(
+const ButtonLink = ({ variant, invert, children, ...rest }) => (
+  React.createElement(
     rest.to ? ReactRouterLink : 'a',
     {
-      ...safeRest(restNoDisabled),
+      ...safeRest(rest),
       className: getClassName(variant, invert)
     },
     children
   )
-}
+)
 ButtonLink.propTypes = {
   /**
    * The style.

src/components/Link/ButtonLink/ButtonLink.modules.scss

@@ -0,0 +1,17 @@
+@import '../../Button/Button.modules.scss';
+
+.button {
+  composes: button from '../../Button/Button.modules.scss';
+}
+
+.primary {
+  &:visited {
+    color: inherit;
+  }
+}
+
+.inverted {
+  &:visited {
+    color: $text-color;
+  }
+}

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

@@ -58,16 +58,9 @@ describe('Link.Button', () => {
   })
 
   it('can not be inverted for primary variant', () => {
-    const button = doShallow({ variant: 'primary', invert: true })
+    const primaryButton = doShallow({ variant: 'primary', invert: true })
 
-    expect(button).toHaveClassName('primary')
-    expect(warn).toHaveBeenCalled()
-  })
-
-  it('can not be disabled', () => {
-    const button = doShallow({ disabled: true })
-
-    expect(button).not.toHaveProp('disabled')
+    expect(primaryButton).toHaveClassName('primary')
     expect(warn).toHaveBeenCalled()
   })
 

src/components/Link/ChevronLink/ChevronLink.md

@@ -36,7 +36,7 @@ const PurpleBlock = require('../../__docs__/PurpleBlock').default;
 
 ### Using Chevron Link for navigation in a multi-step operation
 
-Chevron Link can be used as a "back" button by specifying the `direction`.
+Chevron Link can be used as a "back" button by specifying the `direction`. These are not suitable for breadcrumb navigation due to the chevron's hover animation.
 
 ```
 <Link.Chevron href="http://tds.telus.com" direction="left">Plans</Link.Chevron>