Merge pull request #252 from hashicorp/melsumner/docs-section-links

adds section links in docs

Author: MelSumner

packages/components/tests/dummy/app/styles/app.scss

@@ -212,6 +212,9 @@ body.dummy-app {
     border-color: #f5c6cb;
 }
 
+.dummy-link-section {
+    text-decoration: none;
+}
 
 // Percy (percySnapshot) doesn't allow to target specific DOM elements, so we have to "blacklist" the elements
 // that we want to exclude from the snapshots using their own "Percy-specific CSS".

packages/components/tests/dummy/app/templates/components/badge.hbs

@@ -3,7 +3,7 @@
 <h2 class="dummy-h2">Badge</h2>
 
 <section>
-  <h3 class="dummy-h3">Component API</h3>
+  <h3 class="dummy-h3" id="component-api"><a href="#component-api" class="dummy-link-section">§</a> Component API</h3>
   <p class="dummy-paragraph" id="component-api-badge">Here is the API for the component:</p>
   <dl class="dummy-component-props" aria-labelledby="component-api-badge">
     <dt>size <code>enum</code></dt>
@@ -63,7 +63,7 @@
 </section>
 
 <section>
-  <h3 class="dummy-h3">How to use</h3>
+  <h3 class="dummy-h3" id="how-to-use"><a href="#how-to-use" class="dummy-link-section">§</a> How to use</h3>
   <p class="dummy-paragraph">Invocation of the component would look something like this:</p>
   {{! prettier-ignore-start }}
   <CodeBlock
@@ -76,7 +76,8 @@
 </section>
 
 <section>
-  <h3 class="dummy-h3">Design guidelines</h3>
+  <h3 class="dummy-h3" id="design-guidelines"><a href="#design-guidelines" class="dummy-link-section">§</a>
+    Design guidelines</h3>
 
   <div class="dummy-design-guidelines">
     <p class="dummy-paragraph"><a href="https://www.figma.com/file/noyY6dUMDYjmySpHcMjhkN/?node-id=2%3A8">Figma UI Kit</a></p>
@@ -86,7 +87,7 @@
 </section>
 
 <section data-test-percy>
-  <h3 class="dummy-h3">Showcase</h3>
+  <h3 class="dummy-h3" id="showcase"><a href="#showcase" class="dummy-link-section">§</a> Showcase</h3>
   <h4 class="dummy-h4">Content</h4>
   <div class="dummy-badge-base-sample">
     <Hds::Badge @text="Only text" />
@@ -149,7 +150,8 @@
 <h2 class="dummy-h2">BadgeCount</h2>
 
 <section>
-  <h3 class="dummy-h3">Component API</h3>
+  <h3 class="dummy-h3" id="bc-component-api"><a href="#bc-component-api" class="dummy-link-section">§</a>
+    Component API</h3>
   <p class="dummy-paragraph" id="component-api-badge-count">Here is the API for the component:</p>
   <dl class="dummy-component-props" aria-labelledby="component-api-badge-count">
     <dt>size <code>enum</code></dt>
@@ -190,7 +192,7 @@
 </section>
 
 <section>
-  <h3 class="dummy-h3">How to use</h3>
+  <h3 class="dummy-h3" id="bc-how-to-use"><a href="#bc-how-to-use" class="dummy-link-section">§</a> How to use</h3>
   <p class="dummy-paragraph">Invocation of the component would look something like this:</p>
   {{! prettier-ignore-start }}
   <CodeBlock
@@ -203,7 +205,7 @@
 </section>
 
 <section data-test-percy>
-  <h3 class="dummy-h3">Showcase</h3>
+  <h3 class="dummy-h3" id="bc-showcase"><a href="#bc-showcase" class="dummy-link-section">§</a> Showcase</h3>
 
   <h4 class="dummy-h4">Content</h4>
   <div class="dummy-badge-base-sample">

packages/components/tests/dummy/app/templates/components/breadcrumb.hbs

@@ -14,7 +14,7 @@
 </section>
 
 <section>
-  <h3 class="dummy-h3">Component API</h3>
+  <h3 class="dummy-h3" id="component-api"><a href="#component-api" class="dummy-link-section">§</a> Component API</h3>
   <p class="dummy-paragraph">The
     <code class="dummy-code">Breadcrumb</code>
     component is composed by different parts, with their own APIs:</p>
@@ -95,7 +95,7 @@
 </section>
 
 <section>
-  <h3 class="dummy-h3">How to use</h3>
+  <h3 class="dummy-h3" id="how-to-use"><a href="#how-to-use" class="dummy-link-section">§</a> How to use</h3>
   <p class="dummy-paragraph">The breadcrumb is a high-level UI element, so it's likely that it will be implemented once
     per application, and then never changed (apart from follow-up redesigns/improvements). Below we give a couple of
     examples to give a general overview and show how it works.</p>
