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

adds interactive content type to mobileStickyContainer #12730

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

adds interactive content type to mobileStickyContainer #12730

wants to merge 1 commit into from

Conversation

dskamiotis
Copy link
Contributor

@dskamiotis dskamiotis commented Oct 31, 2024 •
edited
Loading

What does this change?

This is a small change to include the Interactive contentType
As a result of the related PR in commercial: guardian/commercial#1640

Why?

We would like to display mobile-sticky-banners to Interactive articles outside of the UK (currently only on "Article" types).

The styling for applying the mobile-sticky-banner lies here in DCR, and the relevant CSS currently only applies to Article types, so this has been updated.

I updated the MobileStickyContainer component logic to include a new condition: contentType === 'Interactive'. This addition allows the mobileStickyAdStylesFullWidth style to be applied when the contentType is 'Interactive', in addition to when it's 'Article' or if pageId starts with 'football/'.

Testing

Run commercial locally and using COMMERCIAL_BUNDLE_URL=http://localhost:3031/graun.standalone.commercial.js PORT=3030 make dev to test locally:
http://localhost:3030/Article/https://www.theguardian.com/us-news/ng-interactive/2024/oct/30/election-harris-trump-myths-lies-fact-checkfalse-claims-include-that-noncitizens-are-voting-in-broad-numbers-and-attacks-on-the-voting-and-counting-process?adtest=mobile_sticky_test?adtest=mobile_sticky_test

Screenshots

Screen.Recording.2024-10-31.at.12.26.55.mov

@dskamiotis dskamiotis requested a review from a team as a code owner October 31, 2024 13:43
@github-actions GitHub Actions
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.

@github-actions GitHub Actions
Copy link

Size Change: -2 B (0%)

Total Size: 928 kB

