Migrate standard epic to DCR

dotcom-rendering/package.json

@@ -67,7 +67,7 @@
 		"@guardian/source-foundations": "13.2.0",
 		"@guardian/source-react-components": "16.0.1",
 		"@guardian/source-react-components-development-kitchen": "15.0.0",
-		"@guardian/support-dotcom-components": "1.1.0",
+		"@guardian/support-dotcom-components": "1.1.1",
 		"@guardian/tsconfig": "0.2.0",
 		"@playwright/test": "1.40.1",
 		"@sentry/browser": "7.75.1",

dotcom-rendering/src/components/SlotBodyEnd/ReaderRevenueEpic.tsx

@@ -173,9 +173,10 @@ export const ReaderRevenueEpic = ({
 			'contributions-epic-module',
 		);
 
-		window
-			.guardianPolyfilledImport(module.url)
-			.then((epicModule: { ContributionsEpic: EpicType }) => {
+		import(
+			/* webpackChunkName: "contributions-epic" */ `../marketing/epics/ContributionsEpic`
+		)
+			.then((epicModule) => {
 				endPerformanceMeasure();
 				setEpic(() => epicModule.ContributionsEpic); // useState requires functions to be wrapped
 			})

dotcom-rendering/src/components/marketing/epics/BylineWithHeadshot.tsx

@@ -0,0 +1,97 @@
+/**
+ * @file
+ * This file was migrated from:
+ * https://github.com/guardian/support-dotcom-components/blob/a482b35a25ca59f66501c4de02de817046206298/packages/modules/src/modules/epics/BylineWithHeadshot.tsx
+ */
+import { css } from '@emotion/react';
+import { body, palette } from '@guardian/source-foundations';
+import type { BylineWithImage } from '@guardian/support-dotcom-components/dist/shared/src/types';
+import type { ReactComponent } from '../lib/ReactComponent';
+
+interface BylineWithHeadshotProps {
+	bylineWithImage: BylineWithImage;
+}
+
+const bylineWithImageContainer = css`
+	margin: 0;
+	padding: 0;
+	position: relative;
+	width: 100%;
+	height: 130px;
+`;
+
+const bylineCopyContainer = css`
+	width: 70%;
+	position: absolute;
+	bottom: 20px;
+	left: 0;
+`;
+
+const bylineImageContainer = css`
+	max-width: 30%;
+	height: 100%;
+	position: absolute;
+	top: 0;
+	right: 0;
+`;
+
+const bylineName = css`
+	${body.medium({ fontWeight: 'bold' })};
+	margin: 0;
+`;
+
+const bylineDescription = css`
+	${body.medium({ fontStyle: 'italic' })};
+	margin: 0;
+`;
+
+const bylineHeadshotImage = css`
+	height: 100%;
+	width: 100%;
+	object-fit: cover;
+`;
+
+const bylineBottomDecoration = css`
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	background-repeat: repeat-x;
+	background-position: top;
+	background-size: 1px calc(0.25rem * 4 + 1px);
+	height: calc(0.25rem * 4 + 1px);
+	background-image: repeating-linear-gradient(
+		to bottom,
+		${palette.neutral[86]},
+		${palette.neutral[86]} 1px,
+		transparent 1px,
+		transparent 0.25rem
+	);
+`;
+
+export const BylineWithHeadshot: ReactComponent<BylineWithHeadshotProps> = ({
+	bylineWithImage,
+}) => {
+	const { name, description, headshot } = bylineWithImage;
+
+	return (
+		<div css={bylineWithImageContainer}>
+			<div css={bylineCopyContainer}>
+				<p css={bylineName}>{name}</p>
+				<p css={bylineDescription}>{description}</p>
+			</div>
+			{headshot && (
+				<>
+					<div css={bylineBottomDecoration}></div>
+					<div css={bylineImageContainer}>
+						<img
+							src={headshot.mainUrl}
+							alt={headshot.altText}
+							css={bylineHeadshotImage}
+						/>
+					</div>
+				</>
+			)}
+		</div>
+	);
+};