From b5469e3a1e0453500735e674b19bce74b7c636f6 Mon Sep 17 00:00:00 2001
From: Enrico <enrico.sacchetti@telus.com>
Date: Mon, 14 Aug 2017 11:23:15 -0400
Subject: [PATCH] feat(link): add logic for left-facing chevron wip

---
 .../Link/ChevronLink/ChevronLink.jsx          | 26 +++++++++++++++----
 .../Link/ChevronLink/ChevronLink.modules.scss |  3 +++
 .../__tests__/ChevronLink.spec.jsx            |  6 +++++
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/components/Link/ChevronLink/ChevronLink.jsx b/src/components/Link/ChevronLink/ChevronLink.jsx
index 62f7d238dc..9def88c80a 100644
--- a/src/components/Link/ChevronLink/ChevronLink.jsx
+++ b/src/components/Link/ChevronLink/ChevronLink.jsx
@@ -19,17 +19,28 @@ const getClassName = (variant) => {
   }
 };
 
-const ChevronLink = ({ variant, children, ...rest }) => (
+const getIcon = (direction) => {
+  if (direction === 'left') {
+    return (<span className={styles.chevron}>
+      <Icon glyph="chevron" aria-hidden="true" />
+    </span>)
+  }
+
+  return (<span className={styles.chevron}>
+    <Icon glyph="chevron" aria-hidden="true" />
+  </span>)
+};
+
+const ChevronLink = ({ variant, direction, children, ...rest }) => (
   React.createElement(
     rest.to ? ReactRouterLink : 'a',
     {
       ...safeRest(rest),
       className: getClassName(variant)
     },
+    direction === 'left' ? getIcon(direction) : undefined,
     children,
-    <span className={styles.chevron}>
-      <Icon glyph="chevron" aria-hidden="true" />
-    </span>
+    direction === 'right' ? getIcon(direction) : undefined
   )
 );
 ChevronLink.propTypes = {
@@ -38,10 +49,15 @@ ChevronLink.propTypes = {
     'secondary',
     'inverted'
   ]),
+  direction: PropTypes.oneOf([
+    'left',
+    'right'
+  ]),
   children: PropTypes.node.isRequired
 };
 ChevronLink.defaultProps = {
-  variant: 'primary'
+  variant: 'primary',
+  direction: 'right'
 };
 ChevronLink.displayName = 'Link.Chevron';
 
diff --git a/src/components/Link/ChevronLink/ChevronLink.modules.scss b/src/components/Link/ChevronLink/ChevronLink.modules.scss
index a34987092e..b1798778e6 100644
--- a/src/components/Link/ChevronLink/ChevronLink.modules.scss
+++ b/src/components/Link/ChevronLink/ChevronLink.modules.scss
@@ -1,6 +1,9 @@
 @import '../../../scss/settings/colours';
+@import '../../../scss/settings/typography';
 
 .link {
+  font-size: $body-medium-text-size;
+
   &:hover {
     .chevron {
       transform: translateX(0.25rem);
diff --git a/src/components/Link/ChevronLink/__tests__/ChevronLink.spec.jsx b/src/components/Link/ChevronLink/__tests__/ChevronLink.spec.jsx
index 8e43de34e6..81d6b6e63b 100644
--- a/src/components/Link/ChevronLink/__tests__/ChevronLink.spec.jsx
+++ b/src/components/Link/ChevronLink/__tests__/ChevronLink.spec.jsx
@@ -51,6 +51,12 @@ describe('Link.Chevron', () => {
     expect(link).toHaveClassName('inverted');
   });
 
+  it('can face leftward', () => {
+    const link = doShallow({ href: 'https://telus.com' });
+
+    expect(link).toContainReact(<Icon glyph="chevron" aria-hidden="true" />);
+  });
+
   it('passes additional attributes to the link element', () => {
     const link = doShallow({ id: 'the-link', role: 'button' });