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

Refactor Quiz Atom Stories #13144

Merged
merged 1 commit into from
Jan 15, 2025
Merged

Refactor Quiz Atom Stories #13144

merged 1 commit into from
Jan 15, 2025

Conversation

JamieB-gu
Copy link
Contributor

Added the centreColumnDecorator, so the stories better reflect the layout commonly used in articles. Removed the splitTheme decorator, as this is now handled by the "global colour scheme" toolbar item1 and Chromatic modes2. Added Chromatic modes to these stories.

Added a WithResults story for each variant of the quiz atom. It includes a play function3 to work through the quiz, selecting some answers and revealing/submitting them. This story therefore displays the component in a state that includes the results box, and allows it to be snapshotted like this in Chromatic4.

Footnotes

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

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

  3. https://storybook.js.org/docs/essentials/interactions

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

@JamieB-gu JamieB-gu added this to the Health milestone Jan 15, 2025
@JamieB-gu JamieB-gu self-assigned this Jan 15, 2025
Added the `centreColumnDecorator`, so the stories better reflect the layout commonly used in articles. Removed the `splitTheme` decorator, as this is now handled by the "global colour scheme" toolbar item and Chromatic modes. Added Chromatic modes to these stories.

Added a `WithResults` story for each variant of the quiz atom. It includes a `play` function to work through the quiz, selecting some answers and revealing/submitting them. This story therefore displays the component in a state that includes the results box, and allows it to be snapshotted like this in Chromatic.
@JamieB-gu JamieB-gu force-pushed the refactor-quiz-atom-stories branch from cf14ab7 to 7f2d8e3 Compare January 15, 2025 13:31
@JamieB-gu JamieB-gu marked this pull request as ready for review January 15, 2025 13:33
@JamieB-gu JamieB-gu requested a review from a team as a code owner January 15, 2025 13:33
@JamieB-gu JamieB-gu added the run_chromatic Runs chromatic when label is applied label Jan 15, 2025
Copy link

github-actions bot commented Jan 15, 2025

Size Change: 0 B

Total Size: 871 kB

