Move image container to image component

Author: domlander

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

@@ -104,24 +104,6 @@ const content = css`
 		padding-bottom: 10px;
 	}
 `;
-
-const imageStyles = css`
-	position: relative;
-	align-self: flex-end;
-	flex-shrink: 0;
-	height: 98px;
-	width: 98px;
-
-	${until.tablet} {
-		margin-top: ${space[2]}px;
-	}
-`;
-
-/** An avatar should align with the bottom of the card */
-const nonAvatarImageStyles = css`
-	margin-bottom: 10px;
-`;
-
 const starWrapper = css`
 	width: fit-content;
 	margin-top: ${space[1]}px;
@@ -211,15 +193,15 @@ export const HighlightsCard = ({
 					)}
 				</div>
 
-				<div css={[imageStyles, !avatarUrl && nonAvatarImageStyles]}>
+				{(!!avatarUrl || !!image) && (
 					<HighlightsCardImage
 						imageLoading={imageLoading}
 						image={image}
 						avatarUrl={avatarUrl}
 						byline={byline}
 						mainMedia={mainMedia}
 					/>
-				</div>
+				)}
 			</div>
 		</FormatBoundary>
 	);

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

@@ -1,9 +1,28 @@
+import { css } from '@emotion/react';
+import { space, until } from '@guardian/source/foundations';
 import type { DCRFrontImage } from '../../types/front';
 import type { MainMedia } from '../../types/mainMedia';
 import { Avatar } from '../Avatar';
 import type { Loading } from '../CardPicture';
 import { CardPicture } from '../CardPicture';
 
+const imageStyles = css`
+	position: relative;
+	align-self: flex-end;
+	flex-shrink: 0;
+	height: 98px;
+	width: 98px;
+
+	${until.tablet} {
+		margin-top: ${space[2]}px;
+	}
+`;
+
+/** An avatar should align with the bottom of the card */
+const nonAvatarImageStyles = css`
+	margin-bottom: 10px;
+`;
+
 type Props = {
 	imageLoading: Loading;
 	image?: DCRFrontImage;
@@ -21,19 +40,21 @@ export const HighlightsCardImage = ({
 }: Props) => {
 	if (avatarUrl) {
 		return (
-			<Avatar
-				src={avatarUrl}
-				alt={byline ?? ''}
-				shape="cutout"
-				imageSize="large"
-			/>
+			<div css={imageStyles}>
+				<Avatar
+					src={avatarUrl}
+					alt={byline ?? ''}
+					shape="cutout"
+					imageSize="large"
+				/>
+			</div>
 		);
 	}
 
 	if (image) {
 		if (mainMedia?.type === 'Audio' && mainMedia.podcastImage?.src) {
 			return (
-				<>
+				<div css={[imageStyles, nonAvatarImageStyles]}>
 					<CardPicture
 						imageSize="medium"
 						mainImage={mainMedia.podcastImage.src}
@@ -43,12 +64,12 @@ export const HighlightsCardImage = ({
 						aspectRatio="1:1"
 					/>
 					<div className="image-overlay" />
-				</>
+				</div>
 			);
 		}
 
 		return (
-			<>
+			<div css={[imageStyles, nonAvatarImageStyles]}>
 				<CardPicture
 					imageSize="highlights-card"
 					mainImage={image.src}
@@ -59,7 +80,7 @@ export const HighlightsCardImage = ({
 				/>
 				{/* This image overlay is styled when the CardLink is hovered */}
 				<div className="image-overlay circular" />
-			</>
+			</div>
 		);
 	}