feat(link): add chevron link variants

- work in progress (link color)
- add tests for variants

src/components/Link/ChevronLink/ChevronLink.jsx

@@ -8,19 +8,41 @@ import Icon from '../../Icon/Icon';
 
 import styles from './ChevronLink.modules.scss';
 
-const ChevronLink = ({ children, ...rest }) => (
+const getClassName = (variant) => {
+  switch (variant) {
+    case 'secondary':
+      return styles.secondary;
+    case 'inverted':
+      return styles.inverted;
+    default:
+      return styles.primary;
+  }
+};
+
+const ChevronLink = ({ variant, children, ...rest }) => (
   React.createElement(
     rest.to ? ReactRouterLink : 'a',
-    { ...safeRest(rest), className: styles.link },
+    {
+      ...safeRest(rest),
+      className: getClassName(variant)
+    },
     children,
     <span className={styles.chevron}>
       <Icon glyph="chevron" aria-hidden="true" />
     </span>
   )
 );
 ChevronLink.propTypes = {
+  variant: PropTypes.oneOf([
+    'primary',
+    'secondary',
+    'inverted'
+  ]),
   children: PropTypes.node.isRequired
 };
+ChevronLink.defaultProps = {
+  variant: 'primary'
+};
 ChevronLink.displayName = 'Link.Chevron';
 
 export default ChevronLink;

src/components/Link/ChevronLink/ChevronLink.md

@@ -1,3 +1,3 @@
 ```
-<Link.Chevron>Hello world</Link.Chevron>
+<Link.Chevron href="https://telus.com">Go to Telus.com</Link.Chevron>
 ```

src/components/Link/ChevronLink/ChevronLink.modules.scss

@@ -1,3 +1,5 @@
+@import '../../../scss/settings/colours';
+
 .link {
   &:hover {
     .chevron {
@@ -6,6 +8,26 @@
   }
 }
 
+.primary {
+  composes: link;
+
+  &:link {
+    color: $color-primary;
+  }
+}
+
+.secondary {
+  composes: link;
+
+  color: $color-secondary;
+}
+
+.inverted {
+  composes: link;
+
+  color: $color-white;
+}
+
 .chevron {
   display: inline-block;
   margin-left: 0.5rem;

src/components/Link/ChevronLink/__tests__/ChevronLink.spec.jsx

@@ -37,7 +37,19 @@ describe('Link.Chevron', () => {
     expect(link).toContainReact(<Icon glyph="chevron" aria-hidden="true" />);
   });
 
-  it('can be variants');
+  it('can have specific variants', () => {
+    let link = doShallow({ href: 'https://telus.com' });
+    expect(link).toHaveClassName('primary');
+
+    link = doShallow({ href: 'https://telus.com', variant: 'secondary' });
+    expect(link).toHaveClassName('secondary');
+
+    link = doShallow({ href: 'https://telus.com', variant: 'primary' });
+    expect(link).toHaveClassName('primary');
+
+    link = doShallow({ href: 'https://telus.com', variant: 'inverted' });
+    expect(link).toHaveClassName('inverted');
+  });
 
   it('passes additional attributes to the link element', () => {
     const link = doShallow({ id: 'the-link', role: 'button' });