[Fairground 🎡] Add support and layout for flexible special container #12137

Georges-GNM · 2024-08-13T22:54:49Z

What does this change?

Adds a container layout for flexible/special. This follows the existing layout pattern of all other containers.
The layout of flexible/special is as follows:

Snap link - this is optional
Splash card - This will always be the first card. It will always take the full width of the container.
Supporting story cards - These are optional and can be a maximum of 4. They are always positioned in a row below the splash card. If there are 1 or 2 supporting stories, they each take up 50% of the row. If there are 3 or 4 supporting stories, they each take up 25% of the row. Unlike in previous containers, these cards do not stretch to fill empty space if there is an odd number of cards.

Why?

Flexible/special is a new container that is being introduced to replace dynamic/package.

Screenshots

Splash only	with 1 supporting

with 2 supporting	with 3 supporting

with 4 supporting

github-actions · 2024-08-13T22:56:21Z

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

All deployment options

From guardian/actions-riff-raff.

github-actions · 2024-08-13T22:59:25Z

Size Change: 0 B

Total Size: 936 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/1140.client.web.********************.js`	6.4 kB
`dotcom-rendering/dist/121.client.web.********************.js`	3.41 kB
`dotcom-rendering/dist/1295.client.web.********************.js`	524 B
`dotcom-rendering/dist/1372.client.web.********************.js`	7.38 kB
`dotcom-rendering/dist/1391.client.web.********************.js`	725 B
`dotcom-rendering/dist/1476.client.web.********************.js`	784 B
`dotcom-rendering/dist/1644.client.web.********************.js`	3.03 kB
`dotcom-rendering/dist/1667.client.web.********************.js`	918 B
`dotcom-rendering/dist/1940.client.web.********************.js`	22.7 kB
`dotcom-rendering/dist/2025.client.web.********************.js`	2.91 kB
`dotcom-rendering/dist/2193.client.web.********************.js`	529 B
`dotcom-rendering/dist/2310.client.web.********************.js`	880 B
`dotcom-rendering/dist/2358.client.web.********************.js`	20.2 kB
`dotcom-rendering/dist/2419.client.web.********************.js`	3.83 kB
`dotcom-rendering/dist/267.client.web.********************.js`	917 B
`dotcom-rendering/dist/281.client.web.********************.js`	642 B
`dotcom-rendering/dist/3109.client.web.********************.js`	803 B
`dotcom-rendering/dist/3115.client.web.********************.js`	2.99 kB
`dotcom-rendering/dist/3270.client.web.********************.js`	961 B
`dotcom-rendering/dist/3304.client.web.********************.js`	853 B
`dotcom-rendering/dist/3467.client.web.********************.js`	3.02 kB
`dotcom-rendering/dist/3650.client.web.********************.js`	4.3 kB
`dotcom-rendering/dist/3711.client.web.********************.js`	5.49 kB
`dotcom-rendering/dist/3727.client.web.********************.js`	12.5 kB
`dotcom-rendering/dist/3732.client.web.********************.js`	618 B
`dotcom-rendering/dist/3769.client.web.********************.js`	999 B
`dotcom-rendering/dist/4015.client.web.********************.js`	5.83 kB
`dotcom-rendering/dist/4243.client.web.********************.js`	3.54 kB
`dotcom-rendering/dist/4248.client.web.********************.js`	9.19 kB
`dotcom-rendering/dist/4282.client.web.********************.js`	685 B
`dotcom-rendering/dist/447.client.web.********************.js`	3.67 kB
`dotcom-rendering/dist/4472.client.web.********************.js`	3.41 kB
`dotcom-rendering/dist/4628.client.web.********************.js`	654 B
`dotcom-rendering/dist/4642.client.web.********************.js`	2.52 kB
`dotcom-rendering/dist/4692.client.web.********************.js`	4.39 kB
`dotcom-rendering/dist/4741.client.web.********************.js`	2.42 kB
`dotcom-rendering/dist/4788.client.web.********************.js`	3.57 kB
`dotcom-rendering/dist/4895.client.web.********************.js`	3.98 kB
`dotcom-rendering/dist/4941.client.web.********************.js`	890 B
`dotcom-rendering/dist/5221.client.web.********************.js`	9.8 kB
`dotcom-rendering/dist/5301.client.web.********************.js`	3.23 kB
`dotcom-rendering/dist/5308.client.web.********************.js`	2.69 kB
`dotcom-rendering/dist/5636.client.web.********************.js`	3.47 kB
`dotcom-rendering/dist/5658.client.web.********************.js`	750 B
`dotcom-rendering/dist/5757.client.web.********************.js`	931 B
`dotcom-rendering/dist/5783.client.web.********************.js`	3.74 kB
`dotcom-rendering/dist/5880.client.web.********************.js`	828 B
`dotcom-rendering/dist/6044.client.web.********************.js`	726 B
`dotcom-rendering/dist/6071.client.web.********************.js`	577 B
`dotcom-rendering/dist/6108.client.web.********************.js`	10.6 kB
`dotcom-rendering/dist/6135.client.web.********************.js`	779 B
`dotcom-rendering/dist/6150.client.web.********************.js`	3.34 kB
`dotcom-rendering/dist/6167.client.web.********************.js`	3.43 kB
`dotcom-rendering/dist/6182.client.web.********************.js`	2.32 kB
`dotcom-rendering/dist/6254.client.web.********************.js`	3.61 kB
`dotcom-rendering/dist/6502.client.web.********************.js`	3.19 kB
`dotcom-rendering/dist/6505.client.web.********************.js`	1 kB
`dotcom-rendering/dist/6596.client.web.********************.js`	4.06 kB
`dotcom-rendering/dist/6598.client.web.********************.js`	780 B
`dotcom-rendering/dist/6637.client.web.********************.js`	6.22 kB
`dotcom-rendering/dist/6638.client.web.********************.js`	907 B
`dotcom-rendering/dist/6777.client.web.********************.js`	6.51 kB
`dotcom-rendering/dist/678.client.web.********************.js`	804 B
`dotcom-rendering/dist/6881.client.web.********************.js`	4.68 kB
`dotcom-rendering/dist/70.client.web.********************.js`	2.67 kB
`dotcom-rendering/dist/7116.client.web.********************.js`	23 kB
`dotcom-rendering/dist/7148.client.web.********************.js`	2.93 kB
`dotcom-rendering/dist/7213.client.web.********************.js`	10.7 kB
`dotcom-rendering/dist/7673.client.web.********************.js`	3.54 kB
`dotcom-rendering/dist/7689.client.web.********************.js`	4.21 kB
`dotcom-rendering/dist/7691.client.web.********************.js`	853 B
`dotcom-rendering/dist/7774.client.web.********************.js`	4.15 kB
`dotcom-rendering/dist/7788.client.web.********************.js`	3.77 kB
`dotcom-rendering/dist/7806.client.web.********************.js`	3.98 kB
`dotcom-rendering/dist/7815.client.web.********************.js`	4.9 kB
`dotcom-rendering/dist/786.client.web.********************.js`	4.5 kB
`dotcom-rendering/dist/7911.client.web.********************.js`	1.84 kB
`dotcom-rendering/dist/8061.client.web.********************.js`	3.1 kB
`dotcom-rendering/dist/83.client.web.********************.js`	750 B
`dotcom-rendering/dist/8323.client.web.********************.js`	19.3 kB
`dotcom-rendering/dist/8406.client.web.********************.js`	3.83 kB
`dotcom-rendering/dist/8504.client.web.********************.js`	827 B
`dotcom-rendering/dist/8525.client.web.********************.js`	2.26 kB
`dotcom-rendering/dist/8536.client.web.********************.js`	595 B
`dotcom-rendering/dist/8626.client.web.********************.js`	890 B
`dotcom-rendering/dist/8654.client.web.********************.js`	3.01 kB
`dotcom-rendering/dist/8697.client.web.********************.js`	956 B
`dotcom-rendering/dist/8816.client.web.********************.js`	4.41 kB
`dotcom-rendering/dist/8826.client.web.********************.js`	4.4 kB
`dotcom-rendering/dist/8833.client.web.********************.js`	829 B
`dotcom-rendering/dist/888.client.web.********************.js`	43.1 kB
`dotcom-rendering/dist/9155.client.web.********************.js`	3.22 kB
`dotcom-rendering/dist/9184.client.web.********************.js`	493 B
`dotcom-rendering/dist/9205.client.web.********************.js`	3.21 kB
`dotcom-rendering/dist/9210.client.web.********************.js`	4.3 kB
`dotcom-rendering/dist/9215.client.web.********************.js`	3.06 kB
`dotcom-rendering/dist/9222.client.web.********************.js`	155 B
`dotcom-rendering/dist/9285.client.web.********************.js`	2.94 kB
`dotcom-rendering/dist/9431.client.web.********************.js`	3.34 kB
`dotcom-rendering/dist/9435.client.web.********************.js`	4.61 kB
`dotcom-rendering/dist/9493.client.web.********************.js`	785 B
`dotcom-rendering/dist/9557.client.web.********************.js`	921 B
`dotcom-rendering/dist/9559.client.web.********************.js`	509 B
`dotcom-rendering/dist/9570.client.web.********************.js`	441 B
`dotcom-rendering/dist/9721.client.web.********************.js`	717 B
`dotcom-rendering/dist/9835.client.web.********************.js`	647 B
`dotcom-rendering/dist/9858.client.web.********************.js`	6.41 kB
`dotcom-rendering/dist/9899.client.web.********************.js`	669 B
`dotcom-rendering/dist/Accessibility-importable.client.web.********************.js`	6.3 kB
`dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js`	2.85 kB
`dotcom-rendering/dist/AdPortals-importable.client.web.********************.js`	3.91 kB
`dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js`	424 B
`dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js`	3.55 kB
`dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js`	3.62 kB
`dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js`	3.04 kB
`dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js`	2.47 kB
`dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js`	3.57 kB
`dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js`	2.33 kB
`dotcom-rendering/dist/Branding-importable.client.web.********************.js`	3.05 kB
`dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js`	37.2 kB
`dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js`	1.97 kB
`dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js`	6.7 kB
`dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js`	7.39 kB
`dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js`	3.49 kB
`dotcom-rendering/dist/Carousel-importable.client.web.********************.js`	6.01 kB
`dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js`	4.5 kB
`dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js`	538 B
`dotcom-rendering/dist/CommentCount-importable.client.web.********************.js`	3.3 kB
`dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js`	1.81 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.64 kB
`dotcom-rendering/dist/Dropdown-importable.client.web.********************.js`	1.73 kB
`dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js`	6.51 kB
`dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js`	3.74 kB
`dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js`	2.02 kB
`dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js`	2.44 kB
`dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js`	5.21 kB
`dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js`	623 B
`dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js`	3.39 kB
`dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js`	347 B
`dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js`	3.74 kB
`dotcom-rendering/dist/frameworks.client.web.********************.js`	20.8 kB
`dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js`	5.38 kB
`dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js`	6.03 kB
`dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js`	12.1 kB
`dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js`	7.99 kB
`dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js`	2.71 kB
`dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js`	16.7 kB
`dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js`	11 kB
`dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js`	3.02 kB
`dotcom-rendering/dist/HeaderTopBar-importable.client.web.********************.js`	10.2 kB
`dotcom-rendering/dist/HighlightsContainer-importable.client.web.********************.js`	4.7 kB
`dotcom-rendering/dist/index.client.web.********************.js`	46.2 kB
`dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js`	3.29 kB
`dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js`	853 B
`dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js`	6.33 kB
`dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js`	4.72 kB
`dotcom-rendering/dist/InteractiveSupportButton-importable.client.web.********************.js`	6.75 kB
`dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js`	4.74 kB
`dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js`	3.51 kB
`dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js`	1.53 kB
`dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js`	436 B
`dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js`	8.16 kB
`dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js`	3.8 kB
`dotcom-rendering/dist/Liveness-importable.client.web.********************.js`	4.94 kB
`dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js`	7.83 kB
`dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js`	5.46 kB
`dotcom-rendering/dist/Metrics-importable.client.web.********************.js`	2.73 kB
`dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js`	5.72 kB
`dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js`	8.35 kB
`dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js`	4.7 kB
`dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js`	5.82 kB
`dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js`	3.66 kB
`dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js`	2.8 kB
`dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js`	3.04 kB
`dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js`	750 B
`dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js`	2.8 kB
`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.51 kB
`dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js`	5.21 kB
`dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js`	5.1 kB
`dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js`	2.16 kB
`dotcom-rendering/dist/sentry.client.web.********************.js`	767 B
`dotcom-rendering/dist/SetABTests-importable.client.web.********************.js`	3.69 kB
`dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js`	486 B
`dotcom-rendering/dist/ShareButton-importable.client.web.********************.js`	1.53 kB
`dotcom-rendering/dist/shimport.client.web.********************.js`	2.8 kB
`dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js`	647 B
`dotcom-rendering/dist/ShowMore-importable.client.web.********************.js`	1.4 kB
`dotcom-rendering/dist/SignInGateMain.client.web.********************.js`	3.98 kB
`dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js`	3.92 kB
`dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js`	3.15 kB
`dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js`	3.48 kB
`dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js`	5.31 kB
`dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js`	4.19 kB
`dotcom-rendering/dist/StickyLiveblogAskWrapper-importable.client.web.********************.js`	7.65 kB
`dotcom-rendering/dist/SubNav-importable.client.web.********************.js`	3.37 kB
`dotcom-rendering/dist/SupportTheG-importable.client.web.********************.js`	6.6 kB
`dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js`	3.19 kB
`dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js`	3.23 kB
`dotcom-rendering/dist/TopBar-importable.client.web.********************.js`	7.96 kB
`dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js`	2.75 kB
`dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js`	1.02 kB
`dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js`	3.3 kB
`dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js`	5.47 kB
`dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js`	3.13 kB
`dotcom-rendering/dist/WeatherWrapper-importable.client.web.********************.js`	7.04 kB
`dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js`	3.94 kB

