Share button #10422

DanielCliftonGuardian · 2024-01-31T13:00:22Z

What does this change?

Replaces share icons with a share button

Figma: https://www.figma.com/file/RiZvH3U3juhBxYTvcqFJe0/Share-button?type=design&node-id=175-1452&mode=design&t=U3CABoKy2bHNmAUX-0

Why?

Editorial would like to to simplify the share buttons.
Resolves #9832

Screenshots

Screen.Recording.2024-02-13.at.12.39.12.mov

github-actions · 2024-01-31T13:04:54Z

Size Change: +5.62 kB (+1%)

Total Size: 767 kB

Filename	Size	Change
`dotcom-rendering/dist/3061.client.web.********************.js`	3.06 kB	+3.06 kB (new file)	🆕
`dotcom-rendering/dist/ShareButton-importable.client.web.********************.js`	2.42 kB	+2.42 kB (new file)	🆕

ℹ️ View Unchanged

Filename	Size	Change
`dotcom-rendering/dist/1011.client.web.********************.js`	3.14 kB	0 B
`dotcom-rendering/dist/102.client.web.********************.js`	5.09 kB	0 B
`dotcom-rendering/dist/112.client.web.********************.js`	822 B	0 B
`dotcom-rendering/dist/1191.client.web.********************.js`	680 B	0 B
`dotcom-rendering/dist/1407.client.web.********************.js`	640 B	0 B
`dotcom-rendering/dist/1429.client.web.********************.js`	17.9 kB	0 B
`dotcom-rendering/dist/1459.client.web.********************.js`	876 B	0 B
`dotcom-rendering/dist/1519.client.web.********************.js`	6.12 kB	0 B
`dotcom-rendering/dist/1530.client.web.********************.js`	8.55 kB	+77 B (+1%)
`dotcom-rendering/dist/1541.client.web.********************.js`	2.89 kB	0 B
`dotcom-rendering/dist/1549.client.web.********************.js`	4.81 kB	0 B
`dotcom-rendering/dist/17.client.web.********************.js`	1.85 kB	0 B
`dotcom-rendering/dist/1749.client.web.********************.js`	920 B	0 B
`dotcom-rendering/dist/1827.client.web.********************.js`	2.65 kB	0 B
`dotcom-rendering/dist/1937.client.web.********************.js`	2.43 kB	0 B
`dotcom-rendering/dist/2293.client.web.********************.js`	582 B	0 B
`dotcom-rendering/dist/2337.client.web.********************.js`	23 kB	0 B
`dotcom-rendering/dist/2363.client.web.********************.js`	5.75 kB	0 B
`dotcom-rendering/dist/2364.client.web.********************.js`	3.79 kB	0 B
`dotcom-rendering/dist/2412.client.web.********************.js`	3.67 kB	0 B
`dotcom-rendering/dist/2443.client.web.********************.js`	3 kB	0 B
`dotcom-rendering/dist/3170.client.web.********************.js`	527 B	0 B
`dotcom-rendering/dist/3235.client.web.********************.js`	529 B	0 B
`dotcom-rendering/dist/3375.client.web.********************.js`	2.7 kB	0 B
`dotcom-rendering/dist/351.client.web.********************.js`	618 B	0 B
`dotcom-rendering/dist/3671.client.web.********************.js`	435 B	0 B
`dotcom-rendering/dist/3737.client.web.********************.js`	2.94 kB	0 B
`dotcom-rendering/dist/393.client.web.********************.js`	920 B	0 B
`dotcom-rendering/dist/3936.client.web.********************.js`	2.81 kB	0 B
`dotcom-rendering/dist/397.client.web.********************.js`	5.77 kB	0 B
`dotcom-rendering/dist/3986.client.web.********************.js`	495 B	0 B
`dotcom-rendering/dist/4025.client.web.********************.js`	39.9 kB	0 B
`dotcom-rendering/dist/4040.client.web.********************.js`	650 B	0 B
`dotcom-rendering/dist/4045.client.web.********************.js`	643 B	0 B
`dotcom-rendering/dist/405.client.web.********************.js`	914 B	0 B
`dotcom-rendering/dist/4055.client.web.********************.js`	3.2 kB	0 B
`dotcom-rendering/dist/4269.client.web.********************.js`	668 B	0 B
`dotcom-rendering/dist/4390.client.web.********************.js`	508 B	0 B
`dotcom-rendering/dist/4438.client.web.********************.js`	801 B	0 B
`dotcom-rendering/dist/4442.client.web.********************.js`	714 B	0 B
`dotcom-rendering/dist/478.client.web.********************.js`	595 B	0 B
`dotcom-rendering/dist/4870.client.web.********************.js`	748 B	0 B
`dotcom-rendering/dist/4911.client.web.********************.js`	780 B	0 B
`dotcom-rendering/dist/5020.client.web.********************.js`	994 B	0 B
`dotcom-rendering/dist/5047.client.web.********************.js`	779 B	0 B
`dotcom-rendering/dist/5055.client.web.********************.js`	4.6 kB	0 B
`dotcom-rendering/dist/5196.client.web.********************.js`	13.2 kB	0 B
`dotcom-rendering/dist/5569.client.web.********************.js`	3.56 kB	0 B
`dotcom-rendering/dist/5619.client.web.********************.js`	926 B	0 B
`dotcom-rendering/dist/5730.client.web.********************.js`	954 B	0 B
`dotcom-rendering/dist/5898.client.web.********************.js`	4.33 kB	0 B
`dotcom-rendering/dist/5985.client.web.********************.js`	750 B	0 B
`dotcom-rendering/dist/6043.client.web.********************.js`	852 B	0 B
`dotcom-rendering/dist/6140.client.web.********************.js`	853 B	0 B
`dotcom-rendering/dist/6302.client.web.********************.js`	2.68 kB	0 B
`dotcom-rendering/dist/6351.client.web.********************.js`	3.42 kB	0 B
`dotcom-rendering/dist/6651.client.web.********************.js`	904 B	0 B
`dotcom-rendering/dist/6693.client.web.********************.js`	822 B	0 B
`dotcom-rendering/dist/6847.client.web.********************.js`	4.85 kB	0 B
`dotcom-rendering/dist/6853.client.web.********************.js`	1 kB	0 B
`dotcom-rendering/dist/6981.client.web.********************.js`	3.87 kB	0 B
`dotcom-rendering/dist/7018.client.web.********************.js`	787 B	0 B
`dotcom-rendering/dist/7024.client.web.********************.js`	3.6 kB	0 B
`dotcom-rendering/dist/7324.client.web.********************.js`	3.49 kB	0 B
`dotcom-rendering/dist/7356.client.web.********************.js`	1 kB	0 B
`dotcom-rendering/dist/764.client.web.********************.js`	6.02 kB	0 B
`dotcom-rendering/dist/7855.client.web.********************.js`	788 B	0 B
`dotcom-rendering/dist/8002.client.web.********************.js`	801 B	0 B
`dotcom-rendering/dist/8030.client.web.********************.js`	3.77 kB	0 B
`dotcom-rendering/dist/8166.client.web.********************.js`	1.56 kB	0 B
`dotcom-rendering/dist/8288.client.web.********************.js`	23 kB	0 B
`dotcom-rendering/dist/841.client.web.********************.js`	789 B	0 B
`dotcom-rendering/dist/8695.client.web.********************.js`	8.67 kB	0 B
`dotcom-rendering/dist/8749.client.web.********************.js`	3.24 kB	0 B
`dotcom-rendering/dist/8818.client.web.********************.js`	748 B	0 B
`dotcom-rendering/dist/8937.client.web.********************.js`	888 B	0 B
`dotcom-rendering/dist/898.client.web.********************.js`	3.74 kB	0 B
`dotcom-rendering/dist/9140.client.web.********************.js`	8.28 kB	0 B
`dotcom-rendering/dist/9173.client.web.********************.js`	723 B	0 B
`dotcom-rendering/dist/9314.client.web.********************.js`	822 B	0 B
`dotcom-rendering/dist/9328.client.web.********************.js`	3.53 kB	0 B
`dotcom-rendering/dist/9605.client.web.********************.js`	4.79 kB	0 B
`dotcom-rendering/dist/9621.client.web.********************.js`	723 B	0 B
`dotcom-rendering/dist/9676.client.web.********************.js`	889 B	0 B
`dotcom-rendering/dist/9727.client.web.********************.js`	5.89 kB	0 B
`dotcom-rendering/dist/9886.client.web.********************.js`	9.99 kB	0 B
`dotcom-rendering/dist/9933.client.web.********************.js`	5.1 kB	0 B
`dotcom-rendering/dist/9978.client.web.********************.js`	960 B	0 B
`dotcom-rendering/dist/AdPortals-importable.client.web.********************.js`	3.72 kB	0 B
`dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js`	424 B	0 B
`dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js`	4.12 kB	0 B
`dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js`	3.62 kB	0 B
`dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js`	3 kB	0 B
`dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js`	2.42 kB	0 B
`dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js`	3.63 kB	0 B
`dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js`	2.03 kB	0 B
`dotcom-rendering/dist/Branding-importable.client.web.********************.js`	2.65 kB	0 B
`dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js`	36.9 kB	0 B
`dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js`	5.29 kB	0 B
`dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js`	6.78 kB	0 B
`dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js`	5.78 kB	0 B
`dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js`	4.85 kB	0 B
`dotcom-rendering/dist/Carousel-importable.client.web.********************.js`	5.56 kB	0 B
`dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js`	5.66 kB	0 B
`dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js`	538 B	0 B
`dotcom-rendering/dist/CommentCount-importable.client.web.********************.js`	3.29 kB	0 B
`dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js`	859 B	0 B
`dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js`	4.06 kB	0 B
`dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js`	1.67 kB	0 B
`dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js`	3.61 kB	0 B
`dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js`	4.16 kB	0 B
`dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js`	2.01 kB	0 B
`dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js`	2.55 kB	0 B
`dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js`	3.35 kB	0 B
`dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js`	611 B	0 B
`dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js`	841 B	0 B
`dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js`	342 B	0 B
`dotcom-rendering/dist/frameworks.client.web.********************.js`	20.7 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.8 kB	0 B
`dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js`	1.68 kB	0 B
`dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js`	2.67 kB	0 B
`dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js`	14.8 kB	0 B
`dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js`	9.32 kB	0 B
`dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js`	780 B	0 B
`dotcom-rendering/dist/HeaderTopBar-importable.client.web.********************.js`	10.9 kB	0 B
`dotcom-rendering/dist/index.client.web.********************.js`	47.5 kB	+65 B (0%)
`dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js`	3.7 kB	0 B
`dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js`	855 B	0 B
`dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js`	6.09 kB	0 B
`dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js`	4.72 kB	0 B
`dotcom-rendering/dist/InteractiveSupportButton-importable.client.web.********************.js`	3.49 kB	0 B
`dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js`	4.59 kB	0 B
`dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js`	3.54 kB	0 B
`dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js`	2.22 kB	0 B
`dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js`	434 B	0 B
`dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js`	6.46 kB	0 B
`dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js`	3.6 kB	0 B
`dotcom-rendering/dist/Liveness-importable.client.web.********************.js`	4.95 kB	0 B
`dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js`	6.63 kB	0 B
`dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js`	5.69 kB	0 B
`dotcom-rendering/dist/Metrics-importable.client.web.********************.js`	2.29 kB	0 B
`dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js`	4.04 kB	0 B
`dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js`	6.73 kB	0 B
`dotcom-rendering/dist/MostViewedRightWrapper-importable.client.web.********************.js`	4.44 kB	0 B
`dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js`	4.29 kB	0 B
`dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js`	3.66 kB	0 B
`dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js`	542 B	0 B
`dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js`	800 B	0 B
`dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js`	749 B	0 B
`dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js`	537 B	0 B
`dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js`	469 B	0 B
`dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js`	1.9 kB	0 B
`dotcom-rendering/dist/ReaderRevenueLinks-importable.client.web.********************.js`	5.78 kB	0 B
`dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js`	1.99 kB	0 B
`dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js`	6.25 kB	0 B
`dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js`	3.63 kB	0 B
`dotcom-rendering/dist/SendAMessage-importable.client.web.********************.js`	4.43 kB	0 B
`dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js`	2.11 kB	0 B
`dotcom-rendering/dist/sentry.client.web.********************.js`	786 B	0 B
`dotcom-rendering/dist/SetABTests-importable.client.web.********************.js`	3.42 kB	0 B
`dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js`	485 B	0 B
`dotcom-rendering/dist/shimport.client.web.********************.js`	2.79 kB	0 B
`dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js`	647 B	0 B
`dotcom-rendering/dist/ShowMore-importable.client.web.********************.js`	5.71 kB	0 B
`dotcom-rendering/dist/SignInGateMain.client.web.********************.js`	3.93 kB	0 B
`dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js`	5.04 kB	0 B
`dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js`	5.64 kB	0 B
`dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js`	6.84 kB	0 B
`dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js`	5.53 kB	0 B
`dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js`	5.38 kB	0 B
`dotcom-rendering/dist/SubNav-importable.client.web.********************.js`	2.25 kB	0 B
`dotcom-rendering/dist/SupportTheG-importable.client.web.********************.js`	5.91 kB	0 B
`dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js`	3.17 kB	0 B
`dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js`	1.24 kB	0 B
`dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js`	1.02 kB	0 B
`dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js`	3.71 kB	0 B
`dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js`	5.7 kB	0 B
`dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js`	3.54 kB	0 B
`dotcom-rendering/dist/WeatherWrapper-importable.client.web.********************.js`	5.47 kB	0 B
`dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js`	3.97 kB	0 B

_{compressed-size-action}

github-actions · 2024-01-31T13:34:54Z

Deploy build 32220 of `Mobile::mobile-apps-rendering` to CODE

All deployment options

From guardian/actions-riff-raff.

github-actions · 2024-02-01T12:51:00Z

Deploy build 8166 of `dotcom:rendering-all` to CODE

All deployment options

From guardian/actions-riff-raff.

github-actions · 2024-02-12T14:12:24Z

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

Click here to see the Chromatic project.

cemms1

I think we've got some things left to do here - It might be worth implementing the ShareButton in Storybook first and then replacing the ShareIcons in a second PR