Add footnote styles (#1616)

* Add footnote styles

Port the styles from dotcom to Primer.

* Create gold-games-tickle.md

* disable lints

* Nest footnotes within markdown-body

Co-authored-by: Jon Rohan <[email protected]>

* Style footnotes

* Add footnotes to docs

* Lint

* Bump right border

Bumps the right border out a bit for symmetry in the :target border
style.

* Darken text when targeted

Co-authored-by: Jon Rohan <[email protected]>
Co-authored-by: simurai <[email protected]>

Author: 3 people

.changeset/gold-games-tickle.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": minor
+---
+
+Adding footnote styles to markdown-body.

docs/content/components/markdown.md

@@ -276,6 +276,25 @@ bundle: markdown
 
   <p><img src="http://placekitten.com/g/1200/800/"></p>
 
+  <p>
+    Here's a simple footnote,<sup><a href="#user-content-fn-1-12345" id="user-content-fnref-1-12345" data-footnote-ref="" aria-describedby="footnote-label">1</a></sup> and here's a longer one.<sup><a href="#user-content-fn-bignote-12345" id="user-content-fnref-bignote-12345" data-footnote-ref="" aria-describedby="footnote-label">2</a></sup>
+  </p>
+
+  <section data-footnotes="" class="footnotes">
+    <h2 id="footnote-label" class="sr-only">Footnotes</h2>
+    <ol>
+      <li id="user-content-fn-1-12345">
+        <p>This is the first footnote. <a href="#user-content-fnref-1-12345" data-footnote-backref="" class="data-footnote-backref" aria-label="Back to content"><g-emoji class="g-emoji" alias="leftwards_arrow_with_hook" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/21a9.png">↩</g-emoji></a></p>
+      </li>
+      <li id="user-content-fn-bignote-12345">
+        <p>Here's one with multiple paragraphs and code.</p>
+        <p>Indent paragraphs to include them in the footnote.</p>
+        <p><code>{ my code }</code></p>
+        <p>Add as many paragraphs as you like. <a href="#user-content-fnref-bignote-12345" data-footnote-backref="" class="data-footnote-backref" aria-label="Back to content"><g-emoji class="g-emoji" alias="leftwards_arrow_with_hook" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/21a9.png">↩</g-emoji></a></p>
+      </li>
+    </ol>
+  </section>
+
   <pre><code>This is the final element on the page and there should be no margin below this.</code></pre>
 </div>
 ```
@@ -447,6 +466,18 @@ Large images should always scale down and fit in the content container.
 
 ![](http://placekitten.com/g/1200/800/)
 
+Here's a simple footnote,[^1] and here's a longer one.[^bignote]
+
+[^1]: This is the first footnote.
+
+[^bignote]: Here's one with multiple paragraphs and code.
+
+  Indent paragraphs to include them in the footnote.
+
+  `{ my code }`
+
+  Add as many paragraphs as you like.
+
 ```
 This is the final element on the page and there should be no margin below this.
 ```

src/markdown/footnotes.scss

@@ -0,0 +1,37 @@
+// stylelint-disable selector-max-type
+// stylelint-disable selector-max-compound-selectors
+
+.markdown-body .footnotes {
+  font-size: $h6-size;
+  color: var(--color-fg-muted);
+  border-top: $border;
+
+  ol {
+    padding-left: $spacer-3;
+  }
+
+  li {
+    position: relative;
+  }
+
+  li:target::before {
+    position: absolute;
+    top: -$spacer-2;
+    right: -$spacer-2;
+    bottom: -$spacer-2;
+    left: -$spacer-4;
+    pointer-events: none;
+    content: "";
+    // stylelint-disable-next-line primer/borders
+    border: 2px $border-style var(--color-accent-emphasis);
+    border-radius: $border-radius;
+  }
+
+  li:target {
+    color: var(--color-fg-default);
+  }
+
+  .data-footnote-backref g-emoji {
+    font-family: monospace;
+  }
+}

src/markdown/index.scss

@@ -6,3 +6,4 @@
 @import "./images.scss";
 @import "./code.scss";
 @import "./blob-csv.scss";
+@import "./footnotes.scss";

src/markdown/markdown-body.scss

@@ -93,4 +93,12 @@
       margin-bottom: 0;
     }
   }
+
+  sup > a::before {
+    content: "[";
+  }
+
+  sup > a::after {
+    content: "]";
+  }
 }