ℹ️ View Unchanged
Filename Size Change
dotcom-rendering/dist/1000.client.web.********************.js 999 B 0 B
dotcom-rendering/dist/1014.client.web.********************.js 3.97 kB 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/1347.client.web.********************.js 3.71 kB 0 B
dotcom-rendering/dist/1391.client.web.********************.js 725 B 0 B
dotcom-rendering/dist/1451.client.web.********************.js 3.34 kB 0 B
dotcom-rendering/dist/1476.client.web.********************.js 784 B 0 B
dotcom-rendering/dist/1667.client.web.********************.js 918 B 0 B
dotcom-rendering/dist/1752.client.web.********************.js 2.87 kB 0 B
dotcom-rendering/dist/1877.client.web.********************.js 2.17 kB 0 B
dotcom-rendering/dist/1919.client.web.********************.js 3.83 kB 0 B
dotcom-rendering/dist/1940.client.web.********************.js 507 B 0 B
dotcom-rendering/dist/1989.client.web.********************.js 4.01 kB 0 B
dotcom-rendering/dist/2145.client.web.********************.js 5.03 kB 0 B
dotcom-rendering/dist/2186.client.web.********************.js 6.17 kB 0 B
dotcom-rendering/dist/2291.client.web.********************.js 22.7 kB 0 B
dotcom-rendering/dist/2310.client.web.********************.js 880 B 0 B
dotcom-rendering/dist/2565.client.web.********************.js 3.77 kB 0 B
dotcom-rendering/dist/2613.client.web.********************.js 530 B 0 B
dotcom-rendering/dist/267.client.web.********************.js 917 B 0 B
dotcom-rendering/dist/27.client.web.********************.js 6.01 kB 0 B
dotcom-rendering/dist/2706.client.web.********************.js 3 kB 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/3136.client.web.********************.js 3.56 kB 0 B
dotcom-rendering/dist/3215.client.web.********************.js 158 B 0 B
dotcom-rendering/dist/3265.client.web.********************.js 44.3 kB 0 B
dotcom-rendering/dist/3270.client.web.********************.js 961 B 0 B
dotcom-rendering/dist/3284.client.web.********************.js 2.42 kB 0 B
dotcom-rendering/dist/3304.client.web.********************.js 853 B 0 B
dotcom-rendering/dist/3386.client.web.********************.js 1.91 kB 0 B
dotcom-rendering/dist/3469.client.web.********************.js 11.4 kB 0 B
dotcom-rendering/dist/3601.client.web.********************.js 3.22 kB 0 B
dotcom-rendering/dist/3657.client.web.********************.js 3.21 kB 0 B
dotcom-rendering/dist/3707.client.web.********************.js 3.87 kB 0 B
dotcom-rendering/dist/3728.client.web.********************.js 3.99 kB 0 B
dotcom-rendering/dist/3746.client.web.********************.js 527 B 0 B
dotcom-rendering/dist/3769.client.web.********************.js 999 B 0 B
dotcom-rendering/dist/3778.client.web.********************.js 8.08 kB 0 B
dotcom-rendering/dist/3992.client.web.********************.js 3.4 kB 0 B
dotcom-rendering/dist/4100.client.web.********************.js 2.92 kB 0 B
dotcom-rendering/dist/4198.client.web.********************.js 1.89 kB 0 B
dotcom-rendering/dist/4228.client.web.********************.js 11 kB 0 B
dotcom-rendering/dist/4258.client.web.********************.js 2.17 kB 0 B
dotcom-rendering/dist/4273.client.web.********************.js 3.02 kB 0 B
dotcom-rendering/dist/4282.client.web.********************.js 685 B 0 B
dotcom-rendering/dist/442.client.web.********************.js 4.27 kB 0 B
dotcom-rendering/dist/4449.client.web.********************.js 2 kB 0 B
dotcom-rendering/dist/4456.client.web.********************.js 5.88 kB 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/4941.client.web.********************.js 890 B 0 B
dotcom-rendering/dist/504.client.web.********************.js 4.91 kB 0 B
dotcom-rendering/dist/5127.client.web.********************.js 618 B 0 B
dotcom-rendering/dist/5129.client.web.********************.js 5.17 kB 0 B
dotcom-rendering/dist/5153.client.web.********************.js 6.33 kB 0 B
dotcom-rendering/dist/5336.client.web.********************.js 3.33 kB 0 B
dotcom-rendering/dist/5658.client.web.********************.js 750 B 0 B
dotcom-rendering/dist/5677.client.web.********************.js 2.53 kB 0 B
dotcom-rendering/dist/5713.client.web.********************.js 3.87 kB 0 B
dotcom-rendering/dist/5752.client.web.********************.js 4.18 kB 0 B
dotcom-rendering/dist/5757.client.web.********************.js 931 B 0 B
dotcom-rendering/dist/5766.client.web.********************.js 4.49 kB 0 B
dotcom-rendering/dist/5880.client.web.********************.js 828 B 0 B
dotcom-rendering/dist/5941.client.web.********************.js 4.65 kB 0 B
dotcom-rendering/dist/6012.client.web.********************.js 4.41 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/6140.client.web.********************.js 12.2 kB 0 B
dotcom-rendering/dist/6325.client.web.********************.js 2.9 kB 0 B
dotcom-rendering/dist/6459.client.web.********************.js 20.2 kB 0 B
dotcom-rendering/dist/6505.client.web.********************.js 1 kB 0 B
dotcom-rendering/dist/6520.client.web.********************.js 6.86 kB 0 B
dotcom-rendering/dist/6554.client.web.********************.js 12.8 kB 0 B
dotcom-rendering/dist/6598.client.web.********************.js 780 B 0 B
dotcom-rendering/dist/6612.client.web.********************.js 3.21 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/7116.client.web.********************.js 23 kB 0 B
dotcom-rendering/dist/7170.client.web.********************.js 3.41 kB 0 B
dotcom-rendering/dist/7304.client.web.********************.js 3.58 kB 0 B
dotcom-rendering/dist/7547.client.web.********************.js 4.26 kB 0 B
dotcom-rendering/dist/7691.client.web.********************.js 853 B 0 B
dotcom-rendering/dist/8148.client.web.********************.js 1.91 kB 0 B
dotcom-rendering/dist/83.client.web.********************.js 750 B 0 B
dotcom-rendering/dist/8355.client.web.********************.js 6.04 kB 0 B
dotcom-rendering/dist/8359.client.web.********************.js 3.69 kB 0 B
dotcom-rendering/dist/8429.client.web.********************.js 3.14 kB 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/8768.client.web.********************.js 2.28 kB 0 B
dotcom-rendering/dist/8776.client.web.********************.js 3.64 kB 0 B
dotcom-rendering/dist/8826.client.web.********************.js 4.53 kB 0 B
dotcom-rendering/dist/8833.client.web.********************.js 829 B 0 B
dotcom-rendering/dist/8891.client.web.********************.js 439 B 0 B
dotcom-rendering/dist/8946.client.web.********************.js 5.3 kB 0 B
dotcom-rendering/dist/8975.client.web.********************.js 4.41 kB 0 B
dotcom-rendering/dist/9138.client.web.********************.js 3.79 kB 0 B
dotcom-rendering/dist/9171.client.web.********************.js 10.3 kB 0 B
dotcom-rendering/dist/9184.client.web.********************.js 493 B 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/9631.client.web.********************.js 4.55 kB 0 B
dotcom-rendering/dist/9721.client.web.********************.js 717 B 0 B
dotcom-rendering/dist/9812.client.web.********************.js 3.45 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 5.97 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.7 kB 0 B
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js 425 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.16 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.71 kB 0 B
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js 8.23 kB 0 B
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js 2.96 kB 0 B
dotcom-rendering/dist/Carousel-importable.client.web.********************.js 6.67 kB 0 B
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 4.53 kB 0 B
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js 540 B 0 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js 2.79 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.22 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.97 kB 0 B
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js 3.75 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.21 kB 0 B
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js 1.94 kB 0 B
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js 967 B 0 B
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js 617 B 0 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js 3.43 kB 0 B
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js 347 B 0 B
dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js 3.72 kB 0 B
dotcom-rendering/dist/frameworks.client.web.********************.js 20.9 kB 0 B
dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js 7.63 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 783 B 0 B
dotcom-rendering/dist/index.client.web.********************.js 46.1 kB -2 B (0%)
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 2.79 kB 0 B
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js 853 B 0 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js 6.55 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.78 kB 0 B
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 3.61 kB 0 B
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 2.1 kB 0 B
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 436 B 0 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js 6.51 kB 0 B
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js 3.79 kB 0 B
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js 5.26 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 4 kB 0 B
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js 6.22 kB 0 B
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js 5.19 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.76 kB 0 B
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js 543 B 0 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js 804 B 0 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js 750 B 0 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js 541 B 0 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js 470 B 0 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js 1.97 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/ScrollableHighlights-importable.client.web.********************.js 5.01 kB 0 B
dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js 3.4 kB 0 B
dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js 3.4 kB 0 B
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 4.6 kB 0 B
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js 2.19 kB 0 B
dotcom-rendering/dist/sentry.client.web.********************.js 793 B 0 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js 3.86 kB 0 B
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js 483 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 732 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.61 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.49 kB 0 B
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js 4.79 kB 0 B
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js 4.24 kB 0 B
dotcom-rendering/dist/StickyLiveblogAskWrapper-importable.client.web.********************.js 7.68 kB 0 B
dotcom-rendering/dist/SubNav-importable.client.web.********************.js 2.9 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.26 kB 0 B
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js 2.75 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.05 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

deedeeh
deedeeh approved these changes Oct 31, 2024
View reviewed changes
Copy link
Contributor

@deedeeh deedeeh left a comment

Choose a reason for hiding this comment

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

Looks good Demetrios 👍🏼

@dskamiotis dskamiotis added the run_chromatic Runs chromatic when label is applied label Oct 31, 2024
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Oct 31, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@deedeeh deedeeh deedeeh approved these changes

Assignees
No one assigned
Labels
dotcom-rendering
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@dskamiotis @deedeeh