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

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

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

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

wants to merge 2 commits into from
+85 −119

Conversation

cemms1
Copy link
Contributor

@cemms1 cemms1 commented Oct 18, 2024 •
edited
Loading

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
@github-actions GitHub Actions
Copy link

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

Size Change: -63 B (-0.01%)

Total Size: 905 kB

Filename Size Change
dotcom-rendering/dist/8483.client.web.********************.js 0 B -12.1 kB (removed) 🏆
dotcom-rendering/dist/9897.client.web.********************.js 12 kB +12 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.49 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/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.96 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.27 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/6738.client.web.********************.js 6 kB +2 B (+0.03%)
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 4 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.4 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.68 kB +3 B (+0.04%)
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 4.52 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 3.72 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.9 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/ScrollableSmall-importable.client.web.********************.js 3.24 kB -3 B (-0.09%)
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.51 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
Copy link

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

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

All deployment options

From guardian/actions-riff-raff.

@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Oct 18, 2024
@github-actions GitHub Actions
Copy link

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

Deploy build 14067 of dotcom:rendering-all to CODE

All deployment options

From guardian/actions-riff-raff.

@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
@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jamesmockett jamesmockett Awaiting requested review from jamesmockett

@abeddow91 abeddow91 Awaiting requested review from abeddow91

@Georges-GNM Georges-GNM Awaiting requested review from Georges-GNM

At least 1 approving review is required to merge this pull request.

Assignees

@cemms1 cemms1

Labels
dotcom-rendering fairground
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@cemms1