feat(storybook): build story modes

[TylerAPfledderer]

Description

This PR adds Story mode configurations to Storybook, which generate in Chromatic various snapshots for different view settings. These can include a snapshot per viewport width, dark mode, language, etc.

• Adjusts the generated viewports used where they should supply width values in px and em (coming from the Chakra default theme)
• Adds modes combining viewports and chosen languages (en, ru, uk, zh)
• Applies the modes at the story to the following components:
  • HubHero
  • HomeHero
  • ContentHero
  • MdxHero

Related Issue

Closes #12656

[netlify]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	3429349
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/6659c880bbfcf300080d71db
😎 Deploy Preview	https://deploy-preview-12668--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 50 (🟢 up 12 from production) Accessibility: 92 (no change from production) Best Practices: 89 (🔴 down 3 from production) SEO: 93 (no change from production) PWA: - View the detailed breakdown and full score reports

---

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

[TylerAPfledderer]

@nloureiro would like your review on this. Visit the below link to the Chromatic changeset for this build to see the current set of snapshots:
https://www.chromatic.com/review?appId=63b7ea99632763723c7f4d6b&number=12668&type=linked

A couple of things to note:

• The intention with your review of this PR is for thoughts and feedback on what types of snapshots you would like at this time.
  • I think this PR should only include snapshots for existing stories that should show different modes as described above
  • If you notice and design inconsistencies between this PR and in the DS, they should also be handled in a separate PR (I've noticed a couple of things already)
  • I still need to triage being able to render dark mode snapshot based on how the Chakra addon currently behaves in accessing the toggled modes.
• You will notice that the heros rendering two button show both with the outline variant. There is still an open PR that addresses this: fix(CallToAction): update and constrain prop object type shape #12015
• You will notice that with the heroes rendering two buttons, the second one just says "button". This is a non-translated "dumby" button to mock what two buttons looks like on the hero. We can certainly consider using specific content already present in the translation files instead.

cc @pettinarip

[TylerAPfledderer]

• @TylerAPfledderer add Farsi language to the Storybook preview option, and check the new snapshots
  • Add comment somewhere that there is an expected bug on initial SB load, where the RTL isn't triggering based on the language set.
• Generate mode sets for language and Viewport from existing objects

[wackerow]

Thanks for the update @TylerAPfledderer! Should we mark as draft until these are checked off?

[TylerAPfledderer]

Thanks for the update @TylerAPfledderer! Should we mark as draft until these are checked off?

Ah yes, probably should. Will do that now!

[TylerAPfledderer]

@pettinarip I have removed the Farsi language option and the directional config. Should be good for a review from you!

[TylerAPfledderer]

@pettinarip now with the Chakra addon removed in favor of a local setup, and Farsi added as a locale option, we should be all set here with RTL story modes! 🚀

[pettinarip]

LGTM @TylerAPfledderer, thanks!