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

Update BigNumber Stories To Component Story Format v3 #12540

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

JamieB-gu
Copy link
Contributor

This is the default for Storybook 7+, and integrates better with some of its features1.

Using satisfies gives better type safety for args2. Replaced the function-based story with the CSFv3 render method3. Removed the splitTheme decorator, as this is now handled by the "global colour scheme" toolbar item4 and a Chromatic mode5. As there's only one story, renamed the story to have the same name as the component, which allows storybook to hoist the story in the UI6.

Footnotes

  1. https://storybook.js.org/blog/storybook-csf3-is-here/

  2. https://storybook.js.org/docs/writing-stories/typescript#using-satisfies-for-better-type-safety

  3. https://storybook.js.org/docs/api/csf#custom-render-functions

  4. https://storybook.js.org/docs/essentials/toolbars-and-globals

  5. https://www.chromatic.com/docs/modes/

  6. https://storybook.js.org/docs/writing-stories/naming-components-and-hierarchy#single-story-hoisting

This is the default for Storybook 7+, and integrates better with some of its features.

Using `satisfies` gives better type safety for args. Replaced the function-based story with the CSFv3 `render` method. Removed the `splitTheme` decorator, as this is now handled by the "global colour scheme" toolbar item and a Chromatic mode. As there's only one story, renamed the story to have the same name as the component, which allows storybook to hoist the story in the UI.
@JamieB-gu JamieB-gu added this to the Health milestone Oct 11, 2024
@JamieB-gu JamieB-gu self-assigned this Oct 11, 2024
@JamieB-gu JamieB-gu requested a review from a team as a code owner October 11, 2024 16:09
Copy link

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

@JamieB-gu JamieB-gu added the run_chromatic Runs chromatic when label is applied label Oct 11, 2024
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Oct 11, 2024
Copy link

Size Change: 0 B

Total Size: 898 kB

