docs: split out demos

[bennypowers]

What I did

1. add hebrew translations to audio player (@nikkimk review)
2. ship the i18n files (@nikkimk)
3. add context support to rh-menu (@nikkimk)
4. prettied up the context picker ui for demos
5. nice up the general demo css
6. fix dialog so that it's always on light context (per guidelines)
7. fix styles for rh-button variant=link in alerts
8. add context demos even for some elements which don't support context (badge, alert)
9. split out demos into separate files and inline subresources for
   • accordion (@nikkimk)
   • alert (@nikkimk)
   • audio-player (@nikkimk)
   • badge (@nikkimk)
   • blockquote (@nikkimk)
   • button (@nikkimk)
   • card (@nikkimk)
   • dialog (@zeroedin)
   • footer (@zeroedin)
   • menu (@brianferry)
   • navigation-secondary (@zeroedin)
   • pagination (@brianferry)
   • spinner (@zeroedin)
   • stat (@zeroedin)
   • table (@brianferry)
   • tabs (@zeroedin)
   • tag (@brianferry) ✅
   • tile (@brianferry) ✅
   • timestamp (@brianferry) ✅
   • tooltip (@brianferry) ✅

[changeset-bot]

🦋 Changeset detected

Latest commit: 3954d54

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

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

[netlify]

✅ Deploy Preview for red-hat-design-system ready!

Name	Link
🔨 Latest commit	3954d54
🔍 Latest deploy log	https://app.netlify.com/sites/red-hat-design-system/deploys/653ab13eb22b970008951c6b
😎 Deploy Preview	https://deploy-preview-1291--red-hat-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

Size Change: +2.57 kB (+1%)

Total Size: 209 kB

Filename	Size	Change
./elements/rh-alert/rh-alert.js	4.27 kB	+32 B (+1%)
./elements/rh-context-provider/rh-context-provider.js	189 B	+4 B (+2%)
./elements/rh-dialog/rh-dialog.js	1.64 kB	+42 B (+3%)
./elements/rh-menu/rh-menu.js	1.25 kB	+231 B (+23%)	🚨
./elements/rh-navigation-secondary/rh-navigation-secondary.js	5.46 kB	+6 B (0%)
./lib/elements/rh-context-picker/rh-context-picker.js	2.2 kB	+1.05 kB (+90%)	🆘
./rhds.min.js	81.9 kB	+156 B (0%)
./lib/elements/rh-context-demo/rh-context-demo.js	1.05 kB	+1.05 kB (new file)	🆕

ℹ️ View Unchanged

Filename	Size
./elements/rh-accordion/rh-accordion-header.js	1.98 kB
./elements/rh-accordion/rh-accordion-panel.js	1.24 kB
./elements/rh-accordion/rh-accordion.js	1.17 kB
./elements/rh-audio-player/rh-audio-player-about.js	1.85 kB
./elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.js	1.51 kB
./elements/rh-audio-player/rh-audio-player-subscribe.js	1.43 kB
./elements/rh-audio-player/rh-audio-player.js	14.2 kB
./elements/rh-audio-player/rh-cue.js	2 kB
./elements/rh-audio-player/rh-transcript.js	2.94 kB
./elements/rh-avatar/random-pattern-controller.js	2.72 kB
./elements/rh-avatar/rh-avatar.js	2.9 kB
./elements/rh-badge/rh-badge.js	1.01 kB
./elements/rh-blockquote/rh-blockquote.js	1.96 kB
./elements/rh-button/rh-button.js	4.39 kB
./elements/rh-card/rh-card.js	1.88 kB
./elements/rh-code-block/rh-code-block.js	1.19 kB
./elements/rh-cta/rh-cta.js	4.58 kB
./elements/rh-dialog/yt-api.js	614 B
./elements/rh-footer/rh-footer-block.js	765 B
./elements/rh-footer/rh-footer-copyright.js	362 B
./elements/rh-footer/rh-footer-links.js	1.18 kB
./elements/rh-footer/rh-footer-social-link.js	960 B
./elements/rh-footer/rh-footer-universal.js	4.07 kB
./elements/rh-footer/rh-footer.js	5.07 kB
./elements/rh-footer/rh-global-footer.js	250 B
./elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js	2.55 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.js	1.46 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu.js	1.9 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-overlay.js	571 B
./elements/rh-navigation-secondary/test/fixtures.js	851 B
./elements/rh-pagination/rh-pagination.js	4.45 kB
./elements/rh-spinner/rh-spinner.js	1.61 kB
./elements/rh-stat/rh-stat.js	2.24 kB
./elements/rh-subnav/rh-subnav.js	2.84 kB
./elements/rh-table/rh-sort-button.js	1.31 kB
./elements/rh-table/rh-table.js	2.29 kB
./elements/rh-tabs/rh-tab-panel.js	789 B
./elements/rh-tabs/rh-tab.js	1.81 kB
./elements/rh-tabs/rh-tabs.js	1.86 kB
./elements/rh-tag/rh-tag.js	1.96 kB
./elements/rh-tile/rh-tile-group.js	1.76 kB
./elements/rh-tile/rh-tile.js	4.2 kB
./elements/rh-timestamp/rh-timestamp.js	974 B
./elements/rh-tooltip/rh-tooltip.js	2.15 kB
./lib/context/color/consumer.js	1.15 kB
./lib/context/color/controller.js	1.11 kB
./lib/context/color/provider.js	1.99 kB
./lib/context/event.js	598 B
./lib/context/headings/consumer.js	711 B
./lib/context/headings/controller.js	1.14 kB
./lib/context/headings/provider.js	1.23 kB
./lib/DirController.js	569 B
./lib/elements/rh-context-provider/rh-context-provider.js	746 B
./lib/functions.js	175 B
./lib/I18nController.js	1.38 kB
./lib/ScreenSizeController.js	856 B

_{compressed-size-action}

[zeroedin]

May not be for this PR, at mobile size the playground iframe doesn't seem to load the <pf-icons> in tabs.

[bennypowers]

@zeroedin same issue with footer, problem exists in prod

[zeroedin]

@zeroedin same issue with footer, problem exists in prod

Ok so pretty much anywhere an icon is being loaded, also see it now in rh-stat in the playground demo.

[zeroedin]

With the split out demos does it make sense on the dev server index view to hide the long lists with a disclosure? This can also be split out to a separate PR, not a blocker.

[zeroedin]

Just to be clear the elements I put my @zeroedin next to in the PR description have been reviewed and ✅ approved by me I assume thats what we were going for here. Taking a look at the non component changes now, then will approve the PR or comment more.

[zeroedin]

Lines glanced... Thursday malaise