Merge pull request #14549 from guardian/feat/sponsored-content-label

Add Sponsored Content Label

Author: on-ye

dotcom-rendering/src/components/SponsoredContentLabel.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta } from '@storybook/react';
+import { SponsoredContentLabel } from './SponsoredContentLabel';
+
+const meta: Meta<typeof SponsoredContentLabel> = {
+	component: SponsoredContentLabel,
+	title: 'Components/SponsoredContentLabel',
+	parameters: {
+		layout: 'centered',
+		chromatic: {
+			disable: true,
+		},
+	},
+	args: {
+		href: '#',
+		imageSrc:
+			'https://static.theguardian.com/commercial/sponsor/22/Aug/2025/52dc0276-c2d9-405c-a686-2577c12914d4-ecover_pos_280.png',
+		ophanComponentName: 'example',
+	},
+};
+
+export default meta;
+
+export const HorizontalOrientation = {
+	args: {
+		orientation: 'horizontal',
+	},
+};
+
+export const VerticalOrientation = {
+	args: {
+		orientation: 'vertical',
+	},
+};
+
+export const VerticalRightAlignment = {
+	args: {
+		alignment: 'end',
+		orientation: 'vertical',
+	},
+};

dotcom-rendering/src/components/SponsoredContentLabel.tsx

@@ -0,0 +1,65 @@
+import { css } from '@emotion/react';
+import { space, textSansBold12 } from '@guardian/source/foundations';
+import { palette } from '../palette';
+import type { DCRBadgeType } from '../types/badge';
+import { Badge } from './Badge';
+
+type SponsoredContentLabelProps = DCRBadgeType & {
+	alignment?: 'start' | 'end';
+	ophanComponentName: string;
+	orientation?: 'horizontal' | 'vertical';
+};
+
+const paidForByStyles = css`
+	${textSansBold12};
+	color: ${palette('--labs-header-label-text')};
+	margin-top: ${space[3]}px;
+	margin-bottom: ${space[1]}px;
+`;
+
+const wrapperStyles = css`
+	display: flex;
+	gap: ${space[2]}px;
+`;
+
+const horizontalStyles = css`
+	align-items: center;
+`;
+
+const verticalStyles = {
+	start: css`
+		flex-direction: column;
+	`,
+	end: css`
+		align-items: end;
+		flex-direction: column;
+	`,
+};
+
+export const SponsoredContentLabel = ({
+	alignment = 'start',
+	imageSrc,
+	href,
+	ophanComponentName,
+	orientation = 'horizontal',
+}: SponsoredContentLabelProps) => {
+	return (
+		<div
+			css={[
+				wrapperStyles,
+				orientation === 'vertical'
+					? verticalStyles[alignment]
+					: horizontalStyles,
+			]}
+		>
+			<div css={paidForByStyles}>Paid for by</div>
+			<Badge
+				href={href}
+				imageSrc={imageSrc}
+				isInLabsSection={true}
+				ophanComponentLink={`labs-logo | ${ophanComponentName}`}
+				ophanComponentName={`labs-logo-${ophanComponentName}`}
+			/>
+		</div>
+	);
+};