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.

Sign up for GitHub

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

Jump to bottom

Render star rating on highlights card #13104

Merged
merged 4 commits into from
Jan 9, 2025
Merged

Render star rating on highlights card #13104

merged 4 commits into from
Jan 9, 2025
+38 −0

Conversation

abeddow91
Copy link
Contributor

What does this change?

Adds star rating into the highlights card.

Depending on the breakpoint, the star rating appears in either the rating grid area or the media-icon grid area.

Why?

This is a requirement for the highlights container go-live. By switching the grid area on breakpoint change we can position the rating either below the headline or at the bottom of the card.

Screenshots

mobile tablet desktop
mobile tablet desktop

@abeddow91 abeddow91 requested a review from a team as a code owner January 8, 2025 11:15
@github-actions GitHub Actions
Copy link

github-actions bot commented Jan 8, 2025

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.

@abeddow91 abeddow91 self-assigned this Jan 8, 2025
@abeddow91 abeddow91 added run_chromatic Runs chromatic when label is applied fairground labels Jan 8, 2025
@github-actions GitHub Actions
Copy link

github-actions bot commented Jan 8, 2025 •
edited
Loading

Deploy build 39813 of Mobile::mobile-apps-rendering to CODE

All deployment options

From guardian/actions-riff-raff.

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

github-actions bot commented Jan 8, 2025 •
edited
Loading

Size Change: -809 B (-0.09%)

Total Size: 890 kB

