Merge branch 'main' into use-user-benefits-abtest

guardian · Jan 20, 2025 · 9bf3269 · 9bf3269
2 parents 9709c95 + c64ed68
commit 9bf3269
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 44 deletions.
diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
@@ -1004,7 +1004,7 @@ export const Card = ({
 										kickerImage={
 											showKickerImage &&
 											media?.type === 'podcast'
-												? media?.podcastImage
+												? media.podcastImage
 												: undefined
 										}
 									/>

diff --git a/dotcom-rendering/src/components/Card/components/CardFooter.tsx b/dotcom-rendering/src/components/Card/components/CardFooter.tsx
@@ -1,24 +1,21 @@
 import { css } from '@emotion/react';
 import { palette, space, textSansBold12 } from '@guardian/source/foundations';
+import { SvgCamera } from '@guardian/source/react-components';
+import { Pill } from '../../../components/Pill';
 import { type ArticleFormat, ArticleSpecial } from '../../../lib/articleFormat';
-
-type Props = {
-	format: ArticleFormat;
-	age?: JSX.Element;
-	commentCount?: JSX.Element;
-	cardBranding?: JSX.Element;
-	showLivePlayable?: boolean;
-};
+import type { MainMedia } from '../../../types/mainMedia';
 
 const contentStyles = css`
 	margin-top: auto;
 	padding-top: ${space[1]}px;
 	display: flex;
 	justify-content: 'flex-start';
+	width: fit-content;
 	align-items: center;
 	${textSansBold12}
 	> {
-		/* The dividing line is applied only to the second child. This ensures that no dividing line is added when there is only one child in the container. */
+		/* The dividing line is applied only to the second child. This ensures that no
+		   dividing line is added when there is only one child in the container. */
 		:nth-child(2) {
 			::before {
 				content: '';
@@ -41,19 +38,44 @@ const labStyles = css`
 	margin-top: ${space[1]}px;
 `;
 
+type Props = {
+	format: ArticleFormat;
+	showLivePlayable: boolean;
+	age?: JSX.Element;
+	commentCount?: JSX.Element;
+	cardBranding?: JSX.Element;
+	mediaType?: MainMedia['type'];
+	galleryCount?: number;
+};
+
 export const CardFooter = ({
 	format,
 	age,
 	commentCount,
 	cardBranding,
-	showLivePlayable = false,
+	showLivePlayable,
+	mediaType,
+	galleryCount,
 }: Props) => {
 	if (showLivePlayable) return null;
 
 	if (format.theme === ArticleSpecial.Labs && cardBranding) {
 		return <footer css={labStyles}>{cardBranding}</footer>;
 	}
 
+	if (mediaType === 'Gallery') {
+		return (
+			<footer css={contentStyles}>
+				<Pill
+					content={galleryCount?.toString() ?? ''}
+					prefix="Gallery"
+					icon={<SvgCamera />}
+					iconSide="right"
+				/>
+			</footer>
+		);
+	}
+
 	return (
 		<footer css={contentStyles}>
 			{age}

diff --git a/dotcom-rendering/src/components/FeatureCard.stories.tsx b/dotcom-rendering/src/components/FeatureCard.stories.tsx
@@ -118,6 +118,19 @@ export const Opinion: Story = {
 	},
 };
 
+export const Gallery: Story = {
+	args: {
+		image: {
+			src: 'https://media.guim.co.uk/7b500cfe9afe4e211ad771c86e66297c9c22993b/0_61_4801_2880/master/4801.jpg',
+			altText: 'alt text',
+		},
+		mainMedia: {
+			type: 'Gallery',
+		},
+		galleryCount: 12,
+	},
+};
+
 export const WithTrailText: Story = {
 	args: {
 		kickerText: undefined,

diff --git a/dotcom-rendering/src/components/FeatureCard.tsx b/dotcom-rendering/src/components/FeatureCard.tsx
@@ -73,6 +73,7 @@ export type Props = {
 	/** Alows the consumer to set an aspect ratio on the image of 5:3 or 5:4 */
 	aspectRatio?: AspectRatio;
 	showQuotes?: boolean;
+	galleryCount?: number;
 };
 
 const baseCardStyles = css`
@@ -231,6 +232,7 @@ const CommentCount = ({
 }) => {
 	if (!discussionId) return null;
 	if (!discussionApiUrl) return null;
+
 	return (
 		<Link
 			{...{
@@ -293,13 +295,11 @@ export const FeatureCard = ({
 	aspectRatio,
 	starRating,
 	showQuotes,
+	galleryCount,
 }: Props) => {
 	const hasSublinks = supportingContent && supportingContent.length > 0;
 
-	// If the card isn't playable, we need to show a play icon.
-	// Otherwise, this is handled by the YoutubeAtom
-	/**TODO: Determin if these cards should be playable */
-	const showPlayIcon = mainMedia?.type === 'Video';
+	const isVideoMainMedia = mainMedia?.type === 'Video';
 
 	const media = getMedia({
 		imageUrl: image?.src,
@@ -318,7 +318,6 @@ export const FeatureCard = ({
 						dataLinkName={dataLinkName}
 						isExternalLink={isExternalLink}
 					/>
-
 					<div
 						css={[
 							css`
@@ -344,31 +343,26 @@ export const FeatureCard = ({
 								`}
 							>
 								{media.type === 'video' && (
-									<>
-										<div>
-											<CardPicture
-												mainImage={
-													media.imageUrl
-														? media.imageUrl
-														: media.mainMedia.images.reduce(
-																(
-																	prev,
-																	current,
-																) =>
-																	prev.width >
-																	current.width
-																		? prev
-																		: current,
-														  ).url
-												}
-												imageSize={imageSize}
-												alt={headlineText}
-												loading={imageLoading}
-												roundedCorners={false}
-												aspectRatio={aspectRatio}
-											/>
-										</div>
-									</>
+									<div>
+										<CardPicture
+											mainImage={
+												media.imageUrl
+													? media.imageUrl
+													: media.mainMedia.images.reduce(
+															(prev, current) =>
+																prev.width >
+																current.width
+																	? prev
+																	: current,
+													  ).url
+											}
+											imageSize={imageSize}
+											alt={headlineText}
+											loading={imageLoading}
+											roundedCorners={false}
+											aspectRatio={aspectRatio}
+										/>
+									</div>
 								)}
 
 								{media.type === 'picture' && (
@@ -381,7 +375,7 @@ export const FeatureCard = ({
 											roundedCorners={false}
 											aspectRatio={aspectRatio}
 										/>
-										{showPlayIcon &&
+										{isVideoMainMedia &&
 											mainMedia.duration > 0 && (
 												<MediaDuration
 													mediaDuration={
@@ -460,7 +454,6 @@ export const FeatureCard = ({
 											/>
 										</div>
 									)}
-
 									<CardFooter
 										format={format}
 										age={
@@ -499,12 +492,13 @@ export const FeatureCard = ({
 										// 	) : undefined
 										// }
 										showLivePlayable={false}
+										mediaType={mainMedia?.type}
+										galleryCount={galleryCount}
 									/>
 								</div>
 							</div>
 						)}
 					</div>
-
 					{hasSublinks && (
 						<SupportingContent
 							supportingContent={supportingContent}

diff --git a/dotcom-rendering/src/components/ScrollableFeature.importable.tsx b/dotcom-rendering/src/components/ScrollableFeature.importable.tsx
@@ -71,6 +71,7 @@ export const ScrollableFeature = ({
 								tablet: 'xxsmall',
 								mobile: 'xsmall',
 							}}
+							galleryCount={card.galleryCount}
 						/>
 					</ScrollableCarousel.Item>
 				);

diff --git a/dotcom-rendering/src/components/StaticFeatureTwo.tsx b/dotcom-rendering/src/components/StaticFeatureTwo.tsx
@@ -66,6 +66,7 @@ export const StaticFeatureTwo = ({
 							imageSize="feature-large"
 							headlineSizes={{ desktop: 'small' }}
 							supportingContent={card.supportingContent}
+							galleryCount={card.galleryCount}
 						/>
 					</LI>
 				);