@@ -187,7 +187,8 @@
 </section>
 
 <section>
-  <h3 class="dummy-h3">Design guidelines</h3>
+  <h3 class="dummy-h3" id="design-guidelines"><a href="#design-guidelines" class="dummy-link-section">§</a>
+    Design guidelines</h3>
 
   <div class="dummy-design-guidelines">
     <p class="dummy-paragraph"><a
@@ -201,7 +202,7 @@
 </section>
 
 <section data-test-percy>
-  <h3 class="dummy-h3">Showcase</h3>
+  <h3 class="dummy-h3" id="showcase"><a href="#showcase" class="dummy-link-section">§</a> Showcase</h3>
 
   <h4 class="dummy-h4">Variants</h4>
 
@@ -361,7 +362,7 @@
 </section>
 
 <section>
-  <h3 class="dummy-h3">Known issues</h3>
+  <h3 class="dummy-h3" id="known-issues"><a href="#known-issues">§</a> Known issues</h3>
   <p class="dummy-paragraph">The
     <code class="dummy-code">Breadcrumb</code>
     component is composed by different parts, with their own APIs:</p>

packages/components/tests/dummy/app/templates/components/button.hbs

@@ -5,7 +5,7 @@
 <DummyLinkCtaButtonBanner />
 
 <section>
-  <h3 class="dummy-h3">Component API</h3>
+  <h3 class="dummy-h3" id="component-api"><a href="#component-api" class="dummy-link-section">§</a> Component API</h3>
   <p class="dummy-paragraph" id="component-api-button">Here is the API for the component:</p>
   <dl class="dummy-component-props" aria-labelledby="component-api-button">
     <dt>size <code>enum</code></dt>
@@ -84,7 +84,7 @@
 </section>
 
 <section>
-  <h3 class="dummy-h3">How to use</h3>
+  <h3 class="dummy-h3" id="how-to-use"><a href="#how-to-use" class="dummy-link-section">§</a> How to use</h3>
   <p class="dummy-paragraph">
     The button component is used to trigger an action or event. For accessibility, buttons should not be used to route
     to a URL.</p>
@@ -291,7 +291,8 @@
 </section>
 
 <section>
-  <h3 class="dummy-h3">Design guidelines</h3>
+  <h3 class="dummy-h3" id="design-guidelines"><a href="#design-guidelines" class="dummy-link-section">§</a>
+    Design guidelines</h3>
 
   <div class="dummy-design-guidelines">
     <p class="dummy-paragraph"><a
@@ -305,7 +306,7 @@
 </section>
 
 <section data-test-percy>
-  <h3 class="dummy-h3">Showcase</h3>
+  <h3 class="dummy-h3" id="showcase"><a href="#showcase" class="dummy-link-section">§</a> Showcase</h3>
   <h4 class="dummy-h4">Content</h4>
   <div class="dummy-button-base-sample">
     <Hds::Button @text="Only text" />

packages/components/tests/dummy/app/templates/components/card.hbs

@@ -3,7 +3,7 @@
 <h2 class="dummy-h2">Card container</h2>
 
 <section>
-  <h3 class="dummy-h3">Component API</h3>
+  <h3 class="dummy-h3" id="component-api"><a href="#component-api" class="dummy-link-section">§</a> Component API</h3>
   <p class="dummy-paragraph" id="component-api-card">Here is the API for the component:</p>
   <dl class="dummy-component-props" aria-labelledby="component-api-card">
     <dt>level <code>enum</code></dt>
@@ -54,7 +54,7 @@
 </section>
 
 <section>
-  <h3 class="dummy-h3">How to use</h3>
+  <h3 class="dummy-h3" id="how-to-use"><a href="#how-to-use" class="dummy-link-section">§</a> How to use</h3>
   <p class="dummy-paragraph">Invocation of the component would look something like this:</p>
   {{! prettier-ignore-start }}
   <CodeBlock
@@ -68,16 +68,17 @@
 
 <section>
   <div class="dummy-design-guidelines">
-    <h3 class="dummy-h3">Design guidelines</h3>
+    <h3 class="dummy-h3" id="design-guidelines"><a href="#design-guidelines" class="dummy-link-section">§</a>
+      Design guidelines</h3>
     <p class="dummy-paragraph"><a href="https://www.figma.com/file/noyY6dUMDYjmySpHcMjhkN/?node-id=2%3A11">Figma UI Kit</a></p>
     <br />
     <img class="dummy-figma-docs" src="/assets/images/card-container-design-usage.png" alt="" role="none" />
   </div>
 </section>
 
 <section>
