Add BrandingLabel to HostedArticleLayout

Author: domlander

dotcom-rendering/src/components/BrandingLabel.tsx

@@ -22,6 +22,7 @@ type Props = {
 	ophanComponentName?: string;
 	isLabs?: boolean;
 	isAdvertisingPartner?: boolean;
+	isHosted?: boolean;
 	dataTestId?: string;
 };
 
@@ -100,6 +101,16 @@ const imageAdvertisingPartnerStyles = css`
 	}
 `;
 
+const hostedLogoImageStyles = css`
+	width: 80px;
+	height: auto;
+
+	${from.desktop} {
+		width: 132px;
+		height: auto;
+	}
+`;
+
 /**
  * Component used to display branding labels with sponsor logos for
  * various types of branded content (paid-content, sponsored, foundation, etc.)
@@ -116,6 +127,7 @@ export const BrandingLabel = ({
 	ophanComponentName,
 	isLabs = false,
 	isAdvertisingPartner = false,
+	isHosted = false,
 	dataTestId = 'branding-logo',
 }: Props) => {
 	const { darkModeAvailable } = useConfig();
@@ -183,6 +195,23 @@ export const BrandingLabel = ({
 			</div>
 		);
 	}
+
+	if (isHosted) {
+		return (
+			<a href={logo.link}>
+				<picture>
+					<img
+						css={hostedLogoImageStyles}
+						src={logo.src}
+						alt={branding.sponsorName}
+						width={logo.dimensions.width}
+						height={logo.dimensions.height}
+					/>
+				</picture>
+			</a>
+		);
+	}
+
 	return (
 		<a
 			href={logo.link}

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

@@ -1,13 +1,30 @@
 import { palette as sourcePalette } from '@guardian/source/foundations';
 import { HostedContentHeader } from './HostedContentHeader';
+import type { Props as HostedContentHeaderProps } from './HostedContentHeader';
 import { Section } from './Section';
 
 export default {
 	component: HostedContentHeader,
 	title: 'Components/HostedContentHeader',
+	args: {
+		branding: {
+			brandingType: { name: 'paid-content' },
+			sponsorName: 'We Are Still In',
+			logo: {
+				src: 'https://static.theguardian.com/commercial/sponsor/16/Aug/2018/d5e82ba3-297d-473d-8362-c04f519e5fe1-WASI-logo-grey.png',
+				dimensions: {
+					width: 1250,
+					height: 575,
+				},
+				link: 'https://www.wearestillin.com/',
+			},
+			aboutThisLink:
+				'https://www.theguardian.com/info/2016/jan/25/content-funding',
+			hostedCampaignColour: '#d90c1f',
+		},
+	},
 };
-
-export const Default = () => {
+export const Default = (args: HostedContentHeaderProps) => {
 	return (
 		<Section
 			fullWidth={true}
@@ -19,8 +36,9 @@ export const Default = () => {
 			element="aside"
 		>
 			<HostedContentHeader
-				accentColor={sourcePalette.brand[400]}
-				branding="Branding"
+				{...args}
+				branding={args.branding}
+				accentColor={args.branding.hostedCampaignColour}
 			/>
 		</Section>
 	);

dotcom-rendering/src/components/HostedContentHeader.tsx

@@ -11,10 +11,12 @@ import {
 } from '@guardian/source/foundations';
 import { SvgGuardianLogo } from '@guardian/source/react-components';
 import { nestedOphanComponents } from '../lib/ophan-helpers';
+import type { Branding } from '../types/branding';
+import { BrandingLabel } from './BrandingLabel';
 
-type Props = {
+export type Props = {
 	accentColor: string;
-	branding: string;
+	branding: Branding;
 };
 
 const HOSTED_CONTENT_HEIGHT_MOBILE = 48;
@@ -95,15 +97,14 @@ const badgeWrapperStyles = css`
 	position: absolute;
 	display: block;
 	width: 80px;
-	height: 45px; /* This is temporary, replace with actual badge height */
+	height: auto;
 	top: 100%;
-	background-color: ${sourcePalette.neutral[60]};
 	text-align: center;
 	z-index: 10;
 
 	${from.desktop} {
 		width: 132px;
-		height: 75px;
+		height: auto;
 	}
 `;
 
@@ -125,10 +126,11 @@ const Right = ({ children }: { children: React.ReactNode }) => (
 	<div
 		css={css`
 			display: flex;
-			padding: ${space[1]}px 10px;
+			padding: ${space[1]}px 0;
+			margin-right: 10px;
 
-			@media (min-width: 330px) {
-				margin-right: 0.625rem;
+			${from.mobileLandscape} {
+				margin-right: ${space[5]}px;
 			}
 		`}
 	>
@@ -148,14 +150,16 @@ const HeaderSection = ({
 			height: 100%;
 			display: flex;
 			align-items: center;
-			${isFirst ? 'margin-left: 1.25rem;' : 'margin-left: 0.625rem;'}
+			margin-left: 10px;
 
-			${from.desktop} {
-				${isFirst ? null : 'margin-left: 1.25rem;'}
+			${from.mobileLandscape} {
+				${isFirst
+					? `margin-left: ${space[5]}px;`
+					: 'margin-left: 10px;'}
 			}
 
 			${from.leftCol} {
-				${isFirst ? null : 'margin-left: 2rem;'}
+				${isFirst ? null : `margin-left: ${space[8]}px;`}
 			}
 		`}
 	>
@@ -180,8 +184,9 @@ const TitleAndBadge = ({ accentColor, branding }: Props) => (
 			<p css={titleStyles}>Advertiser content</p>
 		</div>
 
-		{/* The following div is a placeholder for the badge */}
-		<div css={badgeWrapperStyles}>{branding}</div>
+		<div css={badgeWrapperStyles}>
+			<BrandingLabel branding={branding} isHosted={true} />
+		</div>
 	</>
 );
 

dotcom-rendering/src/components/SubtitleOverlay.tsx

@@ -9,18 +9,18 @@ import { palette } from '../palette';
 import type { ControlsPosition, SubtitleSize } from './SelfHostedVideoPlayer';
 
 const subtitleOverlayStyles = (position: ControlsPosition) => css`
-	max-width: 71%;
+	width: 100%;
+	display: flex;
+	justify-content: center;
 	pointer-events: none;
 	position: absolute;
-	left: 50%;
-	transform: translateX(-50%);
 
 	${position === 'top' && `top: ${space[4]}px;`};
 	${position === 'bottom' && `bottom: ${space[4]}px;`};
 `;
 
 const cueBoxStyles = css`
-	width: 100%;
+	max-width: 71%;
 	margin: 0 auto;
 	text-align: center;
 	pointer-events: none;

dotcom-rendering/src/layouts/HostedArticleLayout.tsx

@@ -62,6 +62,9 @@ export const HostedArticleLayout = (props: WebProps | AppProps) => {
 	const mainMedia = frontendData.mainMediaElements[0];
 	const mainMediaCaptionText = decideMainMediaCaption(mainMedia);
 
+	const branding =
+		frontendData.commercialProperties[frontendData.editionId].branding;
+
 	return (
 		<>
 			{props.renderingTarget === 'Web' ? (
@@ -76,8 +79,8 @@ export const HostedArticleLayout = (props: WebProps | AppProps) => {
 						element="aside"
 					>
 						<HostedContentHeader
-							accentColor={sourcePalette.brand[400]}
-							branding="logo"
+							accentColor={branding.hostedCampaignColour}
+							branding={branding}
 						/>
 					</Section>
 				</Stuck>