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

Rework trail text visibility logic & show on all breakpoints in flexible/general #12584

Merged
merged 2 commits into from
Oct 22, 2024

Conversation

cemms1
Copy link
Contributor

@cemms1 cemms1 commented Oct 18, 2024

What does this change?

Refactors the trail text component so that:

  • It is no longer a "wrapper" and now purely represents the trail text component as a whole
  • Styles the inner div rather than nesting a div within a div
  • Uses the Hide component to control visibility rather than applying css directly
  • Uses the prop "hideUntil" to describe when the trail text should be hidden
  • Creates a hideTrailTextUntil helper function to store this logic
  • Adds isFlexibleContainer to the logic as we want trail text to show on all breakpoints in flexible containers IF the image has been removed (in which case trailText is not provided as a prop to FrontCard at all, see Show trail text on standard cards in flexible/general containers if the image has been removed #12570)

Why?

Improving the component for easier use and better understanding

Addresses issue of trail text not appearing on mobile screen sizes on standard cards in flexible general containers

Part of this Trello ticket

Screenshots

Before After
before after

@cemms1 cemms1 self-assigned this Oct 18, 2024
@cemms1 cemms1 changed the title Rework trail text visibility logic Rework trail text visibility logic & show on all breakpoints in flexible/general Oct 18, 2024
@cemms1 cemms1 added the run_chromatic Runs chromatic when label is applied label Oct 18, 2024
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Oct 18, 2024
Copy link

github-actions bot commented Oct 18, 2024

Size Change: -56 B (-0.01%)

Total Size: 901 kB

Filename Size Change
dotcom-rendering/dist/2471.client.web.********************.js 0 B -12.7 kB (removed) 🏆
dotcom-rendering/dist/4789.client.web.********************.js 12.7 kB +12.7 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/1156.client.web.********************.js 3.94 kB 0 B
dotcom-rendering/dist/1391.client.web.********************.js 725 B 0 B
dotcom-rendering/dist/1417.client.web.********************.js 2.53 kB 0 B
dotcom-rendering/dist/146.client.web.********************.js 5.29 kB 0 B
dotcom-rendering/dist/1476.client.web.********************.js 784 B 0 B
dotcom-rendering/dist/1628.client.web.********************.js 2.87 kB 0 B
dotcom-rendering/dist/1667.client.web.********************.js 918 B 0 B
dotcom-rendering/dist/1884.client.web.********************.js 3.4 kB 0 B
dotcom-rendering/dist/1888.client.web.********************.js 2.92 kB 0 B
dotcom-rendering/dist/1904.client.web.********************.js 12.6 kB 0 B
dotcom-rendering/dist/1940.client.web.********************.js 507 B 0 B
dotcom-rendering/dist/2123.client.web.********************.js 619 B 0 B
dotcom-rendering/dist/2182.client.web.********************.js 529 B 0 B
dotcom-rendering/dist/2249.client.web.********************.js 4.91 kB 0 B
dotcom-rendering/dist/2310.client.web.********************.js 880 B 0 B
dotcom-rendering/dist/267.client.web.********************.js 917 B 0 B
dotcom-rendering/dist/281.client.web.********************.js 642 B 0 B
dotcom-rendering/dist/3006.client.web.********************.js 4.48 kB 0 B
dotcom-rendering/dist/3109.client.web.********************.js 803 B 0 B
dotcom-rendering/dist/3234.client.web.********************.js 5.17 kB 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/3364.client.web.********************.js 3.97 kB 0 B
dotcom-rendering/dist/346.client.web.********************.js 3.21 kB 0 B
dotcom-rendering/dist/3769.client.web.********************.js 999 B 0 B
dotcom-rendering/dist/3921.client.web.********************.js 2 kB 0 B
dotcom-rendering/dist/408.client.web.********************.js 11 kB 0 B
dotcom-rendering/dist/4122.client.web.********************.js 1.86 kB 0 B
dotcom-rendering/dist/4149.client.web.********************.js 3.77 kB 0 B
dotcom-rendering/dist/4282.client.web.********************.js 685 B 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/4769.client.web.********************.js 4.28 kB 0 B
dotcom-rendering/dist/4820.client.web.********************.js 2.42 kB 0 B
dotcom-rendering/dist/4866.client.web.********************.js 6.32 kB 0 B
dotcom-rendering/dist/4941.client.web.********************.js 890 B 0 B
dotcom-rendering/dist/5087.client.web.********************.js 439 B 0 B
dotcom-rendering/dist/5165.client.web.********************.js 5.31 kB -1 B (-0.02%)
dotcom-rendering/dist/5340.client.web.********************.js 3.32 kB 0 B
dotcom-rendering/dist/5371.client.web.********************.js 3.34 kB 0 B
dotcom-rendering/dist/5412.client.web.********************.js 2.89 kB 0 B
dotcom-rendering/dist/5538.client.web.********************.js 6.18 kB 0 B
dotcom-rendering/dist/5658.client.web.********************.js 750 B 0 B
dotcom-rendering/dist/5757.client.web.********************.js 931 B 0 B
dotcom-rendering/dist/5761.client.web.********************.js 4.65 kB 0 B
dotcom-rendering/dist/5880.client.web.********************.js 828 B 0 B
dotcom-rendering/dist/5937.client.web.********************.js 2.17 kB 0 B
dotcom-rendering/dist/5944.client.web.********************.js 4.97 kB 0 B
dotcom-rendering/dist/5982.client.web.********************.js 3.78 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/6261.client.web.********************.js 3.03 kB 0 B
dotcom-rendering/dist/6291.client.web.********************.js 4.26 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/661.client.web.********************.js 3.21 kB 0 B
dotcom-rendering/dist/6638.client.web.********************.js 907 B 0 B
dotcom-rendering/dist/6665.client.web.********************.js 5.03 kB 0 B
dotcom-rendering/dist/678.client.web.********************.js 804 B 0 B
dotcom-rendering/dist/6915.client.web.********************.js 22.7 kB 0 B
dotcom-rendering/dist/7072.client.web.********************.js 3.85 kB 0 B
dotcom-rendering/dist/7081.client.web.********************.js 20.2 kB 0 B
dotcom-rendering/dist/7116.client.web.********************.js 23 kB 0 B
dotcom-rendering/dist/7242.client.web.********************.js 4.52 kB 0 B
dotcom-rendering/dist/7341.client.web.********************.js 3.99 kB 0 B
dotcom-rendering/dist/7407.client.web.********************.js 3.7 kB 0 B
dotcom-rendering/dist/7691.client.web.********************.js 853 B 0 B
dotcom-rendering/dist/7713.client.web.********************.js 2.02 kB 0 B
dotcom-rendering/dist/7780.client.web.********************.js 2.28 kB 0 B
dotcom-rendering/dist/7962.client.web.********************.js 3.58 kB 0 B
dotcom-rendering/dist/8103.client.web.********************.js 4.02 kB 0 B
dotcom-rendering/dist/823.client.web.********************.js 16.4 kB 0 B
dotcom-rendering/dist/83.client.web.********************.js 750 B 0 B
dotcom-rendering/dist/8318.client.web.********************.js 2.17 kB 0 B
dotcom-rendering/dist/840.client.web.********************.js 3.21 kB 0 B
dotcom-rendering/dist/8426.client.web.********************.js 1.91 kB 0 B
dotcom-rendering/dist/8437.client.web.********************.js 3.13 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/8671.client.web.********************.js 157 B 0 B
dotcom-rendering/dist/8697.client.web.********************.js 956 B 0 B
dotcom-rendering/dist/8730.client.web.********************.js 4.41 kB 0 B
dotcom-rendering/dist/8746.client.web.********************.js 3.01 kB 0 B
dotcom-rendering/dist/8815.client.web.********************.js 3.86 kB 0 B
dotcom-rendering/dist/8822.client.web.********************.js 526 B 0 B
dotcom-rendering/dist/8833.client.web.********************.js 829 B 0 B
dotcom-rendering/dist/8903.client.web.********************.js 3.83 kB 0 B
dotcom-rendering/dist/8990.client.web.********************.js 3.41 kB 0 B
dotcom-rendering/dist/9080.client.web.********************.js 3.69 kB 0 B
dotcom-rendering/dist/9122.client.web.********************.js 8.08 kB 0 B
dotcom-rendering/dist/9132.client.web.********************.js 4.18 kB 0 B
dotcom-rendering/dist/9184.client.web.********************.js 493 B 0 B
dotcom-rendering/dist/9216.client.web.********************.js 3.45 kB 0 B
dotcom-rendering/dist/9373.client.web.********************.js 4.4 kB 0 B
dotcom-rendering/dist/940.client.web.********************.js 10.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/9608.client.web.********************.js 3.64 kB 0 B
dotcom-rendering/dist/9696.client.web.********************.js 5.88 kB 0 B
dotcom-rendering/dist/9721.client.web.********************.js 717 B 0 B
dotcom-rendering/dist/9736.client.web.********************.js 44.2 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.96 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.94 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.48 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/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.96 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.26 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.04 kB 0 B
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 4.51 kB 0 B
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js 539 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.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.96 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.2 kB 0 B
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js 1.93 kB 0 B
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js 970 B 0 B
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js 619 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.5 kB 0 B
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js 7.4 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 45.8 kB +1 B (0%)
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 2.79 kB 0 B
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js 851 B 0 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js 6.28 kB 0 B
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js 4.24 kB 0 B
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 4.77 kB 0 B
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 3.62 kB 0 B
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 2.1 kB 0 B
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 435 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.78 kB 0 B
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js 5.28 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.95 kB 0 B
dotcom-rendering/dist/Metrics-importable.client.web.********************.js 2.7 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.18 kB 0 B
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js 5.32 kB 0 B
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js 3.77 kB 0 B
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js 543 B 0 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js 803 B 0 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js 750 B 0 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js 542 B 0 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js 469 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 4.99 kB 0 B
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 4.61 kB 0 B
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js 2.19 kB 0 B
dotcom-rendering/dist/sentry.client.web.********************.js 792 B 0 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js 3.85 kB 0 B
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js 482 B 0 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js 3.72 kB 0 B
dotcom-rendering/dist/shimport.client.web.********************.js 2.8 kB 0 B
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js 733 B 0 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js 1.75 kB 0 B
dotcom-rendering/dist/SignInGateMain.client.web.********************.js 4.5 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.48 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.21 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.25 kB 0 B
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js 2.74 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/VideoFacebookBlockComponent-importable.client.web.********************.js 4.96 kB 0 B
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js 2.63 kB 0 B
dotcom-rendering/dist/WeatherWrapper-importable.client.web.********************.js 6.55 kB 0 B
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 5.94 kB 0 B

compressed-size-action

@cemms1 cemms1 force-pushed the cemms1/rework-trailtext-visibility-logic branch from cca4459 to c570f18 Compare October 18, 2024 17:29
@cemms1 cemms1 added the run_chromatic Runs chromatic when label is applied label Oct 18, 2024
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Oct 18, 2024
@cemms1 cemms1 force-pushed the cemms1/rework-trailtext-visibility-logic branch from c570f18 to e74cc06 Compare October 18, 2024 17:47
@cemms1 cemms1 added the run_chromatic Runs chromatic when label is applied label Oct 18, 2024
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Oct 18, 2024
@cemms1 cemms1 marked this pull request as ready for review October 18, 2024 17:54
@cemms1 cemms1 requested a review from a team as a code owner October 18, 2024 17:54
@cemms1 cemms1 requested review from jamesmockett, abeddow91 and Georges-GNM and removed request for a team October 18, 2024 17:54
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.

Comment on lines +443 to +456
const hideTrailTextUntil = () => {
if (isFlexibleContainer) {
return undefined;
} else if (
imageSize === 'large' &&
imagePositionOnDesktop === 'right' &&
media?.type !== 'avatar'
) {
return 'desktop';
} else {
return 'tablet';
}
};

Copy link
Contributor

Choose a reason for hiding this comment

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

😚 👌

@abeddow91 abeddow91 force-pushed the cemms1/rework-trailtext-visibility-logic branch from e74cc06 to dfd9a3b Compare October 22, 2024 07:44
@abeddow91 abeddow91 added the run_chromatic Runs chromatic when label is applied label Oct 22, 2024
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Oct 22, 2024
@abeddow91 abeddow91 merged commit 0fea327 into main Oct 22, 2024
32 checks passed
@abeddow91 abeddow91 deleted the cemms1/rework-trailtext-visibility-logic branch October 22, 2024 08:01
@prout-bot
Copy link

Seen on PROD (created by @cemms1 and merged by @abeddow91 10 minutes and 56 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
None yet
Development

Successfully merging this pull request may close these issues.

3 participants