Update f2 with footnotes example

[rezrah]

Summary

Adds footnotes example to F2 template as an interim workaround for not having a dedicated component

What should reviewers focus on?

• Verify correctness of design, and the assumptions made in this PR
  • Text size: 100
  • Color: muted
  • Works in either single paragraphs (using <br />) or multiple paragraphs (relying on Stack spacing)
  • Fills entire width on narrow viewports
  • Offset by 2 columns on regular+ viewports. Reading across 12 columns is quite difficult IMO.
  • Top spacing: 64px on narrow, 128 on regular+

Steps to test:

1. Scroll to the bottom of this story

Contributor checklist:

• All new and existing CI checks pass
• Tests prove that the feature works and covers both happy and unhappy paths
• Any drop in coverage, breaking changes or regressions have been documented above
• New visual snapshots have been generated / updated for any UI changes
• All developer debugging and non-functional logging has been removed
• Related issues have been referenced in the PR description

Reviewer checklist:

• Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
• Check that tests prove the feature works and covers both happy and unhappy paths
• Check that there aren't other open Pull Requests for the same update/change

Screenshots:

[changeset-bot]

⚠️ No Changeset found

Latest commit: c68db26

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

🟢 No design token changes found

[github-actions]

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.

[nsolerieu]

@rezrah I agree with most of your suggestions, here are some additional specs considering the pointers form a11y @natalie-iv gathered

• Use numbers (not symbols)
• Provide a back link (view original context label here)
• 80px spacer outside spacer, 24px within the stack
• Extract the number and align with text block
• Small body copy at 14px - text color secondary
• 9 col max (924px) width to fit line length

[waynewi]

@rezrah can we have this same direction added to the solutions templates so we can fold it into the work currently happening on the MPS side?

[rezrah]

Thanks everyone. Update on this PR in Slack...

[nsolerieu]

Documentation notes:

Default use:

For a basic context agnostic use-case (legal disclaimer, sources, references), Footnotes should live before the footer

Accessibility recommendation:

To limit cognitive requirement, we recommended collocating footnotes closer to initial context by including them at teh bottom of the section in which the initial content is presented

When content allows:

The tooltip component is an in-context solution, ideal when very short content allows