fix(link): restyle to match spec (#1802)

* docs(link): remove `href` from "disabled" link

* fix(link): restyle to match spec

* refactor(link): create disabled class

* feat(link): style placeholder links

* fix(link): avoid using visited color token

* feat(link): add helper class for visited links

* refactor(link): rename disabled link class

* docs(link): add long link example

* fix(link): apply type styles to disable link helper class

* fix(link): reduce outline width

src/components/link/_link.scss

@@ -54,15 +54,10 @@
   .#{$prefix}--link {
     @include reset;
     @include type-style('body-short-01');
-
     color: $interactive-01;
-
-    // There is currently no way to set the thinkness of an underline so we'll rely on the box shadow property to achieve this
-    // effect.
     text-decoration: none;
 
-    &:hover,
-    &:focus {
+    &:hover {
       color: $interactive-01;
       box-shadow: 0 1px currentColor;
     }
@@ -74,13 +69,17 @@
     }
 
     &:focus {
-      outline: none;
-      box-shadow: 0 3px currentColor;
+      color: $interactive-01;
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
     }
 
-    &[aria-disabled='true'][tabindex='-1'] {
-      color: $disabled;
+    &:not([href]) {
+      color: $disabled-02;
       cursor: not-allowed;
+      pointer-events: none;
+      touch-action: none;
+
       &:hover {
         box-shadow: none;
       }
@@ -90,6 +89,19 @@
       color: $interactive-01;
     }
   }
+
+  .#{$prefix}--link--visited {
+    color: $visited-link;
+  }
+
+  .#{$prefix}--link--disabled {
+    @include reset;
+    @include type-style('body-short-01');
+    @include font-smoothing;
+    display: inline;
+    color: $disabled-02;
+    font-weight: 400;
+  }
 }
 
 @include exports('link') {

src/components/link/link.hbs

@@ -1,9 +1,14 @@
-<!-- 
+<!--
   Copyright IBM Corp. 2016, 2018
 
   This source code is licensed under the Apache-2.0 license found in the
   LICENSE file in the root directory of this source tree.
 -->
 
 <a href="#" class="{{@root.prefix}}--link">Link</a>
-<a href="#" class="{{@root.prefix}}--link" tabindex="-1" aria-disabled="true">Link</a>
+<a class="{{@root.prefix}}--link">Placeholder link</a>
+<p class="{{@root.prefix}}--link--disabled">Disabled Link</p>
+<br>
+<a href="#" class="{{@root.prefix}}--link">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti explicabo
+  nobis consequatur quod qui quam laboriosam placeat repudiandae. Ducimus ea aut omnis asperiores mollitia
+  necessitatibus architecto temporibus provident quo? Repellat!</a>