diff --git a/src/components/Link/Link.jsx b/src/components/Link/Link.jsx
index cbee5ccb32..3954cfae82 100644
--- 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]
+}
/**
* new! v0.21.0
*/
-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
index 1b8a653e7f..4cdd933dfc 100644
--- a/src/components/Link/Link.md
+++ b/src/components/Link/Link.md
@@ -15,7 +15,7 @@
const PurpleBlock = require('../__docs__/PurpleBlock').default;
- Go to TELUS.com
+ Go to TELUS.com
```
diff --git a/src/components/Link/__tests__/Link.spec.jsx b/src/components/Link/__tests__/Link.spec.jsx
index 166f4553e9..9c3e80673e 100644
--- 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', () => {