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

Create A Lightbox Component #12700

Merged
merged 1 commit into from
Oct 30, 2024
Merged

Create A Lightbox Component #12700

merged 1 commit into from
Oct 30, 2024

Conversation

JamieB-gu
Copy link
Contributor

Combines the web and apps lightbox setup into a single component. This puts the logic in a single place, hopefully making it easier to find and understand.

For apps, this also means the component is now referenced once at the ArticlePage level, rather than separately in each layout file. This reduces repetition and matches the way it's handled for web.

Combines the web and apps lightbox setup into a single component. This puts the logic in a single place, hopefully making it easier to find and understand.

For apps, this also means the component is now referenced once at the `ArticlePage` level, rather than separately in each layout file. This reduces repetition and matches the way it's handled for web.
@JamieB-gu JamieB-gu added this to the Health milestone Oct 28, 2024
@JamieB-gu JamieB-gu self-assigned this Oct 28, 2024
@JamieB-gu JamieB-gu requested a review from a team as a code owner October 28, 2024 14:15
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.

Copy link

Size Change: 0 B

Total Size: 927 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.56 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.22 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.89 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/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/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 5.16 kB
dotcom-rendering/dist/5982.client.web.********************.js 3.78 kB
dotcom-rendering/dist/6044.client.web.********************.js 726 B
dotcom-rendering/dist/6045.client.web.********************.js 1.91 kB
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.27 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/6738.client.web.********************.js 6.01 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 4 kB
dotcom-rendering/dist/7407.client.web.********************.js 3.7 kB
dotcom-rendering/dist/7691.client.web.********************.js 853 B
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.14 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.4 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/9897.client.web.********************.js 12.2 kB
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.7 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/AudioPlayerWrapper-importable.client.web.********************.js 6.33 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.68 kB
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 4.52 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 46.1 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.55 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.98 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.2 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.3 kB
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js 5.02 kB
dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js 3.26 kB
dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js 3.26 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.51 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.99 kB
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js 2.66 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

@JamieB-gu JamieB-gu added the run_chromatic Runs chromatic when label is applied label Oct 28, 2024
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Oct 28, 2024
switch (renderingTarget) {
case 'Web':
if (
switches.lightbox === undefined ||
Copy link
Contributor

Choose a reason for hiding this comment

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

Is this check needed?

Copy link
Contributor Author

@JamieB-gu JamieB-gu Oct 30, 2024

Choose a reason for hiding this comment

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

The lightbox switch has three possible values: undefined, true or false. The first condition handles undefined. If it evaluates to false then the type is narrowed to boolean, which the second condition handles.

Technically you could rely on JavaScript's coercion behaviour to combine this into a single condition, which would implicitly convert undefined to false, but I prefer to handle these checks separately as I think it's clearer.

Copy link
Contributor

@domlander domlander left a comment

Choose a reason for hiding this comment

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

Nice refactor 👍

@JamieB-gu JamieB-gu merged commit 817441d into main Oct 30, 2024
33 checks passed
@JamieB-gu JamieB-gu deleted the lightbox-component branch October 30, 2024 13:22
@prout-bot
Copy link

Seen on PROD (merged by @JamieB-gu 8 minutes and 49 seconds ago) Please check your changes!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

3 participants