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

Media Cards: Replace gallery media icon with pill #13010

Closed
wants to merge 5 commits into from

Conversation

jamesmockett
Copy link
Contributor

What does this change?

Updates media cards to show a pill component in place of the media icon for galleries. The pill is displayed below the headline and trail text in place of age and comment count, and includes the number of images in the gallery.

This is dependent upon #12980 which updates the media card colour palette.

Why?

This is an incremental change which forms part of a larger body of work to update the design of media cards

Screenshots

Before After
before1 after1
before2 after2

Copy link

github-actions bot commented Dec 13, 2024

Size Change: +468 B (+0.05%)

Total Size: 942 kB

Filename Size Change
dotcom-rendering/dist/1424.client.web.********************.js 0 B -11.5 kB (removed) 🏆
dotcom-rendering/dist/4243.client.web.********************.js 11.9 kB +11.9 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size Change
dotcom-rendering/dist/1000.client.web.********************.js 999 B 0 B
dotcom-rendering/dist/1026.client.web.********************.js 784 B 0 B
dotcom-rendering/dist/1076.client.web.********************.js 3.41 kB 0 B
dotcom-rendering/dist/1090.client.web.********************.js 752 B 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/1391.client.web.********************.js 725 B 0 B
dotcom-rendering/dist/1401.client.web.********************.js 441 B 0 B
dotcom-rendering/dist/1476.client.web.********************.js 784 B 0 B
dotcom-rendering/dist/1477.client.web.********************.js 3.52 kB 0 B
dotcom-rendering/dist/1667.client.web.********************.js 918 B 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/1940.client.web.********************.js 507 B 0 B
dotcom-rendering/dist/2310.client.web.********************.js 880 B 0 B
dotcom-rendering/dist/2482.client.web.********************.js 44.8 kB 0 B
dotcom-rendering/dist/267.client.web.********************.js 917 B 0 B
dotcom-rendering/dist/280.client.web.********************.js 531 B 0 B
dotcom-rendering/dist/281.client.web.********************.js 642 B 0 B
dotcom-rendering/dist/3109.client.web.********************.js 803 B 0 B
dotcom-rendering/dist/3213.client.web.********************.js 5.42 kB 0 B
dotcom-rendering/dist/3270.client.web.********************.js 961 B 0 B
dotcom-rendering/dist/3304.client.web.********************.js 853 B 0 B
dotcom-rendering/dist/3366.client.web.********************.js 2.19 kB 0 B
dotcom-rendering/dist/342.client.web.********************.js 4.17 kB 0 B
dotcom-rendering/dist/3473.client.web.********************.js 3.74 kB 0 B
dotcom-rendering/dist/348.client.web.********************.js 6.21 kB +2 B (+0.03%)
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.87 kB 0 B
dotcom-rendering/dist/4237.client.web.********************.js 3.22 kB 0 B
dotcom-rendering/dist/4282.client.web.********************.js 685 B 0 B
dotcom-rendering/dist/4501.client.web.********************.js 4.29 kB 0 B
dotcom-rendering/dist/4628.client.web.********************.js 654 B 0 B
dotcom-rendering/dist/4640.client.web.********************.js 3.57 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 0 B
dotcom-rendering/dist/4941.client.web.********************.js 890 B 0 B
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/5658.client.web.********************.js 750 B 0 B
dotcom-rendering/dist/5721.client.web.********************.js 3.64 kB 0 B
dotcom-rendering/dist/5757.client.web.********************.js 931 B 0 B
dotcom-rendering/dist/5880.client.web.********************.js 828 B 0 B
dotcom-rendering/dist/5922.client.web.********************.js 8.08 kB 0 B
dotcom-rendering/dist/6021.client.web.********************.js 10.7 kB 0 B
dotcom-rendering/dist/6044.client.web.********************.js 726 B 0 B
dotcom-rendering/dist/6061.client.web.********************.js 3.77 kB 0 B
dotcom-rendering/dist/6071.client.web.********************.js 577 B 0 B
dotcom-rendering/dist/6080.client.web.********************.js 3.27 kB 0 B
dotcom-rendering/dist/6135.client.web.********************.js 779 B 0 B
dotcom-rendering/dist/6149.client.web.********************.js 12.7 kB 0 B
dotcom-rendering/dist/6150.client.web.********************.js 1 kB 0 B
dotcom-rendering/dist/6398.client.web.********************.js 2.92 kB 0 B
dotcom-rendering/dist/6505.client.web.********************.js 1 kB 0 B
dotcom-rendering/dist/6574.client.web.********************.js 3.54 kB 0 B
dotcom-rendering/dist/6598.client.web.********************.js 780 B 0 B
dotcom-rendering/dist/6627.client.web.********************.js 10.4 kB 0 B
dotcom-rendering/dist/6638.client.web.********************.js 907 B 0 B
dotcom-rendering/dist/678.client.web.********************.js 804 B 0 B
dotcom-rendering/dist/6876.client.web.********************.js 2.67 kB 0 B
dotcom-rendering/dist/6880.client.web.********************.js 5.78 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/7351.client.web.********************.js 2.44 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.69 kB 0 B
dotcom-rendering/dist/7546.client.web.********************.js 7.4 kB 0 B
dotcom-rendering/dist/7691.client.web.********************.js 853 B 0 B
dotcom-rendering/dist/7861.client.web.********************.js 617 B 0 B
dotcom-rendering/dist/8030.client.web.********************.js 3.38 kB 0 B
dotcom-rendering/dist/8067.client.web.********************.js 3.38 kB 0 B
dotcom-rendering/dist/83.client.web.********************.js 750 B 0 B
dotcom-rendering/dist/8504.client.web.********************.js 827 B 0 B
dotcom-rendering/dist/8536.client.web.********************.js 595 B 0 B
dotcom-rendering/dist/8568.client.web.********************.js 2.95 kB 0 B
dotcom-rendering/dist/8626.client.web.********************.js 890 B 0 B
dotcom-rendering/dist/8697.client.web.********************.js 956 B 0 B
dotcom-rendering/dist/8833.client.web.********************.js 829 B 0 B
dotcom-rendering/dist/8920.client.web.********************.js 3.41 kB 0 B
dotcom-rendering/dist/895.client.web.********************.js 5.14 kB 0 B
dotcom-rendering/dist/9184.client.web.********************.js 493 B 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/9493.client.web.********************.js 785 B 0 B
dotcom-rendering/dist/9557.client.web.********************.js 921 B 0 B
dotcom-rendering/dist/9558.client.web.********************.js 3.53 kB 0 B
dotcom-rendering/dist/9646.client.web.********************.js 6.31 kB 0 B
dotcom-rendering/dist/9665.client.web.********************.js 4.04 kB 0 B
dotcom-rendering/dist/9721.client.web.********************.js 717 B 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/9835.client.web.********************.js 647 B 0 B
dotcom-rendering/dist/9899.client.web.********************.js 669 B 0 B
dotcom-rendering/dist/9995.client.web.********************.js 20.3 kB 0 B
dotcom-rendering/dist/Accessibility-importable.client.web.********************.js 6.35 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.86 kB 0 B
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js 424 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.74 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/Carousel-importable.client.web.********************.js 8.09 kB -1 B (-0.01%)
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 5.16 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.51 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/ExpandableMarketingCardWrapper-importable.client.web.********************.js 6.43 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 618 B 0 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js 2.52 kB 0 B
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js 347 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.97 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 45.8 kB -1 B (0%)
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 2.9 kB 0 B
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js 852 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.76 kB 0 B
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 5.69 kB 0 B
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 2.3 kB 0 B
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 7.21 kB 0 B
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 435 B 0 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js 6.54 kB 0 B
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js 3.54 kB 0 B
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js 4.81 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 6.79 kB -1 B (-0.01%)
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js 2.49 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 470 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/ScrollableFeature-importable.client.web.********************.js 4.58 kB 0 B
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js 5.6 kB 0 B
dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js 2.32 kB 0 B
dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js 2.32 kB +1 B (+0.04%)
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 6.51 kB 0 B
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.95 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 732 B 0 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js 3.27 kB 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.17 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.48 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.5 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/WeatherWrapper-importable.client.web.********************.js 6.06 kB 0 B
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 3.63 kB 0 B

compressed-size-action

@jamesmockett jamesmockett added the run_chromatic Runs chromatic when label is applied label Dec 16, 2024
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Dec 16, 2024
@jamesmockett jamesmockett added the run_chromatic Runs chromatic when label is applied label Dec 16, 2024
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Dec 16, 2024
@jamesmockett jamesmockett added the run_chromatic Runs chromatic when label is applied label Dec 18, 2024
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Dec 18, 2024
@jamesmockett jamesmockett marked this pull request as ready for review December 18, 2024 17:35
@jamesmockett jamesmockett requested a review from a team as a code owner December 18, 2024 17:35
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.

>
<Pill
prefix="Gallery"
content={galleryCount?.toString() ?? ''}
Copy link
Contributor

Choose a reason for hiding this comment

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

If we want gallery count to be used as a string, would it be worth lifting this up and converting in the card enhancer?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I think it makes sense that gallery count is a number, but was considering reworking the Pill component so that the conversion isn't needed. (Either extending the types that content accepts, or removing it entirely and making Pill a wrapper for child elements.)

@jamesmockett
Copy link
Contributor Author

We want to release the gallery and podcast pills together. As most of the layout and logic changes are shared I'm closing this in favour of a combined PR that replaces both media icons: #13035

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.

2 participants