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

Onward Content Design Refactor #9691

Merged
merged 22 commits into from
Dec 11, 2023
Merged

Conversation

sophie-macmillan
Copy link
Contributor

@sophie-macmillan sophie-macmillan commented Nov 28, 2023

What does this change?

This updates the design for all the onwards contents carousels. The front carousel should not be updated so we use the isOnwardsContent prop to distinguish between the two.

I didn't think the changes required were significant to create a new carousel or card, but if whoever reviews this feels differently we can discuss and split it out. The card is quite big and has a fair amount of logic in it already.

Why?

Part of a redesign
Resolves #7390

Screenshots

Before After
AppsArticle image image
WebArticle image image imageimage
AppsArticle - Darkmode image image
Front (no change) image image
Front video carousel (no change) image image
All card types N/A 2023-12-06 16 57 41

@sophie-macmillan sophie-macmillan added the run_chromatic Runs chromatic when label is applied label Nov 28, 2023
@@ -405,8 +410,10 @@ export const Card = ({
return (
<CardWrapper
format={format}
showTopBar={!isOnwardContent}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Have passed this rather than just using isOnwardContent in the CardWrapper as it is more abstracted and reusable in future

Copy link

github-actions bot commented Nov 28, 2023

Size Change: -13 kB (-2%)

Total Size: 733 kB

Filename Size Change
dotcom-rendering/dist/2096.web.********************.js 0 B -13 kB (removed) 🏆
ℹ️ View Unchanged
Filename Size Change
dotcom-rendering/dist/100.web.********************.js 990 B 0 B
dotcom-rendering/dist/1024.web.********************.js 2.75 kB 0 B
dotcom-rendering/dist/1076.web.********************.js 3.08 kB 0 B
dotcom-rendering/dist/1136.web.********************.js 884 B 0 B
dotcom-rendering/dist/1178.web.********************.js 504 B 0 B
dotcom-rendering/dist/1226.web.********************.js 3.69 kB +30 B (+1%)
dotcom-rendering/dist/1406.web.********************.js 5.09 kB 0 B
dotcom-rendering/dist/1418.web.********************.js 9.98 kB 0 B
dotcom-rendering/dist/1465.web.********************.js 3.32 kB 0 B
dotcom-rendering/dist/1520.web.********************.js 492 B 0 B
dotcom-rendering/dist/1521.web.********************.js 5.48 kB 0 B
dotcom-rendering/dist/1659.web.********************.js 518 B 0 B
dotcom-rendering/dist/1714.web.********************.js 3.5 kB 0 B
dotcom-rendering/dist/1939.web.********************.js 3.59 kB 0 B
dotcom-rendering/dist/1987.web.********************.js 3.15 kB 0 B
dotcom-rendering/dist/2092.web.********************.js 849 B 0 B
dotcom-rendering/dist/2186.web.********************.js 916 B 0 B
dotcom-rendering/dist/2394.web.********************.js 6.85 kB 0 B
dotcom-rendering/dist/2510.web.********************.js 663 B 0 B
dotcom-rendering/dist/2511.web.********************.js 819 B 0 B
dotcom-rendering/dist/254.web.********************.js 638 B 0 B
dotcom-rendering/dist/279.web.********************.js 2.48 kB 0 B
dotcom-rendering/dist/2848.web.********************.js 16.2 kB 0 B
dotcom-rendering/dist/2879.web.********************.js 910 B 0 B
dotcom-rendering/dist/2919.web.********************.js 900 B 0 B
dotcom-rendering/dist/2923.web.********************.js 720 B 0 B
dotcom-rendering/dist/3030.web.********************.js 957 B 0 B
dotcom-rendering/dist/3111.web.********************.js 590 B 0 B
dotcom-rendering/dist/3149.web.********************.js 636 B 0 B
dotcom-rendering/dist/3265.web.********************.js 916 B 0 B
dotcom-rendering/dist/3302.web.********************.js 820 B 0 B
dotcom-rendering/dist/3389.web.********************.js 884 B 0 B
dotcom-rendering/dist/3653.web.********************.js 13.4 kB 0 B
dotcom-rendering/dist/3662.web.********************.js 3.13 kB 0 B
dotcom-rendering/dist/3767.web.********************.js 2.84 kB 0 B
dotcom-rendering/dist/3795.web.********************.js 797 B 0 B
dotcom-rendering/dist/3968.web.********************.js 3.79 kB 0 B
dotcom-rendering/dist/4012.web.********************.js 783 B 0 B
dotcom-rendering/dist/4251.web.********************.js 8.9 kB 0 B
dotcom-rendering/dist/4349.web.********************.js 775 B 0 B
dotcom-rendering/dist/4591.web.********************.js 404 B 0 B
dotcom-rendering/dist/4593.web.********************.js 1.74 kB 0 B
dotcom-rendering/dist/4610.web.********************.js 3.48 kB 0 B
dotcom-rendering/dist/4627.web.********************.js 783 B 0 B
dotcom-rendering/dist/4797.web.********************.js 744 B 0 B
dotcom-rendering/dist/480.web.********************.js 524 B 0 B
dotcom-rendering/dist/489.web.********************.js 5.22 kB 0 B
dotcom-rendering/dist/5332.web.********************.js 820 B 0 B
dotcom-rendering/dist/5495.web.********************.js 676 B 0 B
dotcom-rendering/dist/5515.web.********************.js 30 kB 0 B
dotcom-rendering/dist/5688.web.********************.js 3.79 kB 0 B
dotcom-rendering/dist/5744.web.********************.js 720 B 0 B
dotcom-rendering/dist/5843.web.********************.js 4.69 kB 0 B
dotcom-rendering/dist/6068.web.********************.js 775 B 0 B
dotcom-rendering/dist/6263.web.********************.js 3.98 kB 0 B
dotcom-rendering/dist/6295.web.********************.js 999 B 0 B
dotcom-rendering/dist/639.web.********************.js 951 B 0 B
dotcom-rendering/dist/6428.web.********************.js 741 B 0 B
dotcom-rendering/dist/657.web.********************.js 2.46 kB 0 B
dotcom-rendering/dist/6609.web.********************.js 872 B 0 B
dotcom-rendering/dist/6967.web.********************.js 850 B 0 B
dotcom-rendering/dist/721.web.********************.js 4.24 kB 0 B
dotcom-rendering/dist/7569.web.********************.js 4.86 kB 0 B
dotcom-rendering/dist/7650.web.********************.js 23 kB 0 B
dotcom-rendering/dist/7701.web.********************.js 647 B 0 B
dotcom-rendering/dist/7842.web.********************.js 2.36 kB 0 B
dotcom-rendering/dist/8085.web.********************.js 2.59 kB 0 B
dotcom-rendering/dist/8112.web.********************.js 3.37 kB 0 B
dotcom-rendering/dist/8268.web.********************.js 4.06 kB 0 B
dotcom-rendering/dist/8329.web.********************.js 5.32 kB 0 B
dotcom-rendering/dist/8395.web.********************.js 580 B 0 B
dotcom-rendering/dist/8401.web.********************.js 922 B 0 B
dotcom-rendering/dist/8414.web.********************.js 4.92 kB 0 B
dotcom-rendering/dist/8620.web.********************.js 5.78 kB 0 B
dotcom-rendering/dist/9196.web.********************.js 784 B 0 B
dotcom-rendering/dist/9390.web.********************.js 743 B 0 B
dotcom-rendering/dist/9422.web.********************.js 614 B 0 B
dotcom-rendering/dist/9457.web.********************.js 6.63 kB 0 B
dotcom-rendering/dist/9581.web.********************.js 797 B 0 B
dotcom-rendering/dist/9582.web.********************.js 710 B 0 B
dotcom-rendering/dist/9585.web.********************.js 2.51 kB 0 B
dotcom-rendering/dist/9597.web.********************.js 3.25 kB 0 B
dotcom-rendering/dist/9617.web.********************.js 1 kB 0 B
dotcom-rendering/dist/9724.web.********************.js 5.01 kB 0 B
dotcom-rendering/dist/AdPortals-importable.web.********************.js 3.62 kB 0 B
dotcom-rendering/dist/AlreadyVisited-importable.web.********************.js 412 B 0 B
dotcom-rendering/dist/AppEmailSignUp-importable.web.********************.js 8.17 kB 0 B
dotcom-rendering/dist/AppsEpic-importable.web.********************.js 4 kB 0 B
dotcom-rendering/dist/AppsFooter-importable.web.********************.js 3.53 kB 0 B
dotcom-rendering/dist/AppsLightboxImage-importable.web.********************.js 2.92 kB 0 B
dotcom-rendering/dist/AppsLightboxImageStore-importable.web.********************.js 2.4 kB 0 B
dotcom-rendering/dist/AudioAtomWrapper-importable.web.********************.js 3.51 kB 0 B
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.web.********************.js 4.6 kB 0 B
dotcom-rendering/dist/Branding-importable.web.********************.js 2.48 kB 0 B
dotcom-rendering/dist/braze-web-sdk-core.web.********************.js 36.9 kB 0 B
dotcom-rendering/dist/BrazeMessaging-importable.web.********************.js 5.28 kB 0 B
dotcom-rendering/dist/CalloutBlockComponent-importable.web.********************.js 6.79 kB 0 B
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.web.********************.js 6 kB 0 B
dotcom-rendering/dist/CardCommentCount-importable.web.********************.js 3.17 kB 0 B
dotcom-rendering/dist/Carousel-importable.web.********************.js 7.81 kB 0 B
dotcom-rendering/dist/CarouselForNewsletters-importable.web.********************.js 5.66 kB +47 B (+1%)
dotcom-rendering/dist/ChartAtom-importable.web.********************.js 500 B 0 B
dotcom-rendering/dist/CommentCount-importable.web.********************.js 3.06 kB 0 B
dotcom-rendering/dist/DiscussionContainer-importable.web.********************.js 24.3 kB 0 B
dotcom-rendering/dist/DiscussionMeta-importable.web.********************.js 3.66 kB 0 B
dotcom-rendering/dist/DocumentBlockComponent-importable.web.********************.js 3.56 kB 0 B
dotcom-rendering/dist/EmbedBlockComponent-importable.web.********************.js 4.09 kB 0 B
dotcom-rendering/dist/EnhancePinnedPost-importable.web.********************.js 1.97 kB 0 B
dotcom-rendering/dist/FetchOnwardsData-importable.web.********************.js 2.5 kB 0 B
dotcom-rendering/dist/FilterKeyEventsToggle-importable.web.********************.js 3.32 kB 0 B
dotcom-rendering/dist/FocusStyles-importable.web.********************.js 607 B 0 B
dotcom-rendering/dist/FollowWrapper-importable.web.********************.js 3.07 kB 0 B
dotcom-rendering/dist/FooterLabel-importable.web.********************.js 336 B 0 B
dotcom-rendering/dist/frameworks.web.********************.js 20.7 kB 0 B
dotcom-rendering/dist/GetCricketScoreboard-importable.web.********************.js 3.49 kB 0 B
dotcom-rendering/dist/GetMatchNav-importable.web.********************.js 9.63 kB 0 B
dotcom-rendering/dist/GetMatchStats-importable.web.********************.js 1.52 kB 0 B
dotcom-rendering/dist/GetMatchTabs-importable.web.********************.js 2.77 kB 0 B
dotcom-rendering/dist/guardian-braze-components-banner.web.********************.js 13.4 kB 0 B
dotcom-rendering/dist/guardian-braze-components-end-of-article.web.********************.js 9 kB 0 B
dotcom-rendering/dist/GuideAtomWrapper-importable.web.********************.js 790 B 0 B
dotcom-rendering/dist/HeaderTopBar-importable.web.********************.js 10.8 kB 0 B
dotcom-rendering/dist/index.web.********************.js 45.4 kB 0 B
dotcom-rendering/dist/InstagramBlockComponent-importable.web.********************.js 3.64 kB 0 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.web.********************.js 5.92 kB 0 B
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.web.********************.js 3.79 kB 0 B
dotcom-rendering/dist/InteractiveSupportButton-importable.web.********************.js 3.83 kB 0 B
dotcom-rendering/dist/KeyEventsCarousel-importable.web.********************.js 2.71 kB 0 B
dotcom-rendering/dist/KnowledgeQuizAtom-importable.web.********************.js 3.52 kB 0 B
dotcom-rendering/dist/LatestLinks-importable.web.********************.js 1.2 kB 0 B
dotcom-rendering/dist/LightboxHash-importable.web.********************.js 430 B 0 B
dotcom-rendering/dist/LightboxJavascript-importable.web.********************.js 4.64 kB 0 B
dotcom-rendering/dist/LiveBlogEpic-importable.web.********************.js 3.86 kB 0 B
dotcom-rendering/dist/Liveness-importable.web.********************.js 3.18 kB 0 B
dotcom-rendering/dist/ManyNewsletterSignUp-importable.web.********************.js 5.08 kB 0 B
dotcom-rendering/dist/MapEmbedBlockComponent-importable.web.********************.js 5.58 kB 0 B
dotcom-rendering/dist/Metrics-importable.web.********************.js 2.29 kB 0 B
dotcom-rendering/dist/MostViewedFooter-importable.web.********************.js 5.7 kB 0 B
dotcom-rendering/dist/MostViewedFooterData-importable.web.********************.js 8.38 kB 0 B
dotcom-rendering/dist/MostViewedRightWrapper-importable.web.********************.js 3.74 kB 0 B
dotcom-rendering/dist/OnwardsUpper-importable.web.********************.js 4.17 kB 0 B
dotcom-rendering/dist/PersonalityQuizAtom-importable.web.********************.js 3.65 kB 0 B
dotcom-rendering/dist/ProfileAtom-importable.web.********************.js 547 B 0 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.web.********************.js 810 B 0 B
dotcom-rendering/dist/PulsingDot-importable.web.********************.js 744 B 0 B
dotcom-rendering/dist/QandaAtom-importable.web.********************.js 542 B 0 B
dotcom-rendering/dist/ReaderRevenueDev-importable.web.********************.js 466 B 0 B
dotcom-rendering/dist/readerRevenueDevUtils.web.********************.js 2.44 kB 0 B
dotcom-rendering/dist/ReaderRevenueLinks-importable.web.********************.js 6.18 kB 0 B
dotcom-rendering/dist/RelativeTime-importable.web.********************.js 1.92 kB 0 B
dotcom-rendering/dist/RichLinkComponent-importable.web.********************.js 6.41 kB 0 B
dotcom-rendering/dist/SecureSignupIframe-importable.web.********************.js 4.93 kB 0 B
dotcom-rendering/dist/SendAMessage-importable.web.********************.js 4.6 kB 0 B
dotcom-rendering/dist/SendTargetingParams-importable.web.********************.js 2.08 kB 0 B
dotcom-rendering/dist/sentry.web.********************.js 772 B 0 B
dotcom-rendering/dist/SetABTests-importable.web.********************.js 3.43 kB 0 B
dotcom-rendering/dist/SetAdTargeting-importable.web.********************.js 481 B 0 B
dotcom-rendering/dist/shimport.web.********************.js 2.78 kB 0 B
dotcom-rendering/dist/ShowHideContainers-importable.web.********************.js 642 B 0 B
dotcom-rendering/dist/ShowMore-importable.web.********************.js 5.69 kB +1 B (0%)
dotcom-rendering/dist/SignInGateMain.web.********************.js 3.86 kB 0 B
dotcom-rendering/dist/SignInGateMainCheckoutComplete.web.********************.js 4.94 kB 0 B
dotcom-rendering/dist/SignInGateSelector-importable.web.********************.js 5.55 kB 0 B
dotcom-rendering/dist/SlotBodyEnd-importable.web.********************.js 6.57 kB 0 B
dotcom-rendering/dist/SpotifyBlockComponent-importable.web.********************.js 5.43 kB 0 B
dotcom-rendering/dist/StickyBottomBanner-importable.web.********************.js 5.74 kB 0 B
dotcom-rendering/dist/SubNav-importable.web.********************.js 2.36 kB 0 B
dotcom-rendering/dist/SupportTheG-importable.web.********************.js 6.3 kB 0 B
dotcom-rendering/dist/TableOfContents-importable.web.********************.js 3.08 kB 0 B
dotcom-rendering/dist/TimelineAtom-importable.web.********************.js 1.22 kB 0 B
dotcom-rendering/dist/TweetBlockComponent-importable.web.********************.js 1.01 kB 0 B
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.web.********************.js 3.65 kB 0 B
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.web.********************.js 5.6 kB 0 B
dotcom-rendering/dist/VineBlockComponent-importable.web.********************.js 3.5 kB 0 B
dotcom-rendering/dist/WeatherWrapper-importable.web.********************.js 5.41 kB 0 B
dotcom-rendering/dist/YoutubeBlockComponent-importable.web.********************.js 3.99 kB 0 B

compressed-size-action

@sophie-macmillan sophie-macmillan changed the title Sm onward content design refactor Onward Content Design Refactor Nov 29, 2023
Copy link
Contributor

@abeddow91 abeddow91 left a comment

Choose a reason for hiding this comment

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

Looks great, I'm unsure about the prop abstraction but its not a blocker

dotcom-rendering/src/components/Card/Card.tsx Outdated Show resolved Hide resolved
@sophie-macmillan sophie-macmillan force-pushed the sm-onward-content-design-refactor branch from 9be27c2 to 5d69bd7 Compare November 29, 2023 14:04
@sophie-macmillan sophie-macmillan marked this pull request as ready for review November 29, 2023 17:18
@sophie-macmillan sophie-macmillan requested a review from a team as a code owner November 29, 2023 17:18
@mxdvl
Copy link
Contributor

mxdvl commented Nov 29, 2023

I think it we're going to refactor cards we should consider moving to CSS grid which would drastically simplify their CSS and DOM structure. Happy to demo some stuff

@sophie-macmillan
Copy link
Contributor Author

I think it we're going to refactor cards we should consider moving to CSS grid

I'm not opposed to using grid but I don't really think this PR is the place for it - I've mainly made use of the existing card with some minor tweaks (top bar showing, rounded corners and and different background). Think it looks like I've made more changes than I have because i've un-nested some css!

Copy link
Contributor

@mxdvl mxdvl left a comment

Choose a reason for hiding this comment

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

I'm not opposed to using grid but I don't really think this PR is the place for it

Fair point – I disabled whitespace change and the diff was much smaller. One for another time 👍

@sophie-macmillan sophie-macmillan added run_chromatic Runs chromatic when label is applied and removed run_chromatic Runs chromatic when label is applied labels Dec 7, 2023
@sophie-macmillan sophie-macmillan merged commit 9b40f32 into main Dec 11, 2023
29 checks passed
@sophie-macmillan sophie-macmillan deleted the sm-onward-content-design-refactor branch December 11, 2023 14:09
@prout-bot
Copy link

Seen on PROD (merged by @sophie-macmillan 9 minutes and 9 seconds ago) Please check your changes!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
dotcom-rendering run_chromatic Runs chromatic when label is applied Seen-on-PROD
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Onward Content Design Refactor
4 participants