_{compressed-size-action}

github-actions · 2024-08-14T14:50:19Z

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

All deployment options

From guardian/actions-riff-raff.

Co-authored-by: Anna Beddow <[email protected]>

github-actions · 2024-08-15T11:00:30Z

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.

prout-bot · 2024-08-15T11:24:09Z

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

github-actions bot added the dotcom-rendering label Aug 13, 2024

Georges-GNM force-pushed the gl-ab/add-flexible-special-container branch from ac020f6 to 4624652 Compare August 14, 2024 14:44

Georges-GNM force-pushed the gl-ab/add-flexible-special-container branch from e31c088 to 3186de3 Compare August 14, 2024 15:25

Georges-GNM added the fairground label Aug 14, 2024

Georges-GNM and others added 14 commits August 15, 2024 11:40

Add support for flexible special container

33b07f7

Generate schema

9b690d9

WIP - beginning flexible special layout

81bd1ee

Co-authored-by: Anna Beddow <[email protected]>

WIP - add trails to flex special props

081bda9

Use DCR grouped trails for flexible special data

ff16279

Co-authored-by: Anna Beddow <[email protected]>

Use grouped trails in flex special story too

f27dffd

Use flex layout for flexible special

b469c8c

Add layouts and card slicing

a80b7f5

dont export snap100

