[feat]: `<rh-footnote>` ready for development

marionnegp commented 1 year ago

Tag Name

rh-footnote

Purpose

Provides a pattern/component for displaying footnotes. [XD link]

Distinguishing factors

No response

Where will it be used?

Used on redhat.com (example pages: Our Company, Resources article)
Can be used with stat component

End user

Designers and content creators

Intended end use

Clicking the footnote link will show a popover with additional information or a reference.
Traditional list of references will still be available at the bottom of the page. Is there a way to auto-populate the popovers' content into a list at the bottom? (May be a question about Drupal implementation.)

Properties

The footnote's superscript size depends on the body text font size.
The footnote isn't a superscript at font sizes 14pt and lower to prevent it from being too small. At this size, font weight and character spacing should match body text.
Popover component should handle position and orientation of popover.

Page Builder

[ ] My component will be part of a page-builder experience
[X] I'm not sure

Accessibility Features

[X] Color: Color should not be the primary visual means of communicating information (1.4.1)
[X] Content or microcopy Text in any language should be clear, meaningful, structured, etc.
[X] Text Contrast: Small text should have a contrast ratio of at least 4.5:1 (1.4.3)
[X] Text Contrast: Large text should have a contrast ratio of at least 3:1 (1.4.3)
[X] Resizable Text: Text should have the ability to be resized up to 200% without losing content or functionality (for example, horizontal scrolling) (1.4.4)
[X] Alt Text: Non-text elements should have concise text descriptions (a.k.a. alt text) (1.1.1)
[X] Keyboard: Descriptions of how interactive elements behave when a key is pressed should be included (2.1.1) (for example, the Esc key closes a navigation menu)
[X] Focus Appearance: Colors between focused states should have a contrast ratio of at least 3.1 (2.4.11)
[X] Focus Appearance: Borders should have a thickness of at least 2px (2.4.11)
[X] Focus Order: It should be logical how a user moves focus from one element to another (2.4.3)
[X] Motion Animation: Controls should be available to disable an animation triggered by an interaction (2.3.3)
[X] Mobile: Interactive elements should be reachable for touching, scrolling, or dismissing

MVP Requirements

[X] Correct styles and neccessary sizes, orientations, variants, spacers, and themes
[X] Responsive sizes and page layout examples placed on screenshots
[X] Functionality guidance and static animation frames or prototypes with motion
[X] Interaction and Selected states
[X] Alignment options, character counts, and necessary translations
[X] Clear and structured content, acceptable text contrast, and logical keyboard events

Appearance

[ ] Foundations are represented as tokens or variables (border, color, font, opacity, spacing, shadow, etc.) [Consult with the assigned developer to ensure you are both working with the correct styles and values]
[ ] Foundations are applied to elements (backgrounds, buttons, fields, icons, links, etc.)
[ ] Size (Standard, Compact, Mini, etc.)
[ ] Orientations (horizontal or vertical)
[ ] Position in relation to trigger (top, right, bottom, left, etc.)
[ ] Hierarchy and decoration variants (Primary and Secondary CTAs, Earth and Wind variant Tabs, etc.)
[ ] Decorations (borders, logos, UI icons, etc.)
[X] Desktop and mobile scale spacers (visit the Spacing and Typography pages for examples)
[X] Themes (light, dark, high-contrast, custom color, etc.)
[ ] Edge cases or limitations (accessibility, brand extensions, horizontal scrolling, missing images, etc.) [It is not required to include all of these specs, but keep them in mind]
[ ] Fallback (if a browser does not support the original design) [Consult with the assigned developer first to determine if this is necessary to design]

Page Layout

[ ] Location on page (navigation, hero, band, card, footer, etc.)
[ ] Grid (fixed width inside the grid, full-width or outside of the grid)
[ ] Position on page (inline, overlay, toast)
[ ] Stacking (space in between each instance if your component is meant to be repeatable)
[X] Responsive screen sizes (desktop, tablet, mobile, etc.)
[ ] Content degradation (becomes hidden, reduces in size, truncates due to length, etc.)
[ ] Scrolling behavior (fixed, sticky, content scrolls inside; visit this page for examples)

Behavior

[ ] Functionality (collapse, expand, navigate, play, submit, etc.)
[ ] Animation or motion (hover, jump, slide, stack, toggle, etc.)
[ ] Overflow (when content exceeds a defined boundary; visit the Tabs page for examples)
[ ] Other effects (blur, cover, shuffle, etc.)

States

[X] Interaction (default, focus, hover, active, disabled, dragged, etc.)
[X] Selected (if a user needs to distinguish between active or inactive content)
[ ] Steps (if a user needs to move through steps toward the completion of a task)
[ ] Error (if a user needs to complete a task or fix an issue before proceeding)
[ ] Severity (if a range of status options need to be communicated to a user)
[ ] Boolean (if on or off are the only actions available to a user, literally or semantically)
[ ] Skeleton loading (if a component might load slower for a user than expected)
[ ] Empty (if data cannot be displayed without user input; visit this page for examples)
[ ] Fallback (if JavaScript is disabled or it fails to load) [Consult with the assigned developer first to determine if this is necessary to design]

Content

[ ] Alignment options (left, center, or both)
[ ] Character counts (minimum and maximum)
[ ] Links (which links are inline, external, redirects, etc.)
[ ] Translations (German, Japanese, Hebrew, etc.)
[ ] Edge cases or limitations (overflow, truncate, wrap, etc.) [It is not required to include all of these specs, but keep them in mind]

markcaron commented 1 year ago

Docs issue: #744

marionnegp commented 8 months ago

@markcaron, <rh-footnote> needs popover to show the source citation. Should this be moved to another milestone?

bennypowers commented 5 months ago

This looks like a pattern that composed <rh-popover>. I suggest the output from this task be limited to /docs/patterns/footnote/ without publishing any web components. Just to make the consequences of that explicit: implementors would be required to copy the citation information into two places, in the actual page footnotes (after the content) and inline into the popover elements.

marionnegp commented 5 months ago

@bennypowers, can you explain what you mean when you say it composed <rh-popover>? We also don't have popover in RHDS, but `' is very similar.

bennypowers commented 5 months ago

imagine this content

<p>
  This paragraph has two <sup>
    <a href="#footnote-1">[<rh-footnote>
      1
      <div slot="content">A footnote is a reference to auxiliary information on a topic</div>
    </rh-footnode>]</a>
  </sup> footnotes. they both use the <sup>
    <a href="#footnote-2">[<rh-footnote>
      2
      <div slot="content">the footnote element is essentially just a type of popover</div>
    </rh-footnode>]</a>
  </sup>
</p>

<footer id="footnotes">
  <h2>footnotes</h2>
  <ol>
    <li id="footnote-1">A footnote is a reference to auxiliary information on a topic</li>
    <li id="footnote-2">the footnote element is essentially just a type of popover</li>
  </ol>
<footer>

What does footnote do here that popover doesn't do? the page author still has to:

insert footnotes into the content of the popovers
insert footnotes into the content of the list in the footer

We can imagine a custom element which automatically builds the footnotes in the footer in one of any number of ways, but CMS content authors are likely to prefer to be in control of that themselves, and not use client-side js for that task

This is where I'm coming from when i remarked earlier that it seems to me that "footnote" is really just a special usage of "popover"

RedHat-UX / red-hat-design-system