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

Slideshow: allow carousel interaction in cards #12852

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

jamesmockett
Copy link
Contributor

@jamesmockett jamesmockett commented Nov 15, 2024

What does this change?

  • Makes the slideshow carousel component importable
  • Swaps out existing slideshow component for slideshow carousel when used in a flexible container
  • Increases z-index of carousel to sit above anchor element which otherwise prevents interaction (this follows the existing pattern used by videos and comment counts)
  • Hides image overlay if a slideshow in a flexible container, otherwise the overlay appears beneath the carousel navigation due to the increased z-index

Why?

This allows slideshows to be interacted with when added to a front.

Part of the work to support slideshow carousels in DCR, bringing parity between web and app.

Images

Screenshot 2024-11-14 at 14 12 37

Copy link

github-actions bot commented Nov 15, 2024

Size Change: +3.58 kB (+0.38%)

Total Size: 944 kB

Filename Size Change
dotcom-rendering/dist/8178.client.web.********************.js 0 B -9.59 kB (removed) 🏆
dotcom-rendering/dist/8476.client.web.********************.js 0 B -4.28 kB (removed) 🏆
dotcom-rendering/dist/9740.client.web.********************.js 0 B -3.45 kB (removed) 🏆
dotcom-rendering/dist/Carousel-importable.client.web.********************.js 6.41 kB -265 B (-3.97%)
dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js 3.32 kB -413 B (-11.06%) 👏
dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js 3.31 kB -413 B (-11.08%) 👏
dotcom-rendering/dist/1559.client.web.********************.js 10.8 kB +10.8 kB (new file) 🆕
dotcom-rendering/dist/3499.client.web.********************.js 3.31 kB +3.31 kB (new file) 🆕
dotcom-rendering/dist/7327.client.web.********************.js 4.41 kB +4.41 kB (new file) 🆕
dotcom-rendering/dist/SlideshowCarousel-importable.client.web.********************.js 3.43 kB +3.43 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/1090.client.web.********************.js 752 B 0 B
dotcom-rendering/dist/1261.client.web.********************.js 1.89 kB 0 B
dotcom-rendering/dist/1391.client.web.********************.js 725 B 0 B
dotcom-rendering/dist/1476.client.web.********************.js 784 B 0 B
dotcom-rendering/dist/1483.client.web.********************.js 3.39 kB 0 B
dotcom-rendering/dist/1621.client.web.********************.js 4.41 kB 0 B
dotcom-rendering/dist/1667.client.web.********************.js 918 B 0 B
dotcom-rendering/dist/1940.client.web.********************.js 507 B 0 B
dotcom-rendering/dist/1984.client.web.********************.js 4.55 kB 0 B
dotcom-rendering/dist/2185.client.web.********************.js 8.09 kB 0 B
dotcom-rendering/dist/222.client.web.********************.js 6.16 kB 0 B
dotcom-rendering/dist/2310.client.web.********************.js 880 B 0 B
dotcom-rendering/dist/2368.client.web.********************.js 4.65 kB 0 B
dotcom-rendering/dist/2611.client.web.********************.js 3.77 kB 0 B
dotcom-rendering/dist/2645.client.web.********************.js 6.05 kB 0 B
dotcom-rendering/dist/267.client.web.********************.js 917 B 0 B
dotcom-rendering/dist/2700.client.web.********************.js 2.86 kB 0 B
dotcom-rendering/dist/2705.client.web.********************.js 157 B 0 B
dotcom-rendering/dist/2751.client.web.********************.js 6.01 kB +1 B (+0.02%)
dotcom-rendering/dist/281.client.web.********************.js 642 B 0 B
dotcom-rendering/dist/2923.client.web.********************.js 20.3 kB 0 B
dotcom-rendering/dist/2927.client.web.********************.js 441 B 0 B
dotcom-rendering/dist/3004.client.web.********************.js 3.29 kB 0 B
dotcom-rendering/dist/302.client.web.********************.js 4.52 kB 0 B
dotcom-rendering/dist/3060.client.web.********************.js 3.79 kB 0 B
dotcom-rendering/dist/3109.client.web.********************.js 803 B 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/3450.client.web.********************.js 6.17 kB 0 B
dotcom-rendering/dist/3459.client.web.********************.js 2 kB 0 B
dotcom-rendering/dist/3613.client.web.********************.js 3.58 kB 0 B
dotcom-rendering/dist/3634.client.web.********************.js 3.87 kB 0 B
dotcom-rendering/dist/3769.client.web.********************.js 999 B 0 B
dotcom-rendering/dist/3839.client.web.********************.js 3.71 kB 0 B
dotcom-rendering/dist/4020.client.web.********************.js 5.88 kB 0 B
dotcom-rendering/dist/4120.client.web.********************.js 11.1 kB 0 B
dotcom-rendering/dist/4132.client.web.********************.js 3.55 kB 0 B
dotcom-rendering/dist/4215.client.web.********************.js 10.3 kB 0 B
dotcom-rendering/dist/4282.client.web.********************.js 685 B 0 B
dotcom-rendering/dist/4326.client.web.********************.js 3.69 kB 0 B
dotcom-rendering/dist/4364.client.web.********************.js 13 kB 0 B
dotcom-rendering/dist/4501.client.web.********************.js 4.29 kB 0 B
dotcom-rendering/dist/4553.client.web.********************.js 3.35 kB 0 B
dotcom-rendering/dist/4556.client.web.********************.js 4.15 kB 0 B
dotcom-rendering/dist/4628.client.web.********************.js 654 B 0 B
dotcom-rendering/dist/4741.client.web.********************.js 1.91 kB 0 B
dotcom-rendering/dist/4853.client.web.********************.js 3.87 kB 0 B
dotcom-rendering/dist/4941.client.web.********************.js 890 B 0 B
dotcom-rendering/dist/5019.client.web.********************.js 618 B 0 B
dotcom-rendering/dist/5119.client.web.********************.js 3.03 kB 0 B
dotcom-rendering/dist/5209.client.web.********************.js 22.7 kB 0 B
dotcom-rendering/dist/5222.client.web.********************.js 2.28 kB 0 B
dotcom-rendering/dist/5367.client.web.********************.js 2.17 kB 0 B
dotcom-rendering/dist/5394.client.web.********************.js 2.42 kB 0 B
dotcom-rendering/dist/5400.client.web.********************.js 4.9 kB 0 B
dotcom-rendering/dist/5410.client.web.********************.js 4.49 kB 0 B
dotcom-rendering/dist/5658.client.web.********************.js 750 B 0 B
dotcom-rendering/dist/5695.client.web.********************.js 2.54 kB 0 B
dotcom-rendering/dist/5757.client.web.********************.js 931 B 0 B
dotcom-rendering/dist/576.client.web.********************.js 11.2 kB 0 B
dotcom-rendering/dist/5880.client.web.********************.js 828 B 0 B
dotcom-rendering/dist/6042.client.web.********************.js 4.04 kB 0 B
dotcom-rendering/dist/6044.client.web.********************.js 726 B 0 B
dotcom-rendering/dist/6071.client.web.********************.js 577 B 0 B
dotcom-rendering/dist/6135.client.web.********************.js 779 B 0 B
dotcom-rendering/dist/632.client.web.********************.js 6.86 kB 0 B
dotcom-rendering/dist/6390.client.web.********************.js 529 B 0 B
dotcom-rendering/dist/647.client.web.********************.js 3.64 kB 0 B
dotcom-rendering/dist/6505.client.web.********************.js 1 kB 0 B
dotcom-rendering/dist/6598.client.web.********************.js 780 B 0 B
dotcom-rendering/dist/6638.client.web.********************.js 907 B 0 B
dotcom-rendering/dist/6662.client.web.********************.js 523 B 0 B
dotcom-rendering/dist/6681.client.web.********************.js 3.13 kB 0 B
dotcom-rendering/dist/678.client.web.********************.js 804 B 0 B
dotcom-rendering/dist/6976.client.web.********************.js 2.87 kB 0 B
dotcom-rendering/dist/6990.client.web.********************.js 3.41 kB 0 B
dotcom-rendering/dist/7045.client.web.********************.js 5.13 kB 0 B
dotcom-rendering/dist/7047.client.web.********************.js 44.3 kB 0 B
dotcom-rendering/dist/7116.client.web.********************.js 23 kB 0 B
dotcom-rendering/dist/7122.client.web.********************.js 1.91 kB 0 B
dotcom-rendering/dist/7392.client.web.********************.js 3.21 kB 0 B
dotcom-rendering/dist/7440.client.web.********************.js 3.83 kB 0 B
dotcom-rendering/dist/7621.client.web.********************.js 3.21 kB 0 B
dotcom-rendering/dist/7691.client.web.********************.js 853 B 0 B
dotcom-rendering/dist/7748.client.web.********************.js 2.17 kB 0 B
dotcom-rendering/dist/7807.client.web.********************.js 3.21 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/8626.client.web.********************.js 890 B 0 B
dotcom-rendering/dist/8697.client.web.********************.js 956 B 0 B
dotcom-rendering/dist/8811.client.web.********************.js 3.83 kB 0 B
dotcom-rendering/dist/8833.client.web.********************.js 829 B 0 B
dotcom-rendering/dist/9039.client.web.********************.js 5.03 kB 0 B
dotcom-rendering/dist/9184.client.web.********************.js 493 B 0 B
dotcom-rendering/dist/9203.client.web.********************.js 3.06 kB 0 B
dotcom-rendering/dist/9395.client.web.********************.js 4.41 kB 0 B
dotcom-rendering/dist/9399.client.web.********************.js 4.41 kB 0 B
dotcom-rendering/dist/9460.client.web.********************.js 7.27 kB 0 B
dotcom-rendering/dist/948.client.web.********************.js 5.3 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/9721.client.web.********************.js 717 B 0 B
dotcom-rendering/dist/9810.client.web.********************.js 4.02 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/Accessibility-importable.client.web.********************.js 6 kB 0 B
dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js 2.85 kB 0 B
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js 3.71 kB 0 B
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js 423 B 0 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js 3.57 kB 0 B
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js 3.17 kB 0 B
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js 3.46 kB 0 B
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js 2.52 kB 0 B
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js 3.08 kB 0 B
dotcom-rendering/dist/AudioPlayerWrapper-importable.client.web.********************.js 6.33 kB 0 B
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js 4.88 kB 0 B
dotcom-rendering/dist/Branding-importable.client.web.********************.js 2.54 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.97 kB 0 B
dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js 6.72 kB 0 B
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js 8.22 kB 0 B
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js 2.97 kB 0 B
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 4.53 kB 0 B
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js 541 B 0 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js 2.8 kB 0 B
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js 1.91 kB 0 B
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js 1.21 kB 0 B
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js 1.74 kB 0 B
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js 3.14 kB 0 B
dotcom-rendering/dist/Dropdown-importable.client.web.********************.js 1.72 kB 0 B
dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js 5.98 kB 0 B
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js 3.74 kB 0 B
dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js 2.02 kB 0 B
dotcom-rendering/dist/ExpandableMarketingCardWrapper-importable.client.web.********************.js 4.38 kB 0 B
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js 1.94 kB 0 B
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js 966 B 0 B
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js 619 B 0 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js 3.44 kB 0 B
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js 345 B 0 B
dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js 3.71 kB 0 B
dotcom-rendering/dist/frameworks.client.web.********************.js 20.9 kB 0 B
dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js 7.62 kB 0 B
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js 3.82 kB 0 B
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js 10.6 kB 0 B
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js 7.41 kB 0 B
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js 2.22 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 kB 0 B
dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js 782 B 0 B
dotcom-rendering/dist/index.client.web.********************.js 46.2 kB +41 B (+0.09%)
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 2.79 kB 0 B
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js 852 B 0 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js 6.56 kB 0 B
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js 4.25 kB 0 B
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 4.86 kB 0 B
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 3.62 kB 0 B
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 4.57 kB 0 B
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 435 B 0 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js 6.52 kB 0 B
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js 3.76 kB 0 B
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js 5.27 kB 0 B
dotcom-rendering/dist/Liveness-importable.client.web.********************.js 4.83 kB 0 B
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js 7.63 kB 0 B
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js 4.97 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.83 kB 0 B
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js 6.07 kB 0 B
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js 5.18 kB 0 B
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js 5.33 kB 0 B
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js 3.77 kB 0 B
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js 545 B 0 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js 805 B 0 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js 748 B 0 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js 543 B 0 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js 469 B 0 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js 1.96 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.29 kB 0 B
dotcom-rendering/dist/ScrollableFeature-importable.client.web.********************.js 7.04 kB 0 B
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js 5.08 kB 0 B
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 4.59 kB 0 B
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js 2.19 kB 0 B
dotcom-rendering/dist/sentry.client.web.********************.js 794 B 0 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js 3.87 kB 0 B
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js 485 B 0 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js 3.71 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/ShowMore-importable.client.web.********************.js 1.75 kB 0 B
dotcom-rendering/dist/SignInGateMain.client.web.********************.js 4.51 kB 0 B
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js 5.6 kB 0 B
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js 3.16 kB 0 B
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js 3.61 kB 0 B
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js 4.8 kB 0 B
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js 4.23 kB 0 B
dotcom-rendering/dist/StickyLiveblogAskWrapper-importable.client.web.********************.js 7.67 kB 0 B
dotcom-rendering/dist/SubNav-importable.client.web.********************.js 2.89 kB 0 B
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js 2.7 kB 0 B
dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js 1.23 kB 0 B
dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js 14.7 kB 0 B
dotcom-rendering/dist/TopBar-importable.client.web.********************.js 8.23 kB 0 B
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js 2.72 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.8 kB 0 B
dotcom-rendering/dist/UsEoy2024Wrapper-importable.client.web.********************.js 5.04 kB 0 B
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js 4.99 kB 0 B
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js 2.65 kB 0 B
dotcom-rendering/dist/WeatherWrapper-importable.client.web.********************.js 6.55 kB 0 B
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 6.3 kB 0 B

compressed-size-action

@jamesmockett jamesmockett added the run_chromatic Runs chromatic when label is applied label Nov 18, 2024
@jamesmockett jamesmockett marked this pull request as ready for review November 18, 2024 11:18
@jamesmockett jamesmockett requested a review from a team as a code owner November 18, 2024 11:18
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Nov 18, 2024
@jamesmockett jamesmockett force-pushed the jm/slideshow-overlay-interaction branch from c3f9063 to dd53151 Compare November 18, 2024 11:24
<div className="image-overlay" />
)}
{(imageType === 'picture' || imageType === 'slideshow') &&
!hideImageOverlay && <div className="image-overlay" />}
Copy link
Contributor

Choose a reason for hiding this comment

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

What do we expect to happen when hovering over a card with a slideshow? Do we not still expect the image to dim?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

If it's an existing auto-playing slideshow the image will still dim when hovered, but not if it's a slideshow carousel. As you have to hover over the card to interact with the slideshow it would effectively mean the slideshow images are permanently dimmed as you scroll though them. I'll clarify what the desired effect is here though.

@jamesmockett jamesmockett force-pushed the jm/slideshow-overlay-interaction branch from dd53151 to 5ffe8e2 Compare November 18, 2024 17:08
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