Merge pull request #8080 from guardian/mxdvl/image-refactors

Refactor card image types
guardian · Jun 29, 2023 · 3a5f849 · 3a5f849
2 parents e53bee4 + eafd8a0
commit 3a5f849
Show file tree

Hide file tree

Showing 11 changed files with 47 additions and 48 deletions.
diff --git a/dotcom-rendering/index.d.ts b/dotcom-rendering/index.d.ts
@@ -307,10 +307,6 @@ interface FEKeyEventsRequest {
 	filterKeyEvents: boolean;
 }
 
-type ImagePositionType = 'left' | 'top' | 'right' | 'bottom' | 'none';
-
-type ImageSizeType = 'small' | 'medium' | 'large' | 'jumbo' | 'carousel';
-
 type CardImageType = 'mainMedia' | 'avatar' | 'crossword' | 'slideshow';
 
 type SmallHeadlineSize =

diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
@@ -36,6 +36,10 @@ import { CardLink } from './components/CardLink';
 import { CardWrapper } from './components/CardWrapper';
 import { ContentWrapper } from './components/ContentWrapper';
 import { HeadlineWrapper } from './components/HeadlineWrapper';
+import type {
+	ImagePositionType,
+	ImageSizeType,
+} from './components/ImageWrapper';
 import { ImageWrapper } from './components/ImageWrapper';
 import { TrailTextWrapper } from './components/TrailTextWrapper';
 

