Refactor to avoid affecting existing card layouts

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

@@ -48,51 +48,74 @@ const minWidth = (minWidthInPixels?: number) => {
 	`;
 };
 
+/**
+ * Cards with an avatar are a special case as these are rendered horizontally
+ * on mobile and vertically on desktop by default, with the avatar on the right
+ * or bottom of the card respectively.
+ *
+ * A boosted card in a `dynamic/slow` container is an exception to this as it is
+ * rendered horizontally on desktop by overriding `imagePositionOnDesktop`
+ *
+ * `scrollable/medium` is another exception as the medium cards require a
+ * vertical layout at all breakpoints so we explicitly check that the image
+ * 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 = (
-	imagePosition: ImagePositionType,
+	imagePositionOnDesktop: ImagePositionType,
+	imagePositionOnMobile: ImagePositionType,
 	hasAvatar?: boolean,
 ) => {
-	/**
-	 * Cards with an avatar are a special case as these are rendered
-	 * horizontally on mobile and vertically on tablet with the avatar always on
-	 * the right or bottom. `imagePosition` determines whether the layout is
-	 * horizontal or vertical, but not the alignment of the avatar.
-	 *
-	 * `scrollable/medium` is an exception as the medium cards have a vertical
-	 * layout at all breakpoints so `imagePositionOnMobile` is explicitly set to
-	 * `bottom` rather than the default of `left`.
-	 */
+	const imagePosition = {
+		top: 'column',
+		bottom: 'column-reverse',
+		left: 'row',
+		right: 'row-reverse',
+		none: 'column',
+	};
+
 	if (hasAvatar) {
-		return imagePosition === 'left' || imagePosition === 'right'
-			? 'row-reverse'
-			: 'column-reverse';
-	}
+		if (
+			imagePositionOnMobile === 'bottom' &&
+			imagePositionOnDesktop === 'bottom'
+		) {
+			return [imagePosition['bottom'], imagePosition['bottom']];
+		}
 
-	switch (imagePosition) {
-		case 'top':
-			return 'column';
-		case 'bottom':
-			return 'column-reverse';
-		case 'left':
-			return 'row';
-		case 'right':
-			return 'row-reverse';
-		// If there's no image (so no imagePosition) default to top down
-		case 'none':
-			return 'column';
+		if (
+			imagePositionOnDesktop === 'left' ||
+			imagePositionOnDesktop === 'right'
+		) {
+			return [imagePosition['right'], imagePosition['right']];
+		}
+
+		return [imagePosition['bottom'], imagePosition['right']];
 	}
+
+	return [
+		imagePosition[imagePositionOnDesktop],
+		imagePosition[imagePositionOnMobile],
+	];
 };
 
 const decidePosition = (
 	imagePositionOnDesktop: ImagePositionType,
 	imagePositionOnMobile: ImagePositionType,
 	hasAvatar?: boolean,
-) => css`
-	flex-direction: ${decideDirection(imagePositionOnMobile, hasAvatar)};
-	${from.tablet} {
-		flex-direction: ${decideDirection(imagePositionOnDesktop, hasAvatar)};
-	}
-`;
+) => {
+	const [directionOnDesktop, directionOnMobile] = decideDirection(
+		imagePositionOnDesktop,
+		imagePositionOnMobile,
+		hasAvatar,
+	);
+
+	return css`
+		flex-direction: ${directionOnMobile};
+		${from.tablet} {
+			flex-direction: ${directionOnDesktop};
+		}
+	`;
+};
 
 /** Detemines the gap size between components in card layout */
 const decideGap = (gapSize: GapSize) => {

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

@@ -36,7 +36,7 @@ const meta = {
 			<ScrollableSmall {...args} />
 		</FrontSection>
 	),
-} as Meta<typeof ScrollableSmall>;
+} satisfies Meta<typeof ScrollableSmall>;
 
 export default meta;