feat(link): add logic for left-facing chevron wip

telus · Aug 14, 2017 · b5469e3 · b5469e3
1 parent d73e711
commit b5469e3
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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' });