Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(storybook): build story modes #12668

Open
wants to merge 21 commits into
base: dev
Choose a base branch
from

Conversation

TylerAPfledderer
Copy link
Contributor

@TylerAPfledderer TylerAPfledderer commented Apr 4, 2024

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

Copy link

netlify bot commented Apr 4, 2024

Deploy Preview for ethereumorg ready!

Name Link
🔨 Latest commit 23533cd
🔍 Latest deploy log https://app.netlify.com/sites/ethereumorg/deploys/665214f4dab63e0008d88460
😎 Deploy Preview https://deploy-preview-12668--ethereumorg.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
7 paths audited
Performance: 36 (🔴 down 2 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
Copy link
Contributor Author

TylerAPfledderer commented Apr 19, 2024

@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
Copy link
Contributor Author

TylerAPfledderer commented May 6, 2024

  • @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
Copy link
Member

wackerow commented May 7, 2024

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

@TylerAPfledderer
Copy link
Contributor Author

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

Ah yes, probably should. Will do that now!

@TylerAPfledderer TylerAPfledderer marked this pull request as draft May 7, 2024 21:52
@TylerAPfledderer TylerAPfledderer marked this pull request as ready for review May 8, 2024 23:24
@TylerAPfledderer
Copy link
Contributor Author

TylerAPfledderer commented May 8, 2024

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

@TylerAPfledderer
Copy link
Contributor Author

@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! 🚀

.storybook/modes.ts Outdated Show resolved Hide resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[RFC] Improve Variability of Storybook Snapshots with Modes
2 participants