Add footnotes interface guidelines (#723)

* add footnotes interface guidelines

* fix alt text

apps/docs/content/components/Footnotes/index.mdx

@@ -0,0 +1,72 @@
+---
+title: Footnotes
+description: Use footnotes to display contextual information and cite sources in the page content.
+---
+
+import ComponentLayout from '../../../src/layouts/component-layout'
+export default ComponentLayout
+
+import anatomy from './images/anatomy.png'
+import doPosition from './images/do-position.png'
+import doReturnLinks from './images/do-use-return-urls.png'
+import dontReturnLinks from './images/dont-use-return-urls.png'
+import doUseDisclaimer from './images/do-use-disclaimer.png'
+import dontUseDisclaimer from './images/dont-use-disclaimer.png'
+
+## Anatomy
+
+<img
+  src={anatomy}
+  alt="Footnotes as an ordered list of citations, with visual indicators marking items and return urls"
+/>
+
+## Usage
+
+### Position
+
+Footnotes should generally appear at the bottom of the page.
+
+<DoDontContainer stacked>
+  <Do>
+    <img src={doPosition} alt="" />
+    <Caption>Place footnotes towards the end of a page.</Caption>
+  </Do>
+</DoDontContainer>
+
+### Return links
+
+Citations in the format of a numbered list should feature both a local description and a link to return the user to the original context.
+
+<DoDontContainer>
+  <Do>
+    <img src={doReturnLinks} alt="" />
+    <Caption>
+      Include sufficient descriptions for each citation, alongside a return
+      link.
+    </Caption>
+  </Do>
+  <Dont>
+    <img src={dontReturnLinks} alt="" />
+    <Caption>
+      Don't require users to manually locate the original context for each
+      citation.
+    </Caption>
+  </Dont>
+</DoDontContainer>
+
+### Paragraphs
+
+Use paragraphs to present disclaimers or similar types of content.
+
+<DoDontContainer>
+  <Do>
+    <img alt="" src={doUseDisclaimer} />
+    <Caption>Use paragraphs for context-agnostic items of text.</Caption>
+  </Do>
+  <Dont>
+    <img alt="" src={dontUseDisclaimer} />
+    <Caption>
+      Don't use paragraphs to represent citations or numbered lists.
+    </Caption>
+  </Dont>
+</DoDontContainer>

apps/docs/content/components/Footnotes.mdx → apps/docs/content/components/Footnotes/react.mdx

@@ -7,8 +7,10 @@ description: Use footnotes to display contextual information and cite sources in
 ---
 
 import {Label} from '@primer/react'
-import {PropTableValues} from '../../src/components'
+import {PropTableValues} from '../../../src/components'
 import {Link} from '@primer/react-brand'
+import ComponentLayout from '../../../src/layouts/component-layout'
+export default ComponentLayout
 
 ```js
 import {Footnotes} from '@primer/react-brand'

apps/docs/scripts/components-with-animation.js

@@ -10,8 +10,8 @@ export const supportedComponents = [
   'Label',
   'Pillar',
   'SectionIntro',
-  'Statistic',
   'Stack',
+  'Statistic',
   'Testimonial',
   'Text',
   'Timeline',