Merge pull request #428 from 18F/eoc/274

Manually add heading links to headers in partials

_includes/heading-link.html

@@ -0,0 +1,14 @@
+{% comment %}
+Use this partial when headings links aren't generated through markdown.
+Add this partial within the heading you want to link.
+Heading id must be the same as the slug passed to this partial.
+{% endcomment %}
+<span aria-hidden="true">
+  <a href="#{{ slug }}"
+    class="heading-permalink"
+    aria-label="permanent link to {{ slug }} heading">
+    <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
+      <use xlink:href="#svg-link"></use>
+    </svg>
+  </a>
+</span>

_includes/methods/method.html

@@ -6,9 +6,11 @@ <h1 class="method--title" itemprop="headline"><a href="{{ method_path | url }}">
         {{ this_method.title }}
       {% endif %}
     </a></h1>
-      <h2>What</h2>
+      {% capture what_heading_slug %}what-{{ this_method.title | slugify }}{% endcapture %}
+      <h2 id="{{ what_heading_slug }}">What {% include "heading-link.html", slug: what_heading_slug %}</h2>
       <p>{{ this_method.what }}</p>
-      <h2>Why</h2>
+      {% capture why_heading_slug %}why-{{ this_method.title | slugify }}{% endcapture %}
+      <h2 id="{{ why_heading_slug }}">Why {% include "heading-link.html", slug: why_heading_slug %}</h2>
       <p>{{ this_method.why }}</p>
     <footer>
       <section class="method--section method--section--category">

assets/methods/styles/_method.scss

@@ -69,6 +69,12 @@
   font-weight: font-weight('bold');
 }
 
+/* custom header link icon color */
+.method h2 span a,
+.method h2 span a:visited {
+  color: $color-body-dark;
+}
+
 .method--panel {
   display: block;
   padding: units(2.5) units(5);