Merge pull request #14829 from guardian/doml/refactor-image-overlay

Refactor image overlay

Author: domlander

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

@@ -896,7 +896,7 @@ export const Card = ({
 						mediaType={media.type}
 						mediaPositionOnDesktop={mediaPositionOnDesktop}
 						mediaPositionOnMobile={mediaPositionOnMobile}
-						hideImageOverlay={media.type === 'slideshow'}
+						hideMediaOverlay={media.type === 'slideshow'}
 						padMedia={isMediaCardOrNewsletter && isBetaContainer}
 						isBetaContainer={isBetaContainer}
 						isSmallCard={isSmallCard}

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

@@ -42,7 +42,7 @@ const baseCardStyles = css`
 `;
 
 const hoverStyles = css`
-	:hover .image-overlay {
+	:hover .media-overlay {
 		width: 100%;
 		height: 100%;
 		background-color: ${palette('--card-background-hover')};
@@ -53,8 +53,10 @@ const hoverStyles = css`
 		text-decoration: underline;
 	}
 
-	/** We want to prevent the general hover styles applying when
-	    a click won't result in navigating to the main article */
+	/**
+	  * We want to prevent the general hover styles applying when
+	  * a click won't result in navigating to the main article
+	*/
 	:has(
 			ul.sublinks:hover,
 			.loop-video-container:hover,
@@ -64,7 +66,7 @@ const hoverStyles = css`
 		.card-headline .show-underline {
 			text-decoration: none;
 		}
-		.image-overlay {
+		.media-overlay {
 			background-color: transparent;
 		}
 	}
@@ -95,7 +97,7 @@ const onwardContentStyles = css`
 	border-radius: ${space[2]}px;
 	overflow: hidden;
 
-	:hover .image-overlay {
+	:hover .media-overlay {
 		border-radius: ${space[2]}px;
 	}
 `;

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

@@ -36,13 +36,13 @@ type Props = {
 	 * This is to allow hiding the overlay on slideshow carousels where we don't
 	 * want it to be shown whilst retaining it for existing slideshows.
 	 */
-	hideImageOverlay?: boolean;
+	hideMediaOverlay?: boolean;
 	isBetaContainer: boolean;
 	isSmallCard: boolean;
 	padMedia?: boolean;
 };
 
-const imageOverlayContainerStyles = css`
+const mediaOverlayContainerStyles = css`
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -203,7 +203,7 @@ export const MediaWrapper = ({
 	mediaType,
 	mediaPositionOnDesktop,
 	mediaPositionOnMobile,
-	hideImageOverlay,
+	hideMediaOverlay,
 	isBetaContainer,
 	isSmallCard,
 	padMedia,
@@ -269,10 +269,10 @@ export const MediaWrapper = ({
 				{children}
 				{/* This image overlay is styled when the CardLink is hovered */}
 				{(mediaType === 'picture' || mediaType === 'slideshow') &&
-					!hideImageOverlay && (
+					!hideMediaOverlay && (
 						<div
 							css={[
-								imageOverlayContainerStyles,
+								mediaOverlayContainerStyles,
 								padMedia &&
 									mediaPaddingStyles(
 										mediaPositionOnDesktop,
@@ -282,7 +282,7 @@ export const MediaWrapper = ({
 						>
 							{/* This child div is needed as the hover background colour covers the padded
 							    area around the image when the hover styles are applied to the top-level div */}
-							<div className="image-overlay" />
+							<div className="media-overlay" />
 						</div>
 					)}
 			</>

dotcom-rendering/src/components/FeatureCard.tsx

@@ -73,7 +73,7 @@ const baseCardStyles = css`
 `;
 
 const hoverStyles = css`
-	:hover .image-overlay {
+	:hover .media-overlay {
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -94,7 +94,7 @@ const sublinkHoverStyles = css`
 		.card-headline .show-underline {
 			text-decoration: none;
 		}
-		.image-overlay {
+		.media-overlay {
 			background-color: transparent;
 		}
 	}
@@ -536,8 +536,8 @@ export const FeatureCard = ({
 									</>
 								)}
 
-								{/* This image overlay is styled when the CardLink is hovered */}
-								<div className="image-overlay" />
+								{/* This overlay is styled when the CardLink is hovered */}
+								<div className="media-overlay" />
 
 								<div
 									css={[

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

@@ -74,7 +74,7 @@ const container = css`
 `;
 
 const hoverStyles = css`
-	:hover .image-overlay {
+	:hover .media-overlay {
 		position: absolute;
 		bottom: 0;
 		right: 0;

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

@@ -61,7 +61,7 @@ export const HighlightsCardImage = ({
 						isCircular={false}
 						aspectRatio="1:1"
 					/>
-					<div className="image-overlay" />
+					<div className="media-overlay" />
 				</div>
 			);
 		}
@@ -76,8 +76,8 @@ export const HighlightsCardImage = ({
 					isCircular={true}
 					aspectRatio="1:1"
 				/>
-				{/* This image overlay is styled when the CardLink is hovered */}
-				<div className="image-overlay circular" />
+				{/* This overlay is styled when the CardLink is hovered */}
+				<div className="media-overlay circular" />
 			</div>
 		);
 	}

dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomFeatureCardOverlay.tsx

@@ -39,7 +39,7 @@ const buttonStyles = css`
 `;
 
 const hoverStyles = css`
-	:hover .image-overlay {
+	:hover .media-overlay {
 		position: absolute;
 		top: 0;
 		width: 100%;
@@ -209,7 +209,7 @@ export const YoutubeAtomFeatureCardOverlay = ({
 						/>
 					</div>
 				) : null}
-				<div className="image-overlay" />
+				<div className="media-overlay" />
 				<div css={playIconStyles}>
 					<PlayIcon iconWidth="narrow" />
 				</div>