Filename Size Change
dotcom-rendering/dist/1424.client.web.********************.js 12.3 kB +797 B (+6.92%) 🔍
dotcom-rendering/dist/2188.client.web.********************.js 6.5 kB +285 B (+4.59%) 🔍
dotcom-rendering/dist/3366.client.web.********************.js 0 B -2.19 kB (removed) 🏆
dotcom-rendering/dist/3473.client.web.********************.js 0 B -3.74 kB (removed) 🏆
dotcom-rendering/dist/7351.client.web.********************.js 0 B -2.44 kB (removed) 🏆
dotcom-rendering/dist/9646.client.web.********************.js 6.75 kB +434 B (+6.87%) 🔍
dotcom-rendering/dist/Accessibility-importable.client.web.********************.js 6.7 kB +394 B (+6.25%) 🔍
dotcom-rendering/dist/Carousel-importable.client.web.********************.js 6.73 kB -1.36 kB (-16.82%) 👏
dotcom-rendering/dist/ScrollableFeature-importable.client.web.********************.js 6.63 kB +2.04 kB (+44.58%) 🚨
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js 5.94 kB +336 B (+5.99%) 🔍
dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js 4.05 kB +1.7 kB (+72.36%) 🆘
dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js 4.02 kB +1.7 kB (+73.29%) 🆘
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js 1.82 kB -1.45 kB (-44.41%) 🎉
dotcom-rendering/dist/8061.client.web.********************.js 2.72 kB +2.72 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size Change
dotcom-rendering/dist/1076.client.web.********************.js 3.41 kB 0 B
dotcom-rendering/dist/1262.client.web.********************.js 4.49 kB 0 B
dotcom-rendering/dist/1301.client.web.********************.js 4.06 kB 0 B
dotcom-rendering/dist/1401.client.web.********************.js 441 B 0 B
dotcom-rendering/dist/1477.client.web.********************.js 3.52 kB 0 B
dotcom-rendering/dist/1714.client.web.********************.js 2.87 kB 0 B
dotcom-rendering/dist/1891.client.web.********************.js 3.83 kB 0 B
dotcom-rendering/dist/1908.client.web.********************.js 4.25 kB 0 B
dotcom-rendering/dist/2482.client.web.********************.js 44.8 kB 0 B
dotcom-rendering/dist/280.client.web.********************.js 531 B 0 B
dotcom-rendering/dist/3213.client.web.********************.js 5.42 kB 0 B
dotcom-rendering/dist/342.client.web.********************.js 4.18 kB 0 B
dotcom-rendering/dist/3769.client.web.********************.js 22.7 kB 0 B
dotcom-rendering/dist/3789.client.web.********************.js 3.42 kB 0 B
dotcom-rendering/dist/39.client.web.********************.js 3.06 kB 0 B
dotcom-rendering/dist/3937.client.web.********************.js 3.85 kB 0 B
dotcom-rendering/dist/4237.client.web.********************.js 3.22 kB 0 B
dotcom-rendering/dist/4501.client.web.********************.js 4.29 kB 0 B
dotcom-rendering/dist/4684.client.web.********************.js 3.17 kB 0 B
dotcom-rendering/dist/4714.client.web.********************.js 6.15 kB +4 B (+0.07%)
dotcom-rendering/dist/5095.client.web.********************.js 4.17 kB 0 B
dotcom-rendering/dist/5550.client.web.********************.js 11.2 kB 0 B
dotcom-rendering/dist/5721.client.web.********************.js 3.64 kB 0 B
dotcom-rendering/dist/5922.client.web.********************.js 8.08 kB 0 B
dotcom-rendering/dist/6021.client.web.********************.js 11 kB 0 B
dotcom-rendering/dist/6061.client.web.********************.js 3.63 kB 0 B
dotcom-rendering/dist/6080.client.web.********************.js 3.27 kB 0 B
dotcom-rendering/dist/6398.client.web.********************.js 2.92 kB 0 B
dotcom-rendering/dist/6574.client.web.********************.js 3.55 kB +5 B (+0.14%)
dotcom-rendering/dist/6627.client.web.********************.js 10.3 kB 0 B
dotcom-rendering/dist/6876.client.web.********************.js 2.67 kB 0 B
dotcom-rendering/dist/6880.client.web.********************.js 5.78 kB +3 B (+0.05%)
dotcom-rendering/dist/6882.client.web.********************.js 12.8 kB 0 B
dotcom-rendering/dist/6903.client.web.********************.js 3.21 kB 0 B
dotcom-rendering/dist/6931.client.web.********************.js 2.56 kB 0 B
dotcom-rendering/dist/6940.client.web.********************.js 526 B 0 B
dotcom-rendering/dist/7026.client.web.********************.js 5.41 kB 0 B
dotcom-rendering/dist/7116.client.web.********************.js 23 kB 0 B
dotcom-rendering/dist/719.client.web.********************.js 3.48 kB 0 B
dotcom-rendering/dist/7350.client.web.********************.js 3.32 kB 0 B
dotcom-rendering/dist/7460.client.web.********************.js 6.85 kB 0 B
dotcom-rendering/dist/7513.client.web.********************.js 157 B 0 B
dotcom-rendering/dist/7540.client.web.********************.js 2.7 kB 0 B
dotcom-rendering/dist/7546.client.web.********************.js 7.38 kB 0 B
dotcom-rendering/dist/7861.client.web.********************.js 617 B 0 B
dotcom-rendering/dist/8030.client.web.********************.js 3.36 kB 0 B
dotcom-rendering/dist/8067.client.web.********************.js 3.38 kB 0 B
dotcom-rendering/dist/8920.client.web.********************.js 3.41 kB +3 B (+0.09%)
dotcom-rendering/dist/895.client.web.********************.js 5.14 kB 0 B
dotcom-rendering/dist/9242.client.web.********************.js 3.75 kB 0 B
dotcom-rendering/dist/9288.client.web.********************.js 2.51 kB 0 B
dotcom-rendering/dist/9558.client.web.********************.js 3.53 kB 0 B
dotcom-rendering/dist/9665.client.web.********************.js 4.04 kB 0 B
dotcom-rendering/dist/9735.client.web.********************.js 4.46 kB 0 B
dotcom-rendering/dist/9766.client.web.********************.js 3.2 kB 0 B
dotcom-rendering/dist/9771.client.web.********************.js 3.69 kB 0 B
dotcom-rendering/dist/9995.client.web.********************.js 20.3 kB 0 B
dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js 2.85 kB 0 B
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js 4.85 kB 0 B
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js 423 B 0 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js 3.63 kB 0 B
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js 2.7 kB 0 B
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js 2.66 kB 0 B
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js 2.55 kB 0 B
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js 2.59 kB 0 B
dotcom-rendering/dist/AudioPlayerWrapper-importable.client.web.********************.js 6.32 kB 0 B
dotcom-rendering/dist/AuEoy2024Wrapper-importable.client.web.********************.js 5.52 kB 0 B
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js 2.63 kB 0 B
dotcom-rendering/dist/Branding-importable.client.web.********************.js 2.86 kB 0 B
dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js 37.2 kB 0 B
dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js 1.96 kB 0 B
dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js 6.75 kB 0 B
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js 5.77 kB 0 B
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js 2.66 kB 0 B
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 5.14 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/DiscussionApps-importable.client.web.********************.js 1.93 kB 0 B
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js 2.44 kB 0 B
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js 1.74 kB 0 B
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js 2.81 kB 0 B
dotcom-rendering/dist/Dropdown-importable.client.web.********************.js 1.72 kB 0 B
dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js 3.49 kB 0 B
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js 3.94 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.93 kB 0 B
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js 3.8 kB 0 B
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js 617 B 0 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js 2.52 kB 0 B
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js 343 B 0 B
dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js 3.5 kB 0 B
dotcom-rendering/dist/frameworks.client.web.********************.js 20.9 kB 0 B
dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js 7.37 kB 0 B
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js 6.24 kB 0 B
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js 11.4 kB 0 B
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js 7.95 kB 0 B
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js 2.56 kB 0 B
dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js 15.8 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 44.9 kB -58 B (-0.13%)
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 2.9 kB 0 B
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js 851 B 0 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js 8.47 kB 0 B
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js 3.74 kB 0 B
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 5.68 kB 0 B
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 3.48 kB 0 B
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 7.21 kB 0 B
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 434 B 0 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js 6.53 kB 0 B
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js 3.55 kB 0 B
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js 4.82 kB 0 B
dotcom-rendering/dist/Liveness-importable.client.web.********************.js 4.72 kB 0 B
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js 7.05 kB 0 B
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js 5.87 kB 0 B
dotcom-rendering/dist/Metrics-importable.client.web.********************.js 2.69 kB 0 B
dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js 4.67 kB 0 B
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js 6.86 kB 0 B
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js 5.04 kB 0 B
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js 5.32 kB 0 B
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js 3.65 kB 0 B
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js 543 B 0 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js 802 B 0 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js 750 B 0 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js 543 B 0 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js 468 B 0 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js 1.74 kB 0 B
dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js 2.53 kB 0 B
dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js 6.01 kB 0 B
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 6.51 kB +6 B (+0.09%)
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js 2.22 kB 0 B
dotcom-rendering/dist/sentry.client.web.********************.js 794 B 0 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js 3.69 kB 0 B
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js 485 B 0 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js 4.65 kB 0 B
dotcom-rendering/dist/shimport.client.web.********************.js 2.8 kB 0 B
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js 730 B 0 B
dotcom-rendering/dist/SignInGateMain.client.web.********************.js 4.46 kB 0 B
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js 5.55 kB 0 B
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js 5.83 kB 0 B
dotcom-rendering/dist/SlideshowCarousel-importable.client.web.********************.js 4.36 kB 0 B
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js 4.83 kB 0 B
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js 5.68 kB 0 B
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js 6.16 kB 0 B
dotcom-rendering/dist/StickyLiveblogAskWrapper-importable.client.web.********************.js 8.13 kB 0 B
dotcom-rendering/dist/SubNav-importable.client.web.********************.js 2.41 kB 0 B
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js 3.46 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 9.29 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.91 kB 0 B
dotcom-rendering/dist/UsEoy2024Wrapper-importable.client.web.********************.js 6.03 kB 0 B
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js 5.88 kB 0 B
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js 2.78 kB 0 B
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 3.61 kB 0 B

