Merge pull request #6066 from guardian/mxdvl/card-refactor

refactor(Card): extract image
guardian · Oct 3, 2022 · 07066a8 · 07066a8
2 parents bf348c7 + 6f7655d
commit 07066a8
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 41 deletions.
diff --git a/dotcom-rendering/src/web/components/Card/Card.tsx b/dotcom-rendering/src/web/components/Card/Card.tsx
@@ -166,6 +166,18 @@ const CommentFooter = ({
 	);
 };
 
+const getImage = ({
+	imageUrl,
+	avatarUrl,
+}: {
+	imageUrl?: string;
+	avatarUrl?: string;
+}): { type: CardImageType; src: string } | undefined => {
+	if (avatarUrl) return { type: 'avatar', src: avatarUrl };
+	if (imageUrl) return { type: 'mainMedia', src: imageUrl };
+	return undefined;
+};
+
 export const Card = ({
 	linkTo,
 	format,
@@ -280,13 +292,10 @@ export const Card = ({
 		return <Snap snapData={snapData} />;
 	}
 
-	// Decide what type of image to show, main media, avatar or none
-	let imageType: CardImageType | undefined;
-	if (imageUrl && avatarUrl) {
-		imageType = 'avatar';
-	} else if (imageUrl) {
-		imageType = 'mainMedia';
-	}
+	const image = getImage({
+		imageUrl,
+		avatarUrl,
+	});
 
 	return (
 		<CardWrapper
@@ -301,41 +310,37 @@ export const Card = ({
 				dataLinkName={dataLinkName}
 			/>
 			<CardLayout
-				imagePosition={imageUrl !== undefined ? imagePosition : 'top'}
-				imagePositionOnMobile={
-					imageUrl !== undefined ? imagePositionOnMobile : 'top'
-				}
+				imagePosition={imagePosition}
+				imagePositionOnMobile={imagePositionOnMobile}
 				minWidthInPixels={minWidthInPixels}
-				imageType={imageType}
+				imageType={image?.type}
 			>
-				<ImageWrapper
-					imageSize={imageSize}
-					imageType={imageType}
-					imagePosition={
-						imageUrl !== undefined ? imagePosition : 'top'
-					}
-					imagePositionOnMobile={
-						imageUrl !== undefined ? imagePositionOnMobile : 'top'
-					}
-				>
-					{imageType === 'avatar' && !!avatarUrl ? (
-						<AvatarContainer
-							imageSize={imageSize}
-							imagePosition={imagePosition}
-						>
-							<Avatar
-								imageSrc={avatarUrl}
-								imageAlt={byline ?? ''}
-								containerPalette={containerPalette}
-								format={format}
-							/>
-						</AvatarContainer>
-					) : (
-						<img src={imageUrl} alt="" role="presentation" />
-					)}
-				</ImageWrapper>
+				{image && (
+					<ImageWrapper
+						imageSize={imageSize}
+						imageType={image.type}
+						imagePosition={imagePosition}
+						imagePositionOnMobile={imagePositionOnMobile}
+					>
+						{image.type === 'avatar' ? (
+							<AvatarContainer
+								imageSize={imageSize}
+								imagePosition={imagePosition}
+							>
+								<Avatar
+									imageSrc={image.src}
+									imageAlt={byline ?? ''}
+									containerPalette={containerPalette}
+									format={format}
+								/>
+							</AvatarContainer>
+						) : (
+							<img src={image.src} alt="" role="presentation" />
+						)}
+					</ImageWrapper>
+				)}
 				<ContentWrapper
-					imageType={imageType}
+					imageType={image?.type}
 					imageSize={imageSize}
 					imagePosition={imagePosition}
 				>

diff --git a/dotcom-rendering/src/web/components/Card/components/CardLayout.tsx b/dotcom-rendering/src/web/components/Card/components/CardLayout.tsx
@@ -9,7 +9,7 @@ type Props = {
 	minWidthInPixels?: number;
 };
 
-const decideDirection = (imagePosition?: ImagePositionType) => {
+const decideDirection = (imagePosition: ImagePositionType) => {
 	switch (imagePosition) {
 		case 'top':
 			return 'column';
@@ -20,7 +20,7 @@ const decideDirection = (imagePosition?: ImagePositionType) => {
 		case 'right':
 			return 'row-reverse';
 		// If there's no image (so no imagePosition) default to top down
-		default:
+		case 'none':
 			return 'column';
 	}
 };