Update designs for live pills (#13133)

* Update designs for live pills * Use palette in live pill styles * fix padding * add more padding to duration pill * Use correct pallet color for the pill text * Reorder palette declarations
guardian · Jan 15, 2025 · cd97ff0 · cd97ff0
1 parent fa64a6e
commit cd97ff0
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 49 deletions.
diff --git a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.stories.tsx b/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.stories.tsx
@@ -208,7 +208,6 @@ export const WithPosterImage = {
 		},
 		posterImage:
 			'https://media.guim.co.uk/757dd4db5818984fd600b41cdaf687668497051d/0_0_1920_1080/1920.jpg',
-		videoCategory: 'documentary',
 		title: 'How Donald Trump’s broken promises failed Ohio | Anywhere but Washington',
 	},
 	decorators: [OverlayAutoplayExplainer, Container],
@@ -226,7 +225,6 @@ export const WithOverlayAndPosterImage = {
 		posterImage: WithPosterImage.args.posterImage,
 		overrideImage:
 			'https://i.guim.co.uk/img/media/4b3808707ec341629932a9d443ff5a812cf4df14/0_309_1800_1081/master/1800.jpg',
-		videoCategory: 'live',
 		title: 'How Donald Trump’s broken promises failed Ohio',
 		kicker: 'Breaking News',
 		showTextOverlay: true,
@@ -425,7 +423,6 @@ export const WithPosterImageWithAds = {
 	args: {
 		...WithPosterImage.args,
 		...adTargetingAndConsentGiven,
-		videoCategory: undefined,
 	},
 	decorators: [Container],
 	parameters: {
@@ -437,7 +434,6 @@ export const WithOverlayAndPosterImageWithAds = {
 	args: {
 		...WithOverlayAndPosterImage.args,
 		...adTargetingAndConsentGiven,
-		videoCategory: undefined,
 		kicker: undefined,
 		showTextOverlay: undefined,
 	},
@@ -503,3 +499,23 @@ export const MultipleStickyVideosWithAds = {
 		chromatic: { disableSnapshot: true },
 	},
 } satisfies Story;
+
+export const LiveStream = {
+	args: {
+		...baseConfiguration,
+		videoId: '3jpXAMwRSu4',
+		alt: 'Microscopic image of COVID',
+		format: {
+			theme: Pillar.News,
+			design: ArticleDesign.Standard,
+			display: ArticleDisplay.Standard,
+		},
+		overrideImage:
+			'https://i.guim.co.uk/img/media/4b3808707ec341629932a9d443ff5a812cf4df14/0_309_1800_1081/master/1800.jpg?width=1200&height=630&quality=85&auto=format&fit=crop&overlay-align=bottom%2Cleft&overlay-width=100p&overlay-base64=L2ltZy9zdGF0aWMvb3ZlcmxheXMvdGctZGVmYXVsdC5wbmc&enable=upscale&s=aff4b8255693eb449f13070df88e9cac',
+		height: undefined,
+		width: undefined,
+		title: 'How to stop the spread of coronavirus',
+		duration: 0,
+	},
+	decorators: [OverlayAutoplayExplainer, Container],
+} satisfies Story;
diff --git a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.tsx b/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.tsx
@@ -10,7 +10,6 @@ import type {
 	ImageSizeType,
 } from '../Card/components/ImageWrapper';
 import { MaintainAspectRatio } from '../MaintainAspectRatio';
-import type { VideoCategory } from './YoutubeAtomOverlay';
 import { YoutubeAtomOverlay } from './YoutubeAtomOverlay';
 import { YoutubeAtomPlaceholder } from './YoutubeAtomPlaceholder';
 import { YoutubeAtomPlayer } from './YoutubeAtomPlayer';
@@ -46,7 +45,6 @@ export type Props = {
 	shouldStick?: boolean;
 	isMainMedia?: boolean;
 	abTestParticipations: Participations;
-	videoCategory?: VideoCategory;
 	kicker?: string;
 	shouldPauseOutOfView?: boolean;
 	showTextOverlay?: boolean;
@@ -74,7 +72,6 @@ export const YoutubeAtom = ({
 	shouldStick,
 	isMainMedia,
 	abTestParticipations,
-	videoCategory,
 	kicker,
 	format,
 	shouldPauseOutOfView = false,
@@ -248,7 +245,6 @@ export const YoutubeAtom = ({
 							duration={duration}
 							title={title}
 							onClick={() => setOverlayClicked(true)}
-							videoCategory={videoCategory}
 							kicker={kicker}
 							format={format}
 							showTextOverlay={showTextOverlay}

diff --git a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomOverlay.tsx b/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomOverlay.tsx
@@ -21,8 +21,6 @@ import { Kicker } from '../Kicker';
 import { secondsToDuration } from '../MediaDuration';
 import { YoutubeAtomPicture } from './YoutubeAtomPicture';
 
-export type VideoCategory = 'live' | 'documentary' | 'explainer';
-
 type Props = {
 	uniqueId: string;
 	overrideImage?: string;
@@ -33,7 +31,6 @@ type Props = {
 	duration?: number; // in seconds
 	title?: string;
 	onClick: () => void;
-	videoCategory?: VideoCategory;
 	kicker?: string;
 	format: ArticleFormat;
 	showTextOverlay?: boolean;
@@ -76,32 +73,33 @@ const pillStyles = css`
 	top: ${space[2]}px;
 	right: ${space[2]}px;
 	${textSansBold12};
+	color: ${palette('--pill-text')};
+`;
+
+const durationPillStyles = css`
 	background-color: rgba(0, 0, 0, 0.7);
-	color: ${sourcePalette.neutral[100]};
 	border-radius: ${space[3]}px;
-	padding: 0 6px;
+	padding: ${space[1]}px ${space[3]}px;
 	display: inline-flex;
+	line-height: ${space[4]}px;
 `;
 
-const pillItemStyles = css`
-	/* Target all but the first element, and add a border */
-	:nth-of-type(n + 2) {
-		border-left: 1px solid rgba(255, 255, 255, 0.5);
-	}
-`;
-
-const pillTextStyles = css`
-	line-height: ${space[4]}px;
-	padding: ${space[1]}px 6px;
+const livePillStyles = css`
+	border-radius: ${space[10]}px;
+	padding: ${space[1]}px ${space[2]}px;
+	gap: ${space[2]}px;
+	background-color: ${palette('--pill-background')};
+	display: flex;
+	align-items: center;
 `;
 
-const liveStyles = css`
+const liveBulletStyles = css`
 	::before {
 		content: '';
 		width: 9px;
 		height: 9px;
 		border-radius: 50%;
-		background-color: ${sourcePalette.news[500]};
+		background-color: ${palette('--pill-bullet')};
 		display: inline-block;
 		position: relative;
 		margin-right: 0.1875rem;
@@ -132,8 +130,6 @@ const titleStyles = css`
 		${headlineMedium20};
 	}
 `;
-const capitalise = (str: string): string =>
-	str.charAt(0).toUpperCase() + str.slice(1);
 
 export const YoutubeAtomOverlay = ({
 	uniqueId,
@@ -145,7 +141,6 @@ export const YoutubeAtomOverlay = ({
 	duration,
 	title,
 	onClick,
-	videoCategory,
 	kicker,
 	format,
 	showTextOverlay,
@@ -155,8 +150,8 @@ export const YoutubeAtomOverlay = ({
 }: Props) => {
 	const id = `youtube-overlay-${uniqueId}`;
 	const hasDuration = !isUndefined(duration) && duration > 0;
-	const showPill = !!videoCategory || hasDuration;
-	const isLive = videoCategory === 'live';
+	//** We infer that a video is a livestream if the duration is set to 0. This is a soft contract with Editorial who manual set the duration of videos   */
+	const isLiveStream = duration === 0;
 	const image = overrideImage ?? posterImage;
 	const hidePillOnMobile =
 		imagePositionOnMobile === 'right' || imagePositionOnMobile === 'left';
@@ -179,32 +174,22 @@ export const YoutubeAtomOverlay = ({
 						aspectRatio={aspectRatio}
 					/>
 				)}
-				{showPill && (
+				{isLiveStream && (
+					<div css={[pillStyles, livePillStyles, liveBulletStyles]}>
+						Live
+					</div>
+				)}
+				{hasDuration && (
 					<div
 						css={
 							hidePillOnMobile
 								? css`
 										display: none;
 								  `
-								: pillStyles
+								: [pillStyles, durationPillStyles]
 						}
 					>
-						{!!videoCategory && (
-							<div css={pillItemStyles}>
-								<div
-									css={[pillTextStyles, isLive && liveStyles]}
-								>
-									{capitalise(videoCategory)}
-								</div>
-							</div>
-						)}
-						{!!hasDuration && (
-							<div css={pillItemStyles}>
-								<div css={pillTextStyles}>
-									{secondsToDuration(duration)}
-								</div>
-							</div>
-						)}
+						{secondsToDuration(duration)}
 					</div>
 				)}
 				<PlayIcon

diff --git a/dotcom-rendering/src/paletteDeclarations.ts b/dotcom-rendering/src/paletteDeclarations.ts
@@ -5756,7 +5756,7 @@ const pillBackground: PaletteFunction = () =>
 	transparentColour(sourcePalette.neutral[7], 0.7);
 const pillDivider: PaletteFunction = () =>
 	transparentColour(sourcePalette.neutral[100], 0.5);
-
+const pillLiveBullet: PaletteFunction = () => sourcePalette.news[500];
 // ----- Palette ----- //
 
 /**
@@ -6779,6 +6779,10 @@ const paletteColours = {
 		light: pillBackground,
 		dark: pillBackground,
 	},
+	'--pill-bullet': {
+		light: pillLiveBullet,
+		dark: pillLiveBullet,
+	},
 	'--pill-divider': {
 		light: pillDivider,
 		dark: pillDivider,