Skip to content

ChangeBars Election Trackers Component #13921

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

Merged
merged 7 commits into from
Jun 5, 2025
Merged

Conversation

JamieB-gu
Copy link
Contributor

Adds a new election trackers component to display a list of changes. This could be used, for example, to display changes in seats compared to a previous election. The included stories show examples of this.

This component is one of several that will allow rendering election trackers within DCAR.

Note: This relies on some changes in #13920, so opening as a draft against that branch for now.

Screenshots

Light Dark
change-bars-light change-bars-dark

JamieB-gu added 2 commits May 8, 2025 12:09
Adds a new election trackers component to display a list of values and
the amount by which they've changed. This could be used, for example, to
display a list of seats won in an election along with the changes since
the last election. The included stories show examples of this.

This component is one of several that will allow rendering election
trackers within DCAR.
Adds a new election trackers component to display a list of changes.
This could be used, for example, to display changes in seats compared to
a previous election. The included stories show examples of this.

This component is one of several that will allow rendering election
trackers within DCAR.
@JamieB-gu JamieB-gu self-assigned this May 8, 2025
@JamieB-gu JamieB-gu added the run_chromatic Runs chromatic when label is applied label May 8, 2025
Copy link

github-actions bot commented May 8, 2025

@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label May 8, 2025
Copy link

github-actions bot commented May 8, 2025

Size Change: +33 B (0%)

Total Size: 1.04 MB