ℹ️ View Unchanged
Filename Size
dotcom-rendering/dist/1076.client.web.********************.js 3.41 kB
dotcom-rendering/dist/1262.client.web.********************.js 4.49 kB
dotcom-rendering/dist/1301.client.web.********************.js 4.82 kB
dotcom-rendering/dist/1401.client.web.********************.js 441 B
dotcom-rendering/dist/1477.client.web.********************.js 3.52 kB
dotcom-rendering/dist/1679.client.web.********************.js 2.49 kB
dotcom-rendering/dist/1714.client.web.********************.js 2.87 kB
dotcom-rendering/dist/1891.client.web.********************.js 3.83 kB
dotcom-rendering/dist/2188.client.web.********************.js 6.52 kB
dotcom-rendering/dist/2444.client.web.********************.js 2.67 kB
dotcom-rendering/dist/2482.client.web.********************.js 44.8 kB
dotcom-rendering/dist/280.client.web.********************.js 531 B
dotcom-rendering/dist/3213.client.web.********************.js 5.42 kB
dotcom-rendering/dist/342.client.web.********************.js 4.18 kB
dotcom-rendering/dist/3524.client.web.********************.js 3.51 kB
dotcom-rendering/dist/3769.client.web.********************.js 22.7 kB
dotcom-rendering/dist/3789.client.web.********************.js 3.58 kB
dotcom-rendering/dist/39.client.web.********************.js 3.06 kB
dotcom-rendering/dist/3937.client.web.********************.js 3.85 kB
dotcom-rendering/dist/4020.client.web.********************.js 14.4 kB
dotcom-rendering/dist/4170.client.web.********************.js 16.3 kB
dotcom-rendering/dist/4237.client.web.********************.js 3.22 kB
dotcom-rendering/dist/4285.client.web.********************.js 6.12 kB
dotcom-rendering/dist/4501.client.web.********************.js 4.29 kB
dotcom-rendering/dist/4684.client.web.********************.js 3.17 kB
dotcom-rendering/dist/4791.client.web.********************.js 4.94 kB
dotcom-rendering/dist/5095.client.web.********************.js 4.17 kB
dotcom-rendering/dist/5598.client.web.********************.js 4.49 kB
dotcom-rendering/dist/5721.client.web.********************.js 3.64 kB
dotcom-rendering/dist/5922.client.web.********************.js 8.08 kB
dotcom-rendering/dist/6021.client.web.********************.js 11 kB
dotcom-rendering/dist/6061.client.web.********************.js 3.63 kB
dotcom-rendering/dist/6073.client.web.********************.js 3.53 kB
dotcom-rendering/dist/6080.client.web.********************.js 3.27 kB
dotcom-rendering/dist/6627.client.web.********************.js 10.3 kB
dotcom-rendering/dist/6659.client.web.********************.js 3.58 kB
dotcom-rendering/dist/6876.client.web.********************.js 2.67 kB
dotcom-rendering/dist/6882.client.web.********************.js 12.6 kB
dotcom-rendering/dist/6903.client.web.********************.js 3.21 kB
dotcom-rendering/dist/6931.client.web.********************.js 2.56 kB
dotcom-rendering/dist/6940.client.web.********************.js 526 B
dotcom-rendering/dist/7026.client.web.********************.js 5.41 kB
dotcom-rendering/dist/7116.client.web.********************.js 23 kB
dotcom-rendering/dist/719.client.web.********************.js 3.48 kB
dotcom-rendering/dist/7350.client.web.********************.js 3.32 kB
dotcom-rendering/dist/7513.client.web.********************.js 157 B
dotcom-rendering/dist/7540.client.web.********************.js 2.72 kB
dotcom-rendering/dist/7546.client.web.********************.js 7.36 kB
dotcom-rendering/dist/7861.client.web.********************.js 617 B
dotcom-rendering/dist/8030.client.web.********************.js 4.18 kB
dotcom-rendering/dist/8067.client.web.********************.js 3.39 kB
dotcom-rendering/dist/895.client.web.********************.js 5.14 kB
dotcom-rendering/dist/9242.client.web.********************.js 3.75 kB
dotcom-rendering/dist/9288.client.web.********************.js 2.51 kB
dotcom-rendering/dist/9558.client.web.********************.js 3.53 kB
dotcom-rendering/dist/9665.client.web.********************.js 4.04 kB
dotcom-rendering/dist/9735.client.web.********************.js 4.46 kB
dotcom-rendering/dist/9766.client.web.********************.js 3.4 kB
dotcom-rendering/dist/9771.client.web.********************.js 3.69 kB
dotcom-rendering/dist/9995.client.web.********************.js 20.3 kB
dotcom-rendering/dist/Accessibility-importable.client.web.********************.js 6.71 kB
dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js 2.85 kB
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js 4.85 kB
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js 423 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js 3.63 kB
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js 2.7 kB
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js 2.66 kB
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js 2.55 kB
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js 2.59 kB
dotcom-rendering/dist/AudioPlayerWrapper-importable.client.web.********************.js 6.32 kB
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js 2 kB
dotcom-rendering/dist/Branding-importable.client.web.********************.js 2.88 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.75 kB
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js 5.77 kB
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js 2.66 kB
dotcom-rendering/dist/Carousel-importable.client.web.********************.js 7.03 kB
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 5.14 kB
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js 538 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js 2.29 kB
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js 1.93 kB
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js 2.44 kB
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js 1.74 kB
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js 2.82 kB
dotcom-rendering/dist/Dropdown-importable.client.web.********************.js 1.72 kB
dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js 3.49 kB
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js 3.94 kB
dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js 2.02 kB
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js 1.93 kB
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js 3.8 kB
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js 617 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js 2.52 kB
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js 343 B
dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js 3.5 kB
dotcom-rendering/dist/frameworks.client.web.********************.js 20.9 kB
dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js 7.37 kB
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js 6.26 kB
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js 11.4 kB
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js 7.97 kB
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js 2.58 kB
dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js 15.8 kB
dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js 10.2 kB
dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js 783 B
dotcom-rendering/dist/index.client.web.********************.js 44.7 kB
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 2.9 kB
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js 851 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js 8.49 kB
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js 3.74 kB
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 5.68 kB
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 3.48 kB
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 6.38 kB
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 434 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js 6.53 kB
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js 3.55 kB
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js 4.82 kB
dotcom-rendering/dist/Liveness-importable.client.web.********************.js 4.72 kB
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js 7.61 kB
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js 5.89 kB
dotcom-rendering/dist/Metrics-importable.client.web.********************.js 2.69 kB
dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js 3.85 kB
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js 5.94 kB
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js 5.11 kB
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js 5.32 kB
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js 3.65 kB
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js 543 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js 802 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js 750 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js 543 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js 468 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js 1.74 kB
dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js 2.53 kB
dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js 6.11 kB
dotcom-rendering/dist/ScrollableFeature-importable.client.web.********************.js 7.07 kB
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js 6.28 kB
dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js 4.4 kB
dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js 4.37 kB
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 4.1 kB
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js 2.22 kB
dotcom-rendering/dist/sentry.client.web.********************.js 794 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js 3.69 kB
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js 485 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js 919 B
dotcom-rendering/dist/shimport.client.web.********************.js 2.8 kB
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js 730 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js 2.1 kB
dotcom-rendering/dist/SignInGateMain.client.web.********************.js 4.46 kB
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js 5.56 kB
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js 5.83 kB
dotcom-rendering/dist/SlideshowCarousel-importable.client.web.********************.js 4.37 kB
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js 4.84 kB
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js 5.71 kB
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js 6.15 kB
dotcom-rendering/dist/StickyLiveblogAskWrapper-importable.client.web.********************.js 8.13 kB
dotcom-rendering/dist/SubNav-importable.client.web.********************.js 2.41 kB
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js 3.48 kB
dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js 1.23 kB
dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js 13.5 kB
dotcom-rendering/dist/TopBar-importable.client.web.********************.js 9.29 kB
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js 2.49 kB
dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js 1.13 kB
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js 2.91 kB
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js 5.9 kB
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js 2.78 kB
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 4.38 kB

compressed-size-action

@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Jan 15, 2025
@JamieB-gu JamieB-gu merged commit 025b5ac into main Jan 15, 2025
32 checks passed
@JamieB-gu JamieB-gu deleted the refactor-quiz-atom-stories branch January 15, 2025 16:00
@prout-bot
Copy link

Seen on PROD (merged by @JamieB-gu 8 minutes and 53 seconds ago) Please check your changes!

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

Successfully merging this pull request may close these issues.

3 participants