feat(link): replace invert prop with inverted variant

telus · Aug 18, 2017 · b1054fe · b1054fe
1 parent 510f4ba
commit b1054fe
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 11 deletions.
diff --git a/src/components/Link/Link.jsx b/src/components/Link/Link.jsx
@@ -8,20 +8,23 @@ import { warn } from '../../warn'
 
 import styles from './Link.modules.scss'
 
-const getClassName = invert => (invert ? styles.inverted : styles.base)
+const getClassName = (variant) => {
+  return styles[variant]
+}
 
 /**
  * <span class="docs--badge green">new!</span> <span class="docs--badge purple">v0.21.0</span>
  */
-const Link = ({ reactRouterLinkComponent, invert, children, ...rest }) => {
-  if (!(reactRouterLinkComponent && rest.to)) {
+const Link = ({ reactRouterLinkComponent, variant, children, ...rest }) => {
+  if (!(reactRouterLinkComponent && rest.to) && (reactRouterLinkComponent || rest.to)) {
     warn('Link', 'The props `reactRouterLinkComponent` and `to` must be used together.')
   }
+
   return React.createElement(
     reactRouterLinkComponent || 'a',
     {
       ...safeRest(rest),
-      className: getClassName(invert)
+      className: getClassName(variant)
     },
     children
   )
@@ -40,9 +43,12 @@ Link.propTypes = {
    */
   reactRouterLinkComponent: PropTypes.func,
   /**
-   * Whether to invert the component styles.
+   * The style variations.
    */
-  invert: PropTypes.bool,
+  variant: PropTypes.oneOf([
+    'base',
+    'inverted'
+  ]),
   /**
    * Link text.
    */
@@ -52,7 +58,7 @@ Link.defaultProps = {
   to: null,
   href: null,
   reactRouterLinkComponent: null,
-  invert: false
+  variant: 'base'
 }
 
 Link.Chevron = ChevronLink

diff --git a/src/components/Link/Link.md b/src/components/Link/Link.md
@@ -15,7 +15,7 @@
 const PurpleBlock = require('../__docs__/PurpleBlock').default;
 
 <PurpleBlock>
-  <Link href="https://www.telus.com" invert>Go to TELUS.com</Link>
+  <Link href="https://www.telus.com" variant="inverted">Go to TELUS.com</Link>
 </PurpleBlock>
 ```
 

diff --git a/src/components/Link/__tests__/Link.spec.jsx b/src/components/Link/__tests__/Link.spec.jsx
@@ -47,11 +47,11 @@ describe('Link', () => {
   })
 
   it('can be inverted', () => {
-    let link = doShallow({ invert: true })
+    let link = doShallow({ variant: 'inverted' })
     expect(link).toHaveClassName('inverted')
 
-    link = doShallow({ invert: false })
-    expect(link).not.toHaveClassName('inverted')
+    link = doShallow({ variant: 'base' })
+    expect(link).toHaveClassName('base')
   })
 
   it('passes additional attributes to the link element', () => {