feat(link): add left-facing chevron link

- add fake left-facing chevron glyph to Icon component

.gitignore

@@ -13,6 +13,7 @@ coverage
 # IDE project files
 .idea
 *.iws
+.vscode
 
 # TDS build artifacts
 dist

config/styleguide.config.js

@@ -117,8 +117,8 @@ module.exports = {
           components() {
             return [
               path.resolve('src/components/Card/Card.jsx'),
-              // path.resolve('src/components/Link/Link.jsx'),
-              // path.resolve('src/components/Link/ChevronLink/ChevronLink.jsx')
+              path.resolve('src/components/Link/Link.jsx'),
+              path.resolve('src/components/Link/ChevronLink/ChevronLink.jsx')
             ]
           },
           sections: [

src/components/Icon/Icon.jsx

@@ -29,6 +29,7 @@ Icon.propTypes = {
     'caret-up',
     'checkmark',
     'chevron',
+    'left-chevron',
     'exclamation-point-circle',
     'expander',
     'hamburger',

src/components/Link/ChevronLink/ChevronLink.jsx

@@ -19,17 +19,11 @@ const getClassName = (variant) => {
   }
 };
 
-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 getIcon = (glyph, className) => (
+  <span className={className}>
+    <Icon glyph={glyph} aria-hidden="true" />
+  </span>
+);
 
 const ChevronLink = ({ variant, direction, children, ...rest }) => (
   React.createElement(
@@ -38,9 +32,9 @@ const ChevronLink = ({ variant, direction, children, ...rest }) => (
       ...safeRest(rest),
       className: getClassName(variant)
     },
-    direction === 'left' ? getIcon(direction) : undefined,
+    direction === 'left' ? getIcon('left-chevron', styles.leftChevron) : undefined,
     children,
-    direction === 'right' ? getIcon(direction) : undefined
+    direction === 'right' ? getIcon('chevron', styles.rightChevron) : undefined
   )
 );
 ChevronLink.propTypes = {

src/components/Link/ChevronLink/ChevronLink.md

@@ -1,3 +1,29 @@
+### Minimal Usage
+
 ```
 <Link.Chevron href="https://telus.com">Go to Telus.com</Link.Chevron>
 ```
+
+### Colours
+
+```
+<div>
+  <div>
+    <Link.Chevron href="https://telus.com" variant="primary">See latest devices</Link.Chevron>
+  </div>
+
+  <div>
+    <Link.Chevron href="https://telus.com" variant="secondary">Get great deals</Link.Chevron>
+  </div>
+
+  <div>
+    <Link.Chevron href="https://telus.com" variant="inverted">Find out how</Link.Chevron>
+  </div>
+</div>
+```
+
+### Left-facing chevron
+
+```
+<Link.Chevron href="https://telus.com" direction="left">Plans</Link.Chevron>
+```

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

@@ -5,9 +5,12 @@
   font-size: $body-medium-text-size;
 
   &:hover {
-    .chevron {
+    .rightChevron {
       transform: translateX(0.25rem);
     }
+    .leftChevron {
+      transform: translateX(-0.25rem);
+    }
   }
 }
 
@@ -33,6 +36,17 @@
 
 .chevron {
   display: inline-block;
-  margin-left: 0.5rem;
   transition: transform 300ms;
 }
+
+.rightChevron {
+  composes: chevron;
+
+  margin-left: 0.5rem;
+}
+
+.leftChevron {
+  composes: chevron;
+
+  margin-right: 0.5rem;
+}

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

@@ -32,9 +32,19 @@ describe('Link.Chevron', () => {
   });
 
   it('has a chevron icon', () => {
-    const link = doShallow({ href: 'https://telus.com' });
-
-    expect(link).toContainReact(<Icon glyph="chevron" aria-hidden="true" />);
+    let link = doShallow({ href: 'https://telus.com' });
+    expect(link).toContainReact(
+      <span className="rightChevron">
+        <Icon glyph="chevron" aria-hidden="true" />
+      </span>
+    );
+
+    link = doShallow({ href: 'https://telus.com', direction: 'left' });
+    expect(link).toContainReact(
+      <span className="leftChevron">
+        <Icon glyph="left-chevron" aria-hidden="true" />
+      </span>
+    );
   });
 
   it('can have specific variants', () => {
@@ -51,12 +61,6 @@ 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' });
 

src/scss/foundation/_core-icons.scss

@@ -70,3 +70,12 @@
 .icon-core-question-mark-circle {
   @include icon-fixed-color($color-shuttle-grey);
 }
+
+.icon-core-left-chevron {
+  @include core-icon(chevron);
+
+  &::before {
+    display: inline-block;
+    transform: rotate(-180deg) translateY(1.5px);
+  }
+}