fix(link): match experimental spec (#1960)

* fix(link): add `:focus:active` state

* docs(link): add space between link examples

* fix(link): return to original spec

* refactor(link): move example styles into `demo.scss`

demo/scss/demo.scss

@@ -68,6 +68,12 @@ REASON: #{$reason}';
     .bx--interior-left-nav.bx--interior-left-nav--collapsed {
       width: 3rem;
     }
+
+    &.link div {
+      display: flex;
+      flex-direction: column;
+      grid-gap: 32px;
+    }
   }
 }
 

src/components/link/_link.scss

@@ -53,25 +53,28 @@
 @mixin link--x {
   .#{$prefix}--link {
     @include reset;
-    @include type-style('body-short-01');
+    @include type-style('body-long-01');
     color: $interactive-01;
     text-decoration: none;
+    outline: none;
 
     &:hover {
       color: $interactive-01;
-      box-shadow: 0 1px currentColor;
+      box-shadow: 0 1px $interactive-01;
     }
 
     &:active,
     &:active:visited {
       color: $text-01;
-      box-shadow: 0 1px currentColor;
+      box-shadow: 0 1px $text-01;
     }
 
     &:focus {
-      color: $interactive-01;
-      outline: 2px solid currentColor;
-      outline-offset: 2px;
+      box-shadow: 0 3px $interactive-01;
+    }
+
+    &:focus:active {
+      box-shadow: 0 3px $text-01;
     }
 
     &:not([href]) {
@@ -96,7 +99,7 @@
 
   .#{$prefix}--link--disabled {
     @include reset;
-    @include type-style('body-short-01');
+    @include type-style('body-long-01');
     @include font-smoothing;
     display: inline;
     color: $disabled-02;

src/components/link/link.hbs

@@ -8,7 +8,6 @@
 <a href="#" class="{{@root.prefix}}--link">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>