c424d0d

fix linting

abdc407

Add story variations

38adcd2

Remove logs

cb94dcf

Pass all required props to flexible special

bd98d8d

Add render props to story

a531454

Georges-GNM mentioned this pull request Aug 15, 2024

[Fairground 🎡] Support Flexible/special container in DCR guardian/frontend#27406

Merged

Refactor args in the stories

3056fe5

abeddow91 force-pushed the gl-ab/add-flexible-special-container branch from 211194c to 3056fe5 Compare August 15, 2024 10:44

abeddow91 changed the title ~~Add support for flexible special container~~ [Fairground 🎡] Add support and layout for flexible special container Aug 15, 2024

abeddow91 marked this pull request as ready for review August 15, 2024 11:00

abeddow91 requested a review from a team as a code owner August 15, 2024 11:00

abeddow91 requested a review from cemms1 August 15, 2024 11:00

abeddow91 self-requested a review August 15, 2024 11:00

abeddow91 approved these changes Aug 15, 2024

View reviewed changes

Georges-GNM added the run_chromatic Runs chromatic when label is applied label Aug 15, 2024

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Aug 15, 2024

Georges-GNM merged commit 7b44f8d into main Aug 15, 2024
34 checks passed

Georges-GNM deleted the gl-ab/add-flexible-special-container branch August 15, 2024 11:15

