Merge pull request #13421 from guardian/doml/align-opinion-meta

Align Opinion Card Avatars

Author: domlander

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

@@ -51,7 +51,11 @@ import { AvatarContainer } from './components/AvatarContainer';
 import { CardAge } from './components/CardAge';
 import { CardBranding } from './components/CardBranding';
 import { CardFooter } from './components/CardFooter';
-import { CardLayout, type GapSizes } from './components/CardLayout';
+import {
+	CardLayout,
+	decideAvatarPosition,
+	type GapSizes,
+} from './components/CardLayout';
 import { CardLink } from './components/CardLink';
 import { CardWrapper } from './components/CardWrapper';
 import { ContentWrapper } from './components/ContentWrapper';
@@ -553,11 +557,22 @@ export const Card = ({
 		isBetaContainer,
 	});
 
-	// For opinion type cards with avatars (which aren't onwards content)
-	// we render the footer in a different location
-	const showCommentFooter =
+	/**
+	 * For opinion type cards with avatars (which aren't onwards content)
+	 * we render the footer in a different location
+	 */
+	const isOpinionCardWithAvatar =
 		isOpinion && !isOnwardContent && media?.type === 'avatar';
 
+	/**
+	 * The avatar position is not always the same as the image position.
+	 */
+	const avatarPosition = decideAvatarPosition(
+		imagePositionOnMobile,
+		imagePositionOnDesktop,
+		isBetaContainer,
+	);
+
 	/**
 -	 * Media cards have contrasting background colours. We add additional
 	 * padding to these cards to keep the text readable.
@@ -1107,7 +1122,7 @@ export const Card = ({
 								/>
 							)}
 
-							{!showCommentFooter && (
+							{!isOpinionCardWithAvatar && (
 								<>
 									{showPill ? (
 										<>
@@ -1231,7 +1246,7 @@ export const Card = ({
 				)}
 				{decideOuterSublinks()}
 
-				{showCommentFooter && (
+				{isOpinionCardWithAvatar && (
 					<CardFooter
 						format={format}
 						age={decideAge()}
@@ -1245,6 +1260,10 @@ export const Card = ({
 							) : undefined
 						}
 						showLivePlayable={showLivePlayable}
+						shouldReserveSpace={{
+							mobile: avatarPosition.mobile === 'bottom',
+							desktop: avatarPosition.desktop === 'bottom',
+						}}
 					/>
 				)}
 			</div>

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

@@ -1,5 +1,10 @@
 import { css } from '@emotion/react';
-import { palette, space, textSansBold12 } from '@guardian/source/foundations';
+import {
+	from,
+	palette,
+	space,
+	textSansBold12,
+} from '@guardian/source/foundations';
 import { SvgCamera } from '@guardian/source/react-components';
 import { Pill } from '../../../components/Pill';
 import { SvgMediaControlsPlay } from '../../../components/SvgMediaControlsPlay';
@@ -35,6 +40,14 @@ const contentStyles = css`
 	}
 `;
 
+const reserveSpaceStyles = (mobile: boolean, desktop: boolean) => css`
+	min-height: ${mobile ? '14px' : 0};
+
+	${from.tablet} {
+		min-height: ${desktop ? '14px' : 0};
+	}
+`;
+
 const labStyles = css`
 	margin-top: ${space[1]}px;
 `;
@@ -51,6 +64,7 @@ type Props = {
 	commentCount?: JSX.Element;
 	cardBranding?: JSX.Element;
 	mainMedia?: MainMedia;
+	shouldReserveSpace?: { mobile: boolean; desktop: boolean };
 };
 
 export const CardFooter = ({
@@ -60,6 +74,7 @@ export const CardFooter = ({
 	commentCount,
 	cardBranding,
 	mainMedia,
+	shouldReserveSpace,
 }: Props) => {
 	if (showLivePlayable) return null;
 
@@ -104,12 +119,17 @@ export const CardFooter = ({
 		);
 	}
 
-	if (age === undefined && commentCount === undefined) {
-		return null;
-	}
-
 	return (
-		<footer css={contentStyles}>
+		<footer
+			css={[
+				contentStyles,
+				shouldReserveSpace &&
+					reserveSpaceStyles(
+						shouldReserveSpace.mobile,
+						shouldReserveSpace.desktop,
+					),
+			]}
+		>
 			{age}
 			{commentCount}
 		</footer>

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

@@ -65,70 +65,86 @@ const minWidth = (minWidthInPixels?: number) => {
  * position for desktop and mobile are both set to `bottom` to avoid affecting
  * existing layouts where the default position values are relied upon.
  */