diff --git a/dotcom-rendering/src/components/Card/components/AvatarContainer.tsx b/dotcom-rendering/src/components/Card/components/AvatarContainer.tsx
@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import { from, space, until } from '@guardian/source-foundations';
+import type { ImagePositionType, ImageSizeType } from './ImageWrapper';
 
 type Props = {
 	children: React.ReactNode;

diff --git a/dotcom-rendering/src/components/Card/components/CardLayout.tsx b/dotcom-rendering/src/components/Card/components/CardLayout.tsx
@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import { until } from '@guardian/source-foundations';
+import type { ImagePositionType } from './ImageWrapper';
 
 type Props = {
 	children: React.ReactNode;

diff --git a/dotcom-rendering/src/components/Card/components/ContentWrapper.tsx b/dotcom-rendering/src/components/Card/components/ContentWrapper.tsx
@@ -1,6 +1,7 @@
 import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
 import { between, from } from '@guardian/source-foundations';
+import type { ImagePositionType, ImageSizeType } from './ImageWrapper';
 
 const sizingStyles = css`
 	display: flex;

diff --git a/dotcom-rendering/src/components/Card/components/HeadlineWrapper.tsx b/dotcom-rendering/src/components/Card/components/HeadlineWrapper.tsx
@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import { from } from '@guardian/source-foundations';
+import type { ImagePositionType } from './ImageWrapper';
 
 type Props = {
 	children: React.ReactNode;

diff --git a/dotcom-rendering/src/components/Card/components/ImageWrapper.tsx b/dotcom-rendering/src/components/Card/components/ImageWrapper.tsx
@@ -3,6 +3,10 @@ import { css } from '@emotion/react';
 import { between, from, until } from '@guardian/source-foundations';
 import { PlayIcon } from './PlayIcon';
 
+export type ImagePositionType = 'left' | 'top' | 'right' | 'bottom' | 'none';
+
+export type ImageSizeType = 'small' | 'medium' | 'large' | 'jumbo' | 'carousel';
+
 type Props = {
 	children: React.ReactNode;
 	imageSize: ImageSizeType;

diff --git a/dotcom-rendering/src/components/Card/components/PlayIcon.tsx b/dotcom-rendering/src/components/Card/components/PlayIcon.tsx
@@ -1,34 +1,16 @@
 import { css } from '@emotion/react';
 import { brandAlt, from } from '@guardian/source-foundations';
 import { SvgMediaControlsPlay } from '@guardian/source-react-components';
+import type { ImagePositionType, ImageSizeType } from './ImageWrapper';
 
-type PlayButtonSize = 'small' | 'medium' | 'large' | 'xlarge';
+type PlayButtonSize = keyof typeof sizes;
 
-const buttonSize = (size: PlayButtonSize) => {
-	switch (size) {
-		case 'small':
-			return 28;
-		case 'medium':
-			return 44;
-		case 'large':
-			return 48;
-		case 'xlarge':
-			return 60;
-	}
-};
-
-const iconSize = (size: PlayButtonSize) => {
-	switch (size) {
-		case 'small':
-			return 26;
-		case 'medium':
-			return 36;
-		case 'large':
-			return 40;
-		case 'xlarge':
-			return 54;
-	}
-};
+const sizes = {
+	small: { button: 28, icon: 26 },
+	medium: { button: 44, icon: 36 },
+	large: { button: 48, icon: 40 },
+	xlarge: { button: 60, icon: 54 },
+} as const satisfies Record<string, { button: number; icon: number }>;
 
 const iconWrapperStyles = css`
 	display: flex; /* Fixes the div mis-sizing itself */
@@ -37,14 +19,17 @@ const iconWrapperStyles = css`
 	left: 4px;
 `;
 
-const iconStyles = (size: PlayButtonSize, sizeOnMobile: PlayButtonSize) => css`
+const iconStyles = (
+	size: PlayButtonSize,
+	sizeOnMobile: Extract<PlayButtonSize, 'small' | 'large'>,
+) => css`
 	background-color: ${brandAlt[400]};
 	border-radius: 50%;
-	width: ${buttonSize(sizeOnMobile)}px;
-	height: ${buttonSize(sizeOnMobile)}px;
+	width: ${sizes[sizeOnMobile].button}px;
+	height: ${sizes[sizeOnMobile].button}px;
 	${from.tablet} {
-		width: ${buttonSize(size)}px;
-		height: ${buttonSize(size)}px;
+		width: ${sizes[size].button}px;
+		height: ${sizes[size].button}px;
 	}
 
 	display: flex;
@@ -54,26 +39,29 @@ const iconStyles = (size: PlayButtonSize, sizeOnMobile: PlayButtonSize) => css`
 	svg {
 		/* Visual centering */
 		transform: translateX(1px);
-		width: ${iconSize(sizeOnMobile)}px;
-		height: ${iconSize(sizeOnMobile)}px;
+		width: ${sizes[sizeOnMobile].icon}px;
+		height: ${sizes[sizeOnMobile].icon}px;
 		${from.tablet} {
-			width: ${iconSize(size)}px;
-			height: ${iconSize(size)}px;
+			width: ${sizes[size].icon}px;
+			height: ${sizes[size].icon}px;
 		}
 	}
 `;
 
-const getIconSizeOnDesktop = (imageSize: ImageSizeType): PlayButtonSize => {
-	if (imageSize === 'jumbo') return 'xlarge';
-	else if (imageSize === 'large') return 'large';
-	else if (imageSize === 'medium') return 'medium';
-	else if (imageSize === 'small') return 'small';
-	else return 'large';
+const getIconSizeOnDesktop = (imageSize: ImageSizeType) => {
+	switch (imageSize) {
+		case 'jumbo':
+			return 'xlarge';
+		case 'large':
+		case 'carousel':
+			return 'large';
+		case 'medium':
+		case 'small':
+			return imageSize;
+	}
 };
 
-const getIconSizeOnMobile = (
-	imagePositionOnMobile: ImagePositionType,
-): PlayButtonSize =>
+const getIconSizeOnMobile = (imagePositionOnMobile: ImagePositionType) =>
 	imagePositionOnMobile === 'left' || imagePositionOnMobile === 'right'
 		? 'small'
 		: 'large';

diff --git a/dotcom-rendering/src/components/Card/components/TrailTextWrapper.tsx b/dotcom-rendering/src/components/Card/components/TrailTextWrapper.tsx
@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
 import { body, until } from '@guardian/source-foundations';
 import { decidePalette } from '../../../lib/decidePalette';
 import type { DCRContainerPalette } from '../../../types/front';
+import type { ImagePositionType, ImageSizeType } from './ImageWrapper';
 
 type Props = {
 	children: string | React.ReactNode;

diff --git a/dotcom-rendering/src/components/CardPicture.tsx b/dotcom-rendering/src/components/CardPicture.tsx
@@ -1,6 +1,7 @@
 import { css } from '@emotion/react';
 import { breakpoints } from '@guardian/source-foundations';
 import React from 'react';
+import type { ImageSizeType } from './Card/components/ImageWrapper';
 import type { ImageWidthType } from './Picture';
 import { generateSources, getFallbackSource } from './Picture';
 

diff --git a/dotcom-rendering/src/components/Slideshow.tsx b/dotcom-rendering/src/components/Slideshow.tsx
@@ -1,6 +1,7 @@
 import { css, keyframes } from '@emotion/react';
 import { from, neutral, textSans, until } from '@guardian/source-foundations';
 import type { DCRSlideshowImage } from '../types/front';
+import type { ImageSizeType } from './Card/components/ImageWrapper';
 import { CardPicture } from './CardPicture';
 
 /**