Merge pull request #14761 from guardian/doml/scrollable-medium-images

Use correct image size for images in Scrollable containers

Author: domlander

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

@@ -229,7 +229,7 @@ const HorizontalDivider = () => (
 
 const podcastImageStyles = (imageSize: MediaSizeType) => {
 	switch (imageSize) {
-		case 'small':
+		case 'scrollable-small':
 			return css`
 				width: 69px;
 				height: 69px;
@@ -239,7 +239,7 @@ const podcastImageStyles = (imageSize: MediaSizeType) => {
 				}
 			`;
 
-		case 'medium':
+		case 'scrollable-medium':
 			return css`
 				width: 98px;
 				height: 98px;

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

@@ -81,6 +81,7 @@ const sizingStyles = (
 
 	switch (imageSize) {
 		case 'small':
+		case 'scrollable-small':
 			return isFlexibleContainer
 				? css`
 						width: 90px;

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

@@ -25,6 +25,8 @@ export type MediaSizeType =
 	| 'xlarge'
 	| 'jumbo'
 	| 'carousel'
+	| 'scrollable-small'
+	| 'scrollable-medium'
 	| 'podcast'
 	| 'highlights-card'
 	| 'feature'

dotcom-rendering/src/components/CardPicture.tsx

@@ -50,6 +50,23 @@ const decideImageWidths = (
 				{ breakpoint: breakpoints.mobile, width: 220, aspectRatio },
 			];
 
+		case 'scrollable-small':
+			return [
+				{ breakpoint: breakpoints.mobile, width: 86, aspectRatio },
+				{ breakpoint: breakpoints.tablet, width: 123, aspectRatio },
+			];
+		case 'scrollable-medium':
+			return [
+				{ breakpoint: breakpoints.mobile, width: 200, aspectRatio },
+				{
+					breakpoint: breakpoints.mobileLandscape,
+					width: 324,
+					aspectRatio,
+				},
+				{ breakpoint: breakpoints.tablet, width: 160, aspectRatio },
+				{ breakpoint: breakpoints.desktop, width: 220, aspectRatio },
+			];
+
 		case 'small':
 			return [
 				{

dotcom-rendering/src/components/ScrollableMedium.importable.tsx

@@ -63,7 +63,7 @@ export const ScrollableMedium = ({
 							}}
 							mediaPositionOnDesktop={imagePosition}
 							mediaPositionOnMobile={imagePosition}
-							mediaSize="medium"
+							mediaSize="scrollable-medium"
 							trailText={undefined} // unsupported
 							supportingContent={undefined} // unsupported
 							aspectRatio={aspectRatio}

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

@@ -92,7 +92,7 @@ export const ScrollableSmall = ({
 							}}
 							mediaPositionOnDesktop="left"
 							mediaPositionOnMobile="left"
-							mediaSize="small"
+							mediaSize="scrollable-small"
 							trailText={undefined} // unsupported
 							supportingContent={undefined} // unsupported
 							aspectRatio={aspectRatio}