Youtube feature card overlay should use play icon component

Author: domlander

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

@@ -65,16 +65,22 @@ const theme = {
 	fill: sourcePalette.neutral[100],
 } satisfies Partial<ThemeIcon>;
 
-type Props = {
-	iconSizeOnDesktop: PlayButtonSize;
-	iconSizeOnMobile: PlayButtonSize;
-	iconWidth: 'narrow' | 'wide';
-};
+type Props =
+	| {
+			iconWidth: 'wide';
+			iconSizeOnDesktop: PlayButtonSize;
+			iconSizeOnMobile: PlayButtonSize;
+	  }
+	| {
+			iconWidth: 'narrow';
+			iconSizeOnDesktop?: never;
+			iconSizeOnMobile?: never;
+	  };
 
 export const PlayIcon = ({
+	iconWidth,
 	iconSizeOnDesktop,
 	iconSizeOnMobile,
-	iconWidth,
 }: Props) => {
 	return (
 		<div

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

@@ -6,6 +6,7 @@ import { secondsToDuration } from '../../lib/formatTime';
 import { palette } from '../../palette';
 import type { AspectRatio } from '../../types/front';
 import { CardFooter } from '../Card/components/CardFooter';
+import { PlayIcon } from '../Card/components/PlayIcon';
 import { TrailText } from '../Card/components/TrailText';
 import type { ResponsiveFontSize } from '../CardHeadline';
 import { CardHeadline } from '../CardHeadline';
@@ -78,24 +79,6 @@ const videoPillStyles = css`
 	right: ${space[2]}px;
 `;
 
-const playIconWidth = 56;
-const playIconStyles = css`
-	position: absolute;
-	/**
-	 * Subject to change. We will wait to see how fronts editors use the
-	 * headlines and standfirsts before we decide on a final position.
-	 */
-	top: 35%;
-	left: calc(50% - ${playIconWidth / 2}px);
-	width: ${playIconWidth}px;
-	height: ${playIconWidth}px;
-	background-color: ${palette('--feature-card-play-icon-background')};
-	opacity: 0.7;
-	border-radius: 50%;
-	border: 1px solid ${palette('--feature-card-play-icon-border')};
-	fill: ${palette('--feature-card-play-icon-fill')};
-`;
-
 type Props = {
 	uniqueId: string;
 	height: number;
@@ -181,9 +164,7 @@ export const YoutubeAtomFeatureCardOverlay = ({
 					</div>
 				) : null}
 				<div className="image-overlay" />
-				<div className="play-icon" css={[playIconStyles]}>
-					<SvgMediaControlsPlay />
-				</div>
+				<PlayIcon iconWidth="narrow" />
 				<div css={[textOverlayStyles]}>
 					{!!kicker && (
 						<Kicker

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

@@ -182,9 +182,9 @@ export const YoutubeAtomOverlay = ({
 					</div>
 				) : null}
 				<PlayIcon
+					iconWidth="wide"
 					iconSizeOnDesktop={iconSizeOnDesktop}
 					iconSizeOnMobile={iconSizeOnMobile}
-					iconWidth="wide"
 				/>
 				{showTextOverlay && (
 					<div css={textOverlayStyles}>