Add prefix to pill in new cards

Author: domlander

dotcom-rendering/src/components/Card/Card.tsx

@@ -506,15 +506,14 @@ export const Card = ({
 				<>
 					{mainMedia.duration === 0 ? (
 						<Pill
-							content={'Live'}
+							content="Live"
 							icon={<div css={liveBulletStyles} />}
-							iconSize="small"
 						/>
 					) : (
 						<Pill
 							content={secondsToDuration(mainMedia.duration)}
-							icon={<SvgMediaControlsPlay />}
-							iconSize="small"
+							icon={<SvgMediaControlsPlay width={18} />}
+							prefix="Video"
 						/>
 					)}
 				</>
@@ -523,16 +522,15 @@ export const Card = ({
 			{mainMedia?.type === 'Audio' && (
 				<Pill
 					content={mainMedia.duration}
-					icon={<SvgMediaControlsPlay />}
-					iconSize="small"
+					icon={<SvgMediaControlsPlay width={18} />}
+					prefix="Podcast"
 				/>
 			)}
 			{mainMedia?.type === 'Gallery' && (
 				<Pill
-					prefix="Gallery"
 					content={mainMedia.count}
 					icon={<SvgCamera />}
-					iconSide="right"
+					prefix="Gallery"
 				/>
 			)}
 			{isNewsletter && <Pill content="Newsletter" />}
@@ -1021,8 +1019,11 @@ export const Card = ({
 												content={secondsToDuration(
 													mainMedia.duration,
 												)}
-												icon={<SvgMediaControlsPlay />}
-												iconSize={'small'}
+												icon={
+													<SvgMediaControlsPlay
+														width={18}
+													/>
+												}
 											/>
 										</div>
 									)}

dotcom-rendering/src/components/Card/components/CardAge.tsx

@@ -5,17 +5,6 @@ import { palette } from '../../../palette';
 import ClockIcon from '../../../static/icons/clock.svg';
 import { DateTime } from '../../DateTime';
 
-type Props = {
-	absoluteServerTimes: boolean;
-	webPublication: {
-		date: string;
-		isWithinTwelveHours: boolean;
-	};
-	showClock?: boolean;
-	isTagPage: boolean;
-	colour?: string;
-};
-
 const ageStyles = (colour: string) => {
 	return css`
 		${textSansBold12};
@@ -32,11 +21,22 @@ const ageStyles = (colour: string) => {
 	`;
 };
 
+type Props = {
+	absoluteServerTimes: boolean;
+	webPublication: {
+		date: string;
+		isWithinTwelveHours: boolean;
+	};
+	isTagPage: boolean;
+	showClock?: boolean;
+	colour?: string;
+};
+
 export const CardAge = ({
-	webPublication,
-	showClock,
 	absoluteServerTimes,
+	webPublication,
 	isTagPage,
+	showClock,
 	colour = palette('--card-footer-text'),
 }: Props) => {
 	if (timeAgo(new Date(webPublication.date).getTime()) === false) {

dotcom-rendering/src/components/Card/components/CardFooter.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+	ArticleDesign,
+	ArticleDisplay,
+	ArticleSpecial,
+	Pillar,
+} from '../../../lib/articleFormat';
+import { CardFooter as CardFooterComponent } from './CardFooter';
+
+const meta = {
+	component: CardFooterComponent,
+	title: 'Components/Card Footer',
+} satisfies Meta<typeof CardFooterComponent>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const WithAge = {
+	args: {
+		format: {
+			display: ArticleDisplay.Standard,
+			design: ArticleDesign.Comment,
+			theme: Pillar.Opinion,
+		},
+		showLivePlayable: false,
+		age: <p>19h ago</p>,
+	},
+} satisfies Story;
+
+export const WithGallery = {
+	...WithAge,
+	args: {
+		...WithAge.args,
+		mainMedia: {
+			type: 'Gallery',
+			count: '14',
+		},
+	},
+} satisfies Story;
+
+export const WithAudio = {
+	...WithAge,
+	args: {
+		...WithAge.args,
+		mainMedia: {
+			type: 'Audio',
+			duration: '12:34',
+		},
+	},
+} satisfies Story;
+
+export const WithVideo = {
+	...WithAge,
+	args: {
+		...WithAge.args,
+		mainMedia: {
+			type: 'Video',
+			duration: 972,
+		},
+	},
+} satisfies Story;
+
+export const WithNewsletter = {
+	...WithAge,
+	args: {
+		...WithAge.args,
+		isNewsletter: true,
+	},
+} satisfies Story;
+
+export const WithBranding = {
+	...WithAge,
+	args: {
+		...WithAge.args,
+		format: {
+			...WithAge.args.format,
+			theme: ArticleSpecial.Labs,
+		},
+		cardBranding: <p>Card branding</p>,
+	},
+} satisfies Story;

dotcom-rendering/src/components/Card/components/CardFooter.tsx

@@ -75,7 +75,7 @@ export const CardFooter = ({
 	commentCount,
 	cardBranding,
 	mainMedia,
-	isNewsletter = false,
+	isNewsletter,
 	shouldReserveSpace,
 }: Props) => {
 	if (showLivePlayable) return null;
@@ -91,7 +91,8 @@ export const CardFooter = ({
 					content={
 						<time>{secondsToDuration(mainMedia.duration)}</time>
 					}
-					icon={<SvgMediaControlsPlay />}
+					prefix="Video"
+					icon={<SvgMediaControlsPlay width={18} />}
 				/>
 			</footer>
 		);
@@ -102,7 +103,8 @@ export const CardFooter = ({
 			<footer css={contentStyles}>
 				<Pill
 					content={<time>{mainMedia.duration}</time>}
-					icon={<SvgMediaControlsPlay />}
+					prefix="Podcast"
+					icon={<SvgMediaControlsPlay width={18} />}
 				/>
 			</footer>
 		);
@@ -115,7 +117,6 @@ export const CardFooter = ({
 					content={mainMedia.count}
 					prefix="Gallery"
 					icon={<SvgCamera />}
-					iconSide="right"
 				/>
 			</footer>
 		);

dotcom-rendering/src/components/Card/components/PlayIcon.tsx

@@ -54,6 +54,9 @@ const narrowStyles = css`
 	left: calc(50% - ${narrowPlayIconWidth / 2}px);
 	width: ${narrowPlayIconWidth}px;
 	height: ${narrowPlayIconWidth}px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 	background-color: ${palette('--feature-card-play-icon-background')};
 	opacity: 0.7;
 	border-radius: 50%;
@@ -92,7 +95,7 @@ export const PlayIcon = ({
 			]}
 		>
 			{iconWidth === 'narrow' ? (
-				<NarrowPlayIcon theme={theme} />
+				<NarrowPlayIcon width={40} theme={theme} />
 			) : (
 				<WidePlayIcon theme={theme} />
 			)}

dotcom-rendering/src/components/FlexibleGeneral.tsx

@@ -172,7 +172,7 @@ const decideSplashCardProperties = (
 	}
 };
 
-export const SplashCardLayout = ({
+const SplashCardLayout = ({
 	cards,
 	containerPalette,
 	showAge,
@@ -347,7 +347,7 @@ const decideCardProperties = (
 	}
 };
 
-export const BoostedCardLayout = ({
+const BoostedCardLayout = ({
 	cards,
 	containerPalette,
 	showAge,
@@ -431,7 +431,7 @@ export const BoostedCardLayout = ({
 	);
 };
 
-export const StandardCardLayout = ({
+const StandardCardLayout = ({
 	cards,
 	containerPalette,
 	showAge,

dotcom-rendering/src/components/Masthead/HighlightsCard.stories.tsx

@@ -116,7 +116,7 @@ export const WithPodcastSeriesImage: Story = {
 		},
 		mainMedia: {
 			type: 'Audio',
-			duration: '31.76',
+			duration: '31:16',
 			podcastImage: {
 				src: 'https://uploads.guim.co.uk/2024/08/01/FootballWeekly_FINAL_3000_(1).jpg',
 				altText: 'Football Weekly',

dotcom-rendering/src/components/Masthead/HighlightsCard.tsx

@@ -195,23 +195,22 @@ const MediaPill = ({ mainMedia }: { mainMedia: MainMedia }) => (
 		{mainMedia.type === 'Video' && (
 			<Pill
 				content={secondsToDuration(mainMedia.duration)}
-				icon={<SvgMediaControlsPlay />}
-				iconSize="small"
+				prefix="Video"
+				icon={<SvgMediaControlsPlay width={18} />}
 			/>
 		)}
 		{mainMedia.type === 'Audio' && (
 			<Pill
 				content={mainMedia.duration}
-				icon={<SvgMediaControlsPlay />}
-				iconSize="small"
+				prefix="Podcast"
+				icon={<SvgMediaControlsPlay width={18} />}
 			/>
 		)}
 		{mainMedia.type === 'Gallery' && (
 			<Pill
-				prefix="Gallery"
 				content={mainMedia.count}
+				prefix="Gallery"
 				icon={<SvgCamera />}
-				iconSide="right"
 			/>
 		)}
 	</div>

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

@@ -20,7 +20,7 @@ export const Default = {} satisfies Story;
 export const WithVideoIcon = {
 	args: {
 		content: <time>3:35</time>,
-		icon: <SvgMediaControlsPlay />,
+		icon: <SvgMediaControlsPlay width={18} />,
 	},
 } satisfies Story;
 
@@ -32,9 +32,17 @@ export const WithGalleryIcon = {
 	},
 } satisfies Story;
 
+export const WithVideoIconAndPrefix = {
+	args: {
+		...WithVideoIcon.args,
+		prefix: 'Video',
+	},
+} satisfies Story;
+
 export const WithGalleryIconAndPrefix = {
 	args: {
 		...WithGalleryIcon.args,
 		prefix: 'Gallery',
+		iconSide: 'left',
 	},
 } satisfies Story;