ℹ️ View Unchanged
Filename Size Change
dotcom-rendering/dist/1082.client.web.********************.js 19.4 kB 0 B
dotcom-rendering/dist/1098.client.web.********************.js 3.17 kB 0 B
dotcom-rendering/dist/1359.client.web.********************.js 22.8 kB 0 B
dotcom-rendering/dist/1469.client.web.********************.js 5.46 kB 0 B
dotcom-rendering/dist/1476.client.web.********************.js 18.1 kB 0 B
dotcom-rendering/dist/1637.client.web.********************.js 2.86 kB 0 B
dotcom-rendering/dist/1734.client.web.********************.js 5.82 kB 0 B
dotcom-rendering/dist/1795.client.web.********************.js 440 B 0 B
dotcom-rendering/dist/1922.client.web.********************.js 3.55 kB 0 B
dotcom-rendering/dist/22.client.web.********************.js 7.68 kB 0 B
dotcom-rendering/dist/2861.client.web.********************.js 3.77 kB 0 B
dotcom-rendering/dist/2963.client.web.********************.js 5.78 kB 0 B
dotcom-rendering/dist/305.client.web.********************.js 4.17 kB 0 B
dotcom-rendering/dist/3188.client.web.********************.js 5.02 kB 0 B
dotcom-rendering/dist/3196.client.web.********************.js 4.9 kB 0 B
dotcom-rendering/dist/3392.client.web.********************.js 3.23 kB 0 B
dotcom-rendering/dist/3550.client.web.********************.js 2.85 kB 0 B
dotcom-rendering/dist/3616.client.web.********************.js 2.62 kB 0 B
dotcom-rendering/dist/3637.client.web.********************.js 2.77 kB 0 B
dotcom-rendering/dist/3783.client.web.********************.js 3.86 kB 0 B
dotcom-rendering/dist/3920.client.web.********************.js 4.13 kB 0 B
dotcom-rendering/dist/4115.client.web.********************.js 3.86 kB 0 B
dotcom-rendering/dist/4250.client.web.********************.js 3.44 kB 0 B
dotcom-rendering/dist/4266.client.web.********************.js 3.47 kB 0 B
dotcom-rendering/dist/4274.client.web.********************.js 3.9 kB 0 B
dotcom-rendering/dist/4317.client.web.********************.js 11.8 kB +35 B (+0.3%)
dotcom-rendering/dist/4341.client.web.********************.js 16.6 kB 0 B
dotcom-rendering/dist/4501.client.web.********************.js 4.29 kB 0 B
dotcom-rendering/dist/4901.client.web.********************.js 3.27 kB 0 B
dotcom-rendering/dist/4959.client.web.********************.js 2.68 kB 0 B
dotcom-rendering/dist/5140.client.web.********************.js 3.55 kB 0 B
dotcom-rendering/dist/5166.client.web.********************.js 3.79 kB 0 B
dotcom-rendering/dist/5287.client.web.********************.js 10.6 kB 0 B
dotcom-rendering/dist/5305.client.web.********************.js 2.11 kB 0 B
dotcom-rendering/dist/5356.client.web.********************.js 2.87 kB 0 B
dotcom-rendering/dist/5764.client.web.********************.js 4.44 kB 0 B
dotcom-rendering/dist/5897.client.web.********************.js 3.19 kB 0 B
dotcom-rendering/dist/6057.client.web.********************.js 3.68 kB 0 B
dotcom-rendering/dist/6211.client.web.********************.js 157 B 0 B
dotcom-rendering/dist/64.client.web.********************.js 3.26 kB 0 B
dotcom-rendering/dist/6501.client.web.********************.js 65.6 kB 0 B
dotcom-rendering/dist/6851.client.web.********************.js 3.05 kB 0 B
dotcom-rendering/dist/6938.client.web.********************.js 527 B 0 B
dotcom-rendering/dist/6983.client.web.********************.js 5.02 kB 0 B
dotcom-rendering/dist/7116.client.web.********************.js 23.2 kB 0 B
dotcom-rendering/dist/7189.client.web.********************.js 11.8 kB 0 B
dotcom-rendering/dist/7210.client.web.********************.js 526 B 0 B
dotcom-rendering/dist/7229.client.web.********************.js 4.34 kB 0 B
dotcom-rendering/dist/739.client.web.********************.js 5.64 kB 0 B
dotcom-rendering/dist/7398.client.web.********************.js 49.5 kB 0 B
dotcom-rendering/dist/7582.client.web.********************.js 20.5 kB 0 B
dotcom-rendering/dist/7665.client.web.********************.js 3.08 kB 0 B
dotcom-rendering/dist/8044.client.web.********************.js 2.54 kB 0 B
dotcom-rendering/dist/8095.client.web.********************.js 619 B 0 B
dotcom-rendering/dist/82.client.web.********************.js 2.75 kB 0 B
dotcom-rendering/dist/8252.client.web.********************.js 4.78 kB 0 B
dotcom-rendering/dist/8465.client.web.********************.js 3.65 kB 0 B
dotcom-rendering/dist/8706.client.web.********************.js 5.42 kB 0 B
dotcom-rendering/dist/8708.client.web.********************.js 3.78 kB 0 B
dotcom-rendering/dist/879.client.web.********************.js 3.6 kB 0 B
dotcom-rendering/dist/8962.client.web.********************.js 4.53 kB 0 B
dotcom-rendering/dist/9071.client.web.********************.js 3.63 kB 0 B
dotcom-rendering/dist/9151.client.web.********************.js 7.95 kB 0 B
dotcom-rendering/dist/9229.client.web.********************.js 4.09 kB 0 B
dotcom-rendering/dist/9298.client.web.********************.js 3.39 kB 0 B
dotcom-rendering/dist/9302.client.web.********************.js 3.29 kB 0 B
dotcom-rendering/dist/9480.client.web.********************.js 2.87 kB 0 B
dotcom-rendering/dist/951.client.web.********************.js 2.63 kB 0 B
dotcom-rendering/dist/9659.client.web.********************.js 4.68 kB 0 B
dotcom-rendering/dist/9742.client.web.********************.js 3.9 kB 0 B
dotcom-rendering/dist/9795.client.web.********************.js 2.51 kB 0 B
dotcom-rendering/dist/9830.client.web.********************.js 4.45 kB 0 B
dotcom-rendering/dist/Accessibility-importable.client.web.********************.js 8.45 kB 0 B
dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js 2.99 kB 0 B
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js 4.81 kB 0 B
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js 425 B 0 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js 3.66 kB 0 B
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js 2.71 kB 0 B
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js 2.69 kB 0 B
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js 2.65 kB 0 B
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js 2.76 kB 0 B
dotcom-rendering/dist/AudioPlayerWrapper-importable.client.web.********************.js 6.62 kB 0 B
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js 4.6 kB 0 B
dotcom-rendering/dist/Branding-importable.client.web.********************.js 2.87 kB 0 B
dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js 67.7 kB 0 B
dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js 1.68 kB 0 B
dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js 6.73 kB 0 B
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js 5.76 kB 0 B
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js 2.66 kB 0 B
dotcom-rendering/dist/Carousel-importable.client.web.********************.js 6.67 kB 0 B
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 4.6 kB 0 B
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js 538 B 0 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js 2.29 kB 0 B
dotcom-rendering/dist/CrosswordComponent-importable.client.web.********************.js 2.87 kB 0 B
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js 1.99 kB 0 B
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js 2.39 kB 0 B
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js 1.69 kB 0 B
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js 2.85 kB 0 B
dotcom-rendering/dist/Dropdown-importable.client.web.********************.js 1.72 kB 0 B
dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js 4.44 kB 0 B
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js 3.99 kB 0 B
dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js 2.02 kB 0 B
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js 1.67 kB 0 B
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js 3.71 kB 0 B
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js 618 B 0 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js 2.52 kB 0 B
dotcom-rendering/dist/FootballMatchesPageWrapper-importable.client.web.********************.js 7.32 kB 0 B
dotcom-rendering/dist/FootballTablesCompetitionSelect-importable.client.web.********************.js 3.28 kB 0 B
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js 362 B 0 B
dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js 3.4 kB 0 B
dotcom-rendering/dist/frameworks.client.web.********************.js 20.9 kB 0 B
dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js 7.49 kB 0 B
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js 6.27 kB 0 B
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js 11.5 kB 0 B
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js 8.1 kB 0 B
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js 2.57 kB 0 B
dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js 16.3 kB 0 B
dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js 10.2 kB 0 B
dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js 783 B 0 B
dotcom-rendering/dist/index.client.web.********************.js 46.5 kB -2 B (0%)
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 2.91 kB 0 B
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js 853 B 0 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js 8.84 kB 0 B
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js 3.78 kB 0 B
dotcom-rendering/dist/InteractivesNativePlatformWrapper-importable.client.web.********************.js 3.18 kB 0 B
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 5.72 kB 0 B
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 3.2 kB 0 B
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 7.84 kB 0 B
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 435 B 0 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js 6.58 kB 0 B
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js 3.57 kB 0 B
dotcom-rendering/dist/LiveblogGutterAskWrapper-importable.client.web.********************.js 2.5 kB 0 B
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js 4.87 kB 0 B
dotcom-rendering/dist/Liveness-importable.client.web.********************.js 4.71 kB 0 B
dotcom-rendering/dist/LoopVideo-importable.client.web.********************.js 3.73 kB 0 B
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js 7.66 kB 0 B
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js 6.04 kB 0 B
dotcom-rendering/dist/Metrics-importable.client.web.********************.js 2.69 kB 0 B
dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js 3.85 kB 0 B
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js 5.96 kB 0 B
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js 5.25 kB 0 B
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js 5.07 kB 0 B
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js 3.35 kB 0 B
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js 546 B 0 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js 804 B 0 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js 751 B 0 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js 541 B 0 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js 469 B 0 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js 1.69 kB 0 B
dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js 2.55 kB 0 B
dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js 6.12 kB 0 B
dotcom-rendering/dist/ScrollableFeature-importable.client.web.********************.js 6.56 kB 0 B
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js 7.19 kB 0 B
dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js 2.08 kB 0 B
dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js 2.15 kB 0 B
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 4.22 kB 0 B
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js 2.24 kB 0 B
dotcom-rendering/dist/sentry.client.web.********************.js 803 B 0 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js 3.94 kB 0 B
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js 483 B 0 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js 2.17 kB 0 B
dotcom-rendering/dist/shimport.client.web.********************.js 2.8 kB 0 B
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js 878 B 0 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js 918 B 0 B
dotcom-rendering/dist/SignInGateMain.client.web.********************.js 1.12 kB 0 B
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js 2.63 kB 0 B
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js 5.01 kB 0 B
dotcom-rendering/dist/SlideshowCarousel-importable.client.web.********************.js 4.53 kB 0 B
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js 4.91 kB 0 B
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js 5.79 kB 0 B
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js 6.15 kB 0 B
dotcom-rendering/dist/SubNav-importable.client.web.********************.js 2.43 kB 0 B
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js 3.66 kB 0 B
dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js 1.23 kB 0 B
dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js 13.5 kB 0 B
dotcom-rendering/dist/TopBar-importable.client.web.********************.js 8.82 kB 0 B
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js 2.49 kB 0 B
dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js 1.13 kB 0 B
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js 2.92 kB 0 B
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js 6.07 kB 0 B
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js 3.33 kB 0 B
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 844 B 0 B

compressed-size-action

Base automatically changed from election-trackers-values-with-change to main May 20, 2025 10:40
JamieB-gu added 2 commits May 20, 2025 11:47
Source has an object styles API for fonts, which integrates better with
the object styles in this component.
@JamieB-gu JamieB-gu marked this pull request as ready for review May 20, 2025 10:53
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 requested a review from a team May 20, 2025 10:53
Copy link

github-actions bot commented May 20, 2025

@JamieB-gu JamieB-gu added the run_chromatic Runs chromatic when label is applied label May 20, 2025
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label May 20, 2025
Copy link
Member

@arelra arelra left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work!

@JamieB-gu JamieB-gu added the run_chromatic Runs chromatic when label is applied label Jun 5, 2025
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Jun 5, 2025
@JamieB-gu JamieB-gu merged commit 740718b into main Jun 5, 2025
32 checks passed
@JamieB-gu JamieB-gu deleted the election-trackers-change-bars branch June 5, 2025 13:29
@prout-bot
Copy link

Seen on PROD (merged by @JamieB-gu 8 minutes and 24 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.

4 participants