Scrollable medium setup #12628

Georges-GNM · 2024-10-22T14:49:38Z

What does this change?

Adds the basic scrollable medium component, stories, and uses it in decideContainer.

There'll be some future styling work to ensure the carousel layout and card rendering match with the intended designs.

Why?

Part of this ticket in the fairground project

Screenshots

github-actions · 2024-10-22T14:49:51Z

Deploy build 38356 of `Mobile::mobile-apps-rendering` to CODE

All deployment options

From guardian/actions-riff-raff.

github-actions · 2024-10-22T14:54:30Z

Size Change: 0 B

Total Size: 914 kB

ℹ️ View Unchanged

Filename	Size
`dotcom-rendering/dist/1000.client.web.********************.js`	999 B
`dotcom-rendering/dist/1026.client.web.********************.js`	784 B
`dotcom-rendering/dist/1090.client.web.********************.js`	752 B
`dotcom-rendering/dist/1156.client.web.********************.js`	3.94 kB
`dotcom-rendering/dist/1391.client.web.********************.js`	725 B
`dotcom-rendering/dist/1417.client.web.********************.js`	2.53 kB
`dotcom-rendering/dist/146.client.web.********************.js`	5.29 kB
`dotcom-rendering/dist/1476.client.web.********************.js`	784 B
`dotcom-rendering/dist/1515.client.web.********************.js`	6.86 kB
`dotcom-rendering/dist/1628.client.web.********************.js`	2.87 kB
`dotcom-rendering/dist/1667.client.web.********************.js`	918 B
`dotcom-rendering/dist/1884.client.web.********************.js`	3.4 kB
`dotcom-rendering/dist/1888.client.web.********************.js`	2.92 kB
`dotcom-rendering/dist/1904.client.web.********************.js`	12.6 kB
`dotcom-rendering/dist/1940.client.web.********************.js`	507 B
`dotcom-rendering/dist/2123.client.web.********************.js`	619 B
`dotcom-rendering/dist/2182.client.web.********************.js`	529 B
`dotcom-rendering/dist/2249.client.web.********************.js`	4.91 kB
`dotcom-rendering/dist/2310.client.web.********************.js`	880 B
`dotcom-rendering/dist/2455.client.web.********************.js`	4.55 kB
`dotcom-rendering/dist/267.client.web.********************.js`	917 B
`dotcom-rendering/dist/281.client.web.********************.js`	642 B
`dotcom-rendering/dist/3006.client.web.********************.js`	4.48 kB
`dotcom-rendering/dist/3109.client.web.********************.js`	803 B
`dotcom-rendering/dist/3270.client.web.********************.js`	961 B
`dotcom-rendering/dist/3304.client.web.********************.js`	853 B
`dotcom-rendering/dist/3364.client.web.********************.js`	3.97 kB
`dotcom-rendering/dist/346.client.web.********************.js`	3.21 kB
`dotcom-rendering/dist/3769.client.web.********************.js`	999 B
`dotcom-rendering/dist/3921.client.web.********************.js`	2 kB
`dotcom-rendering/dist/408.client.web.********************.js`	11 kB
`dotcom-rendering/dist/4122.client.web.********************.js`	1.86 kB
`dotcom-rendering/dist/4149.client.web.********************.js`	3.77 kB
`dotcom-rendering/dist/4282.client.web.********************.js`	685 B
`dotcom-rendering/dist/4501.client.web.********************.js`	4.29 kB
`dotcom-rendering/dist/4628.client.web.********************.js`	654 B
`dotcom-rendering/dist/4769.client.web.********************.js`	4.28 kB
`dotcom-rendering/dist/4789.client.web.********************.js`	12.7 kB
`dotcom-rendering/dist/4820.client.web.********************.js`	2.42 kB
`dotcom-rendering/dist/4866.client.web.********************.js`	6.32 kB
`dotcom-rendering/dist/4903.client.web.********************.js`	6.04 kB
`dotcom-rendering/dist/4941.client.web.********************.js`	890 B
`dotcom-rendering/dist/4951.client.web.********************.js`	11.4 kB
`dotcom-rendering/dist/5087.client.web.********************.js`	439 B
`dotcom-rendering/dist/5165.client.web.********************.js`	5.31 kB
`dotcom-rendering/dist/5340.client.web.********************.js`	3.32 kB
`dotcom-rendering/dist/5371.client.web.********************.js`	3.34 kB
`dotcom-rendering/dist/5412.client.web.********************.js`	2.89 kB
`dotcom-rendering/dist/5538.client.web.********************.js`	6.18 kB
`dotcom-rendering/dist/5658.client.web.********************.js`	750 B
`dotcom-rendering/dist/5757.client.web.********************.js`	931 B
`dotcom-rendering/dist/5761.client.web.********************.js`	4.65 kB
`dotcom-rendering/dist/5880.client.web.********************.js`	828 B
`dotcom-rendering/dist/5937.client.web.********************.js`	2.17 kB
`dotcom-rendering/dist/5944.client.web.********************.js`	4.97 kB
`dotcom-rendering/dist/5982.client.web.********************.js`	3.78 kB
`dotcom-rendering/dist/6044.client.web.********************.js`	726 B
`dotcom-rendering/dist/6071.client.web.********************.js`	577 B
`dotcom-rendering/dist/6135.client.web.********************.js`	779 B
`dotcom-rendering/dist/6261.client.web.********************.js`	3.03 kB
`dotcom-rendering/dist/6291.client.web.********************.js`	4.26 kB
`dotcom-rendering/dist/6505.client.web.********************.js`	1 kB
`dotcom-rendering/dist/6598.client.web.********************.js`	780 B
`dotcom-rendering/dist/661.client.web.********************.js`	3.21 kB
`dotcom-rendering/dist/6638.client.web.********************.js`	907 B
`dotcom-rendering/dist/6665.client.web.********************.js`	5.03 kB
`dotcom-rendering/dist/678.client.web.********************.js`	804 B
`dotcom-rendering/dist/6915.client.web.********************.js`	22.7 kB
`dotcom-rendering/dist/7072.client.web.********************.js`	3.85 kB
`dotcom-rendering/dist/7081.client.web.********************.js`	20.2 kB
`dotcom-rendering/dist/7116.client.web.********************.js`	23 kB
`dotcom-rendering/dist/7242.client.web.********************.js`	4.52 kB
`dotcom-rendering/dist/7341.client.web.********************.js`	3.99 kB
`dotcom-rendering/dist/7407.client.web.********************.js`	3.7 kB
`dotcom-rendering/dist/7691.client.web.********************.js`	853 B
`dotcom-rendering/dist/7713.client.web.********************.js`	2.02 kB
`dotcom-rendering/dist/7780.client.web.********************.js`	2.28 kB
`dotcom-rendering/dist/7962.client.web.********************.js`	3.58 kB
`dotcom-rendering/dist/8103.client.web.********************.js`	4.02 kB
`dotcom-rendering/dist/83.client.web.********************.js`	750 B
`dotcom-rendering/dist/8318.client.web.********************.js`	2.17 kB
`dotcom-rendering/dist/840.client.web.********************.js`	3.21 kB
`dotcom-rendering/dist/8426.client.web.********************.js`	1.91 kB
`dotcom-rendering/dist/8437.client.web.********************.js`	3.13 kB
`dotcom-rendering/dist/8504.client.web.********************.js`	827 B
`dotcom-rendering/dist/8536.client.web.********************.js`	595 B
`dotcom-rendering/dist/8626.client.web.********************.js`	890 B
`dotcom-rendering/dist/8671.client.web.********************.js`	157 B
`dotcom-rendering/dist/8697.client.web.********************.js`	956 B
`dotcom-rendering/dist/8730.client.web.********************.js`	4.41 kB
`dotcom-rendering/dist/8746.client.web.********************.js`	3.01 kB
`dotcom-rendering/dist/8815.client.web.********************.js`	3.86 kB
`dotcom-rendering/dist/8822.client.web.********************.js`	526 B
`dotcom-rendering/dist/8833.client.web.********************.js`	829 B
`dotcom-rendering/dist/8903.client.web.********************.js`	3.83 kB
`dotcom-rendering/dist/8990.client.web.********************.js`	3.41 kB
`dotcom-rendering/dist/9080.client.web.********************.js`	3.69 kB
`dotcom-rendering/dist/9122.client.web.********************.js`	8.08 kB
`dotcom-rendering/dist/9132.client.web.********************.js`	4.18 kB
`dotcom-rendering/dist/9184.client.web.********************.js`	493 B
`dotcom-rendering/dist/9216.client.web.********************.js`	3.45 kB
`dotcom-rendering/dist/9373.client.web.********************.js`	4.4 kB
`dotcom-rendering/dist/940.client.web.********************.js`	10.3 kB
`dotcom-rendering/dist/9493.client.web.********************.js`	785 B
`dotcom-rendering/dist/9557.client.web.********************.js`	921 B
`dotcom-rendering/dist/9608.client.web.********************.js`	3.64 kB
`dotcom-rendering/dist/9696.client.web.********************.js`	5.88 kB
`dotcom-rendering/dist/9721.client.web.********************.js`	717 B
`dotcom-rendering/dist/9736.client.web.********************.js`	44.2 kB
`dotcom-rendering/dist/9835.client.web.********************.js`	647 B
`dotcom-rendering/dist/9899.client.web.********************.js`	669 B
`dotcom-rendering/dist/Accessibility-importable.client.web.********************.js`	5.96 kB
`dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js`	2.85 kB
`dotcom-rendering/dist/AdPortals-importable.client.web.********************.js`	3.94 kB
`dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js`	425 B
`dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js`	3.57 kB
`dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js`	3.16 kB
`dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js`	3.48 kB
`dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js`	2.52 kB
`dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js`	3.08 kB
`dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js`	4.88 kB
`dotcom-rendering/dist/Branding-importable.client.web.********************.js`	2.54 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.72 kB
`dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js`	8.26 kB
`dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js`	2.96 kB
`dotcom-rendering/dist/Carousel-importable.client.web.********************.js`	6.04 kB
`dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js`	4.51 kB
`dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js`	539 B
`dotcom-rendering/dist/CommentCount-importable.client.web.********************.js`	2.8 kB
`dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js`	1.91 kB
`dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js`	1.22 kB
`dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js`	1.74 kB
`dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js`	3.14 kB
`dotcom-rendering/dist/Dropdown-importable.client.web.********************.js`	1.72 kB
`dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js`	5.96 kB
`dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js`	3.75 kB
`dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js`	2.02 kB
`dotcom-rendering/dist/ExpandableMarketingCardWrapper-importable.client.web.********************.js`	4.2 kB
`dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js`	1.93 kB
`dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js`	970 B
`dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js`	619 B
`dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js`	3.43 kB
`dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js`	347 B
`dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js`	3.72 kB
`dotcom-rendering/dist/frameworks.client.web.********************.js`	20.9 kB
`dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js`	7.63 kB
`dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js`	3.82 kB
`dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js`	10.5 kB
`dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js`	7.4 kB
`dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js`	2.22 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 kB
`dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js`	783 B
`dotcom-rendering/dist/index.client.web.********************.js`	45.9 kB
`dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js`	2.79 kB
`dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js`	851 B
`dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js`	6.28 kB
`dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js`	4.24 kB
`dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js`	4.77 kB
`dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js`	3.62 kB
`dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js`	2.1 kB
`dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js`	435 B
`dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js`	6.51 kB
`dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js`	3.78 kB
`dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js`	5.28 kB
`dotcom-rendering/dist/Liveness-importable.client.web.********************.js`	4.83 kB
`dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js`	7.63 kB
`dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js`	4.95 kB
`dotcom-rendering/dist/Metrics-importable.client.web.********************.js`	2.7 kB
`dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js`	4 kB
`dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js`	6.22 kB
`dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js`	5.18 kB
`dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js`	5.32 kB
`dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js`	3.77 kB
`dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js`	543 B
`dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js`	803 B
`dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js`	750 B
`dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js`	542 B
`dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js`	469 B
`dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js`	1.97 kB
`dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js`	2.53 kB
`dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js`	6.29 kB
`dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js`	4.99 kB
`dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js`	4.61 kB
`dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js`	2.19 kB
`dotcom-rendering/dist/sentry.client.web.********************.js`	792 B
`dotcom-rendering/dist/SetABTests-importable.client.web.********************.js`	3.85 kB
`dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js`	482 B
`dotcom-rendering/dist/ShareButton-importable.client.web.********************.js`	3.72 kB
`dotcom-rendering/dist/shimport.client.web.********************.js`	2.8 kB
`dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js`	733 B
`dotcom-rendering/dist/ShowMore-importable.client.web.********************.js`	1.75 kB
`dotcom-rendering/dist/SignInGateMain.client.web.********************.js`	4.5 kB
`dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js`	5.6 kB
`dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js`	3.16 kB
`dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js`	3.48 kB
`dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js`	4.8 kB
`dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js`	4.22 kB
`dotcom-rendering/dist/StickyLiveblogAskWrapper-importable.client.web.********************.js`	7.68 kB
`dotcom-rendering/dist/SubNav-importable.client.web.********************.js`	2.9 kB
`dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js`	2.7 kB
`dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js`	1.23 kB
`dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js`	14.7 kB
`dotcom-rendering/dist/TopBar-importable.client.web.********************.js`	8.25 kB
`dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js`	2.74 kB
`dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js`	1.13 kB
`dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js`	2.8 kB
`dotcom-rendering/dist/UsEoy2024Wrapper-importable.client.web.********************.js`	5.05 kB
`dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js`	4.96 kB
`dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js`	2.63 kB
`dotcom-rendering/dist/WeatherWrapper-importable.client.web.********************.js`	6.55 kB
`dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js`	5.94 kB