+  <h3 class="dummy-h3" id="accessibility"><a href="#accessibility" class="dummy-link-section">§</a> Accessibility</h3>
   <p class="dummy-paragraph">
-    <h3 class="dummy-h3">Accessibility</h3>
     By default, the
     <em>Card Container</em>
     component has
@@ -87,7 +88,7 @@
 </section>
 
 <section data-test-percy>
-  <h3 class="dummy-h3">Showcase</h3>
+  <h3 class="dummy-h3" id="showcase"><a href="#showcase" class="dummy-link-section">§</a> Showcase</h3>
   <h4 class="dummy-h4">Level:</h4>
   <div class="dummy-card-base-sample">
     {{#each @model.CONTAINER_LEVELS as |level|}}

packages/components/tests/dummy/app/templates/components/dropdown.hbs

@@ -11,7 +11,7 @@
 </section>
 
 <section>
-  <h3 class="dummy-h3" id="section-component-api">Component API</h3>
+  <h3 class="dummy-h3" id="component-api"><a href="#component-api" class="dummy-link-section">§</a> Component API</h3>
   <p class="dummy-paragraph">The
     <code class="dummy-code">Dropdown</code>
     component is composed of different child components, each with their own APIs:</p>
@@ -284,7 +284,7 @@
 </section>
 
 <section>
-  <h3 class="dummy-h3" id="section-usage">How to use</h3>
+  <h3 class="dummy-h3" id="how-to-use"><a href="#how-to-use" class="dummy-link-section">§</a> How to use</h3>
   <h4 class="dummy-h4">Invocation</h4>
   <p class="dummy-paragraph">To make the invocation more intuitive for developers, we've provided contextual components
     for the toggles and list-item items. For example,
@@ -683,7 +683,8 @@
 </section>
 
 <section>
-  <h3 class="dummy-h3">Design guidelines</h3>
+  <h3 class="dummy-h3" id="design-guidelines"><a href="#design-guidelines" class="dummy-link-section">§</a>
+    Design guidelines</h3>
 
   <div class="dummy-design-guidelines">
     <p class="dummy-paragraph"><a
@@ -698,7 +699,7 @@
 </section>
 
 <section>
-  <h3 class="dummy-h3" id="section-accessibility">Accessibility</h3>
+  <h3 class="dummy-h3" id="accessibility"><a href="#accessibility" class="dummy-link-section">§</a> Accessibility</h3>
   <p class="dummy-paragraph">This component has been designed and implemented with accessibility in mind. When used as
     designed, there should not be any accessibility issues with this component.
   </p>
@@ -817,7 +818,7 @@
 </section>
 
 <section data-test-percy>
-  <h3 class="dummy-h3" id="section-showcase">Showcase</h3>
+  <h3 class="dummy-h3" id="showcase"><a href="#showcase" class="dummy-link-section">§</a> Showcase</h3>
 
   <h4 class="dummy-h4">Toggles</h4>
   <h5 class="dummy-h5">Toggle::Button</h5>

packages/components/tests/dummy/app/templates/components/icon-tile.hbs

@@ -3,7 +3,7 @@
 <h2 class="dummy-h2">IconTile</h2>
 
 <section>
-  <h3 class="dummy-h3">Component API</h3>
+  <h3 class="dummy-h3" id="component-api"><a href="#component-api" class="dummy-link-section">§</a> Component API</h3>
   <p class="dummy-paragraph" id="component-api-icontile">Here is the API for the component:</p>
   <dl class="dummy-component-props" aria-labelledby="component-api-icontile">
     <dt>size <code>enum</code></dt>
@@ -65,7 +65,7 @@
 </section>
 
 <section>
-  <h3 class="dummy-h3">How to use</h3>
+  <h3 class="dummy-h3" id="how-to-use"><a href="#how-to-use" class="dummy-link-section">§</a> How to use</h3>
   <p class="dummy-paragraph">Invocation of the component would look something like this:</p>
 
   {{! prettier-ignore-start }}
@@ -88,7 +88,8 @@
 </section>
 
 <section>
-  <h3 class="dummy-h3">Design guidelines</h3>
+  <h3 class="dummy-h3" id="design-guidelines"><a href="#design-guidelines" class="dummy-link-section">§</a>
+    Design guidelines</h3>
 
   <div class="dummy-design-guidelines">
     <p class="dummy-paragraph"><a href="https://www.figma.com/file/noyY6dUMDYjmySpHcMjhkN/?node-id=1377%3A11992">Figma
@@ -102,7 +103,7 @@
 </section>
 
 <section data-test-percy>
-  <h3 class="dummy-h3">Showcase</h3>
+  <h3 class="dummy-h3" id="showcase"><a href="#showcase" class="dummy-link-section">§</a> Showcase</h3>
   <h4 class="dummy-h4">Size</h4>
   <ul class="dummy-icon-tile-side-by-side">
     <li>

packages/components/tests/dummy/app/templates/components/link-to/cta.hbs

@@ -5,9 +5,7 @@
 <DummyLinkCtaButtonBanner />
 
 <section>
-  <h3 class="dummy-h3">
-    Overview
-  </h3>
+  <h3 class="dummy-h3" id="overview"><a href="#overview" class="dummy-link-section">§</a> Overview</h3>
 
   <p class="dummy-paragraph">The LinkTo::CTA component handles the generation of an
     <a
@@ -27,7 +25,7 @@
 </section>
 
 <section>
-  <h3 class="dummy-h3">Component API</h3>
+  <h3 class="dummy-h3" id="component-api"><a href="#component-api" class="dummy-link-section">§</a> Component API</h3>
   <p class="dummy-paragraph" id="component-api-linkto-cta">Here is the API for the component:</p>
   <dl class="dummy-component-props" aria-labelledby="component-api-linkto-cta">
     <dt>size <code>enum</code></dt>
@@ -96,9 +94,7 @@
 </section>
 
 <section>
-  <h3 class="dummy-h3">
-    Usage
-  </h3>
+  <h3 class="dummy-h3" id="how-to-use"><a href="#how-to-use" class="dummy-link-section">§</a> How to use</h3>
 
   <h4 class="dummy-h4">Basic use</h4>
   <p class="dummy-paragraph">The most basic invocation requires
@@ -218,7 +214,8 @@
 </section>
 
 <section>
-  <h3 class="dummy-h3">Design guidelines</h3>
+  <h3 class="dummy-h3" id="design-guidelines"><a href="#design-guidelines" class="dummy-link-section">§</a>
+    Design guidelines</h3>
   <div class="dummy-design-guidelines">
     <p class="dummy-paragraph">
       <a
@@ -235,7 +232,7 @@
 </section>
 
 <section data-test-percy>
-  <h3 class="dummy-h3">Showcase</h3>
+  <h3 class="dummy-h3" id="showcase"><a href="#showcase" class="dummy-link-section">§</a> Showcase</h3>
   <h4 class="dummy-h4">Content</h4>
   <div class="dummy-cta-base-sample">
     <Hds::LinkTo::Cta @text="Only text" @route="components.link-to.cta" />

packages/components/tests/dummy/app/templates/components/link-to/standalone.hbs

@@ -7,9 +7,7 @@
 <DummyLinkCtaButtonBanner />
 
 <section>
-  <h3 class="dummy-h3">
-    Overview
-  </h3>
+  <h3 class="dummy-h3" id="overview"><a href="#overview" class="dummy-link-section">§</a> Overview</h3>
 
   <p class="dummy-paragraph">The LinkTo (Standalone) component handles generation of an
     <a
@@ -47,9 +45,7 @@
 </section>
 
 <section>
-  <h3 class="dummy-h3">
-    Component API
-  </h3>
+  <h3 class="dummy-h3" id="component-api"><a href="#component-api">§</a> Component API</h3>
   <p class="dummy-paragraph" aria-labelledby="component-api-linkto-standalone">
     Here is the API for the component:
   </p>
@@ -137,7 +133,7 @@
 </section>
 
 <section>
-  <h3 class="dummy-h3">How to use</h3>
+  <h3 class="dummy-h3" id="how-to-use"><a href="#how-to-use" class="dummy-link-section">§</a> How to use</h3>
 
   <h4 class="dummy-h4">Basic use</h4>
   <p class="dummy-paragraph">The most basic invocation requires both
@@ -274,7 +270,8 @@
 </section>
 
 <section>
-  <h3 class="dummy-h3">Design guidelines</h3>
+  <h3 class="dummy-h3" id="design-guidelines"><a href="#design-guidelines" class="dummy-link-section">§</a>
+    Design guidelines</h3>
   <div class="dummy-design-guidelines">
     <p class="dummy-paragraph">
       <a
@@ -297,9 +294,7 @@
 </section>
 
 <section data-test-percy>
-  <h3 class="dummy-h3">
-    Showcase
-  </h3>
+  <h3 class="dummy-h3" id="showcase"><a href="#showcase" class="dummy-link-section">§</a> Showcase</h3>
   <h4 class="dummy-h4">
     Content
   </h4>