feat: inline header or footer, via 'sticky' display group param

[jfmcquade]

PR Checklist

• PR title descriptive (can be used in release notes)

Description

Allows for inline template authoring of elements that stick to the top or bottom of the page.

This is achieved with a new param for the display group:

• sticky
  • Possible values
    • top
      • The display group element will stick to the top of the main content (below any app header). Scrollable content will scroll behind it
    • bottom
      • The display group element will stick to the bottom of the main content (above any app header). Scrollable content will scroll behind it

Also introduces a new parameter for the title component:

• variant: header
  • This centres the text and adds padding so that the title takes up space to be suitably used as a header

This feature can also be used to set the header/footer inside a nav-stack (#2550). See below for demo. This PR adds a new parameter for the nav_stack: open action, which should be used in this case (to hide the default nav-stack header):

• header: false (default true)
  • Set to false to hide the default nav-stack header, e.g. when using an inline sticky header on the target template.
  • NB, the template header should then handle its own nav-stack close button if required.

Usage notes

• These display groups must sit at the top and bottom of the template respectively (this is because a dummy element is created on the page in their place so that content doesn't disappear behind them unless scrolled).
• A sticky display group centres its content by default
• Currently no specific padding or margins are applied to the content in a sticky display group. The thought is that any such styling should be applied to the enclosed content itself.
• New components will be required to achieve certain visual use cases, for example the component added in Kuwait Theme: Module Details Header #2546, and the blue module header in this image (from these designs):
  

Git Issues

Closes #

Screenshots/Videos

feat_display_group_sticky

sticky.dg.2.mov

Integration with nav-stacks:

Ssticky.w.nav.stack.mov

[github-actions]

Visit the preview URL for this PR (updated for commit 14b3abb):

https://plh-teens-app1--pr2564-feat-sticky-display-kdd0s6lh.web.app

_{(expires Fri, 13 Dec 2024 16:34:10 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: e4c0bab6b08dd290fbf002fd6e07987fa4b5fce1}

[esmeetewinkel]

I tried this out on the plh_kids_kw deployment (with same theme selected) and found that some components don't disappear properly behind the sticky header.

Screenity.video.-.Nov.29.2024.webm