-const decideDirection = (
+export const decideAvatarPosition = (
 	imagePositionOnMobile: ImagePositionType,
 	imagePositionOnDesktop: ImagePositionType,
 	isBetaContainer: boolean,
-	hasAvatar?: boolean,
-) => {
-	const imagePosition = {
-		top: 'column',
-		bottom: 'column-reverse',
-		left: 'row',
-		right: 'row-reverse',
-		none: 'column',
-	};
-	if (hasAvatar) {
-		if (
-			imagePositionOnMobile === 'bottom' &&
-			imagePositionOnDesktop === 'bottom'
-		) {
-			return {
-				mobile: imagePosition['bottom'],
-				desktop: imagePosition['bottom'],
-			};
-		}
+): { mobile: ImagePositionType; desktop: ImagePositionType } => {
+	if (
+		imagePositionOnMobile === 'bottom' &&
+		imagePositionOnDesktop === 'bottom'
+	) {
+		return {
+			mobile: 'bottom',
+			desktop: 'bottom',
+		};
+	}
 
-		if (
-			imagePositionOnDesktop === 'left' ||
-			imagePositionOnDesktop === 'right'
-		) {
-			if (isBetaContainer && imagePositionOnMobile === 'bottom') {
-				return {
-					mobile: imagePosition['bottom'],
-					desktop: imagePosition['right'],
-				};
-			}
+	if (
+		imagePositionOnDesktop === 'left' ||
+		imagePositionOnDesktop === 'right'
+	) {
+		if (isBetaContainer && imagePositionOnMobile === 'bottom') {
 			return {
-				mobile: imagePosition['right'],
-				desktop: imagePosition['right'],
+				mobile: 'bottom',
+				desktop: 'right',
 			};
 		}
+		return {
+			mobile: 'right',
+			desktop: 'right',
+		};
+	}
+
+	return {
+		mobile: 'right',
+		desktop: 'bottom',
+	};
+};
+
+const imagePositionMap = {
+	top: 'column',
+	bottom: 'column-reverse',
+	left: 'row',
+	right: 'row-reverse',
+	none: 'column',
+};
 
-		// Default case for avatar: Mobile right, Desktop bottom
+const decideFlexDirection = (
+	imagePositionOnMobile: ImagePositionType,
+	imagePositionOnDesktop: ImagePositionType,
+	isBetaContainer: boolean,
+	hasAvatar?: boolean,
+) => {
+	if (!hasAvatar) {
 		return {
-			mobile: imagePosition['right'],
-			desktop: imagePosition['bottom'],
+			mobile: imagePositionMap[imagePositionOnMobile],
+			desktop: imagePositionMap[imagePositionOnDesktop],
 		};
 	}
 
-	// Handle cases without an avatar
+	const { mobile, desktop } = decideAvatarPosition(
+		imagePositionOnMobile,
+		imagePositionOnDesktop,
+		isBetaContainer,
+	);
+
 	return {
-		mobile: imagePosition[imagePositionOnMobile],
-		desktop: imagePosition[imagePositionOnDesktop],
+		mobile: imagePositionMap[mobile],
+		desktop: imagePositionMap[desktop],
 	};
 };
 
 const decidePosition = (
 	imagePositionOnMobile: ImagePositionType,
 	imagePositionOnDesktop: ImagePositionType,
-	isFairgroundContainer: boolean,
+	isBetaContainer: boolean,
 	hasAvatar?: boolean,
 ) => {
-	const { mobile, desktop } = decideDirection(
+	const { mobile, desktop } = decideFlexDirection(
 		imagePositionOnMobile,
 		imagePositionOnDesktop,
-		isFairgroundContainer,
+		isBetaContainer,
 		hasAvatar,
 	);