feat(button-link): Add inverted variant to replace the invert prop to…

… match Button

src/components/Button/Button.jsx

@@ -64,6 +64,8 @@ Button.propTypes = {
   /**
    * Whether or not to invert the variant's color scheme.
    *
+   * **Note:** Doesn't apply to `primary` variant.
+   *
    * @deprecated since v0.21.0. Create inverted buttons with the inverted variant.
    */
   invert: PropTypes.bool,

src/components/Button/Button.md

@@ -1,4 +1,4 @@
-## Minimal usage
+### Minimal usage
 
 Provide a function as the `onClick` prop to perform an action when clicked. **Avoid using a button if navigation
 is the button's primary action, as a [Link](#link) is more appropriate.**
@@ -25,15 +25,17 @@ Specify the `variant` to create a button for secondary actions.
 <Button variant="secondary">Find out more</Button>
 ```
 
-## Sizes
+### Sizes
 
 All buttons are inline, with a minimum width of 180px for screens larger than 768. They will occupy 100% width of their parent's at the small viewport and below. Resize your browser window to see this behaviour.
 
 
-## Placing buttons on dark backgrounds
+### Placing buttons on dark backgrounds
 
 Use the `inverted` button on top of a dark background (TELUS approved colours or images).
 
+Use this variant with caution. There will be accessibility issues if the colour contrast of the image and the button text is too low in the hover state.
+
 ```
 const PurpleBlock = require('../__docs__/PurpleBlock').default;
 

src/components/Link/ButtonLink/ButtonLink.jsx

@@ -6,24 +6,10 @@ 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`]
-  }
-
-  return styles[variant]
-}
-
 /**
  * <span class="docs--badge green">new!</span> <span class="docs--badge purple">v0.21.0</span>
  */
-const ButtonLink = ({ reactRouterLinkComponent, variant, invert, children, ...rest }) => {
+const ButtonLink = ({ reactRouterLinkComponent, variant, children, ...rest }) => {
   if ((reactRouterLinkComponent || rest.to) && !(reactRouterLinkComponent && rest.to)) {
     warn('Link Button', 'The props `reactRouterLinkComponent` and `to` must be used together.')
   }
@@ -32,7 +18,7 @@ const ButtonLink = ({ reactRouterLinkComponent, variant, invert, children, ...re
     reactRouterLinkComponent || 'a',
     {
       ...safeRest(rest),
-      className: getClassName(variant, invert)
+      className: styles[variant]
     },
     children
   )
@@ -42,13 +28,7 @@ ButtonLink.propTypes = {
   /**
    * The style.
    */
-  variant: PropTypes.oneOf(['primary', 'secondary', 'outlined']),
-  /**
-   * Whether or not to invert the variant's color scheme.
-   *
-   * **Note:** Doesn't apply to `primary` variant.
-   */
-  invert: PropTypes.bool,
+  variant: PropTypes.oneOf(['primary', 'secondary', 'inverted']),
   /**
    * React Router Link component.
    */

src/components/Link/ButtonLink/ButtonLink.md

@@ -16,18 +16,16 @@ By default, Buttons will be displayed in the `primary` variant. Use primary Butt
 * Make sure the button text describes an action.
 * Buttons should not be disabled.
 
-#### Placing Button Links on images
+### Placing buttons on dark backgrounds
 
-Use the `outlined` variant when placing a button on top of an image, which will cause the image to show through. You can
-also `invert` the colour scheme.
+Use the `inverted` button link on top of a dark background (TELUS approved colours or images).
 
-Use this variant with caution. There will be accessibility issues if the colour contrast of the image and the button text
-is too low, including the hover state.
+Use this variant with caution. There will be accessibility issues if the colour contrast of the image and the button text is too low in the hover state.
 
 ```
 const Hero = require('../../__docs__/Hero').default;
 
 <Hero>
-  <ButtonLink variant="outlined" invert>Advanced solutions</ButtonLink>
+  <ButtonLink variant="inverted">Advanced solutions</ButtonLink>
 </Hero>
 ```

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

@@ -1,6 +1,6 @@
 @import '../../../scss/settings/colours';
 
-$text-color: $color-white;
+$button-text-color: $color-white;
 $primary-bg-color: $color-primary;
 $secondary-bg-color: $color-secondary;
 
@@ -14,7 +14,7 @@ $secondary-bg-color: $color-secondary;
 
   &:link,
   &:visited {
-    color: $text-color;
+    color: $button-text-color;
   }
   &:hover {
     color: $primary-bg-color;
@@ -27,48 +27,22 @@ $secondary-bg-color: $color-secondary;
 
   &:link,
   &:visited {
-    color: $text-color;
+    color: $button-text-color;
   }
   &:hover {
     color: $secondary-bg-color;
   }
 }
 
-.secondaryInverted {
-  composes: secondaryInverted from '../../Button/Button.modules.scss';
+.inverted {
+  composes: inverted from '../../Button/Button.modules.scss';
   composes: base;
 
   &:link,
   &:visited {
-    color: $secondary-bg-color;
-  }
-  &:hover {
-    color: $text-color;
-  }
-}
-
-.outlined {
-  composes: outlined from '../../Button/Button.modules.scss';
-  composes: base;
-
-  &:link,
-  &:visited {
-    color: $text-color;
-  }
-  &:hover {
-    color: $color-shark;
-  }
-}
-
-.outlinedInverted {
-  composes: outlinedInverted from '../../Button/Button.modules.scss';
-  composes: base;
-
-  &:link,
-  &:visited {
-    color: $color-shark;
+    color: $color-text;
   }
   &:hover {
-    color: $text-color;
+    color: $button-text-color;
   }
 }

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

@@ -6,7 +6,9 @@ import { warn } from '../../../../warn'
 import ButtonLink from '../ButtonLink'
 
 jest.mock('../../../../warn', () => (
-  { warn: jest.fn() }
+  {
+    warn: jest.fn()
+  }
 ))
 
 describe('ButtonLink', () => {
@@ -56,23 +58,8 @@ describe('ButtonLink', () => {
     button = doShallow({ variant: 'secondary' })
     expect(button).toHaveClassName('secondary')
 
-    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 button = doShallow({ variant: 'primary', invert: true })
-
-    expect(button).toHaveClassName('primary')
-    expect(warn).toHaveBeenCalled()
+    button = doShallow({ variant: 'inverted' })
+    expect(button).toHaveClassName('inverted')
   })
 
   it('passes additional attributes to button element', () => {