Share button (#10422)

dotcom-rendering/.storybook/decorators/splitThemeDecorator.tsx

@@ -51,7 +51,7 @@ const FormatHeading = ({ format }: { format: ArticleFormat }) => (
 // ----- Decorators ----- //
 
 /** A list of the most typical formats */
-const defaultFormats = [
+export const defaultFormats = [
 	{
 		display: ArticleDisplay.Standard,
 		design: ArticleDesign.Standard,

dotcom-rendering/src/components/ArticleMeta.tsx

@@ -27,7 +27,7 @@ import { Contributor } from './Contributor';
 import { Dateline } from './Dateline';
 import { Island } from './Island';
 import { SendAMessage } from './SendAMessage.importable';
-import { ShareIcons } from './ShareIcons';
+import { ShareButton } from './ShareButton.importable';
 
 type Props = {
 	format: ArticleFormat;
@@ -415,14 +415,17 @@ export const ArticleMeta = ({
 									),
 							]}
 						>
-							<ShareIcons
-								pageId={pageId}
-								webTitle={webTitle}
-								format={format}
-								displayIcons={['facebook', 'twitter', 'email']}
-								size="medium"
-								context="ArticleMeta"
-							/>
+							<Island
+								priority="feature"
+								defer={{ until: 'visible' }}
+							>
+								<ShareButton
+									pageId={pageId}
+									webTitle={webTitle}
+									format={format}
+									context="ArticleMeta"
+								/>
+							</Island>
 						</div>
 					)}
 					<div

dotcom-rendering/src/components/Island.test.tsx

@@ -29,6 +29,7 @@ import { ReaderRevenueLinks } from './ReaderRevenueLinks.importable';
 import { SendTargetingParams } from './SendTargetingParams.importable';
 import { SetABTests } from './SetABTests.importable';
 import { SetAdTargeting } from './SetAdTargeting.importable';
+import { ShareButton } from './ShareButton.importable';
 import { ShowHideContainers } from './ShowHideContainers.importable';
 import { SignInGateSelector } from './SignInGateSelector.importable';
 import { SlotBodyEnd } from './SlotBodyEnd.importable';
@@ -448,4 +449,25 @@ describe('Island: server-side rendering', () => {
 			),
 		).not.toThrow();
 	});
+
+	test('ShareButton', () => {
+		expect(() =>
+			renderToString(
+				<ConfigProvider
+					value={{ renderingTarget: 'Web', darkModeAvailable: false }}
+				>
+					<ShareButton
+						pageId={'123'}
+						webTitle={'The the'}
+						format={{
+							display: ArticleDisplay.Standard,
+							theme: Pillar.News,
+							design: ArticleDesign.Standard,
+						}}
+						context="ArticleMeta"
+					/>
+				</ConfigProvider>,
+			),
+		).not.toThrow();
+	});
 });

dotcom-rendering/src/components/LiveBlock.tsx

@@ -3,9 +3,10 @@ import { isUndefined } from '@guardian/libs';
 import type { EditionId } from '../lib/edition';
 import { RenderArticleElement } from '../lib/renderElement';
 import type { ServerSideTests, Switches } from '../types/config';
+import { Island } from './Island';
 import { LastUpdated } from './LastUpdated';
 import { LiveBlockContainer } from './LiveBlockContainer';
-import { ShareIcons } from './ShareIcons';
+import { ShareButton } from './ShareButton.importable';
 
 type Props = {
 	format: ArticleFormat;
@@ -93,15 +94,16 @@ export const LiveBlock = ({
 					justify-content: space-between;
 				`}
 			>
-				<ShareIcons
-					pageId={pageId}
-					blockId={block.id}
-					webTitle={webTitle}
-					displayIcons={['facebook', 'twitter']}
-					format={format}
-					size="small"
-					context="LiveBlock"
-				/>
+				<Island priority="feature" defer={{ until: 'visible' }}>
+					<ShareButton
+						size="xsmall"
+						pageId={pageId}
+						blockId={block.id}
+						webTitle={webTitle}
+						format={format}
+						context="LiveBlock"
+					/>
+				</Island>
 				{!isUndefined(lastUpdated) && (
 					<LastUpdated
 						lastUpdated={lastUpdated}