prout-bot added Pending-on-PROD Seen-on-PROD and removed Pending-on-PROD labels Aug 15, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Fairground 🎡] Add support and layout for flexible special container #12137

[Fairground 🎡] Add support and layout for flexible special container #12137

Georges-GNM commented Aug 13, 2024 •

edited by abeddow91

Loading

github-actions bot commented Aug 13, 2024 •

edited

Loading

github-actions bot commented Aug 13, 2024 •

edited

Loading

github-actions bot commented Aug 14, 2024 •

edited

Loading

github-actions bot commented Aug 15, 2024

prout-bot commented Aug 15, 2024

[Fairground 🎡] Add support and layout for flexible special container #12137

[Fairground 🎡] Add support and layout for flexible special container #12137

Conversation

Georges-GNM commented Aug 13, 2024 • edited by abeddow91 Loading

What does this change?

Why?

Screenshots

github-actions bot commented Aug 13, 2024 • edited Loading

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

github-actions bot commented Aug 13, 2024 • edited Loading

github-actions bot commented Aug 14, 2024 • edited Loading

Deploy build 12522 of dotcom:rendering-all to CODE

github-actions bot commented Aug 15, 2024

prout-bot commented Aug 15, 2024

Georges-GNM commented Aug 13, 2024 •

edited by abeddow91

Loading

github-actions bot commented Aug 13, 2024 •

edited

Loading

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

github-actions bot commented Aug 13, 2024 •

edited

Loading

github-actions bot commented Aug 14, 2024 •

edited

Loading

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