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 BlockquoteBlockComponent Stories To Component Story Format v3 #12541

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. Removed the splitTheme decorator, as this is now handled by the "global colour scheme" toolbar item3 and a Chromatic mode4. Added the centreColumnDecorator, so the stories better reflect the layout commonly used in articles. Removed the custom design and theme generating functions in favour of the ones exported by format.ts.

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/essentials/toolbars-and-globals

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

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

Using `satisfies` gives better type safety for args. Removed the `splitTheme` decorator, as this is now handled by the "global colour scheme" toolbar item and a Chromatic mode. Added the `centreColumnDecorator`, so the stories better reflect the layout commonly used in articles. Removed the custom design and theme generating functions in favour of the ones exported by `format.ts`.
@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:48
@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