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', () => {