Skip to content

Refactor card image types - #8080

Merged
mxdvl merged 2 commits into
mainfrom
mxdvl/image-refactors
Jun 29, 2023
Merged

mxdvl merged 2 commits into
mainfrom
mxdvl/image-refactors

Conversation

@mxdvl

@mxdvl mxdvl commented Jun 28, 2023 •

Copy link
Copy Markdown
Contributor

What does this change?

  • Narrower types in PlayIcon, reducing the number of possible branches
  • Extract types ImagePositionType and ImageSizeType to ImageWrapper, reducing ambient types

Why?

A small step in taming entropy…

Makes the work in #8075 easier to reason about.

reduce the number of possible branches by two,
by being explicit about mobile sizes.

Derive types from data using `as const` assertion
@mxdvl mxdvl added the Health label Jun 28, 2023
@mxdvl
mxdvl requested a review from a team as a code owner June 28, 2023 13:26
@github-actions

github-actions Bot commented Jun 28, 2023 •

Copy link
Copy Markdown

Size Change: +17 B (0%)

Total Size: 587 kB

ℹ️ View Unchanged
Filename Size Change
dotcom-rendering/dist/1238.modern.********************.js 3.07 kB 0 B
dotcom-rendering/dist/1266.modern.********************.js 3.97 kB 0 B
dotcom-rendering/dist/1813.modern.********************.js 6.52 kB 0 B
dotcom-rendering/dist/2006.modern.********************.js 3.84 kB 0 B
dotcom-rendering/dist/2854.modern.********************.js 3.3 kB 0 B
dotcom-rendering/dist/3250.modern.********************.js 3.56 kB 0 B
dotcom-rendering/dist/3398.modern.********************.js 20 kB 0 B
dotcom-rendering/dist/3577.modern.********************.js 4.77 kB 0 B
dotcom-rendering/dist/3911.modern.********************.js 3.16 kB 0 B
dotcom-rendering/dist/3993.modern.********************.js 6.21 kB 0 B
dotcom-rendering/dist/4331.modern.********************.js 3.36 kB 0 B
dotcom-rendering/dist/5153.modern.********************.js 2.28 kB 0 B
dotcom-rendering/dist/516.modern.********************.js 17.5 kB 0 B
dotcom-rendering/dist/5162.modern.********************.js 2.5 kB 0 B
dotcom-rendering/dist/5182.modern.********************.js 3.9 kB 0 B
dotcom-rendering/dist/5237.modern.********************.js 2.44 kB 0 B
dotcom-rendering/dist/6297.modern.********************.js 21.3 kB 0 B
dotcom-rendering/dist/6633.modern.********************.js 3.22 kB 0 B
dotcom-rendering/dist/6814.modern.********************.js 5.54 kB 0 B
dotcom-rendering/dist/6939.modern.********************.js 5.36 kB 0 B
dotcom-rendering/dist/7392.modern.********************.js 2.49 kB 0 B
dotcom-rendering/dist/7844.modern.********************.js 4.8 kB 0 B
dotcom-rendering/dist/7872.modern.********************.js 1.89 kB 0 B
dotcom-rendering/dist/8012.modern.********************.js 4.66 kB 0 B
dotcom-rendering/dist/8326.modern.********************.js 2.61 kB 0 B
dotcom-rendering/dist/8452.modern.********************.js 4.28 kB 0 B
dotcom-rendering/dist/8780.modern.********************.js 3.16 kB 0 B
dotcom-rendering/dist/8888.modern.********************.js 2.75 kB 0 B
dotcom-rendering/dist/9463.modern.********************.js 635 B 0 B
dotcom-rendering/dist/9470.modern.********************.js 28.8 kB 0 B
dotcom-rendering/dist/9500.modern.********************.js 10.8 kB +17 B (0%)
dotcom-rendering/dist/9571.modern.********************.js 3.91 kB 0 B
dotcom-rendering/dist/9861.modern.********************.js 3.5 kB 0 B
dotcom-rendering/dist/9874.modern.********************.js 5.07 kB 0 B
dotcom-rendering/dist/AlreadyVisited-importable.modern.********************.js 410 B 0 B
dotcom-rendering/dist/AnimatePulsingDots-importable.modern.********************.js 389 B 0 B
dotcom-rendering/dist/atomIframe.modern.********************.js 516 B 0 B
dotcom-rendering/dist/AudioAtomWrapper-importable.modern.********************.js 463 B 0 B
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.modern.********************.js 1.14 kB 0 B
dotcom-rendering/dist/Branding-importable.modern.********************.js 2.18 kB 0 B
dotcom-rendering/dist/braze-web-sdk-core.modern.********************.js 36.9 kB 0 B
dotcom-rendering/dist/BrazeMessaging-importable.modern.********************.js 5.5 kB 0 B
dotcom-rendering/dist/CalloutBlockComponent-importable.modern.********************.js 6.46 kB 0 B
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.modern.********************.js 6.59 kB 0 B
dotcom-rendering/dist/Carousel-importable.modern.********************.js 5.94 kB 0 B
dotcom-rendering/dist/CarouselForNewsletters-importable.modern.********************.js 7.87 kB 0 B
dotcom-rendering/dist/ChartAtomWrapper-importable.modern.********************.js 474 B 0 B
dotcom-rendering/dist/CommentCount-importable.modern.********************.js 2.77 kB 0 B
dotcom-rendering/dist/discussion.modern.********************.js 393 B 0 B
dotcom-rendering/dist/DiscussionContainer-importable.modern.********************.js 4.54 kB 0 B
dotcom-rendering/dist/DiscussionMeta-importable.modern.********************.js 3.73 kB 0 B
dotcom-rendering/dist/DocumentBlockComponent-importable.modern.********************.js 2.72 kB 0 B
dotcom-rendering/dist/EmbedBlockComponent-importable.modern.********************.js 3.25 kB 0 B
dotcom-rendering/dist/embedIframe.modern.********************.js 520 B 0 B
dotcom-rendering/dist/EnhancePinnedPost-importable.modern.********************.js 1.93 kB 0 B
dotcom-rendering/dist/FetchCommentCounts-importable.modern.********************.js 2.97 kB 0 B
dotcom-rendering/dist/FetchOnwardsData-importable.modern.********************.js 1.96 kB 0 B
dotcom-rendering/dist/FilterKeyEventsToggle-importable.modern.********************.js 3.41 kB 0 B
dotcom-rendering/dist/FocusStyles-importable.modern.********************.js 511 B 0 B
dotcom-rendering/dist/frameworks.modern.********************.js 20.5 kB 0 B
dotcom-rendering/dist/GetCricketScoreboard-importable.modern.********************.js 3.36 kB 0 B
dotcom-rendering/dist/GetMatchNav-importable.modern.********************.js 11.4 kB 0 B
dotcom-rendering/dist/GetMatchStats-importable.modern.********************.js 6.32 kB 0 B
dotcom-rendering/dist/GetMatchTabs-importable.modern.********************.js 2.42 kB 0 B
dotcom-rendering/dist/guardian-braze-components-banner.modern.********************.js 13.3 kB 0 B
dotcom-rendering/dist/guardian-braze-components-end-of-article.modern.********************.js 10.3 kB 0 B
dotcom-rendering/dist/GuideAtomWrapper-importable.modern.********************.js 476 B 0 B
dotcom-rendering/dist/HeaderTopBar-importable.modern.********************.js 10.8 kB 0 B
dotcom-rendering/dist/index.modern.********************.js 33.5 kB 0 B
dotcom-rendering/dist/InstagramBlockComponent-importable.modern.********************.js 2.79 kB 0 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.modern.********************.js 5.8 kB 0 B
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.modern.********************.js 4.09 kB 0 B
dotcom-rendering/dist/InteractiveSupportButton-importable.modern.********************.js 4.14 kB 0 B
dotcom-rendering/dist/KeyEventsCarousel-importable.modern.********************.js 2.21 kB 0 B
dotcom-rendering/dist/KnowledgeQuizAtomWrapper-importable.modern.********************.js 481 B 0 B
dotcom-rendering/dist/LatestLinks-importable.modern.********************.js 1.85 kB 0 B
dotcom-rendering/dist/LiveBlogEpic-importable.modern.********************.js 5.16 kB 0 B
dotcom-rendering/dist/Liveness-importable.modern.********************.js 5.52 kB 0 B
dotcom-rendering/dist/ManyNewsletterSignUp-importable.modern.********************.js 6.9 kB 0 B
dotcom-rendering/dist/MapEmbedBlockComponent-importable.modern.********************.js 5.32 kB 0 B
dotcom-rendering/dist/Metrics-importable.modern.********************.js 2.32 kB 0 B
dotcom-rendering/dist/MostViewedFooter-importable.modern.********************.js 5.35 kB 0 B
dotcom-rendering/dist/MostViewedFooterData-importable.modern.********************.js 7.55 kB 0 B
dotcom-rendering/dist/MostViewedRightWrapper-importable.modern.********************.js 3.79 kB 0 B
dotcom-rendering/dist/newsletterEmbedIframe.modern.********************.js 621 B 0 B
dotcom-rendering/dist/OnwardsUpper-importable.modern.********************.js 3.85 kB 0 B
dotcom-rendering/dist/PersonalityQuizAtomWrapper-importable.modern.********************.js 483 B 0 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.modern.********************.js 478 B 0 B
dotcom-rendering/dist/QandaAtomWrapper-importable.modern.********************.js 475 B 0 B
dotcom-rendering/dist/ReaderRevenueDev-importable.modern.********************.js 461 B 0 B
dotcom-rendering/dist/readerRevenueDevUtils.modern.********************.js 3.03 kB 0 B
dotcom-rendering/dist/ReaderRevenueLinks-importable.modern.********************.js 5.82 kB 0 B
dotcom-rendering/dist/RecipeMultiplier-importable.modern.********************.js 3.23 kB 0 B
dotcom-rendering/dist/relativeTime.modern.********************.js 976 B 0 B
dotcom-rendering/dist/RichLinkComponent-importable.modern.********************.js 5.05 kB 0 B
dotcom-rendering/dist/SecureSignupIframe-importable.modern.********************.js 2.54 kB 0 B
dotcom-rendering/dist/SendAMessage-importable.modern.********************.js 4.37 kB 0 B
dotcom-rendering/dist/sentry.modern.********************.js 766 B 0 B
dotcom-rendering/dist/SetABTests-importable.modern.********************.js 3.75 kB 0 B
dotcom-rendering/dist/ShareCount-importable.modern.********************.js 2.91 kB 0 B
dotcom-rendering/dist/shimport.modern.********************.js 2.78 kB 0 B
dotcom-rendering/dist/ShowHideContainers-importable.modern.********************.js 719 B 0 B
dotcom-rendering/dist/ShowMore-importable.modern.********************.js 5.13 kB 0 B
dotcom-rendering/dist/SignInGateMain.modern.********************.js 2.94 kB 0 B
dotcom-rendering/dist/SignInGateMainCheckoutComplete.modern.********************.js 3.84 kB 0 B
dotcom-rendering/dist/SignInGateSelector-importable.modern.********************.js 3.91 kB 0 B
dotcom-rendering/dist/SlotBodyEnd-importable.modern.********************.js 2.91 kB 0 B
dotcom-rendering/dist/Snow-importable.modern.********************.js 4.26 kB 0 B
dotcom-rendering/dist/SpotifyBlockComponent-importable.modern.********************.js 5.17 kB 0 B
dotcom-rendering/dist/StickyBottomBanner-importable.modern.********************.js 4 kB 0 B
dotcom-rendering/dist/SubNav-importable.modern.********************.js 2.34 kB 0 B
dotcom-rendering/dist/SupportTheG-importable.modern.********************.js 5.94 kB 0 B
dotcom-rendering/dist/TableOfContents-importable.modern.********************.js 3.08 kB 0 B
dotcom-rendering/dist/TimelineAtomWrapper-importable.modern.********************.js 476 B 0 B
dotcom-rendering/dist/TopRightAdSlot-importable.modern.********************.js 631 B 0 B
dotcom-rendering/dist/TweetBlockComponent-importable.modern.********************.js 1 kB 0 B
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.modern.********************.js 2.8 kB 0 B
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.modern.********************.js 5.33 kB 0 B
dotcom-rendering/dist/VineBlockComponent-importable.modern.********************.js 2.64 kB 0 B
dotcom-rendering/dist/YoutubeBlockComponent-importable.modern.********************.js 4.05 kB 0 B

