Use design system link styles in documentation (#252)

* Use design system link styles in documentation

**Why**: Because a design system's documentation should ideally leverage said design system's own link styles.

* Fix typo in component external link

docs/_includes/helpers/base-component.html

@@ -2,10 +2,6 @@
 {% assign uswds_url = include.component | append: '/' | prepend: 'https://designsystem.digital.gov/components/' %}
 {% assign sass_url = stylesheet | append: '.scss' | prepend: 'https://github.com/18F/identity-style-guide/blob/main/src/scss/components/_' %}
 
-<a href="{{ uswds_url }}" class="usa-link usa-link--external margin-bottom-2">
-  View USWDS component
-</a>
+[View USWDS component]({{ uswds_url }}){: .usa-link--external}
 
-<a href="{{ sass_url }}" class="usa-link usa-link--external">
-  View Login.gov SCSS on GitHub
-</a>
+[View Login.gov SCSS on GitHub]({{ sass_url }}){: .usa-link--external}

docs/_plugins/content_typography.rb

@@ -0,0 +1,12 @@
+module Kramdown
+  module Parser
+    class Kramdown
+      prepend(Module.new do
+        def add_link(el, *args)
+          el.attr['class'] = [*el.attr['class'], 'usa-link'].join(' ') if el.type == :a
+          super(el, *args)
+        end
+      end)
+    end
+  end
+end

docs/_utilities/color.md

@@ -12,7 +12,7 @@ The color codes listed beneath each name indicate what names can be used with th
   This element has classes <code>bg-primary-lighter</code> and <code>text-primary-dark</code>.
 </div>
 
-Read more about <a href="https://v2.designsystem.digital.gov/utilities/color/" target="_blank">the U.S. Web Design System’s color utility classes</a>.
+Read more about [the U.S. Web Design System’s color utility classes](https://designsystem.digital.gov/utilities/color/).
 
 ## Featured palette
 <div class="border-top">

docs/index.md

@@ -37,7 +37,7 @@ Install images, stylesheets, and script files in both their original and compile
 
 # Built with USWDS
 
-The {{ site.title }} is built using the <a href="https://v2.designsystem.digital.gov/" target="_blank">U.S. Web Design System</a> for a consistent appearance across government sites.
+The {{ site.title }} is built using the [U.S. Web Design System](https://designsystem.digital.gov/) for a consistent appearance across government sites.
 
 </div>
       </div>
@@ -46,7 +46,7 @@ The {{ site.title }} is built using the <a href="https://v2.designsystem.digital
 
 # A work in progress
 
-The latest version is <strong class="text-no-wrap">{{ site.package_json.this_version }}</strong> which uses <strong class="text-no-wrap">uswds@{{ site.package_json.uswds_version }}</strong>. Spot an issue? We’d love to hear about it <a href="https://github.com/18F/identity-style-guide/issues" target="_blank">on GitHub</a>.
+The latest version is <strong class="text-no-wrap">{{ site.package_json.this_version }}</strong> which uses <strong class="text-no-wrap">uswds@{{ site.package_json.uswds_version }}</strong>. Spot an issue? We’d love to hear about it [on GitHub](https://github.com/18F/identity-style-guide/issues).
 
 </div>
       </div>