diff --git a/src/components/Button/Button.jsx b/src/components/Button/Button.jsx index 53c1cae581..5e542aa70a 100644 --- a/src/components/Button/Button.jsx +++ b/src/components/Button/Button.jsx @@ -6,7 +6,7 @@ import safeRest from '../../safeRest' import styles from './Button.modules.scss' -export const getClassName = (variant, invert) => { +const getClassName = (variant, invert) => { if (variant === 'primary' && invert) { warn('Button', 'Primary buttons cannot be inverted.') @@ -20,7 +20,7 @@ export const getClassName = (variant, invert) => { return styles[variant] } -export const preventDisabling = ({ disabled, ...props }) => { +const preventDisabling = ({ disabled, ...props }) => { if (disabled) { warn('Button', 'Buttons are not able to be disabled.') } diff --git a/src/components/Link/ButtonLink/ButtonLink.jsx b/src/components/Link/ButtonLink/ButtonLink.jsx index 63e32c7d8b..d13ee6b371 100644 --- a/src/components/Link/ButtonLink/ButtonLink.jsx +++ b/src/components/Link/ButtonLink/ButtonLink.jsx @@ -1,26 +1,39 @@ import React from 'react' import PropTypes from 'prop-types' - import { Link as ReactRouterLink } from 'react-router-dom' +import { warn } from '../../../warn' import safeRest from '../../../safeRest' -import { getClassName, preventDisabling } from '../../Button/Button' + +import styles from './ButtonLink.modules.scss' + +const getClassName = (variant, invert) => { + if (variant === 'primary' && invert) { + warn('Button', 'Primary buttons cannot be inverted.') + + return styles.primary + } + + if (invert) { + return styles[`${variant}Inverted`] + } + + return styles[variant] +} /** * new! v0.21.0 */ -const ButtonLink = ({ variant, invert, children, ...rest }) => { - const restNoDisabled = preventDisabling(rest) - - return React.createElement( +const ButtonLink = ({ variant, invert, children, ...rest }) => ( + React.createElement( rest.to ? ReactRouterLink : 'a', { - ...safeRest(restNoDisabled), + ...safeRest(rest), className: getClassName(variant, invert) }, children ) -} +) ButtonLink.propTypes = { /** * The style. diff --git a/src/components/Link/ButtonLink/ButtonLink.modules.scss b/src/components/Link/ButtonLink/ButtonLink.modules.scss new file mode 100644 index 0000000000..5ef2d5aa83 --- /dev/null +++ b/src/components/Link/ButtonLink/ButtonLink.modules.scss @@ -0,0 +1,17 @@ +@import '../../Button/Button.modules.scss'; + +.button { + composes: button from '../../Button/Button.modules.scss'; +} + +.primary { + &:visited { + color: inherit; + } +} + +.inverted { + &:visited { + color: $text-color; + } +} diff --git a/src/components/Link/ButtonLink/__tests__/ButtonLink.spec.jsx b/src/components/Link/ButtonLink/__tests__/ButtonLink.spec.jsx index 3ae2e7c677..f70adec72d 100644 --- a/src/components/Link/ButtonLink/__tests__/ButtonLink.spec.jsx +++ b/src/components/Link/ButtonLink/__tests__/ButtonLink.spec.jsx @@ -58,16 +58,9 @@ describe('Link.Button', () => { }) it('can not be inverted for primary variant', () => { - const button = doShallow({ variant: 'primary', invert: true }) + const primaryButton = doShallow({ variant: 'primary', invert: true }) - expect(button).toHaveClassName('primary') - expect(warn).toHaveBeenCalled() - }) - - it('can not be disabled', () => { - const button = doShallow({ disabled: true }) - - expect(button).not.toHaveProp('disabled') + expect(primaryButton).toHaveClassName('primary') expect(warn).toHaveBeenCalled() }) diff --git a/src/components/Link/ChevronLink/ChevronLink.md b/src/components/Link/ChevronLink/ChevronLink.md index ec2effce9f..0a5379b066 100644 --- a/src/components/Link/ChevronLink/ChevronLink.md +++ b/src/components/Link/ChevronLink/ChevronLink.md @@ -36,7 +36,7 @@ const PurpleBlock = require('../../__docs__/PurpleBlock').default; ### Using Chevron Link for navigation in a multi-step operation -Chevron Link can be used as a "back" button by specifying the `direction`. +Chevron Link can be used as a "back" button by specifying the `direction`. These are not suitable for breadcrumb navigation due to the chevron's hover animation. ``` Plans