compressed-size-action

@mxdvl mxdvl added the run_chromatic Runs chromatic when label is applied label Jun 28, 2023
Make the relationship between where types are used
and consumed explicit
@mxdvl
mxdvl force-pushed the mxdvl/image-refactors branch from 77c169a to eafd8a0 Compare June 28, 2023 14:27
@ParisaTork

ParisaTork commented Jun 29, 2023 •

Copy link
Copy Markdown
Contributor

LGTM! 👍

Could we possibly also add a test for getIconSizeOnDesktop?

describe('getIconSizeOnDesktop', () => {
  it('should return the correct icon size based on the image size', () => {
    expect(getIconSizeOnDesktop('jumbo')).toBe('xlarge');
    expect(getIconSizeOnDesktop('large')).toBe('large');
    expect(getIconSizeOnDesktop('carousel')).toBe('large');
    expect(getIconSizeOnDesktop('medium')).toBe('medium');
    expect(getIconSizeOnDesktop('small')).toBe('small');
  });
});

@mxdvl

mxdvl commented Jun 29, 2023 •

Copy link
Copy Markdown
Contributor Author

Could we possibly also add a test for getIconSizeOnDesktop?

I would generally be inclined to avoid testing private methods or what we the TypeScript compiler guarantees such as exhaustive cases.

Are the Card stories not sufficient here?

@ParisaTork

Copy link
Copy Markdown
Contributor

I would generally be inclined to avoid testing private methods or what we the TypeScript compiler guarantees such as exhaustive cases.

Are the Card stories not sufficient here?

Great point - thanks for showing me these! Card stories are more than sufficient, please go ahead and merge :)

@mxdvl
mxdvl merged commit 3a5f849 into main Jun 29, 2023
@mxdvl
mxdvl deleted the mxdvl/image-refactors branch June 29, 2023 13:35
joecowton1 pushed a commit that referenced this pull request Jul 4, 2023
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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants