feat(button): Add inverted variant

Also deprecate invert prop and outlined variant in favor of inverted variant.

src/components/Button/Button.jsx

@@ -1,17 +1,22 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { warn } from '../../warn'
+import { warn, deprecate } from '../../warn'
 import safeRest from '../../safeRest'
 
 import styles from './Button.modules.scss'
 
 const getClassName = (variant, invert) => {
-  if (invert && variant === 'outlined') {
+  if (variant === 'primary' && invert) {
+    warn('Button', 'Primary buttons cannot be inverted.')
+
+    return styles.primary
+  }
+
+  if (invert) {
     return styles[`${variant}Inverted`]
   }
 
-  warn('Button', `${variant} buttons cannot be inverted.`)
   return styles[variant]
 }
 
@@ -25,11 +30,19 @@ const preventDisabling = ({ disabled, ...props }) => {
 
 /**
  *
- * <span class="docs--badge green">new!</span> <span class="docs--badge purple">v0.20.0</span>
+ * <span class="docs--badge green">updated!</span> <span class="docs--badge purple">v0.21.0</span>
  */
 const Button = ({ type, variant, invert, children, ...rest }) => {
   const restNoDisabled = preventDisabling(rest)
 
+  if (invert) {
+    deprecate('Button', 'The invert prop is deprecated. Create an inverted Button with the inverted variant.')
+  }
+
+  if (variant === 'outlined') {
+    deprecate('Button', 'The outlined variant is deprecated. Create an inverted Button with the inverted variant.')
+  }
+
   return (
     <button {...safeRest(restNoDisabled)} type={type} className={getClassName(variant, invert)}>
       {children}
@@ -44,10 +57,14 @@ Button.propTypes = {
   type: PropTypes.oneOf(['button', 'submit', 'reset']),
   /**
    * The style.
+   *
+   * @since v0.21.0. Added 'inverted' to replace 'outlined'.
    */
-  variant: PropTypes.oneOf(['primary', 'secondary', 'outlined']),
+  variant: PropTypes.oneOf(['primary', 'secondary', 'outlined', 'inverted']),
   /**
    * Whether or not to invert the variant's color scheme.
+   *
+   * @deprecated since v0.21.0. Create inverted buttons with the inverted variant.
    */
   invert: PropTypes.bool,
   /**

src/components/Button/Button.md

@@ -30,14 +30,14 @@ Specify the `variant` to create a button for secondary actions.
 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 solid colours
+## Placing buttons on dark backgrounds
 
-Use the `outlined` `invert` button on top of dark background (TELUS approved colours or images).
+Use the `inverted` button on top of a dark background (TELUS approved colours or images).
 
 ```
 const PurpleBlock = require('../__docs__/PurpleBlock').default;
 
 <PurpleBlock>
-  <Button variant="outlined" invert>Get started</Button>
+  <Button variant="inverted">Get started</Button>
 </PurpleBlock>
 ```

src/components/Button/Button.modules.scss

@@ -6,7 +6,7 @@
 
 $primary-bg-color: $color-primary;
 $secondary-bg-color: $color-secondary;
-$text-color: $color-white;
+$button-text-color: $color-white;
 
 
 @mixin border {
@@ -49,26 +49,26 @@ $text-color: $color-white;
   }
 }
 
-.inverted {
-  background-color: $text-color;
+.deprecatedInverted {
+  background-color: $button-text-color;
 
   &:hover {
     @include border;
 
-    color: $text-color;
+    color: $button-text-color;
   }
 }
 
 .primary {
   composes: button;
 
   background-color: $primary-bg-color;
-  color: $text-color;
+  color: $button-text-color;
 
   &:hover {
     @include border;
 
-    background-color: $text-color;
+    background-color: $button-text-color;
     color: $primary-bg-color;
   }
 }
@@ -77,40 +77,65 @@ $text-color: $color-white;
   composes: button;
 
   background-color: $secondary-bg-color;
-  color: $text-color;
+  color: $button-text-color;
 
   &:hover {
     @include border;
 
-    background-color: $text-color;
+    background-color: $button-text-color;
     color: $secondary-bg-color;
   }
 }
 
+.secondaryInverted {
+  composes: deprecatedInverted button;
+
+  color: $secondary-bg-color;
+
+  &:hover {
+    background-color: $secondary-bg-color;
+    color: $button-text-color;
+  }
+}
+
 .outlined {
   composes: button;
 
   @include border;
 
   background-color: transparent;
-  color: $text-color;
+  color: $button-text-color;
 
   &:hover {
-    background-color: $text-color;
-    color: $color-shark;
+    background-color: $button-text-color;
+    color: $color-text;
 
     box-shadow: none;
   }
 }
 
 .outlinedInverted {
-  composes: inverted button;
+  composes: deprecatedInverted button;
+
+  color: $color-text;
+
+  &:hover {
+    @include border;
+
+    background-color: transparent;
+  }
+}
+
+.inverted {
+  composes: button;
 
-  color: $color-shark;
+  background-color: $button-text-color;
+  color: $color-text;
 
   &:hover {
     @include border;
 
     background-color: transparent;
+    color: $button-text-color;
   }
 }

src/components/Button/__tests__/Button.spec.jsx

@@ -2,12 +2,15 @@ import React from 'react'
 import { shallow } from 'enzyme'
 import toJson from 'enzyme-to-json'
 
-import { warn } from '../../../warn'
+import { warn, deprecate } from '../../../warn'
 
 import Button from '../Button'
 
 jest.mock('../../../warn', () => (
-  { warn: jest.fn() }
+  {
+    warn: jest.fn(),
+    deprecate: jest.fn()
+  }
 ))
 
 describe('Button', () => {
@@ -41,25 +44,39 @@ describe('Button', () => {
     button = doShallow({ variant: 'secondary' })
     expect(button).toHaveClassName('secondary')
 
-    button = doShallow({ variant: 'outlined' })
-    expect(button).toHaveClassName('outlined')
+    button = doShallow({ variant: 'inverted' })
+    expect(button).toHaveClassName('inverted')
   })
 
-  it('can be inverted outlined variant', () => {
-    const outlinedButton = doShallow({ variant: 'outlined', invert: true })
-    expect(outlinedButton).toHaveClassName('outlinedInverted')
-  })
+  describe('deprecated variants', () => {
+    it('deprecates the outlined variant', () => {
+      const outlinedButton = doShallow({ variant: 'outlined' })
 
-  it('can not be inverted for primary and secondary variants', () => {
-    const primaryButton = doShallow({ variant: 'primary', invert: true })
+      expect(outlinedButton).toHaveClassName('outlined')
+      expect(deprecate).toHaveBeenCalled()
+    })
 
-    expect(primaryButton).toHaveClassName('primary')
-    expect(warn).toHaveBeenCalled()
+    it('deprecates the outlined inverted variant', () => {
+      const outlinedButton = doShallow({ variant: 'outlined', invert: true })
 
-    const secondaryButton = doShallow({ variant: 'secondary', invert: true })
+      expect(outlinedButton).toHaveClassName('outlinedInverted')
+      expect(deprecate).toHaveBeenCalled()
+    })
 
-    expect(secondaryButton).toHaveClassName('secondary')
-    expect(warn).toHaveBeenCalled()
+    it('deprecates primary inverted variant', () => {
+      const primaryButton = doShallow({ variant: 'primary', invert: true })
+
+      expect(primaryButton).toHaveClassName('primary')
+      expect(warn).toHaveBeenCalled()
+      expect(deprecate).toHaveBeenCalled()
+    })
+
+    it('deprecates secondary inverted variant', () => {
+      const secondaryButton = doShallow({ variant: 'secondary', invert: true })
+
+      expect(secondaryButton).toHaveClassName('secondaryInverted')
+      expect(deprecate).toHaveBeenCalled()
+    })
   })
 
   it('can not be disabled', () => {