feat(Link): Initial commit of unstyled Chevron Link component.

src/components/Link/ChevronLink/ChevronLink.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Link as ReactRouterLink } from 'react-router-dom';
+
+import safeRest from '../../../safeRest';
+
+const ChevronLink = ({ children, ...rest }) => (
+  React.createElement(rest.to ? ReactRouterLink : 'a', { ...safeRest(rest) }, children)
+);
+ChevronLink.propTypes = {
+  children: PropTypes.node.isRequired
+};
+ChevronLink.displayName = 'Link.Chevron';
+
+export default ChevronLink;

src/components/Link/ChevronLink/ChevronLink.md

@@ -0,0 +1,3 @@
+```
+<Link.Chevron>Hello world</Link.Chevron>
+```

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { MemoryRouter } from 'react-router-dom';
+
+import Link from '../../Link';
+
+describe('Link.Chevron', () => {
+  const doShallow = (overrides = {}) => shallow(
+    <Link.Chevron {...overrides}>Go home</Link.Chevron>
+  );
+  const doShallowWithRouter = (overrides = {}) => shallow(
+    <MemoryRouter>
+      <Link.Chevron {...overrides}>Go home</Link.Chevron>
+    </MemoryRouter>
+  );
+
+  it('is an anchor HTML element when using the href attribute', () => {
+    const link = doShallow({ href: 'http://telus.com' });
+
+    expect(link).toHaveTagName('a');
+    expect(link).toHaveProp('href', 'http://telus.com');
+  });
+
+  it('is a React Router Link when using the to attribute', () => {
+    const link = doShallowWithRouter({ to: '/about' });
+
+    const reactRouterLink = link.find('Router').dive().dive();
+    expect(reactRouterLink).toMatchSelector('Link');
+    expect(reactRouterLink).toHaveProp('to', '/about');
+  });
+
+  it('can be variants');
+
+  it('passes additional attributes to the link element', () => {
+    const link = doShallow({ id: 'the-link', role: 'button' });
+
+    expect(link).toHaveProp('id', 'the-link');
+    expect(link).toHaveProp('role', 'button');
+  });
+
+  it('does not allow custom CSS', () => {
+    const link = doShallow({ className: 'my-custom-class', style: { color: 'hotpink' } });
+
+    expect(link).not.toHaveProp('className', 'my-custom-class');
+    expect(link).not.toHaveProp('style');
+  });
+});

src/components/Link/Link.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import { Link as ReactRouterLink } from 'react-router-dom';
 
+import ChevronLink from './ChevronLink/ChevronLink';
 import safeRest from '../../safeRest';
 
 import styles from './Link.modules.scss';
@@ -24,4 +25,6 @@ Link.defaultProps = {
   invert: false
 };
 
+Link.Chevron = ChevronLink;
+
 export default Link;

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

@@ -32,8 +32,9 @@ describe('Link', () => {
   it('is a React Router Link when using the to attribute', () => {
     const link = doShallowWithRouter({ to: '/about' });
 
-    expect(link.find('Router').dive()).toMatchSelector('Link');
-    expect(link.find('Router').dive()).toHaveProp('to', '/about');
+    const reactRouterLink = link.find('Router').dive().dive();
+    expect(reactRouterLink).toMatchSelector('Link');
+    expect(reactRouterLink).toHaveProp('to', '/about');
   });
 
   it('can be inverted', () => {
@@ -45,10 +46,10 @@ describe('Link', () => {
   });
 
   it('passes additional attributes to the link element', () => {
-    const link = doShallow({ id: 'the-button', tabindex: 1 });
+    const link = doShallow({ id: 'the-link', role: 'button' });
 
-    expect(link).toHaveProp('id', 'the-button');
-    expect(link).toHaveProp('tabindex', 1);
+    expect(link).toHaveProp('id', 'the-link');
+    expect(link).toHaveProp('role', 'button');
   });
 
   it('does not allow custom CSS', () => {