_{compressed-size-action}

github-actions · 2024-10-22T14:59:15Z

Deploy build 14184 of `dotcom:rendering-all` to CODE

All deployment options

From guardian/actions-riff-raff.

prout-bot · 2024-10-24T09:14:13Z

Seen on PROD (merged by @Georges-GNM 10 minutes and 59 seconds ago) Please check your changes!

Extract generic carousel logic from scrollable small

bc99914

github-actions bot added the dotcom-rendering label Oct 22, 2024

Georges-GNM added 2 commits October 22, 2024 15:50

Add scrollable medium component and stories

f8af138

Wrap carousel import in an island

b27bf21

Georges-GNM force-pushed the gl/setup-scrollable-medium branch from e5b03ad to b27bf21 Compare October 22, 2024 14:53

Georges-GNM added 2 commits October 22, 2024 15:56

Rename scrollable medium component as it's no longer an island

40e6b3d

use scrollable medium in decide container

aaead55

Remove scrollable medium from unsupported containers

9c3dea2

Georges-GNM self-assigned this Oct 22, 2024

Georges-GNM added run_chromatic Runs chromatic when label is applied fairground labels Oct 22, 2024

Georges-GNM requested review from jamesmockett, abeddow91 and cemms1 October 22, 2024 15:25

Georges-GNM marked this pull request as ready for review October 22, 2024 15:26

