feat(links): secondary link class (#63)

_config.yml

@@ -48,16 +48,16 @@ download:
 
 cdn:
   # See https://www.srihash.org for info on how to generate the hashes
-  css: 'sha384-XmV09HeMWS8ad0yhlWR7dQU3K4VGk7/ExmMILF+7FCxiD77qwa2Wsv3REXBHD35l'
+  css: 'sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN'
   css_hash: sha384-hnvsmW4CEqIE9xpwdmvw+oyi2zalIdkqZJKT8ovyObj2fiPNSLt7xdsda4JGUfSf
-  js: 'sha384-XmV09HeMWS8ad0yhlWR7dQU3K4VGk7/ExmMILF+7FCxiD77qwa2Wsv3REXBHD35l'
+  js: 'sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN'
   js_hash: sha384-1RkA5wjfeG5u+6ycZ90q+PMlafLBaMCHvGk6PlVrQmIuTvpdA9qupxwbnPf9QbHH
   js_bundle: >-
     https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js
   js_bundle_hash: sha384-gEp0IQktG6BLXHMpPT1pxMSC8EKUA159uPI9c/AmIhedq/EvAEfBroQ5tsSOS1/A
-  jquery: 'sha384-XmV09HeMWS8ad0yhlWR7dQU3K4VGk7/ExmMILF+7FCxiD77qwa2Wsv3REXBHD35l'
+  jquery: 'sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN'
   jquery_hash: sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n
-  popper: 'sha384-XmV09HeMWS8ad0yhlWR7dQU3K4VGk7/ExmMILF+7FCxiD77qwa2Wsv3REXBHD35l'
+  popper: 'sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN'
   popper_hash: sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN
 
 toc:

scss/_links.scss

@@ -0,0 +1,7 @@
+a.link-secondary {
+  color: $link-color-secondary;
+
+  @include hover() {
+    color: $link-hover-color-secondary;
+  }
+}

scss/_variables.scss

@@ -244,6 +244,12 @@ $link-hover-decoration: underline !default;
 // Darken percentage for links with `.text-*` class (e.g. `.text-success`)
 $emphasized-link-hover-darken-percentage: 15% !default;
 
+
+
+// Secondary links
+$dark-blue: #0028A8 !default;
+$link-color-secondary: $dark-blue;
+$link-hover-color-secondary: darken($link-color-secondary, 15%);
 // Paragraphs
 //
 // Style p element.

scss/bootstrap.scss

@@ -46,3 +46,4 @@
 @import "print";
 @import "sprite";
 @import "video-tile";
+@import "links";

site/_data/nav.yml

@@ -41,6 +41,7 @@
     - title: Icons
     - title: Input group
     - title: Jumbotron
+    - title: Links
     - title: List group
     - title: Logos
     - title: Media object

site/docs/components/links.md

@@ -0,0 +1,29 @@
+---
+layout: docs
+title: Links
+description: Anchor tags
+group: components
+---
+This component does not exist in bootstrap by default. 
+
+
+## Examples
+
+By default, a href tags inherit the primary theme color. 
+
+{% capture example %}
+<a href="#">Default link</a>
+{% endcapture %}
+{% include example.html content=example %}
+
+Secondary links help differentiate from the primary call to action.
+
+{% capture example %}
+<a href="#" class="link-secondary">Secondary link</a>
+{% endcapture %}
+{% include example.html content=example %}
+
+---
+
+**Note:** 
+We could have overidden `text-secondary` in `Colors` but that would have affected all the components that use `text-secondary`, like `Buttons`. So we created a new var `$link-color-secondary` and a new class `link-secondary`.

site/sitemap.xml

@@ -312,4 +312,7 @@
 <url>
 <loc>https://flo-scss.flo.center/docs/utilities/z-index/</loc>
 </url>
+<url>
+<loc>https://flo-scss.flo.center/docs/components/links/</loc>
+</url>
 </urlset>