feat(link): add icon to chevron link

- include test for chevron link icon
- add chevron link and link to styleguide

config/styleguide.config.js

@@ -116,7 +116,9 @@ module.exports = {
           name: 'Content',
           components() {
             return [
-              path.resolve('src/components/Card/Card.jsx')
+              path.resolve('src/components/Card/Card.jsx'),
+              path.resolve('src/components/Link/Link.jsx'),
+              path.resolve('src/components/Link/ChevronLink/ChevronLink.jsx')
             ]
           },
           sections: [
@@ -153,7 +155,7 @@ module.exports = {
               path.resolve('src/components/SelectorCounter/SelectorCounter.jsx')
             ]
           }
-        },
+        }
       ]
     }
   ],

src/components/Link/ChevronLink/ChevronLink.jsx

@@ -4,9 +4,19 @@ import PropTypes from 'prop-types';
 import { Link as ReactRouterLink } from 'react-router-dom';
 
 import safeRest from '../../../safeRest';
+import Icon from '../../Icon/Icon';
+
+import styles from './ChevronLink.modules.scss';
 
 const ChevronLink = ({ children, ...rest }) => (
-  React.createElement(rest.to ? ReactRouterLink : 'a', { ...safeRest(rest) }, children)
+  React.createElement(
+    rest.to ? ReactRouterLink : 'a',
+    { ...safeRest(rest), className: styles.link },
+    children,
+    <span className={styles.chevron}>
+      <Icon glyph="chevron" aria-hidden="true" />
+    </span>
+  )
 );
 ChevronLink.propTypes = {
   children: PropTypes.node.isRequired

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

@@ -0,0 +1,13 @@
+.link {
+  &:hover {
+    .chevron {
+      transform: translateX(0.25rem);
+    }
+  }
+}
+
+.chevron {
+  display: inline-block;
+  margin-left: 0.5rem;
+  transition: transform 300ms;
+}

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

@@ -4,6 +4,7 @@ import { shallow } from 'enzyme';
 import { MemoryRouter } from 'react-router-dom';
 
 import Link from '../../Link';
+import Icon from '../../../Icon/Icon';
 
 describe('Link.Chevron', () => {
   const doShallow = (overrides = {}) => shallow(
@@ -30,6 +31,12 @@ describe('Link.Chevron', () => {
     expect(reactRouterLink).toHaveProp('to', '/about');
   });
 
+  it('has a chevron icon', () => {
+    const link = doShallow({ href: 'https://telus.com' });
+
+    expect(link).toContainReact(<Icon glyph="chevron" aria-hidden="true" />);
+  });
+
   it('can be variants');
 
   it('passes additional attributes to the link element', () => {

src/components/Link/Link.jsx

@@ -11,7 +11,14 @@ import styles from './Link.modules.scss';
 const getClassName = invert => (invert ? styles.inverted : styles.base);
 
 const Link = ({ invert, children, ...rest }) => (
-  React.createElement(rest.to ? ReactRouterLink : 'a', { ...safeRest(rest), className: getClassName(invert) }, children)
+  React.createElement(
+    rest.to ? ReactRouterLink : 'a',
+    {
+      ...safeRest(rest),
+      className: getClassName(invert)
+    },
+    children
+  )
 );
 Link.propTypes = {
   to: PropTypes.string,