compressed-size-action

Georges-GNM
Georges-GNM reviewed Jan 8, 2025
View reviewed changes
dotcom-rendering/src/layouts/FrontLayout.tsx Outdated
Copy link
Contributor

Choose a reason for hiding this comment

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

Assuming these changes are just to be able to easily test and not meant for prod 🙂

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Quite right, thanks Georges!!

Georges-GNM
Georges-GNM approved these changes Jan 8, 2025
View reviewed changes
Copy link
Contributor

@Georges-GNM Georges-GNM left a comment

Choose a reason for hiding this comment

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

Tested locally, looks good to me:
image

@abeddow91 abeddow91 force-pushed the ab/highlights-star-rating branch from 19a2ba0 to d1eb110 Compare January 8, 2025 17:17
@github-actions GitHub Actions
Copy link

github-actions bot commented Jan 8, 2025

Deploy build 15626 of dotcom:rendering-all to CODE

All deployment options

From guardian/actions-riff-raff.

@abeddow91 abeddow91 added the run_chromatic Runs chromatic when label is applied label Jan 9, 2025
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Jan 9, 2025
@abeddow91 abeddow91 merged commit 6b2a749 into main Jan 9, 2025
31 checks passed
@abeddow91 abeddow91 deleted the ab/highlights-star-rating branch January 9, 2025 09:30
@prout-bot
Copy link

Seen on PROD (merged by @abeddow91 9 minutes and 57 seconds ago) Please check your changes!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Georges-GNM Georges-GNM Georges-GNM approved these changes

@jamesmockett jamesmockett Awaiting requested review from jamesmockett

Assignees

@abeddow91 abeddow91

Labels
dotcom-rendering fairground Seen-on-PROD
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@abeddow91 @prout-bot @Georges-GNM