refactor(helix-ui): refactor links into helix-ui

Author: Cathy Siller

source/components/typography/_explorer.less

@@ -1,3 +1,5 @@
+@import (reference) '_typography';
+
 .font-roboto {
   font-family: "Roboto", sans-serif;
 }
@@ -11,3 +13,9 @@
 .weight-regular { font-weight: 400; }
 .weight-medium { font-weight: 500; }
 .weight-bold { font-weight: 700; }
+
+a {
+  &.pseudo-active {
+    &:extend(a:active);
+  }
+}

source/components/typography/_typography.less

@@ -0,0 +1,16 @@
+a {
+  color: @blue-700;
+  text-decoration: none;
+
+  &:hover,
+  &:active {
+    color: @blue-500;
+    cursor: pointer;
+    text-decoration: none;
+  }
+
+  &.disabled {
+    color: @gray-600;
+    pointer-events: none;
+  }
+}

source/components/typography/index.html

@@ -151,3 +151,23 @@ <h2 id="inline-text-elements">Inline Text Elements</h1>
     </p>
   </div>
 </section>
+
+<section><!-- Links -->
+  <h2 id="links">Links</h2>
+
+  <!-- explanation goes here -->
+
+  <div class="demo">
+    <p>
+      <strong>Reference Links</strong><br />
+      Reference links are super common and typically used to, well, refer, you
+      to something and somewhere else, whether that's in our interface or not.
+      For Rackspace, this likely means to help and support articles. If you
+      want to ask someone to do something, use a <a href="#">button.</a>
+    </p>
+    <p>
+      <strong>Pressed State</strong><br />
+      <a href="#" class="pseudo-active">Pressed Link</a>
+    </p>
+  </div>
+</section>

source/styles/helix-ui.less

@@ -16,6 +16,7 @@
 @import 'grid/_grid';
 @import 'navigation/_navigation';
 @import 'breadcrumbs/_breadcrumbs';
+@import 'typography/_typography';
 
 /* ===== Text Helpers ===== */
 // Ripped from Boostrap (may not need all of these)