Georges-GNM requested a review from a team as a code owner October 22, 2024 15:26

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Oct 22, 2024

abeddow91 approved these changes Oct 24, 2024

View reviewed changes

Georges-GNM merged commit 0f81f52 into main Oct 24, 2024
36 checks passed

Georges-GNM deleted the gl/setup-scrollable-medium branch October 24, 2024 09:03

prout-bot added Pending-on-PROD Seen-on-PROD and removed Pending-on-PROD labels Oct 24, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Scrollable medium setup #12628

Scrollable medium setup #12628

Georges-GNM commented Oct 22, 2024 •

edited

Loading

github-actions bot commented Oct 22, 2024 •

edited

Loading

github-actions bot commented Oct 22, 2024 •

edited

Loading

github-actions bot commented Oct 22, 2024 •

edited

Loading

prout-bot commented Oct 24, 2024

Scrollable medium setup #12628

Scrollable medium setup #12628

Conversation

Georges-GNM commented Oct 22, 2024 • edited Loading

What does this change?

Why?

Screenshots

github-actions bot commented Oct 22, 2024 • edited Loading

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

github-actions bot commented Oct 22, 2024 • edited Loading

github-actions bot commented Oct 22, 2024 • edited Loading

Deploy build 14184 of dotcom:rendering-all to CODE

prout-bot commented Oct 24, 2024

Georges-GNM commented Oct 22, 2024 •

edited

Loading

github-actions bot commented Oct 22, 2024 •

edited

Loading

Deploy build 38356 of `Mobile::mobile-apps-rendering` to CODE

github-actions bot commented Oct 22, 2024 •

edited

Loading

github-actions bot commented Oct 22, 2024 •

edited

Loading

Deploy build 14184 of `dotcom:rendering-all` to CODE