ℹ️ View Unchanged
Filename Size
dotcom-rendering/dist/1000.client.web.********************.js 999 B
dotcom-rendering/dist/1026.client.web.********************.js 784 B
dotcom-rendering/dist/1090.client.web.********************.js 752 B
dotcom-rendering/dist/1156.client.web.********************.js 3.95 kB
dotcom-rendering/dist/1391.client.web.********************.js 725 B
dotcom-rendering/dist/1417.client.web.********************.js 2.28 kB
dotcom-rendering/dist/1476.client.web.********************.js 784 B
dotcom-rendering/dist/1667.client.web.********************.js 918 B
dotcom-rendering/dist/1884.client.web.********************.js 3.4 kB
dotcom-rendering/dist/1888.client.web.********************.js 2.92 kB
dotcom-rendering/dist/1904.client.web.********************.js 12.6 kB
dotcom-rendering/dist/1940.client.web.********************.js 507 B
dotcom-rendering/dist/2123.client.web.********************.js 619 B
dotcom-rendering/dist/2182.client.web.********************.js 529 B
dotcom-rendering/dist/2249.client.web.********************.js 4.91 kB
dotcom-rendering/dist/2310.client.web.********************.js 880 B
dotcom-rendering/dist/2390.client.web.********************.js 4.06 kB
dotcom-rendering/dist/267.client.web.********************.js 917 B
dotcom-rendering/dist/281.client.web.********************.js 642 B
dotcom-rendering/dist/3006.client.web.********************.js 4.49 kB
dotcom-rendering/dist/3109.client.web.********************.js 803 B
dotcom-rendering/dist/3270.client.web.********************.js 961 B
dotcom-rendering/dist/3304.client.web.********************.js 853 B
dotcom-rendering/dist/3673.client.web.********************.js 3.16 kB
dotcom-rendering/dist/3769.client.web.********************.js 999 B
dotcom-rendering/dist/408.client.web.********************.js 10.6 kB
dotcom-rendering/dist/4088.client.web.********************.js 3.97 kB
dotcom-rendering/dist/4122.client.web.********************.js 1.83 kB
dotcom-rendering/dist/4149.client.web.********************.js 3.77 kB
dotcom-rendering/dist/4172.client.web.********************.js 3.72 kB
dotcom-rendering/dist/4282.client.web.********************.js 685 B
dotcom-rendering/dist/4367.client.web.********************.js 3.83 kB
dotcom-rendering/dist/4493.client.web.********************.js 4.4 kB
dotcom-rendering/dist/4501.client.web.********************.js 4.29 kB
dotcom-rendering/dist/4590.client.web.********************.js 5.29 kB
dotcom-rendering/dist/4628.client.web.********************.js 654 B
dotcom-rendering/dist/4696.client.web.********************.js 3.67 kB
dotcom-rendering/dist/4749.client.web.********************.js 20.2 kB
dotcom-rendering/dist/4799.client.web.********************.js 4.02 kB
dotcom-rendering/dist/4866.client.web.********************.js 6.31 kB
dotcom-rendering/dist/4875.client.web.********************.js 157 B
dotcom-rendering/dist/4886.client.web.********************.js 8.09 kB
dotcom-rendering/dist/4941.client.web.********************.js 890 B
dotcom-rendering/dist/4966.client.web.********************.js 6.18 kB
dotcom-rendering/dist/5087.client.web.********************.js 439 B
dotcom-rendering/dist/5340.client.web.********************.js 3.32 kB
dotcom-rendering/dist/5341.client.web.********************.js 2.17 kB
dotcom-rendering/dist/5371.client.web.********************.js 3.34 kB
dotcom-rendering/dist/5409.client.web.********************.js 3.03 kB
dotcom-rendering/dist/5658.client.web.********************.js 750 B
dotcom-rendering/dist/5757.client.web.********************.js 931 B
dotcom-rendering/dist/5761.client.web.********************.js 4.65 kB
dotcom-rendering/dist/5870.client.web.********************.js 5.2 kB
dotcom-rendering/dist/5880.client.web.********************.js 828 B
dotcom-rendering/dist/5944.client.web.********************.js 4.97 kB
dotcom-rendering/dist/5982.client.web.********************.js 3.78 kB
dotcom-rendering/dist/6044.client.web.********************.js 726 B
dotcom-rendering/dist/6058.client.web.********************.js 3.24 kB
dotcom-rendering/dist/6071.client.web.********************.js 577 B
dotcom-rendering/dist/6135.client.web.********************.js 779 B
dotcom-rendering/dist/6505.client.web.********************.js 1 kB
dotcom-rendering/dist/6565.client.web.********************.js 1.99 kB
dotcom-rendering/dist/6598.client.web.********************.js 780 B
dotcom-rendering/dist/661.client.web.********************.js 3.21 kB
dotcom-rendering/dist/6638.client.web.********************.js 907 B
dotcom-rendering/dist/6738.client.web.********************.js 6.46 kB
dotcom-rendering/dist/678.client.web.********************.js 804 B
dotcom-rendering/dist/6915.client.web.********************.js 22.7 kB
dotcom-rendering/dist/7072.client.web.********************.js 3.85 kB
dotcom-rendering/dist/7116.client.web.********************.js 23 kB
dotcom-rendering/dist/7242.client.web.********************.js 4.55 kB
dotcom-rendering/dist/7341.client.web.********************.js 4 kB
dotcom-rendering/dist/7352.client.web.********************.js 5.91 kB
dotcom-rendering/dist/7407.client.web.********************.js 3.71 kB
dotcom-rendering/dist/7691.client.web.********************.js 853 B
dotcom-rendering/dist/7722.client.web.********************.js 2.17 kB
dotcom-rendering/dist/7780.client.web.********************.js 2.27 kB
dotcom-rendering/dist/7962.client.web.********************.js 3.58 kB
dotcom-rendering/dist/823.client.web.********************.js 16.4 kB
dotcom-rendering/dist/827.client.web.********************.js 3.89 kB
dotcom-rendering/dist/83.client.web.********************.js 750 B
dotcom-rendering/dist/840.client.web.********************.js 3.2 kB
dotcom-rendering/dist/8476.client.web.********************.js 2.42 kB
dotcom-rendering/dist/8483.client.web.********************.js 13.9 kB
dotcom-rendering/dist/8504.client.web.********************.js 827 B
dotcom-rendering/dist/8536.client.web.********************.js 595 B
dotcom-rendering/dist/8626.client.web.********************.js 890 B
dotcom-rendering/dist/8648.client.web.********************.js 2.87 kB
dotcom-rendering/dist/8667.client.web.********************.js 4.26 kB
dotcom-rendering/dist/8697.client.web.********************.js 956 B
dotcom-rendering/dist/8730.client.web.********************.js 4.43 kB
dotcom-rendering/dist/8746.client.web.********************.js 3.01 kB
dotcom-rendering/dist/8822.client.web.********************.js 526 B
dotcom-rendering/dist/8833.client.web.********************.js 829 B
dotcom-rendering/dist/8990.client.web.********************.js 3.41 kB
dotcom-rendering/dist/9054.client.web.********************.js 1.91 kB
dotcom-rendering/dist/9105.client.web.********************.js 2.02 kB
dotcom-rendering/dist/9132.client.web.********************.js 4.2 kB
dotcom-rendering/dist/9184.client.web.********************.js 493 B
dotcom-rendering/dist/9216.client.web.********************.js 3.45 kB
dotcom-rendering/dist/940.client.web.********************.js 10.2 kB
dotcom-rendering/dist/9493.client.web.********************.js 785 B
dotcom-rendering/dist/9557.client.web.********************.js 921 B
dotcom-rendering/dist/9721.client.web.********************.js 717 B
dotcom-rendering/dist/9736.client.web.********************.js 44.2 kB
dotcom-rendering/dist/9835.client.web.********************.js 647 B
dotcom-rendering/dist/9899.client.web.********************.js 669 B
dotcom-rendering/dist/Accessibility-importable.client.web.********************.js 5.96 kB
dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js 2.85 kB
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js 3.94 kB
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js 424 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js 3.57 kB
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js 3.16 kB
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js 3.15 kB
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js 2.5 kB
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js 3.08 kB
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js 4.88 kB
dotcom-rendering/dist/Branding-importable.client.web.********************.js 2.54 kB
dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js 37.2 kB
dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js 1.96 kB
dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js 6.71 kB
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js 7.92 kB
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js 2.97 kB
dotcom-rendering/dist/Carousel-importable.client.web.********************.js 6.69 kB
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 4.52 kB
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js 539 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js 2.79 kB
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js 1.91 kB
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js 1.22 kB
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js 1.74 kB
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js 3.14 kB
dotcom-rendering/dist/Dropdown-importable.client.web.********************.js 1.72 kB
dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js 5.97 kB
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js 3.77 kB
dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js 2.01 kB
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js 2.41 kB
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js 968 B
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js 619 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js 3.43 kB
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js 347 B
dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js 3.74 kB
dotcom-rendering/dist/frameworks.client.web.********************.js 20.9 kB
dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js 7.65 kB
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js 3.82 kB
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js 10.6 kB
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js 7.42 kB
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js 2.22 kB
dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js 15.9 kB
dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js 10.1 kB
dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js 783 B
dotcom-rendering/dist/index.client.web.********************.js 45 kB
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 2.79 kB
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js 849 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js 6.28 kB
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js 4.24 kB
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 4.77 kB
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 3.61 kB
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 4.18 kB
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 436 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js 6.51 kB
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js 3.78 kB
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js 5.27 kB
dotcom-rendering/dist/Liveness-importable.client.web.********************.js 5.52 kB
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js 7.63 kB
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js 4.95 kB
dotcom-rendering/dist/Metrics-importable.client.web.********************.js 2.69 kB
dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js 4 kB
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js 6.71 kB
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js 5.68 kB
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js 5.8 kB
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js 3.77 kB
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js 543 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js 803 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js 750 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js 542 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js 469 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js 1.97 kB
dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js 2.53 kB
dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js 6.78 kB
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js 5 kB
dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js 2.95 kB
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 4.6 kB
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js 2.19 kB
dotcom-rendering/dist/sentry.client.web.********************.js 792 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js 3.69 kB
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js 484 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js 3.72 kB
dotcom-rendering/dist/shimport.client.web.********************.js 2.8 kB
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js 729 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js 1.75 kB
dotcom-rendering/dist/SignInGateMain.client.web.********************.js 4.53 kB
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js 5.63 kB
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js 3.16 kB
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js 3.49 kB
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js 4.8 kB
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js 4.21 kB
dotcom-rendering/dist/StickyLiveblogAskWrapper-importable.client.web.********************.js 7.68 kB
dotcom-rendering/dist/SubNav-importable.client.web.********************.js 2.9 kB
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js 2.7 kB
dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js 1.23 kB
dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js 14.7 kB
dotcom-rendering/dist/TopBar-importable.client.web.********************.js 8.26 kB
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js 2.75 kB
dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js 1.13 kB
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js 2.8 kB
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js 4.96 kB
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js 2.63 kB
dotcom-rendering/dist/WeatherWrapper-importable.client.web.********************.js 6.55 kB
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 5.94 kB

compressed-size-action

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Review
Development

Successfully merging this pull request may close these issues.

1 participant